JIN:Rのサイドバー設定方法

ブログ運営を始めようと思ってから数日。TOPページや投稿用ページを整備する中で、かっこいいサイドバーがうまく設定できず苦戦していました。

いろんな人のブログを参考に、かっこいいサイドバーの設定方法が自分なりにまとまったので紹介します。同じ環境で苦しんでいる人などがいたら、参考にしていただければ幸いです。

サイドバーの表示設定について

サイドバーはどれのことかというと、下図の赤枠内のことです。

サイトデザイン設定で「2カラム」を選ぶ

WordPressの「カスタマイズ」を開いて、「サイトデザイン設定」を選択。
ページレイアウトから表示させたいページで「2カラム」を選択してください。

サイドバーをかっこよくアレンジ

JIN：Rのマニュアルでは

「カスタマイズ」＞「ウィジェット」に進み、サイドバーの編集をする

と記載されていますが、私の画面ではマニュアルのような画面が表示されませんでした。

調べてみると、WordPressのダッシュボードから「外観」＞「ウィジェット」を選択することでサイドバーの編集ができるとのこと。
下図ではすでに私の設定が表示されています。

記事の編集と同様に好みの表示になるように編集しましょう。

サイドバー追尾【PC】もいい感じに編集しよう

サイドバーと一緒に「サイドバー追尾【PC】」も編集しましょう。
「サイドバー追尾【PC】」はページをスクロールしてもここに設定したものはスクロールに追随して表示してくれます。

私はこのように設定しています。

実際の表示画面

ウィジェット編集画面

ここで、ウィジェット編集画面で設定した内容を簡単に説明すると、

• 背景の設定
• 見出しの追加（「contents」の追加）
• カスタムHTMLの追加
• カスタムHTMLに「RTOC」用のコードをコピペ

とするだけです。

「RTOC」のインストール、設定

「RTOC」の設定方法です。

WordPressの管理画面から、「プラグイン」＞「新規追加」を選択。

画面右上の検索窓に「RTOC」と入力し検索してください。

「今すぐインストール」＞「有効化」をクリックしインストールします。

有効化するとダッシュボードに「RTOC」が追加されます。

「RTOC」＞「ショートコード」を選択し、下図の赤枠内をコピー。
サイドバー追尾【PC】のカスタムHTMLにペーストすることで使用できます。

まとめ

今回はサイドバーの設定方法と、かっこいいサイドバーに使える「RTOC」を紹介しました。

サイドバーの設定をやっていないときは、新規記事を書く際にカラムを追加したりカテゴリーブロックを追加したりと手間が多かったのですが、設定後は本文を書くだけで綺麗に記事が書けるようになりました。

TOPページにサイドバーを表示することができていないので、これも試行錯誤しながら表示できるようにしていきたいと思います。

この記事が皆さんの生活のヒントになれば幸いです。

揚げワンタン

管理人

Twitter

名前：揚げワンタン
年齢：30代
性別：男性
職業：会社員

そろそろ子供が誕生しそうなおじさんの雑記ブログです。
昔はゲームが好きでFF14などを一生懸命やってました。
今はいかに仕事を早く終わらせて自分の好きなことをやるかに執着しています。
ガジェットや本を読んで、自分の生活に活かそうと頑張ってます。