【THE THOR】サイドバー見出しのデザインサンプル6選:CSSカスタマイズ

みなさんこんにちは。

AiとJony(@10to1_travel)です。

今回は、THE THOR (ザ・トール)のサイドバー見出しのカスタマイズを紹介します。

今回のカスタマイズ一覧

  • サイドバー見出しの文字色を変える
  • サイドバー見出しのデザインを変更する
  • サイドバー見出しのデザインサンプル6選(コピペだけ)

THE THOR(ザ・トール)のサイドバー見出しは、なぜか文字色を変更できません。

文字色が基本的に白なので、背景色をどうしても濃い色に設定しなくてはいけませんでした。

そこで、サイドバー見出しを文字色だけでなく、太さや位置、デザインを CSSでカスタマイズしていきます。ほとんどコピペだけなので、初心者の方でも簡単です。

 
Jony
見出しの文字色を変更するだけでも大きな一歩やで!
 
Ai
CSSが苦手な人向けに、コピペでできるデザインサンプルを6つ用意しました!

THE THOR(ザ・トール)のサイドバーのカテゴリーリストのカスタマイズも紹介してるので、気になった方はこちらの記事をどうぞ。

>>【THE THOR】サイドバーのカテゴリーリストのカスタマイズ【CSS】

関連記事

みなさんこんにちは。 THE THOR(ザ・トール)のカテゴリーリストは、オシャレですが 大カテゴリーがちょっと主張しすぎに感じます。 あまり色を使いたくないサイトや、もう少しシンプルでオシャレなデザインにしたい人[…]

THE THORのサイドバー見出しの設定方法

今回の THE THOR(ザ・トール)のサイドバー見出しのカスタマイズでは、見出し自体の色を変更する CSSは記述しません。

理由は、CSSを減らし、サイト速度の低下を防ぐため。なので見出しの色は、THE THOR(ザ・トール)のデフォルトの設定で変更します。

以下が設定までの手順です。

外観 → カスタマイズ → 共通エリア設定[THE] → サイドカラムエリア設定

と進み、一番下の「ウィジェットの見出しデザイン設定」でデザインや、色を変更します。

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

サイドバーウィジェットの見出しデザインを選択します。

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

※サイドウィジェットのデザインを変更しても、プレビュー画面で変更されない場合があります。その際は、ブラウザの更新でページを再読み込みすれば表示されます。

角丸(default)

要素(セレクター):.widget-side .heading-widget{}

デフォルトのデザインです。

シンプル

要素(セレクター):.widget-side .heading-widgetsimple{}

シンプルなボックスです。一番使いやすい。

ボトムボーダー

要素(セレクター):.widget-side .heading-widgetbottom{}

タイトルの幅に合わせて下線が引かれます。サイトをシンプルに見せたい人にオススメです。

はみ出すボーダー

要素(セレクター):.widget-side .heading.heading-widgetborder{}

周りに線が引かれてるデザインです。少しクセはありますが、とてもオシャレなデザインです。

シンプル(ワイド)

.widget-side .heading.heading-widgetsimplewide{}

フレームいっぱいに表示されるデザインです。私たちも使用してる一番好きなデザインです。

内側ボーダー(ワイド)

要素(セレクター):.widget-side .heading.heading-widgetwide{}

こちらもカジュアルなデザインです。THE THOR(ザ・トール)ユーザーさんが一番使ってるんじゃないかと思うくらい利用されてます。

ウィジェット見出しの色を指定

ウィジェット見出しの色を変更できます。

希望のカラー番号を入力もしくは、パレットを操作して色を指定します。

カラー番号は、原色大辞典さんが参考になります。

原色大辞典

色の名前とカラーコードが一目でわかるWEB色見本…

※今回のカスタマイズでは、背景色は CSSではなく、ここで設定するようにしてます。

 
Ai
設定ができたところで、サイドバーをカスタマイズしてくよ!

THE THORのサイドバー見出しのカスタマイズ

それでは、THE THOR(ザ・トール)のサイドバー見出しのカスタマイズを解説していきます。

見出しデザインは、それぞれ要素(セレクター)が違います。

あなたがカスタマイズしたいデザインの要素(セレクター)を使用してください。

見出しデザイン要素(セレクター)
角丸(default).widget-side .heading-widget
シンプル.widget-side .heading-widgetsimple
ボトムボーダー.widget-side .heading-widgetbottom
はみ出すボーダー.widget-side .heading.heading-widgetborder
シンプル(ワイド).widget-side .heading.heading-widgetsimplewide
内側ボーダー(ワイド).widget-side .heading.heading-widgetwide

これから紹介する CSSの、セレクターの部分を上記の希望のデザインに変更します。

セレクターの部分を希望のデザインに置き換えます。このとき、セレクター前の「 . 」を忘れない、「 { } 」でプロパティを囲ってるか確認しましょう。

例えば、シンプル(ワイド)の文字色をカスタマイズしたい場合は、

.widget-side .heading.heading-widgetsimplewide{
color:#333;/*文字色*/
}

となります。

今回は、例として角丸(default)をカスタマイズサンプルに使います。

文字色を変える

サイドバー見出しの文字の色を変更します。

/*サイドバーの文字色を変える*/
.widget-side .heading-widget{
color:#333;/*文字色*/
}

color:#333;の #から始まるカラー番号を変更すれば、文字の色を変えれます。

文字の大きさを変える

サイドバー見出しの文字の大きさを変更します。

/*サイドカラム 文字の大きさ*/
.widget-side .heading-widget{
font-size:20px;/*文字サイズ*/
}

font-size:20px;の数値を変更して、文字サイズを調節します。

数値を大きくすると文字が大きく、小さくすると文字が小さくなります。

タイトルを中央寄せする

サイドバーの見出しのタイトルを中心にします。

/*サイドカラムを中央寄せ*/
.widget-side .heading-widget{
 text-align:center;
}

タイトル前にアイコンを入れる

サイドバー見出しのタイトル前にアイコンを設置します。

/*タイトル前にアイコン*/
.widget-side .heading-widget:before{
 font-family:"FontAwesome";/*フォントオーサム*/
 content:"\f101";/*アイコンコード*/
 margin-right:5px;
}

このカスタマイズでは、FontAwesomeのアイコンを使用してます。

まだ THE THOR(ザ・トール)に FontAwesomeを導入してない方は、以下の記事をご覧ください。

5分でできるので簡単です。

>>【THE THOR向け】初心者でも簡単!Font Awesomeを導入する方法

関連記事

 Ai 無料アイコンが使い放題!Font Awesomeを THE THOR(ザ・トール)に導入する方法を紹介するよ! こんな人にオススメ THE THORでオシャレなアイコンを使いたい記事内でTwitterやチ[…]

デザインを全てまとめて使う場合

上記のカスタマイズを全てまとめたコードを貼っておきますね!

/*サイドカラムまとめ*/
.widget-side .heading-widget{
color:#333;/*文字色*/
font-size:20px;/*文字サイズ*/
 text-align:center;/*中央寄せ*/
}
/*タイトル前にアイコン*/
.widget-side .heading-widget:before{
 font-family:"FontAwesome";/*フォントオーサム*/
 content:"\f101";/*アイコンコード*/
 margin-right:5px;
}

スマホの表示を変えたい場合

スマホでの表示を変えたい場合は、以下のコードを追記します。

/*スマホ表示*/
@media only screen and (max-width: 480px) {
/*サイドカラムまとめ*/
.widget-side .heading-widget{

color:#333;/*文字色*/
font-size:20px;/*文字サイズ*/
 text-align:center;/*中央寄せ*/
}
/*タイトル前にアイコン*/
.widget-side .heading-widget:before{
 font-family:"FontAwesome";/*フォントオーサム*/
 content:"\f101";/*アイコンコード*/
 margin-right:5px;
}
}

@media only screen and (max-width: 480px) {}で囲うことで、480px未満のディスプレイのみ表示させる指定をします。

コピペだけ!THE THORのサイドバーデザイン6選

THE THOR(ザ・トール)のサイドバー見出しのデザインが難しい人向けに、コピペだけでできるカスタマイズを 6つ紹介します。

今回は、角丸(default)シンプルを使って行います。

角丸(default)

角丸(default)のデザインをカスタマイズします。

デザインを角丸(default)に設定しておいてください。じゃないと反映されません。

角丸ボーダー

/*角丸ボーダー*/
.widget-side .heading-widget{
border:solid #f89174  2px;
color:#f89174;
}

外枠をボーダーで囲ったオシャレなデザインです。

背景は #fffに設定してます。

角丸スティッチ

/*角丸スティッチ*/
.widget-side .heading-widget{
 border:dashed #fff 2px;/*破線*/
 padding-top:0.5em;
 box-shadow:0px 0px 0px 7px #f89174;/*外枠の色*/
 text-align:center;
}

スティッチ風のデザインです。可愛いデザインのサイトにオススメです。

角丸ストライプ

/*角丸ストライプ*/
.widget-side .heading-widget{
  background: repeating-linear-gradient(-45deg, #f7aa94, #f7aa94 3px, #f89174 3px, #f89174 7px)
  ;
}

WordPressテーマの SWELL風の見出しデザインです。

カラー番号の赤色黄色の部分は、同じ色に揃えてください。

シンプル

シンプルのカスタマイズです。

デザインをシンプルに設定しておいてください。じゃないと反映されません。

シンプル左線

/*シンプル左線*/
.widget-side .heading-widgetsimple{
 border-left:solid 5px #19448e;/*左線*/
 color:#333;/*文字色*/
}

ブログで同じみのデザインです。意外と使い勝手が Goodですね。

背景色は #efefefに設定してます。

シンプルストライプ

/*シンプルストライプ*/
.widget-side .heading-widgetsimple{
  background: repeating-linear-gradient(-45deg, #39598f, #39598f 3px, #19448e 3px, #19448e 7px);
}

上記と同じ、SWELL風のデザインです。

シンプル吹き出し

/*シンプル吹き出し*/
.widget-side .heading-widgetsimple{
 position:relative;
 text-align:center;
}
.widget-side .heading-widgetsimple:before{
 position: absolute;
 top: 100%;
 left:45%;
 content: "";
 border: 10px solid transparent;
 margin-top: -2px;
 border-top: 15px solid #19448e;/*吹き出しカラー*/
}

意外と無かったので、作ってみました。

背景色は#19448eに設定してます。

THE THORのサイドバー見出しのカスタマイズ:まとめ

今回は THE THOR(ザ・トール)のサイドバー見出しのカスタマイズを紹介しました。

THE THOR(ザ・トール)は、なぜか文字色を変更できなかったりと謎仕様なので、今回の CSSが役に立てばと思います。

THE THOR(ザ・トール)のサイドバーのカテゴリーリストのカスタマイズも紹介してるので、気になった方はこちらの記事をどうぞ。

>>【THE THOR】サイドバーのカテゴリーリストのカスタマイズ【CSS】

関連記事

みなさんこんにちは。 THE THOR(ザ・トール)のカテゴリーリストは、オシャレですが 大カテゴリーがちょっと主張しすぎに感じます。 あまり色を使いたくないサイトや、もう少しシンプルでオシャレなデザインにしたい人[…]

デザインの依頼を受け付けてます。上記の他に、やってほしいデザインや、カスタマイズ依頼などありましたらお問い合わせください。

今回はここまで!