WordPressテーマ【SWELL】カスタマイズ:見出しをカラフルにしたよ。

見出しをカスタマイズしてカラフルにしてみました。

モノクロと赤橙黄緑青藍紫の計8色になっています。

用意するもの

Font Awesomeを利用するので、事前準備として、管理画面メニューからSWELL設定Font Awesomecssで読み込むもしくはjsで読み込むを選択してください。

テーマカスタマイザーから投稿・固定ページコンテンツのデザイン見出しのデザイン設定見出しのデザインを全て「装飾なし」にしておいてください。

作例で見出し表示をしているので目次はこのページでは非表示になっています。

目次(タップで項目へ)

作例

各色毎、アコーディオンブロックに作例が格納されているのでクリックしてみてね。

基本色見出し class : color-base & color-mono

赤色見出し class : color-red

オレンジ色見出し class : color-orange

黄色見出し class : color-yellow

緑色見出し class : color-green

青色見出し class : color-blue

藍色見出し class : color-indigo

紫色見出し class : color-purple

実装方法

テーマカスタマイザー追加CSSデザイン部分色設定部分のそれぞれのコードをコピーアンドペーストしてください。

テーマカスタマイザーは管理画面メニューの外観カスタマイズで開く事ができます。

デザイン部分のクラスと色設定部分のクラスを目次ブロックの高度な設定追加CSSクラスに追加すれば利用可能です。

デザイン部分 class : color-base

基本的なデザイン部分のCSSです。Font Awesomeのコード部分を変更すればH4~H6までの見出し頭のアイコンを変更できます。お好みに合わせて変更してみてください。

使用する際には見出しブロック追加CSSクラスcolor-baseを記入します。色が必要なければこれだけでOKです。


 h2.color-base {
  padding: 0.5em;
  color: #101010;
  background: #fcfcfc;
  border:0px;
  border-bottom: solid 3px #d0d0d0;
}
 h3.color-base {
  padding: 0.5em;
  color: #101010;
  background: #fcfcfc;
  border:0px;
  border-left: solid 5px #d0d0d0;
}
 h4.color-base {
  border:0px;
}
 h4.color-base:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0c8\00A0";
  font-size: 1em;
  color: #d0d0d0; 
}

 h5.color-base {
  border:0px;
}

 h5.color-base:before {
  font-family: "Font Awesome 5 Free";
  content: "\f04c\00A0";
  font-size: 1em;
  color: #d0d0d0;
}

 h6.color-base {
  border:0px;
}

 h6.color-base:before {
  font-family: "Font Awesome 5 Free";
  content: "\f009\00A0";
  font-size: 1em;
  display:inline-block;
  color: #d0d0d0; 
}

色設定部分 class : color-xxx

デザイン設定部分であるcolor-baseを目次ブロックの追加CSSクラスに記入し、下の指定Classcolor-の後の色を記入すれば色が付きます。

指定Class
モノクロ

color-mono

color-red

オレンジ

color-orange

黄色

color-yellow

color-green

color-blue

color-indigo

color-purple

 h2.color-mono {  color: #101010;  background: #fcfcfc;  border-bottom-color:#d0d0d0; border-image: linear-gradient(to right, #d0d0d0 0%, #fcfcfc 100%); border-image-slice: 1;}
 h3.color-mono {  color: #101010;  background: #fcfcfc;  border-left-color:#d0d0d0;}
 h4.color-mono {  color:#202020;  border:0px;}
 h4.color-mono:before {  color: #d0d0d0; }

 h2.color-red {  color: #101010;  background: #fffbfb;  border-bottom-color:#E38692; border-image: linear-gradient(to right, #E38692 0%, #fffbfb 100%); border-image-slice: 1;}
 h3.color-red {  color: #101010;  background: #fffbfb;  border-left-color:#E38692;}
 h4.color-red {  color:#202020;  border:0px;}
 h4.color-red:before, h5.color-red:before, h6.color-red:before {  color: #E38692; }

 h2.color-orange {  color: #101010;  background: #fefdfc;  border-bottom-color:#EDA184; border-image: linear-gradient(to right, #EDA184 0%, #fefdfc 100%); border-image-slice: 1;}
 h3.color-orange {  color: #101010;  background: #fefdfc;  border-left-color:#EDA184;}
 h4.color-orange {  color:#202020;  border:0px;}
 h4.color-orange:before, h5.color-orange:before, h6.color-orange:before {  color: #EDA184; }

 h2.color-yellow {  color: #101010;  background: #fefefa;  border-bottom-color:#FFF280; border-image: linear-gradient(to right, #FFF280 0%, #fefefa 100%); border-image-slice: 1;}
 h3.color-yellow {  color: #101010;  background: #fefefa;  border-left-color:#FFF280;}
 h4.color-yellow {  color:#101010;  border:0px;}
 h4.color-yellow:before, h5.color-yellow:before, h6.color-yellow:before {  color:#FFF280; }

 h2.color-green {  color: #101010;  background: #fdfffd;  border-bottom-color:#68CFC3; border-image: linear-gradient(to right, #68CFC3 0%, #fdfffd 100%); border-image-slice: 1;}
 h3.color-green {  color: #101010;  background: #fdfffd;  border-left-color:#68CFC3;}
 h4.color-green {  color:#202020;  border:0px;}
 h4.color-green:before, h5.color-green:before, h6.color-green:before {  color: #68CFC3; }

 h2.color-blue {  color: #101010;  background: #fdfdff;  border-bottom-color:#8BA7D5; border-image: linear-gradient(to right, #8BA7D5 0%, #fdfdff 100%); border-image-slice: 1;}
 h3.color-blue {  color: #101010;  background: #fdfdff;  border-left-color:#8BA7D5;}
 h4.color-blue {  color:#202020;  border:0px;}
 h4.color-blue:before, h5.color-blue:before, h6.color-blue:before {  color: #8BA7D5; }

 h2.color-indigo {  color: #101010;  background: #fbfeff;  border-bottom-color:#7B97F5; border-image: linear-gradient(to right, #7B97F5 0%, #fbfeff 100%); border-image-slice: 1;}
 h3.color-indigo {  color: #101010;  background: #fbfeff;  border-left-color:#7B97F5;}
 h4.color-indigo {  color:#202020;  border:0px;}
 h4.color-indigo:before, h5.color-indigo:before, h6.color-indigo:before {  color: #7B97F5; }

 h2.color-purple {  color: #101010;  background: #fffaff;  border-bottom-color:#B492CC; border-image: linear-gradient(to right, #B492CC 0%, #fffaff 100%); border-image-slice: 1;}
 h3.color-purple {  color: #101010;  background: #fffaff;  border-left-color:#B492CC;}
 h4.color-purple {  color:#202020;  border:0px;}
 h4.color-purple:before, h5.color-purple:before, h6.color-purple:before {  color: #B492CC; }

まとめ

記事の内容に応じて全体の色を変えたり、比較記事などでこのブランドは赤。このブランドに関しては青。のように使い分けをしたりするのに便利なのではないかと思い作成してみました。

テーマカスタマイザー追加CSSへCSSのコピーしておくのと追加CSSクラスに2個のクラス追加するだけで簡単に利用できるのでぜひ使ってみてね。

利用例としてこのブログの使用プラグイン一覧ページを置いておきます。青が使用中、赤は使用をやめたプラグインになっています。良かったら参考にしてみてください。

利用例!

このブログに使用しているテーマ【】は以下からどうぞ。

シュッとしたデザインとブロックエディタの使い勝手が最高なテーマです。

ブログで使用しているテーマ

目次(タップで項目へ)
閉じる