WordPress人気無料テーマ「Cocoon」をカスタマイズ、記事内の見出し(H2、H3、H4)デザインを自分好みに変更[初心者・シニア]

2020年9月2日

Cocoonの見出し(記事内)をカスタマイズする方法を初心者向けに解説します。CSSの知識がなくてもできる範囲で説明します。

WordPressの人気テーマCocoonは初期の設定のままだとデザインはとてもシンプルです。このブログの一連のご案内ではCocoonに登録されている「スキン」を利用することをお勧めしています。とても簡単に手軽に統一化されたデザインが設定される「スキン」は初心者にとって大助かりですよね。
 しかし、もうちょっと目立たせたい、色味を変えたいなど自分好みにカスタマイズしたいと思っている、でも難しいCSS(デザインを変更するためのコード設定)は触るのが怖いので諦めている!そんな風な状況ではないですか?

この記事ではCSSのコード内容が理解できなくても、コピペ(コピー&貼り付け)で簡単にカスタマイズできる見出しデザインの変更方法をご案内します。是非チャレンジしてみてください(^^)

*なお、この記事は記事内の見出しのみ変更されるご案内です。
(サイドバーの見出しは変更されません)

 

見出しの設定方法

カスタマイズの前に、まず基本的な見出しの設定方法を解説します。(設定方法は ブロックエディター(Gutenberg)で紹介しています)

*旧エディターを利用の場合は以下の記事のを参照ください
WordPress(ワードプレス)旧エディターで記事を投稿する方法
↓↓↓↓↓([見出し]の欄)
https://applired.net/wordpress-classiceditor-post/#toc_id_3_1

 

エディター内でブロックエディターを追加のボタンをクリックします。

 

表示されるブロック一覧から、「見出し」を選択します。

キャプチャー、見出し挿入


 

見出しブロックが挿入されます、見出しの種類「H2」を選びます。
(Hの横にある▼ぼたんをクリックして、表示された見出し種類から「H2」をクリックします。

 

 

設定された見出しの中で「見出しを入力…」の部分を見出しの文言を入力します。

キャプチャー、見出しの言葉を入力する

見出しの入力完了です。

 

同様にして、「見出し3(H3)」、「見出し4(H4)」も入力します。

 

キャプチャー、見出し3入力

 

キャプチャー、見出し4入力

 

 

見出しH2,H3,H4の設定例です。この見出しのデザインは 【スキン(グリーン)わいひらさん作】で設定されたものです。
(実際の記事ではこの間に文章が入力されます)

キャプチャー、スキン設定画面

 

COLORS(グリーン)スキン設定の見出しの表示

 

 

スキンが反映されていない(スキン設定なし)の見出しのデザインは以下のようにシンプル(グレー)です。

スキン設定なしの初期状態の見出しの表示

キャプチャー、デフォルトの見出しデザイン


 

見出しデザインのカスタマイズ

では、いよいよ上記のデザインの見出しを、自分の好みのデザインにカスタマイズしていきます。

まず、見出しには、【本文中に設定される見出し】の他に、サイドバーにも見出しが設定されています。一度にすべてのデザインを変更することもできますが、今回はまず、本文中の見出しのみ変更する方法をご紹介します。

 

現在の見出しデザインのリセットをしておく

まず、現状のデザイン設定を一度すべてリセットしておきます。スキン等を利用していなくても(スキンなしの設定でも)なんらかのデザイン設定はされているので、その設定をクリアーします。

設定のクリアーは、その後の見出しデザインの設定をした際、現状の設定をすべて上書きできず、望まない設定が残ってしまうのを防ぐためです。
省略しても、大丈夫な場合もありますが、できるだけ実施したほうが後々トラブルが生じないためスムーズなカスタマイズができます。

WordPressのダッシュボードにて
[外観] ≫ [テーマエディター]をクリックします。



テーマエディターが表示されます。
①編集するテーマ:Cocoon Child
②テーマファイル:スタイルシート(sytle.css)
が選ばれていることを確認します。

キャプチャー、テーマエディター


まず、
リセット用のコードを挿入します。
リセット用のコードとは、現状のデザインの設定をいったんすべて無しにするためのコードです。

なお、サンプルではH5,H6も念のため記載していますが、通常使用するのはH2,H3,H4くらいまでです。Cocoonの標準のエディターではH4までしか選択できません、なので、H5,H6は省略してもかまいません。

 

リセット用コードの説明です。
以下のコードはCSSのコードです、それぞれの意味は以下の通りです。
*設定によってはこれ以外のリセットが必要になる場合があるかもしれませんが(これでほぼ大丈夫だと思います)

/*H2 */ /* と */に挟まれた文字は説明です、設定に影響ない文字として処理されます 
.entry-content h2{  .entry-content  を記載することで、記事内のH2のみに設定が適用されます
border:none; 線を無しにする設定
background:none; 背景色を無しにする設定
padding: 0; 文字と線の間隔を無しにする設定
}

 

実際に入力に使用するコードがこちらです。
以下ピンク枠で囲まれたのコードを全てコピーしてください。

/* 見出しのデザインリセット */
/*H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}

/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}

/* H4 */
.entry-content h4{
border:none;
background:none;
padding: 0;
}

/* H5 */
.entry-content h5{
border:none;
background:none;
padding: 0;
}

/* H6 */
.entry-content h6{
border:none;
background:none;
padding: 0;
}

 

貼り付け場所は、以下です。

キャプチャー、見出しリセット

入力したら、画面下の[ファイルを更新]をクリックします。

キャプチャー、ファイルを更新

 

 

デザイン設定がリセットされた状態の見出しが以下です。

リセットされた見出し

 

これでリセットは完了です。

 

好みの見出しデザインを探す

自分が設定したいデザインをネット上で探します。

今回のご案内は自分でCSSコードを入力するのではなく、ネット上にあるサンプル(コピーして使用することが許可されているもの)を利用する方法です。

検索サイトで、「見出しデザイン」「見出し、CSS」などの語句で検索します。見出しデザインのサンプルサイトが多数みつかります。

 

お勧めのサイト

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選(さるわかさんのサイト)
https://saruwakakun.com/html-css/reference/h-design

お気に入りを見つけたら、
コードをコピーします。
キャプチャー、コードのコピー

 

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld
https://www.nxworld.net/tips/50-css-heading-styling.html

キャプチャー、CSSコピー

 

そのほかにも色々なサイトがあります、探してみてください。

 

コピーしたコードを設定する見出し用に修正する

コピーしたコードを、設定する見出し用に修正します。

修正のポイント
h2〜h6までの順番を決める(h5、h6は省略してもよい)
*選ぶ時にh2(一番目立つ)からだんだんと階層がダウンするイメージで選びましょう

h*の前に「.entry-content」をつける
*記事の見出しのみ設定するためです(サイドバーの見出し等に反映させないため)

 
 
今回は以下のデザインの見出しを選びました。

 

キャンペーン、見出し設定の結果

 

コピーしたサンプルを順にならべて
コードを記載します。

上記の見出しの設定は以下のコードになります。

*ピンク枠のコードはこのままコピーしてお使いいただいてかまいません。(枠内を全てコピーしてください)

/* 見出しのデザイン設定 */
/* H2 */
.entry-content h2{
color: #ffffff; /* 文字色 */
font-size: 2.0em; /* 文字サイズ */
background-color: #3cb371; /* 背景色 */
padding-top:20px; /* 文字と上部の間隔 */
padding-left:10px;/* 文字と左線の間隔 */
padding-bottom:20px;/* 文字と下部の間隔 */
border-left: solid 10px #008000; /* 左側に実線・色*/
}

/* H3 */
.entry-content h3{
color: #000; /* 文字色 */
font-size: 1.5em; /* 文字サイズ */
background-color: #ebebeb;/* 背景色 */
padding: 10px;
border-left: solid 10px #008000; /* 左側に実線・色*/
}

/* H4 */
.entry-content h4{
color: #000; /* 文字色 */
font-size: 1.2em; /* 文字サイズ */
padding: 10px;
border-top: solid 3px #008000;/* 上側に実線・色 */
border-bottom: solid 3px #008000;/* 下側に実線・色*/
}

/* H5 */
.entry-content h5{
color: #000; /* 文字色 */
font-size: 1.0em; /* 文字サイズ */
padding: 10px;
border-bottom: dotted 3px #008000;/* 下側に点線・色*/
}

/* H6 */
.entry-content h6{
color: #000; /* 文字色 */
font-size: 1.0em; /* 文字サイズ */
padding: 5px;
border-left: solid 7px #008000; /* 左側に実線・色*/
}

設定したコードの貼り付け

作成したコードは、リセットコード同様テーマエディターに記載します。

 

WordPressのダッシュボードにて[外観] ≫ [テーマエディター]をクリックします。



テーマエディターが表示されます。
①編集するテーマ:Cocoon Child
②テーマファイル:スタイルシート(sytle.css)
が選ばれていることを確認します。

リセット用のコードを貼り付けた下に貼り付けます。
(CSSのコードは後から記載したものが優先となるので、必ずリセットコードの下に貼り付けます

キャプチャー、見出しデザインのコード貼り付け

画面下の[ファイルを更新]をクリックします。

キャプチャー、ファイルを更新

 

結果の確認

結果を確認してみます。

キャプチャー、Cocoon見出しカスタマイズ

 

色の変更方法

サンプルでお気に入りのデザインを見つけても、色がちょっと自分のブログには合わない、と思った時は変更しましょう。

コードを触るのは、色々危険ですが、慎重にやれば大丈夫です。
色が変えられるだけでも随分自分好みにできると思うので、是非挑戦してください。

 

色コードを調べる

まず、色を設定するためにはHTMLで使われる色のコードを設定する必要があります。色のコードを決めるには以下のようなサイトを利用すると便利です。

WEB色見本 原色大辞典 – HTMLカラーコード

WEB色見本 原色大辞典
https://www.colordic.org/

キャプチャー、カラーコード見本

 

HTML Color Codes

HTMLカラーコード
https://html-color-codes.info/japanese/

以下の2種類の画面「カラーチャート」「カラーピッカー」から色を選びます。

 

キャプチャー、カラーチャート

①チャーの一覧から気に入った色をクリックします
②下のカラーコードの欄にコードが表示されます
③コードをコピーします。

 

キャプチャー、カラーピッカー

①色相を選びます
②好きな色を選びます
③コードをコピーします。

 

cssコードで色コード部分を変更する

では、選んだ色に変更する方法です。

色コードの変更方法の説明です。
以下のコードはCSSのコードです、色を変える部分を解説します。
*コピペしたコードによっては記載されている順番がちがうかもしれません、どの部分かよくわからなければ一度設定してみて色が変わった部分を確認してみてください。

変更前
/ * H2 * /
.entry-content h2{
color: #ffffff; / * 文字色 * / 文字の色です
font-size: 2.0em; / * 文字サイズ * /
background-color: #3cb371; / * 背景色 * / 背景の色です
padding-top:20px; / * 文字と上部の間隔 * /
padding-left:10px;/ * 文字と左線の間隔 * /
padding-bottom:20px;/ * 文字と下部の間隔 * /
border-left: solid 10px #008000; / * 左側に実線・色*/左端の帯の色です
}

キャプチャー、変更前の見出し

上記の赤いコードをコピーしたコードで入れ替えます。
変更後
/ * H2 * /
.entry-content h2{
color: #1C1C1C; / * 文字色 * /
font-size: 2.0em; / * 文字サイズ * /
background-color: #A9D0F5; / * 背景色 * / 背景の色です
padding-top:20px; / * 文字と上部の間隔 * /
padding-left:10px;/ * 文字と左線の間隔 * /
padding-bottom:20px;/ * 文字と下部の間隔 * /
border-left: solid 10px #A9D0F5 ; / * 左側に実線・色*/左端の帯の色です
}
キャプチャー、変更後の見出し
 

同様にH3~H6までを変更してみます。

*ピンク枠のコードはこのままコピーしてお使いいただいてかまいません。(枠内を全てコピーしてください)

/* 見出しのデザイン設定 */
/* H2 */
.entry-content h2{
color: #1C1C1C; /*文字色*/
font-size: 2.0em; /*文字サイズ*/
background-color: #A9D0F5; /*背景色*/
padding-top:20px; /*文字と上部の間隔*/
padding-left:10px;/*文字と左線の間隔*/
padding-bottom:20px;/*文字と下部の間隔*/
border-left: solid 10px #0431B4; /*左側に実線・色*/
}

/* H3 */
.entry-content h3{
color: #000; /* 文字色 */
font-size: 1.5em; /* 文字サイズ */
background-color: #ebebeb;/* 背景色 */
padding: 10px;
border-left: solid 10px #0431B4; /* 左側に実線・色*/
}

/* H4 */
.entry-content h4{
color: #000; /* 文字色 */
font-size: 1.2em; /* 文字サイズ */
padding: 10px;
border-top: solid 3px #0431B4;/* 上側に実線・色 */
border-bottom: solid 3px #0431B4;/* 下側に実線・色*/
}

/* H5 */
.entry-content h5{
color: #000; /* 文字色 */
font-size: 1.0em; /* 文字サイズ */
padding: 10px;
border-bottom: dotted 3px #0431B4;/* 下側に点線・色*/
}

/* H6 */
.entry-content h6{
color: #000; /* 文字色 */
font-size: 1.0em; /* 文字サイズ */
padding: 5px;
border-left: solid 7px #0431B4; /* 左側に実線・色*/
}

色を変更後の見出し設定です

キャプチャー、変更後の見出し設定

 

どうですか、かなり印象がちがいますね。
コード内を触るのはちょっと緊張しますが、恐れずチャレンジしてください。

 

よくあるエラーの例(CSSコードの不具合)と対処

よくありがちな、エラーと対処方法を上げてみました。
コードを張り付けたけど、反映されない場合は確認してみてください。

 
変更前は必ずバックアップを!

コードを変更する前に、現状のコードは必ずコピーを取って保存しておきましょう。
もし、変更して設定がくずれたら、悪あがきをせずに保存しているコピーを使って元にもどして、最初からやり直しするほうが無難です(o^―^o)

 

「;」「{」忘れ

CSSのコードはすべて必要です、「;」「{」がないと、それ以降の設定がすべて反映されなくなります。

キャプチャー、{忘れの表示

 

余分なスペースが入っている

全角や、半角のスペース(空白)が入ることでコードが認識されなくなることがあります。

キャプチャー、半角スペース

キャプチャー、半角スペース

 

エラーをみつけるポイント

cssなどのコードは通常、要素によって色分けされて表示されていることが多いです(テーマ等によって異なる場合があります)。すべてのコードが同じ色になってしまっているときは、何らかの原因でコードが正常に認識されていません。原因をさがしましょう(色分けされなくなった地点が怪しいです)

 

cssコードのちょっと知識

補足で、cssコードのちょっと知識です。
色コード以外の部分で思うような表示にならないときに確認しみてください。

設定内容の基本です

図、CSS設定の基本

padding:文字と枠線との間隔を指定します
 ・padding-top(文字の上部)
 ・padding-left(文字の左部)
 ・padding-right(文字の右部)
 ・padding-bottom(文字の下部)

border:線の形状や太さ、色などを指定します
 ・border-top(文字の上部)
 ・border-left(文字の左部)
 ・border-right(文字の右部)
 ・border-bottom(文字の下部)

線の設定は以下のように、一度に記載する場合が多いです。

border-left: solid 7px #0431B4; /* 左側に実線太さ*/

線を引く箇所
border-○○:○○部分が線を引く箇所を指定します
 *-○○が記載されていない場合は、上下左右全てに線が引かれます

線の種類
・solid:実線
・dotted:点線
・dashed:破線
・double:二重線
*このほかにもまだいろいろな種類の線があります。

線の太さ
線の太さは1px〜3pxとピクセルで指定します。

 

最後に

WordPressのデザインカスタマイズを行おうと思うと、「css」の変更は免れません。テーマやスキンで設定している裏では「css」の書き換えが実施されています。

難しそうで敬遠されがちですが、恐れずにできるところからすこしづつ取り組んでみるこをお勧めします。

CSSを使いこなし、「あなたらしさ」を表現したブログ構築を楽しんでください。

CSSを勉強するのにお勧めのサイト

初心者向けCSS(スタイルシート)入門:基本的な書き方を総まとめ!
↓↓↓↓↓(さるわかさんのサイト)
https://saruwakakun.com/html-css/basic/css

 

↓↓↓↓↓↓↓
Cocoonのまとめサイト

りんごからのお知らせ

こんにちは、Ringoです。岡山県真庭市というところで、非常勤のデザイン講師をしながら、ブログ&アフィエイトビジネスに奮闘中です。

このブログと連携して「ゆとりのシニアライフを実現させる」をテーマにメルマガを配信、シニア&初心者向けにネットビジネスの進み方をお伝えしています。
経済的にも心にも「ゆとり」をもたらす収入をゲットしませんか!
イラスト、葉っぱ付きりんごを持ったおじさんとおばさん ブログを作ったけどアクセスが無い!、アフィリエイトの成果が出ない!
そんなあなたは必見ですよ
SNSやネット活用の実践講座を交えた実りいっぱいの無料メルマガです。

お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ノ゙
↓↓↓↓↓↓↓↓↓↓ バナー、りんごメルマガ登録用 *詳細ページが表示されます、すぐにメルマガ申し込みはされません

よろしければ、この記事やブログに関する 感想・聞いてみたいこと・要望などなどお聞かせください。内容と関係ない雑談も大歓迎です(^^)
↓↓↓↓↓↓↓お気軽にo(^-^)o♪
yoko_takano@appli.redまたは お問合せ