• このエントリーをはてなブックマークに追加

サイドバーを固定させて追従表示するプラグインQ2W3 Fixed Widgetの使い方

どうも。葉です。

この記事では、プラグイン「Q2W3 Fixed Widget」の使い方をお話します。

「Q2W3 Fixed Widget」を導入することで、ブログのユーザビリティを上げて、ブログを読んでくれている人にとって見やすいブログを作れるかもしれませんよ。

1.Q2W3 Fixed Widgetでできること

プラグイン「Q2W3 Fixed Widget」を導入すると、下図の用に、記事をどんなに下にスクロールしても、サイドバーに指定したウィジェットを表示させ続ける事ができます。

この例では、記事の目次をサイドバーに表示させ続けています。

Q2W3 Fixed Widgetでできること1

この他にも、カテゴリーを表示させたり、おすすめ記事を表示させることで、訪問ユーザーに「こんな記事もあるよ~」とアピールすることもできます。

使い方がとても簡単

そんな、「Q2W3 Fixed Widget」ですが、などの類似プラグインも存在します。

しかし、僕は、「Q2W3 Fixed Widget」を最もおすすめします。それは、使い方がとっても簡単なことです。

ウィジェットにチェックを入れるだけで、任意のウィジェットを追従表示させることができますよ。

2.Q2W3 Fixed Widgetのインストール

「Q2W3 Fixed Widget」でどのようなことができるのかを理解したところで、知っ祭に、プラグインのインストール作業を行っていきましょう。

WordPress管理画面の左メニューより「プラグイン→新規追加」をクリックします。

Q2W3 Fixed Widgetのインストール手順1

プラグインの検索窓に「Q2W3 Fixed Widget」と入力するとプラグイン「Q2W3 Fixed Widget」を検索します。そこで、「Q2W3 Fixed Widget」の「今すぐインストール」をクリックします。

Q2W3 Fixed Widgetのインストール手順2

「有効化」をクリックします。

Q2W3 Fixed Widgetのインストール手順3

「Q2W3 Fixed Widget」が有効化されていることを確認します。

Q2W3 Fixed Widgetのインストール手順4

これで、プラグイン「Q2W3 Fixed Widget」のインストール・有効化は完了です。

3.Q2W3 Fixed Widgetの使い方

プラグイン「Q2W3 Fixed Widget」は、インストールしただけでは使用できません。

ここでは、「Q2W3 Fixed Widget」を使ってサイドバーを追従表示させる手順を解説していきます。とっても簡単にできるので安心してくださいね。

WordPress管理画面の左メニューより「外観→ウィジェット」をクリックします。

Q2W3 Fixed Widgetの使い方1

次に、サイドバーで追従表示させたいコンテンツをクリックしタブを開きます。

Q2W3 Fixed Widgetの使い方2

「Fixed widget」にチェックを入れて「保存」をクリックします。

Q2W3 Fixed Widgetの使い方3

そして、WordPressで任意の記事を開きしたにスクロールしていくと指定したサイドバーのコンテンツが追従表示されます。

Q2W3 Fixed Widgetの使い方4

以上で、プラグイン「Q2W3 Fixed Widget」の使い方の解説は終わります。

4.Q2W3 Fixed Widgetの設定※興味がある人のみ

「Q2W3 Fixed Widget」はデフォルト設定のままでも問題なく使用できます。

しかし、固定表示させているウィジェットの縦幅によっては、次のようにサイドバーがフッターに被ってしまうこともあります。

Q2W3 Fixed Widgetの設定1

そこで、ここでは、「Q2W3 Fixed Widget」の設定を行い、サイドバーの表示を変更する設定を行っていきます。

まず、WordPress管理画面の左メニューより「外観→Fixed Widget Options」をクリックします。

Q2W3 Fixed Widgetの設定2

すると、

  • General Options
  • Compatibility
  • Custom IDs

の3つの設定項目が出てきます。

この記事では、「General Options」の設定方法を解説していきます。

一般設定:General Options

Q2W3 Fixed Widgetの設定3

①Margin Top

Q2W3 Fixed Widgetの設定4

ウィジェットと表示画面トップとのマージンを指定します。

②Margin Bottom

Q2W3 Fixed Widgetの設定5

ウィジェットと表示画面ボトムとのマージンを指定します。ウィジェットがフッターに被ってしまう場合などに、その被り具合に合わせてマージンを指定します。

③Disable plugin if screen

Q2W3 Fixed Widgetの設定6

ここでは、プラグイン「Q2W3 Fixed Widget」が無効化されるピクセル数を指定できます。

例えば、800pxと指定すると、ブラウザの横幅が800pxより小さくなった時に、サイドバーが追従表示されなくなります。

スマホやタブレットなどでは、追従させたくない時もあると思うので、1000px程度に設定しておくことをおすすめします。使用しているテンプレートに合わせて微調整を行ってください。

以上で、プラグイン「Q2W3 Fixed Widget」の設定方法の解説は終わります。

5.まとめ

この記事では、

  • Q2W3 Fixed Widgetでできること
  • Q2W3 Fixed Widgetのインストール
  • Q2W3 Fixed Widgetの使い方
  • Q2W3 Fixed Widgetの設定

について解説しました。

Q2W3 Fixed Widgetは、プラグイン「Table of Contents Plus」と組み合わせることで、サイドバーに目次を追従表示させるなどの応用技も可能です。

頭をひねればいろんな使い方があると思うので、いろいろと試してみてください。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

WordPress プラグイン