WordPressのサイドバーを固定しよう!スクロールに追従させる – Q2W3 Fixed Widget

文字数の多い記事を書くと、サイドバーよりも記事が大幅に長くなることってよくありますよね。ブラウザでその記事を表示すると、サイドバーの部分になにもない空間が生まれてしまいます。

 

記事を読み終わった時に、サイドバーのメニューから他の記事も読んでもらいたいけど、読者がサイドバーをチェックするには、わざわざスクロールを行ってページの上まで戻ってもらわなければなりません。

これはちょっと気が利いてないですよね。ページの回遊率も下がってしまいます。

だからサイドバーの位置を固定しましょう。スクロールに追従させれば、常にメニューが表示されるようになって、他の記事も読んでもらいやすくなります。

この記事ではプラグインを利用してサイドバーを固定する方法と、スタイルシートを利用して固定する方法の2つを解説しています。

 

完成品

プラグインを利用する – Q2W3 Fixed Widget


1. プラグインをインストールする

Q2W3 Fixed Widget という、簡単にサイドバーを固定することができるプラグインがあります。プラグインの使い方を解説しますので、まずインストールして有効化してください。ダッシュボード > プラグイン > 新規追加 で Q2W3 Fixed Widget を検索しましょう。

プラグインのインストール方法がわからない方は以下のページを参考にしてください。

WordPress プラグインのインストール方法を詳しく解説

 

2. 固定するウィジェットを選ぶ

ダッシュボード > 外観 > ウィジェット を選んで、画像のページに移動してください。そしてブログサイドバーの欄から、固定したいウィジェットを選びましょう。

 

3. Fixed widgetを選んで保存する

固定したいウィジェットを選ぶと、Fixed widget というチェック項目が表示されていますので、チェックしてから保存しましょう。

 

4. ウィジェットが固定されているか確認してみましょう

今回は例としてカテゴリーと検索ウィジェットの位置を固定してみました。確認してみるとスクロールしても消えずに表示されています。

が、しかし、ひとつ問題が…。画像の赤枠を見てもらえるとわかりますが、カテゴリーの一部が見切れてしまっています。使っているテーマやカスタマイズによっては、他の部分と固定しているウィジェットが重なってしまって、うまく表示されないことがあります。

その場合は重ならないように設定を行いましょう。

 

5. 上マージンを設定する

ダッシュボード > 外観 > Fixed Widget 設定 を選ぶと、プラグインの細かい設定が行えるページが表示されます。今回はウィジェットの上部分が重なっているので、上マージンを調整します。上マージンと書かれているフォームに数値を入力して、ちょうどいいスペースを作ってみてください。

 

6. 上マージンの調整後

見切れていた部分が表示されて、カテゴリーという文字が出てきました。こんな感じに重なっている部分を重ならないようにしたり、デザイン的にもうちょっとスペースを空けたいなという時などに、上マージンを設定してみてください。

 

7. サイドバーの縦に長いウィジェットを固定すると?

サイドバーに設置されている縦に長いウィジェットを固定すると、フッター(ブログ一番下のコンテンツ)に、固定しているウィジェットがめりこむことがあります。

この場合はさきほどの上マージンと書かれているフォームの下にある、下マージンの数値を調整してめりこまないように設定しましょう。

 

8. 下にめりこまないようにする設定

下マージンを設定してもめりこまないようにできるのですが、もっと高機能で適切な設定も用意されています。設定画面の 停止 ID フォームです。ここにフッターの ID を入力することで、今後フッターの高さが変わっても、めりこまないようにすることができます。

フッターの ID は、ブラウザの右クリックから ページのソースを表示 して、キーボードで Ctrl + F を押して、ページ内検索で <footer を検索することでわかります。ちょっと難しいかもしれませんが、ソースから以下のような <footer> タグを探してみてください。

<footer id="colophon" class="site-footer" role="contentinfo">

<footer> タグの id=”” で囲まれている文字列が フッターの ID になります。この例の場合は、colophon が ID です。それを 停止 ID フォームに入力することで、サイドバーのウィジェットがフッターにめりこまなくなります。

テーマによっては <footer> タグの代わりに、他のタグがブログの一番下に表示されていることがありますので、その場合はそのタグの ID を入力してください。ようは、めりこませたくない部分のタグの ID を入力すればいいのです。

※ 注意:PCでアクセスした時、スマホ・タブレットでアクセスした時、それぞれで ID の名前が違っていたり、なくなっていたりすることがあります。複数の環境で正常に表示されているか、チェックすることを忘れないようにしてください。

Q2W3 Fixed Widgetの設定解説


設定 解説
上マージン 固定したウィジェットの上方向の余白を設定します。サイドバーの上部分が重なった場合に設定しましょう。
下マージン 固定したウィジェットの下方向の余白を設定します。サイドバーの下部分が重なった場合に設定しましょう。
停止 ID 設定した ID のタグまでスクロールしたら、それ以上は下に行かないようになります。
更新間隔 通常は気にしなくて問題ありません。
幅を無効化 モバイル端末でブログにアクセスしたときに、サイドバーの固定を行わないようにします。ブラウザの横幅が設定した値未満の場合はサイドバーを固定しません。このブログでは現在 750px に設定しています。
高さを無効化 上記設定の高さ版です。
設定 解説
カスタムID 普通は、外観 > ウィジェットの画面で、固定するウィジェットを選んで設定しますが、自分でコードを書いてサイドバーのデザインを行った場合などは、ウィジェットの画面では固定する設定が行えませんので、こちらで直接 ID を指定します。固定したい部分の ID を一行ずつ入力してください。

その他の方法


なんらかの理由でプラグインが正常に動作しなかった場合や、表示の軽さにこだわりたい方のために、スタイルシートを利用してサイドバーを固定する方法も解説しておきます。

この方法は JavaScript を利用せずスタイルシートだけで機能しますので、表示は軽快になります。ただし IE 含む一部のブラウザでは動作しません。最新ブラウザのみ利用できる方法なので、理解した上で利用してください。

対応しているブラウザはこちらのウェブサイトで確認できます。

Can I use… Support tables for HTML5, CSS3, etc

※ テーマによっては機能しないことがあります。

スタイルシートを追加できる環境を作る


まずはスタイルシートを追加できる環境を作ります。このブログではテーマに依存しない形でスタイルシートを追加・編集するために、Simple Custom CSS and JS というプラグインの利用を推奨しています。

Simple Custom CSS and JS をインストールしていない方は、以下のページを参考にインストールしてみてください。

WordPressに自作のCSS・JavaScript・HTMLを追加するには? – Simple Custom CSS and JS

もしなんらかの理由があってプラグインのインストールをしたくない場合は、ダッシュボード > 外観 > カスタマイズ内にある 追加 CSS を開いてスタイルシートを入力するようにしてください。

スタイルシートでサイドバーを固定する方法


1. スタイルシートを追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom CSS を選択して、スタイルシートを入力できるページに移動します。

 

2. スタイルシートを貼り付ける

タイトルに Fixed Sidebar と入力して、その下の /* */ に囲まれた英文をすべて削除してから、以下のコードを貼り付けてください。タイトルは自分で管理する用ですので、覚えやすいタイトルに変えていただいて構いません。

貼り終えたら右側にある公開ボタンを押してください。

top: 130px;

この記述は上方向の余白を表しています。サイドバーが固定されたときに、上に 130px の余白が空くという意味です。130px は大きいと思いますので、任意の数値に変更してください。

 

3. テーマによって ID 名・クラス名を変更する

上記のコードを貼り付けても正常に動作しなかった場合は、以下の説明に従ってコードを変更してください。

一般的なテーマの場合、ブログのソースは以下のような構成になっています。

記事などが表示されるメインコンテンツ
<div id="primary" class="content-area">...</div>

サイドバー
<aside id="secondary" class="widget-area">...</div>

サイドバーの ID が secondary なので、スタイルシートで #secondary と指定しています。運営しているブログのソースを確認して、サイドバーの ID が違うものだった場合は、secondary と書かれている部分を、その ID に変更してください。

サイドバーに ID が存在せず、スタイルシートのクラス名だけだった場合は、#secondary.クラス名 に変更してください。クラス名を入力する場合は、半角ドットを忘れないようにしてください。

上記の例の場合は、#secondary(ID名)の代わりに、 .widget-area(クラス名)でも動作します。

最後に


サイドバーを固定させると他の記事を読んでもらいやすくなりますし、無駄なスペースもなくなってブログの見栄えもよくなります。

プラグインを利用すると簡単なので、サイドバーのあるテーマを使っている方はぜひ試してみてください。

WordPress – 投稿日の代わりに更新日を表示する方法(日付操作)

なんてこった!昔の記事を編集して新しい情報を追加したのに、日付が古いまま。せっかく中身を更新したのに読者に新しい情報だと認識してもらえない。日付を見ただけでブログから人が離れていってしまうかも?

というわけで、投稿日の代わりに更新日を表示させましょう!

この記事では投稿日や更新日を表示したり非表示にしたりする方法を解説していきます。スタイルシートを用いて、とても簡単に表示・非表示を切り替えることができますので、更新日を表示させたい方は、ぜひ参考にしてみてください。

この方法が使えるテーマかどうかをチェックする


通常は日付を編集するには、子テーマを作成して PHP のファイルを編集するという難しい作業を行わなければなりませんが、スタイルシートを利用する場合は、とても簡単に更新日を表示させることができます。

ただし、どのテーマでもこの方法を使えるわけではありませんので、最初にこの方法が利用できるテーマなのかをチェックする必要があります。

 

1. ページのソースを表示する

まずあなたが運営しているブログをブラウザで開いてください。そして右クリックから ページのソースを表示 を選んでください。画像は Windows の Chrome でソースを表示する例です。違う環境の場合でも、ブラウザでソースを表示できますのでソースを表示する項目を探してみてください。

 

2. ページ内検索を行う

ずらっと文字が並んだページが表示されます。これがブログのソースです。ここでページ内検索を行います。

キーボードの Ctrl + F を押して、検索ウィンドウを出してください。違う環境では、ブラウザで ページ内検索 という項目を探すと同じことができます。

そして半角英字で time class と入力してみてください。画像のように、<time>タグがソース内に存在していると、このページで解説している方法で更新日を表示することができます。

スタイルシートを追加できる環境を作る


まずはスタイルシートを追加できる環境を作ります。このブログではテーマに依存しない形でスタイルシートを追加・編集するために、Simple Custom CSS and JS というプラグインの利用を推奨しています。

Simple Custom CSS and JS をインストールしていない方は、以下のページを参考にインストールしてみてください。

WordPressに自作のCSS・JavaScript・HTMLを追加するには?

もしなんらかの理由があってプラグインのインストールをしたくない場合は、ダッシュボード > 外観 > カスタマイズ内にある 追加 CSS を開いてスタイルシートを入力するようにしてください。

投稿日を更新日に入れ替える


1. スタイルシートを追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom CSS を選択して、スタイルシートを入力するページに移動します。

 

2. スタイルシートを追加する

タイトルに Datetime of the Article と入力して、その下の /* */ に囲まれた英文をすべて削除してから、以下のコードを貼り付けてください。タイトルは自分で管理する用ですので、覚えやすいタイトルに変えていただいて構いません。

貼り終えたら右側にある公開ボタンを押してください。

 

3. 更新日が表示されているかチェック

やりました!投稿日が消えて、代わりに更新日が表示されています。これで古い記事だと思われなくなりましたね。

投稿日には投稿日: 更新日には更新日: と表示する


上記の方法でもぜんぜん問題ないのですが、投稿日が表示されているのか、更新日が表示されているのかわからないため、なんの日付なのかを表示するようにします。

ダッシュボード > Custom CSS & JS > All Custom Code

さきほど追加したスタイルシートを編集します。画像のページに移動して、編集 と書かれた部分を押してください。そしてコードをすべて削除して、以下のコードを貼り付けてください。

貼り付け終わったら右側の 更新 ボタンを押しましょう。

 

投稿日

更新日&投稿者

投稿後、一度も更新されていない記事は 投稿日: が追加されて表示されます。更新されたことのある記事は、更新日: が追加されて表示され、投稿者との間に半角スラッシュ / が入ります。

投稿日と更新日を同時に表示する


上記ではどちらか一方だけ表示していましたが、両方表示したい場合は、以下のコードをさきほどのスタイルシートの代わりに貼り付けてください。

同時に表示

投稿日と更新日が同時に表示され、区切り文字として半角スラッシュ / が表示されています。

詳しく解説


解説したとおりに行っても、テーマによっては正常に表示されないことがあります。その場合、自分でスタイルシートを編集する必要があります。詳しく解説しますので、表示に問題のある部分が出てきた場合は、該当する部分を編集してみてください。

 

日付と投稿者を表すタグ

投稿日
<time class="entry-date published" datetime="2017-12-09T18:50:19+09:00">2017年12月9日</time>

更新日
<time class="updated" datetime="2017-12-30T19:07:21+09:00">2017年12月30日</time>

投稿者
<span class="byline"> 投稿者: <span class="author vcard"><a class="url fn n" href="https://gameusers.org/dev/blog/author/az1979/">あづみ</a></span>

デフォルトで存在しているテーマの Twenty Fifteen、Twenty Sixteen、Twenty Seventeen などは、投稿日・更新日の表示を<time>タグを利用して行っています。

通常は投稿日の日付だけが表示される設定になっており、更新日のタグも存在しているのですが、表示されない設定になっています。このページではその隠されているタグをスタイルシートで表示しています。

 

スタイルシートの解説

/* 投稿日の日付の前に文字列を追加する
   content: '' の中に文字を入れる */
article time.published:before {
  content: '';
}

/* 投稿日の日付の後に文字列を追加する
   content: '' の中に文字を入れる */
article time.published:after {
  content: '';
}

/* 更新日が存在する場合は、投稿日を非表示にする
   投稿日を常に表示したい場合は必要ありません */
article time.published:not(.updated) {
  display: none;
}

/* 隠されている更新日を表示する */
article time.updated:not(.published) {
  display: inline;
}

/* 更新日の日付の前に文字列を追加する
   content: '' の中に文字を入れる */
article time.updated:not(.published):before {
  content: '';
}

/* 更新日の日付の後に文字列を追加する
   content: '' の中に文字を入れる */
article time.updated:not(.published):after {
  content: '';
}

/* 投稿者の前に文字列を追加する
   content: '' の中に文字を入れる */
article .byline:before {
  content: '';
}

/* 投稿者の後に文字列を追加する
   content: '' の中に文字を入れる */
article .byline:after {
  content: '';
}

上記のスタイルシートを参考にしながら編集してみてください。更新日: という文字や、区切り文字の半角スラッシュ / は content: ” の中に文字を入れることによって実現しています。

例えば英語表記にしたい場合は、更新日: と書かれている部分を、Updated: などに変更すると英語表記になります。いろいろ文字を入力して、ブログに合う文字を探してみてください。

最後に


検索サイトは昔の記事もこまめにチェックして更新していると、評価が高くなるようなので、記事の内容が古くなっている場合は定期的に見直してみましょう。

更新した日付が表示されていると、検索サイトに対してだけでなく、ブログにアクセスしてくれた読者に対しても、新しい情報であることを示せるのでメリットが非常に大きいです。

スタイルシートの解説を見ると難しそうに感じてしまうかもしれませんが、やることはコピペして、content: ” の中身を書き換えるくらいなので、一度やってみれば簡単だと思えるはずです。

更新日の表示はブログにとって結構重要な要素なので、記事を参考にしながら、頑張って設定してみてください。