目次
 

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

    広告
    SWELL WordPress ブログ

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

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

    用意するもの

    Font Awesomeを利用するので、事前準備として、管理画面メニューからSWELL設定＞Font Awesome＞cssで読み込むもしくは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個のクラス追加するだけで簡単に利用できるので、気に入ったら使って欲しいです。

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

    利用例！

    あわせて読みたい
    当サイトで使用している/していたWordPressプラグイン一覧 使用中のWordPressプラグイン Contact Form 7 言わずと知れた。有名フォームプラグイン。 訪問者が問い合わせを行うために必要なフォームを簡単に設置する事が出来ます…

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

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

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

    log
    SWELL WordPress ブログ
    • URLをコピーしました！
    1. ホーム
    2. log
    3. WordPressテーマ【SWELL】カスタマイズ：見出しをカラフルにしたよ。