WordPress cocoon テーマ見出しカスタマイズ追加CSS

WordPressのcocoonテーマの見出しを自分だけのオリジナル見出しにカスタマイズできるCSSテンプレートをコピペしよう

laptop-wordpress WordPress
2019.06.11
スポンサーリンク

はじめてのWordPress＆cocoon! 〜 cocoonテーマの見出しをカスタマイズする 〜

今回は複数の好きな見出しのテーマ ( 組み合わせ ) を事前に作成しておいて必要に応じて簡単に入れ替えできるように CSSテンプレート を作成します。

見出しのテーマ 作成・確認の流れ

流れの要約
  • ステップ１
    カスタマイズ結果を確認するための(非公開)投稿を作成

    見出しテーマを作成した後でこのページを開いて確認する。

  • ステップ２
    見出しのテーマ の作成準備｜h1 〜 h6 の表示方法を決める

    『下線、左線、上下に線、背景色、背景色と下線、背景色と左線、ステッチ風、マーカー風』から各見出しの形を決めておく。

  • ステップ３
    見出しのテーマ の作成準備｜h1 〜 h6 の色を選ぶ

    カラーパレット( Color Palette ) を使って好きな色を選ぶ。

  • ステップ４
    見出しのテーマ を作成｜CSS作成

    ステップ１〜２の結果をまとめて書く。

  • ステップ５
    WordPressへ反映する

    コピペするだけ。

  • ステップ６
    結果を確認する

    ステップ１の投稿を開いて。。

  • ステップ７
    テンプレートを追加する 〜 オプション 〜

    ステップ２〜６を繰り返しながら、複数の見出しを作成しておく。
    必要な時にコピペだけですぐ切り替えられる。

ステップ 1｜カスタマイズ結果を確認するための(非公開)投稿を作成

  • 投稿 > 新規作成 をクリックして新しい投稿を開く。
  • タイトルを適宜入れる。（例：見出しのチェック）
  • h1 〜 h6 の見出しをそれぞれ追加する。
  • 公開状態を 非公開 にする。
  • 更新をクリックする。
  • 投稿を表示　をクリックして確認する。

こんな感じになるど思います。

変更前の見出し
▲ 変更前の見出し

見てみると、h3 はインデントで文字の開始位置がずれていて、色も違うのがわかります。
h1 〜 h6 全体的に色や形の統一感を出せる見出しをこれから作成します。

新しい見出しのテーマを作成したら上記のページを開いて確認するので 投稿を表示 をクリックして開けっ放しにしておけばよりスムーズです。

ステップ 2｜見出しのテーマ の作成準備｜h1 〜 h6 の表示方法を決める

この記事 の９つの表示方法をベースにしています。

９つの表示方法
  • 下線
  • 左線
  • 上下に線
  • 背景色
  • 背景色と下線
  • 背景色と左線
  • ステッチ風
  • マーカー風

ここではオリジナルの見出しを最大限活かしながら、統一感を出す、色選びをより自由にできるように少しコードを変更したり、幾つかのテンプレートを作る方法を加えていきます。

それでは、下記の 変更後 のように変えたい各項目をご自由に変更していきましょう！

ご自身の求めている理想な見出しのテーマ ( 組み合わせ ) は何ですか？

見出しのテーマ ( 組み合わせ ) によって記事のまとまりや印象が大分違ってくると思います。h1 から h6 まで書きながらゆっくり考えた上で決めましょう。

見出し変更前変更後
h1無し無し
h2上下に線背景色
h3背景色と全線左線
h4左線背景色と左線
h5下線(1本線、solid)下線(1本線、solid)
h6下線(破線、dashed)下線(点線、dotted)

teal 色を適用すると下記のような模様になります。適用する色によって雰囲気が変わると思います。
また、見出しのテーマ ( 組み合わせ ) の表示画面を見ながらカスタマイズするとより楽です。

変更前の見出し
▲ 変更前の見出し
変更後の見出し(teal)
▲ 変更後の見出し
投稿作成中の見出し

投稿を作成する際には 変更前の見出しが出ますが、投稿を表示 をクリックして見ると、 変更後の見出しがちゃんと表示されます。

ステップ 3｜見出しテーマの作成準備｜h1 〜 h6 の色を選ぶ

見出しの統一感を出すには色の濃さを適用するのがいいかと思います。そのため、Googleのマテリアル UI の カラーパレット( Color Palette ) をベースに作成します。

色の濃さを見ながら色選びできる便利なサイト。( 濃い ⇄ 薄い )

  • Google のマテリアル UI ( Material-UI ) ：カラーパレット( Color Palette )
  • Open Color：オープンカラー ( Open Color )

※ 今回は Google のマテリアル UI ( Material-UI ) のカラーパレットを使います。

現時点(2019/06/11)で カラーパレット( Color Palette ) は 19 種類の色が選べます。好きな色を選んで見ましょう！

個人的には
寒色系は Indigo、Cyan、Teal
暖色系は Amber、Purple、DeepOrange がお勧めです。

color-palette_1
▲ color-palette_1
color-palette_2
▲ color-palette_2

ステップ 4｜見出しテーマを作成｜CSS作成

CSS 作成 〜 例：Teal 〜

  • 色選び１
    カラーパレット( Color Palette ) へアクセスします。

    teal のところまでスクロールすると下記のような表示があります。
    赤い下線が引いている項目を利用して 見出しのテーマ を作成します。
    ここでは、teal 50、300、500、700、900 を使いますが、あなたは別の色を選んで結構です。

    color-material-ui-teal
    ▲ color-material-ui-teal
    カラーパレット｜色の呼び方

    色を16進数に表現する #009688 のような書き方をよく見かけますが、何色なのかが全くわからないですね。マテリアル UI ( Material-UI ) では 例えば、#009688 は ティール500 のように呼びます。#004d40 は ティール900 と呼ぶ。このように色 ( HUE ) と濃さ ( SHADE ) の組み合わせで色を定義しています。

    すなわち、
    色 = HUE ( SHADE ) = teal ( 500 ) ですので、ティール500 [teal ( 500 )] は teal 色で濃さは 0 〜 900 の中で 500 なので真ん中くらいの透明度をもつ色だな〜とより簡単に予測できます。
    よりヒューマンに優しい書き方だと思います。

  • 色選び２
    見出しテーマ ( CSS ) を書きます。

    ステップ２、３で決めていた表示方法と色を適用します。

    各見出しは必要な項目だけ、適宜変更してください。

    例：teal800 に変更または追加する場合よりスムーズに作成するには、

    • カラーパレットページを開いて、tealを探して800 の #00695c ⇦ここをダブルクリックしてコピ（00695c だけがコピされる）
    • CSS コードの中で色を指定するところへペースト（例：background: #00695c）
    • 完成した CSS コードを 追加CSS へ反映
    • 公開
    • 内容を確認
    • 必要であれば修正

    CSS コードを完成したらメモ帳などに名前をつけて ( /*TEAL*/ ) 保存です。

    ※ h2 : 背景色
    .article h2{　h2の見出しを定義
    border: none;　線を消す(初期化)
    padding: 0.6em;　内側の余白を入れる
    opacity: 0.7;　透明度を調整(70%)
    color: white;　フォントの色を白に
    background: #004d40 /* teal 900 */　背景色を teal 900に
    }

    ※ h3 : 左線
    .article h3{　
    border: none;
    background: none;　背景色を消す(初期化)
    margin-left: 0px;　インデントを消す(初期化)　h3 のみ
    padding: 0.6em;
    border-left: solid 6px #00796b /*teal 700 */
    }

    ※ h4 : 左線と背景色
    .article h4{
    border: none;
    background: #e0f2f1; /*teal 50 */ 背景色を teal 50 に
    border-left: solid 6px #00796b /*teal 700 */　左線を teal 700 に
    }
    ※ h5 : 下線 ( 1本線 )
    .article h5{
    border: none;
    border-bottom: solid 3px #009688 /*teal 500 */
    }
    ※ h6 : 下線 ( 点線 )
    .article h6{
    border: none;
    border-bottom: dotted 3px #4db6ac /*teal 300 */
    }

    全体のCSSコード ( teal )
    〜コピ します( ここから ) 〜

    /*TEAL*/
.article h2{
    border: none;
    padding: 0.6em;
    opacity: 0.7;
    color: white;
    background: #004d40 /*teal 900*/
}
.article h3{
    border: none;
    background: none;
    margin-left: 0px;
    padding: 0.6em;
    border-left: solid 6px #00796b /*teal 700*/
}
.article h4{
    border: none;
    background: #e0f2f1; /*teal 50*/
    border-left: solid 6px #00796b /*teal 700*/
}
.article h5{
    border: none;
    border-bottom: solid 3px #009688 /*teal 500*/
}
.article h6{
    border: none;
    border-bottom: dotted 3px #4db6ac /*teal 300*/
}

    〜コピします ( ここまで ) 〜

ステップ 5｜Wordpressへ反映する

  • WP反映１
    WordPressの管理画面にアクセスします。

    外観 ＞ カスタマイズ をクリックします。

    外観_カスタマイズ
    ▲ 外観：カスタマイズ

    追加CSS をクリックします。

    追加CSS
    ▲ 追加CSS

    ステップ 5 でコピしたCSSコードをペーストします。

    カスタマイズ中_追加CSS
    ▲ カスタマイズ中_追加CSS

    エラーメッセージがなければ 公開 をクリックして反映します。

ステップ 6｜結果を確認する

ステップ 1 で作成していたテスト用の投稿を開いて見出しを確認します。
teal の場合は下記のように見られると思います。

変更後の見出し(teal)
▲ 変更後の見出し(teal)

ステップ 7 ｜テンプレートを追加する 〜 オプション 〜

  • テンプレート追加１
    好きな色を幾つか選び、ステップ 4 〜 ステップ 6 を繰り返して正常に動作することを確認します。

  • テンプレート追加２
    作成したCSSをメモ帳や EverNote などへ保存しておきます。
  • テンプレート追加３
    必要な時にコピペしてすぐ変更できる！

寒色系：Teal | Cyan | Indigo | Green

好きな色がありましたら、コピペどうぞ〜

/*TEAL はステップ 4 をご参考ください*/

/*CYAN*/
.article h2{
    border: none;
    padding: 0.6em;
    opacity: 0.7;
    color: white;
    background: #006064 /*cyan 900*/
}
.article h3{
    border: none;
    background: none;
    margin-left: 0px;
    padding: 0.6em;
    border-left: solid 6px #0097a7 /*cyan 700*/
}
.article h4{
    border: none;
    background: #e0f7fa; /*cyan 50*/
    border-left: solid 6px #0097a7 /*cyan 700*/
}
.article h5{
    border: none;
    border-bottom: solid 3px #00bcd4 /*cyan 500*/
}
.article h6{
    border: none;
    border-bottom: dotted 3px #4dd0e1 /*cyan 300*/
}


/*INDIGO*/
.article h2{
    border: none;
    padding: 0.6em;
    opacity: 0.7;
    color: white;
    background: #1a237e /*indigo 900*/
}
.article h3{
    border: none;
    background: none;
    margin-left: 0px;
    padding: 0.6em;
    border-left: solid 6px #303f9f /*indigo 700*/
}
.article h4{
    border: none;
    background: #e8eaf6; /*indigo 50*/
    border-left: solid 6px #303f9f /*indigo 700*/
}
.article h5{
    border: none;
    border-bottom: solid 3px #3f51b5 /*indigo 500*/
}
.article h6{
    border: none;
    border-bottom: dotted 3px #7986cb /*indigo 300*/
}


/*GREEN*/
.article h2{
    border: none;
    padding: 0.6em;
    opacity: 0.7;
    color: white;
    background: #1b5e20 /*green 900*/
}
.article h3{
    border: none;
    background: none;
    margin-left: 0px;
    padding: 0.6em;
    border-left: solid 6px #388e3c /*green 700*/
}
.article h4{
    border: none;
    background: #e8f5e9; /*green 50*/
    border-left: solid 6px #388e3c /*green 700*/
}
.article h5{
    border: none;
    border-bottom: solid 3px #4caf50 /*green 500*/
}
.article h6{
    border: none;
    border-bottom: dotted 3px #81c784 /*green 300*/
}
heading_theme_cyan
▲ 見出しテーマ | Cyan
heading_theme_indigo
▲ 見出しテーマ | Indigo

heading_theme_green
▲ 見出しテーマ | Green

暖色系：Amber | DeepOrange | Purple | Red

好きな色がありましたら、コピペどうぞ〜

/*AMBER*/
.article h2{
    border: none;
    padding: 0.6em;
    opacity: 0.7;
    color: white;
    background: #ff6f00 /*amber 900*/
}
.article h3{
    border: none;
    background: none;
    margin-left: 0px;
    padding: 0.6em;
    border-left: solid 6px #ffa000 /*amber 700*/
}
.article h4{
    border: none;
    background: #fff8e1; /*amber 50*/
    border-left: solid 6px #ffa000 /*amber 700*/
}
.article h5{
    border: none;
    border-bottom: solid 3px #ffc107 /*amber 500*/
}
.article h6{
    border: none;
    border-bottom: dotted 3px #ffd54f /*amber 300*/
}


/*DEEPORANGE*/
.article h2{
    border: none;
    padding: 0.6em;
    opacity: 0.7;
    color: white;
    background: #bf360c /*deepOrange 900*/
}
.article h3{
    border: none;
    background: none;
    margin-left: 0px;
    padding: 0.6em;
    border-left: solid 6px #e64a19 /*deepOrange 700*/
}
.article h4{
    border: none;
    background: #fbe9e7; /*deepOrange 50*/
    border-left: solid 6px #e64a19 /*deepOrange 700*/
}
.article h5{
    border: none;
    border-bottom: solid 3px #ff5722 /*deepOrange 500*/
}
.article h6{
    border: none;
    border-bottom: dotted 3px #ff8a65 /*deepOrange 300*/
}



/*PURPLE*/
.article h2{
    border: none;
    padding: 0.6em;
    opacity: 0.7;
    color: white;
    background: #4a148c /*purple 900*/
}
.article h3{
    border: none;
    background: none;
    margin-left: 0px;
    padding: 0.6em;
    border-left: solid 6px #7b1fa2 /*purple 700*/
}
.article h4{
    border: none;
    background: #f3e5f5; /*purple 50*/
    border-left: solid 6px #7b1fa2 /*purple 700*/
}
.article h5{
    border: none;
    border-bottom: solid 3px #9c27b0 /*purple 500*/
}
.article h6{
    border: none;
    border-bottom: dotted 3px #ba68c8 /*purple 300*/
}


/*RED*/
.article h2{
    border: none;
    padding: 0.6em;
    opacity: 0.7;
    color: white;
    background: #b71c1c /*red 900*/
}
.article h3{
    border: none;
    background: none;
    margin-left: 0px;
    padding: 0.6em;
    border-left: solid 6px #d32f2f /*red 700*/
}
.article h4{
    border: none;
    background: #ffebee; /*red 50*/
    border-left: solid 6px #d32f2f /*red 700*/
}
.article h5{
    border: none;
    border-bottom: solid 3px #f44336 /*red 500*/
}
.article h6{
    border: none;
    border-bottom: dotted 3px #e57373 /*red 300*/
}
heading_theme_amber
▲ 見出しテーマ | Amber
heading_theme_deepOrange
▲ 見出しテーマ | DeepOrange
heading_theme_purple
▲ 見出しテーマ | Purple
heading_theme_red
▲ 見出しテーマ | Red

以上です。

スポンサーリンク

コメント

タイトルとURLをコピーしました