【THE THOR】サイドバーエリアのデザインや色を変更する方法

THE THORのサイドバーエリアのデザインや色を変えて、「もっとオシャレにしたい!」「見やすくスッキリさせたい!」そのための方法をお探しではありませんか?

 

トップページのヘッダーやフッターをカスタマイズして整えたら、次はサイドバーエリアのカスタマイズに進むという流れになってきますよね。

 

わたしもサイドバーのカスタマイズに関しては、あーでもないこーでもない…と、何度も作りなおしてやっと落ち着きましたが、この部分が整うとサイトっぽくなってきたな〜という印象です。

 

そこでまずは、THE THORのデフォルト状態のサイドバーエリアをどうにかしたい…そんなあなたへ、THE THORのサイドカラムエリアで設定すれば、初心者の方でも簡単に自分好みのデザインに変えることができますよ。

 

今回は、THE THORのサイドバーエリアに注目して、見出しデザインや色を変える方法をご紹介していきますね。

 

【THE THOR】サイドバーエリアに表示する項目

まずはTHE THORのサイドバーエリアになにを表示させるかを決めていきましょう。

 

とはいえ、ブログ立ちあげの頃は記事数が少ないため、サイドバーエリアに表示させる項目も少なくなってしまうかもしれませんね。

 

一般的には、以下のような項目がよく使われていますので、初期の頃はこれだけあれば問題ないでしょう。

 

  • 検索
  • 著作者情報(プロフィール)
  • 人気記事(アクセスランキング)
  • 最近の投稿
  • カテゴリー

 

【THE THOR】サイドバーエリアのデフォルト状態とは?

THE THORのサイドバーエリアですが、デフォルトの状態では、「検索」「最近の投稿」「最近のコメント」「アーカイブ」「カテゴリー」「メタ情報」など、おおく表示されていますので、必要のない項目は削除してしまいましょう。

 

 

てんかな
確かにいらない項目がおおく目立ちますね〜…
むすめ
メタ情報なんて読者にはなんの関係もない項目だね!

【THE THOR】ウィジェット管理画面の操作方法

以下の手順で、ウィジェットの管理画面から、サイドバーエリアに必要な項目を追加したり、いらない項目を削除していきます。

 

管理画面から「外観」→「ウィジェット」をクリックしてください。

 

左側にある30個ほどの「利用できるウィジェット」の中から、表示させたい項目を選び、右側の「サイドバーエリア」や各エリア部分に追加していきます。

 

例えば、「著作者情報」をサイドバーエリアに追加したい場合、ウィジェットのプルダウンをおして、「サイドバーエリア」を選択したあと、「ウィジェットを追加」をクリックしてください。

 

また、サイドバーエリアにデフォルトで入っている項目を削除するには、サイドバーエリアの右上部プルダウンをおし、下に表示される各項目のプルダウンで表示される画面から「削除」でOKです。

 

ここでは例として、「最近のコメント」を削除しますが、同じように「アーカイブ」「カテゴリー」「メタ情報」も必要ないので削除しておきましょう。

 

「THE THOR無料サポート」受付中!質問、疑問etc…どんな些細なことでもOK!お問い合わせはこちらからお気軽にどうぞ!

【THE THOR】サイドバー見出しの変更方法

ここからは早速、THE THORのサイドバーエリアのウィジェット見出しのデザインと色を変更する方法を解説していきますね。

 

WordPress管理画面から「外観」→「カスタマイズ」を選択します。

 

次に「共通エリア設定[THE]」→「サイドカラムエリア設定」を選択します。

 

こちらの画面が表示されたら、「ウィジェット見出しデザイン設定」から変更していきますよ。

 

①ウィジェットの見出しデザインを選択する

最初にデザインを設定していきますが、プレビュー画面で変更が反映されないときは、リロード(ページの再読み込み)をしてみましょう。

 

THE THORのウィジェットの見出しデザインは以下の6つ。

  • 角丸(default)
  • シンプル
  • ボトムボーダー
  • はみ出すボーダー
  • シンプル(ワイド)
  • 内側ボーダー(ワイド)

 

角丸(default)

角が丸まっているデフォルトのデザインになります。

 

 

シンプル

一般的で使いやすい、シンプルなデザイン。

 

 

ボトムボーダー

下線だけなので、スッキリ見せることができてオススメ。

 

 

てんかな
ちなみにわたしはシンプルなデザインが好みなので、今はこちらを使用していますよ!

はみ出すボーダー

はみ出す線で囲まれている、オシャレなデザイン。

 

 

シンプル(ワイド)

フレームいっぱいに表示されるデザイン。

 

 

内側ボーダー(ワイド)

個性的でカジュアルなデザインが人気。

 

 

どれにするか迷うと思いますが、簡単に変更できるので、いろいろ試してみましょう。

 

②ウィジェット見出しの色指定する

次にウィジェット見出しの色を変更してみましょう。

 

パレット上で操作して色を選ぶか、好みのカラー番号を入力して指定できます。

 

 

てんかな

ほとんどクリック操作だからとっても簡単ですね!

 

むすめ
自分好みのデザインがあっという間にできちゃう♪

 

まとめ

お疲れさまでした!THE THORのサイドバーエリアの見出しデザインや、色を変える方法をご紹介してきましたが、あなた好みに変更できましたでしょうか?

 

慣れてきたら、プラグインを導入してプロフィールをもっとオシャレにしたり、文字の色や大きさをCSSで変更したりするのも楽しいかと思いますよ。

 

最後に、今回の記事でなにかわからないことはありませんでしたか?質問や相談、感想や雑談などなんでもOK!あなたからのメール待ってます