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

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

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

【cocoon】CSS初心者さん向け!コピペでOK!見出しの幅と色を変更する方法を解説!

テンプレート(cocoon)

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

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

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

 

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

 

ひろみ
ひろみ

基本の見出しだとシンプルすぎて、ちょっとな・・・・

っと思っていた私、せめて見出しの色だけでも変えたいな・・・

っと思っておりました。

 

CSSのことは、はっきり言って、まったくわからない私ですが、

CSSの基本の形がわかれば、あとは、色や幅を修正するだけになります。

今回は、コピペOKなCSSコードを基本に、色の変更方法や、見出し幅の変更方法を解説していきたいと思います。

 

参考にさせていただいたブログは、下記のブログです。

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

↓↓↓

 

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

手順は4つ

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

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

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

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

読者さん
読者さん

HTMLカラーコード??

 

 

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

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

↓↓↓

 

HTML color codes

 

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

 

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

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

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

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

 

見出しに使いたいカラーを先に調べておいてくださいね。

 

見出しの色と幅を変更する

それでは、見出しの色を幅を変更していきたいと思います。

 

「h1」見出しの色を変更する

「h1」のCSSコードは、下記になります。

.article h1 {
letter-spacing: 0.2em;/*文字間*/
border-bottom: solid 3px black;/*線の種類(実線) 太さ 色*/
}

 

「h1」は、記事のタイトル部分でも表示されます。

文中ではあまり使用することはないのですが、記事タイトルで表示されます。

上記のコードをそのままコピーして、貼り付けますが、タイトル下のラインの色を変更したい場合は、下記のマーカー部分に、希望の色を英語で入力します。

 

上記のコードで、色をピンクにした例が下記になります。

 

「h2」見出しの色を変更する

「h2」のCSSコードは、下記になります。

.article h2 {
letter-spacing: 0.2em;/*文字間*/
color: #fff;/*文字色*/
background: #222222; /*背景色*/
padding: 0.5em 0.75em;/*文字周りの余白*/
border-radius: 0.3em;/*角の丸み*/
}
.article h2:before {margin-left: 0.5em;}

 

「h2」は大見出しで一番使う項目ではないかと思います。

背景色次第で、ブログに雰囲気が変わってくる大事な部分です。

 

ピンクに設定する場合、カラーコードは「#F781F3」で設定した「h2」見出しです。

 

「h3」の見出しの色を変更する

続けて「h3」の見出しの色を変更していきたいと思います。

「h3」の見出しは、左側部分に付箋のような色が設定してあります。

この左側部分の色を変更していきます。

 

CSSコードは下記になります。

.article h3 {
letter-spacing: 0.2em;/*文字間*/
border-left: solid 10px #77ccbb;/*左カラー*/
}

 

「h3」は「h2」見出しと同様で、よく使う見出しだと思います。

「h2」と同じ色か、同系色の色がいいかと思います。

 

カラー「#F781F3」に設定した「h3」はこちらになります。

 

 

「h4」見出しの色を変更する

続けて「h4」の見出しの色を変更していきたいと思います。

「h4」の見出しは、下線の色の設定になります。

この上下線部分の色を変更していきます。

 

CSSコードは下記になります。

.article h4 {
letter-spacing: 0.2em;/*文字間*/
border-color: #77ccbb;
}

 

変更する部分は、下図の通りです。

 

カラー「#F781F3」に設定した「h4」はこちらになります。

 

「h5」見出しの色を変更する

続けて「h5」の見出しの色を変更していきたいと思います。

「h5」の見出しは、下線の色の設定になります。

下記のCSSコードにすると、点線になります。

この下線部分の色を変更していきます。

 

点線のCSSコードはこちらになります。

.article h5 {
letter-spacing: 0.2em;/*文字間*/
border-bottom: dashed 2px #77ccbb;
}

 

変更する部分は、下図の通りです。

 

カラー「#F781F3」に設定した「h5」はこちらになります。

 

「h6」見出しの色を変更する

「h6」までくると、目立たせる必要はあまりないので、下線を抜いています。

 

.article h6 {
letter-spacing: 0.2em;/*文字間*/
border-bottom: 0px;
}

 

 

 

cocoonにコピーしたCSSを貼り付けする

それでは、変更したい見出しのCSSを貼り付けしていきたいと思います。

 

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

 

プレビューページの左側に【追加CSS】の部分をクリックします。

 

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

 

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

 

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

 

これで、設定の完了です。

 

まとめ

今回は、cocoonの見出しの色と幅のカスタマイズ方法を解説しました。

手順としては、下記の通りです。

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

 

CSSコードをコピーして、カラーコードの位置さえ間違いがなければ、カスタマイズができます。

自分好みの見出しにカスタマイズしてみてくださいね。

 

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

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

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

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

コメント

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