ひろみのプロフィールはこちら!
ブログ&メルマガで毎月10万円以上の自動収入を目指しませんか?

自己破産経験有でも、アフィリエイトで毎月10万円!
アフィリエイトで自立を果たした「ひろみ」から数量限定特典プレゼント中です!

無料プレゼントを受け取る!

【cocoon】初めてでも大丈夫!コピペで、h2の見出しの色を変更&吹き出し風にカスタマイズする方法

テンプレート(cocoon)

こんにちは。ひろみです。

本日も、自己破産経験者の私でもできた!

月10万円を稼ぐネットビジネスの始め方をお伝えしていきます。

 

今回は、cocoonの「h2」の見出しの色を変更&吹き出し風にカスタマイズする方法を解説していきたいと思います。

cocoonは、シンプルなデザインなので、見出しも超~シンプルです。

これはカスタマイズを前提にシンプルにしてあるのかな・・・っと思っています。

 

そこで、今回の記事は、

  • cocoonの見出しの色を変更したい
  • cocoonのh2を吹き出し風にカスタマイズしたい
  • CSS設定とかよくわからない
  • コピペでペッと変更したい

 

というcocoonをカスタマイズしたいWordpress初心者さんの、あなたにおすすめの記事になります。

 

 

  • ・cssコードはCocoonの子テーマにて、追加修正をするようにしてください。
    ・カスタマイズは、自己責任で行ってください。
    当ページによるデザイン崩れなど、一切の不利益および損害に関し、責任を取ることはできません。

手順は4つ

見出しの色を幅を変更する手順は下記の通りです。

  • カラーコードを確認
  • 変更したい見出しのCSSコードをコピー
  • 変更したいカラーコードを変更
  • CSSコード設置

順番に確認していきます。

 

 

見出しの色を変更する

ここからは、見出しの色を変更する方法を解説していきたいと思います。

ここからは・・・

  • 見出しのデザインは変更しなくてもいいので、色を変更したい
  • 見出しのデザインも変更したし、色もブログに合わせたい

っというあなたにおススメです。

 

HTMLカラーコードを確認する

読者さん
読者さん

HTMLカラーコード??

 

 

WordPress上で、色を表示させるためには、HTMLコードに変更をしなければ、表示をさせることができません。

HTMLカラーコードは、下記のサイトより確認することができます。

↓↓↓

 

HTML color codes

 

下記のようなページに移動します。

 

希望の色のマスをクリックする

単独での色の確認ができます。

HTMLカラーコードが表示されます。

表示されたカラーコードをコピーしておきます。

 

 

 

cocoonの初期設定の見出しを確認する

初期設定では、見出しは上図のようになっています。

悪くはないですが、シンプルすぎますよね。

 

 

カスタマイズした見出しを確認する

今回、CSSのカスタマイズすると、上図のようになります。

色は、ブログに合わせて変更できます。

 

 

見出しをカスタマイズする

それでは、さっそく見出しのカスタマイズを行っていきます。

カスタマイズ方法は、こちらのブログを参考にさせていただきました。

ありがとうございます<(_ _)>

↓↓↓

CSSコードを確認する

 

上図のような見出しにしたい場合は、下図のCSSをコピーしておきます。

.article h1 {
 color: #5c6b80;
 font-weight: 800;
 font-size: 1.5rem;
 line-height: 1.3;
}
.article h2 {
border: none; 
position: relative;
padding: .7em .75em;
margin-bottom: 1.5em;
background-color: #1baa9a;
color: #fff;
border-radius: 6px;
border-bottom: 0px
}
.article h2::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #1baa9a;
border-bottom: 0px
}
.article h3 {
 border: none; 
 padding: 0.7em;/*文字周りの余白*/
 color: #494949;/*文字色*/
 background: #F3FEF1;/*背景色*/
 border-left: solid 10px #69B560;/*左線(実線 太さ 色)*/
}
.article h4,
#comment-area h4,
#related-entries h4{
 border: none; 
 
 position: relative;
 padding-bottom: .5em;
 border-bottom: 4px solid #ccc;
}
.article h4::after {
 position: absolute;
 bottom: -4px;
 left: 0;
 z-index: 2;
 content: '';
 width: 20%;
 height: 4px;
 background-color: #69B560;
}
.article h5 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
border: none; 
padding:0px 30px 10px;
margin-top: 30px !important;
color: #69B560;/*文字色*/
}

.article h5:before {
font-family: FontAwesome;/*アイコンフォント*/
content: "\f138";/*アイコンのユニコード*/
position: absolute;/*絶対配置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #69B560; /*アイコン色*/
}
.article h6{
position: relative;
border-top: solid 2px #80c8d1;
border-bottom: solid 2px #80c8d1;
background: #f4f4f4;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
}

h6:after {/*タブ*/
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\f0a7\ Check';
background: #80c8d1;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
  }

 

上図のコードをコピーしたら、Wordpressの設定に移ります。

 

「h2」の見出しの色を変える

代表して、「h2」見出しの色の変更方法を解説します。

 

CSSコードの部分の「background-color」の部分を「#」から始まるカラーコードを入れ替えます。

「bordertop」の部分を「background-color」に合わせると、いい感じに仕上がります。

 

CSSの追加設定をする

それでは、Wordpress側の設定をしていきます。

 

ダッシュボード左側のメニューから、【外観】⇒【カスタマイズ】をクリックします。

 

右側にブログのプレビューが表示されます。

左側にメニューが表示されますので、【追加CSS】をクリックします。

 

「追加CSS」の部分が開きますので、CSSコードの貼り付け部分が見えるまで、下までスクロールします。

 

空白部分にCSSコードを貼り付けします。

 

CSSコードを貼り付けしたら、【公開】をクリックします。

もし、すでに別のコードが存在する場合は、既存のコードの後に貼り付けをします。

 

これで、WordpressのCSS設定が完了になります。

 

すでに公開しているブログ記事を確認してみると、「h2」で設定した吹き出し風にデザインが変更になっています。

 

↓↓↓

 

まとめ

今回は、「h2」の見出しを吹き出し風に変更して、色を変更する方法を説明いたしました。

変更する場合は、事前にしっかりとバックアップを取ってから、行ってください。

 

見出しの色のみ変更する場合は、下記の記事を参考にしてください。

↓↓↓

 

 

この記事を書いた人
ひろみ

こんにちは。「ひろみ」と申します。

私は、自己破産の経験がある、アラフオーの独身女子です。
一昔前であれば、「負け組」を言われる部類にはいると思います。
しかし、アフィリエイトと出会って、「在宅」のまま「自立」することに成功しています。
今はシェアハウス暮らしで、情報発信をしております。

ひろみをフォローする
ブログ&メルマガで毎月10万円以上の自動収入を目指しませんか?
自己破産経験有でも、アフィリエイトで毎月10万円! アフィリエイトで自立を果たした「ひろみ」から数量限定特典プレゼント中です!
テンプレート(cocoon)
ひろみをフォローする
Get a chance!

コメント

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