monograph

超簡単にサイドバーをスクロールに合わせて画面に固定してくれるWordPressプラグイン

13
26
14
55

   

Fixedsidebar1
なんとなく久々にブロガー向けの記事を書く気が。

本日も“monograph”をお読みいただきありがとうございます。
PITE.(@infoNumber333)です。

WordPress系のブログを読んでいるとよく見かける「スクロールに合わせてついてくるサイドバー」。ブログを始めたての頃は憧れますよねあれ。僕も2年前くらいに他の人のブログ記事を参考にしてjQueryのコードを書いて色々詳しい人から助言を受けたりしながら試行錯誤の上で実装したのが懐かしいです。

そのせっかく書いたjQueryのコードもテーマをいじるとちゃんと機能しなかったりフッターに重なっちゃったりしてそれなりにメンテナンスが必要でそれなりに手間がかかったり。今回もテーマを変更する際にプログラムが動かずしばらく放置しておりました。

これを毎回テーマ変更の度にやるのも辛いなぁと思い、シンプルかつ汎用性の効くサイドバー固定のプラグインがないものかと探してみたところ、ありました!超いいプラグインが。

”スクロールに合わせてサイドバーが追ってくるやつ”を実装


Fixedsidebar2
記事執筆現在のmonographのブログテーマをPCで見ていただければお分かりかと思いますが、サイドバーをスクロールに合わせて一部付いてくるように設定しております。

サイドバー”全体”ではなく”一部のみついてくる”というのがミソで、指定の領域が画面内に入ってきたら位置を固定、画面から外れたら固定解除という動きをするように作られています。さらにちゃんとフッターまで来たタイミングでも固定解除されるするようにするのがjQueryだとちょっと手間で、この一連の動作を簡単に解決できてしまうプラグインを今回ご紹介いたします。

Standard Widget Extensions


その素晴らしいプラグインの名前が「Standard Widget Extensions」。WordPressの管理画面でこの名前を検索すればすぐに出てくるはず。特にサイズも大きくないので迷わずインストールしましょう。

設定が超簡単。


Fixedsidebar3
このプラグインかなりシンプルに作られているので、やることは「メインカラムのID」「サイドバーのID」「ウィジェットのクラス名」の項目に入力するだけ。

「ウィジェットのクラス名」というのはサイドバー内の”画面固定したい部分”という意味です。

あとは「Sticky Sidebar機能を有効にする」のチェックを「有効」に設定すればこれだけでもう「追ってくるサイドバー」が実装可能。

Fixedsidebar5
もうちょっと詳しく説明するとこんな感じ。
記事本文などがある赤枠部分が「メインカラム」、メインカラムに隣り合う青枠が「サイドバー」、緑の部分が僕のブログで言う「ウィジェット(固定部分)」となります。

「IDってなに…?」という方はCSSの基礎から学ぶ必要があるのですが、IDの概念を理解して自分のブログの中から見つけるくらいなら数時間あればできると思うので勉強だと思って「CSS 基礎」など検索して調べてみましょう。

勉強した上でどうしてもわからなければ、相談のりますのでご連絡おば。

Fixedsidebar4
オプションでヘッダーの高さやレスポンシブ時の切り分けなども設定できるのもいい感じ。

「サイドバーにちょうど追っかけられたかったんだよね!」という人は是非お試し下さい。



最初は1冊、教本を買っちゃうのもありですね。
1冊買って基礎を理解すればあとは自力でどうにかなるので。

monograph厳選オススメ記事

monograph厳選。2015年に買ってよかったアイテムベスト10
売り切れ必至のキャンプ・夏フェス用超防水スニーカー!「PALLADIUM パンパ パドルライト」を買いました。
iPhone6s用にU-mobileの格安SIMを購入!通信料定額でLTE使い放題の実力・速度はいかに。
引っ越しに仲料手数料無料の革新的賃貸紹介サービス「ノマド」を使いました。

Pite(@infoNumber333)はこう思うよ。
時間があればもっとゴリッゴリにカスタマイズしたいなぁブログ。
profile

 - カスタマイズ

total

108

share!

シェアしてくれるとめっちゃよろこびます。

teaparty

  関連記事

Number333 2012-04-03 17.05.32.jpg
「MAMP」を使ってMacにWordPressをローカル環境にインストールする方法を解説します!

僕は基本的にワードプレスの管理はFirefoxのアドオンFirebugを使って管 …

WordPressメモ:続きを読む(Read more)を設定/表示する方法

現在WordPress(このブログのソフト)のデザインを試行錯誤しながら作ってる …

facebook likebox000.jpg
Facebookページヘのいいね!を促す「Facebook like box」の設置方法。

最近、多くのブロガーさんとお話する機会が多く、その中でFacebookの重要性を …

wordpress-article-adsense001.png
【収益化】WordPressで記事の途中(”続きを読む・moreタグ”部分)に広告やAdSenseを挿入する方法。

今日は一日何もしていなかったのでその分これから気合入れて記事量産します!ハイパー …

th_Number333 2013-10-03 14.44.03-1.jpg
レスポンシブ対応。ブログにGoogle Mapsで作成した地図(マイプレイス)を埋め込む方法。

Googleマップがないともはやどこにも行けません。 PITE.(@infoNu …

Lifehacker_201307_130709feedly_url.jpg
5分で完了。ブログにfeedlyのRSS登録用ボタンを設置する方法・手順を解説します。

起きて最初の30分はRSS眺めるのが趣味。PITE.(@infoNumber33 …

写真 12-04-06 15 42 57.jpg
超簡単にブログをiPhoneなどのスマートフォンに対応させるWordPressプラグイン『WPtouch』を導入してみました!

こんにちは!PITEです! あったかくなってきましたねー(●´∀`●) 僕は寒が …

bitnami インストール設定004.jpg
超簡単!WordPressのローカル環境をBitNamiを使って構築する方法・手順を解説します。

今日ブロガーフェスティバルに参加してブログ熱が再燃してきました!! PITE.( …

Number333 2012-05-07 3.07.12.jpg
WordPressの関連記事表示プラグイン「YARPP」をiPhone・スマホ用にカスタマイズしてサムネイルを表示させるようにしてみた!

先日、@goryugoさんの「関連記事プラグインYARPPをカスタマイズしてLi …

NUMBER333テーマ変更ポイント1.jpg
NUMBER333のPC用WordPressテーマを新しく作成しました。今回覚えたテクニック7つをメモを兼ねてご紹介するので参考にどうぞ!

何故深夜はこうも作業が捗るのか。 本日も“monograph&#82 …