Kindleストア売れ筋ランキング

コクーンに見出しをカスタマイズするために知っておきたい3つのこと

Cocoon(コクーン)の見出しをカスタマイズするなら「3つだけ」知ってればいいんだよな〜

あっどうも、おおきに!おおもと(@so88qa)です

この記事は、ワードプレス無料テーマCocoon(コクーン)の見出しのカスタマイズで使えるプロバティーを3つだけ紹介する記事です。

ぼくが初めて、CSSで調整したのが「見出し」でした。

記事の中で画像の次に目立つのが「見出し」ブログのイメージを左右する重要な部分です。

おおもとのアイコン画像おおもと

見出しをカスタマイズしただけで、見た目が変わった!

ママのアイコン画像ママ

あら、パパの個性がちゃんとでてるね

Cocoon(コクーン)の見出しは、「シンプル」なのでカスタマイズが簡単なテーマですよね!

『ちょっとCSSにチャレンジしてみようかな〜』と考えている方はこの記事を読んで参考にしていただければ幸いです。

Contents

Cocoon(コクーン)の見出し

Cocoon(コクーン)の見出しはこんな感じ

  • h2はボックスに覆われたスタイル
  • h3は左側に太いラインと上下の細いライン
  • h4は上下の細いライン
  • h5は下の細いライン
  • h6は下にもっと細いライン

あっ、h1は文字が大きい太字(h1はタイトル)なので気にしないでください。

見出しで使うのは、「h2とh3まで」
人によっては、「h4も使うかな?」って感じです。

おおもとのアイコン画像おおもと

h2を書いてh3、h4…頑張って詳しく書いたぞ!

ママのアイコン画像ママ

細かく分けすぎていて、読むのが大変だわ

SEO的にはh2だけで十分なのでh2を中心につかって、補足の意味合いでh3を使うことをおすすめします。

Cocoon(コクーン)の見出しのカスタマイズのコツ

コクーンの見出しカスタマイズ方法は大きく分けて2つ

  1. 元の形を生かしたカスタマイズ
  2. 元の形を無視したカスタマイズ
  1. はデフォルトの見出しを生かして、色を変えたり線を2重にしたりするだけのカスタマイズ。
  2. はデフォルトの形を無視して、自分好みの形に変えてしまうカスタマイズ。

この2つの方法でカスタマイズの入り方が少し変わる。というよりは『2.は一度デフォルトのCSSの使わないところを消す作業』が入ります。

例えば、「h2のボックスを無くして、黒色の下線を入れたい」場合

.h2{
background:none;
border-bottom:solid #000;
}

このようにh2の背景を消すCSSを書く必要があります。

おおもとのアイコン画像おおもと

あ〜〜〜いくらカスタマイズしても、納得できない!!!

むすめのアイコン画像むすめ

いつまで、カスタマイズしてるの?記事を書いたら?

初めてCSSを触る人には難しいと思うので、1.の「デフォルトを生かしたカスタマイズ」をおすすめします。

見出しのカスタマイズで覚えておきたいプロパティー

見出しをカスタマイズするために、覚えておきたいプロパティーは3種類

ママのアイコン画像ママ

あら?少ないのね?

おおもとのアイコン画像おおもと

少なくても、重要な3つだけ解説するよ

  • 背景のプロパティー「background」
  • 線のプロパティー「border」
  • 外枠のプロパティー「box-shadow」

背景のプロパティー「background」

  • background 背景全般
  • background-color 背景色

「background」「background-color」どちらかで、背景色を指定してあげるのが簡単

ぼくはの「コクーンの見出しのカスタマイズ」は、「h2をbackground」「h3をbackground-color」で背景色を指定しています。

/*CSSの記載例*/
.post h2 {
background:black;/*背景を黒く塗りつぶす*/
}

.post h2 {
background-color:blue;/*背景を青く塗りつぶす*/
}

線のプロパティー「border」

  • border 線で囲む
  • border-bottom 下線を引く
  • border-left 左側に線を引く

「border」の後ろに「-」と「top」「bottom」「left」「right」で上下左右に線を引くことができます。さらに

  • solid
  • double
  • dashed

を足してあげるだけで「一本線」「二重線」「点線」に線を変更することができましす。

/*CSSの記載例*/
.post h2 {
border-bottom: solid 1px black;/*黒の一本線を引く*/
}

.post h2 {
border: double 5px blue;/*青の二重線で囲む*/
}

.post h2 {
border: dashed 1px red;/*赤の二重線で囲む*/
}

外枠のプロパティー「box-shadow」

  • box-shadow

box-shadow:右幅(マイナスなら左幅) 下幅(マイナスなら上幅) ぼかし具合 広がり具合 rgbe(○,○,○,透明度)で指定します。

shadow(シャドウ)とあるように、枠線を立体的に見せる影をつけることができる便利なプロバティー

2つの画像の一番外側に「box-shadow」を使っています。影のようにできたり、点線を挟み込んで縫い目を作ったり便利なプロバティーです。

/*CSSの記載例*/
.post h2{
background-color:blue;
box-shadow:0px 0px 4px 2px rgba(117, 117, 117, 0.56);
}/*青色の背景の周辺にグレーの影をつける*/

.post h2 {
background:black;
box-shadow: 0px 0px 0px 5px black;
border: dashed 2px red;
}/*赤色の縫い目をつける*/

まとめ:覚えるプロバティーは3つ

  • 背景のプロバティー「background」
  • 線のプロバティー「border」
  • 外枠のプロバティー「box-shadow」

今回紹介した3点を抑えておくと、元の形を生かしたカスタマイズが簡単になりますね。

ママのアイコン画像ママ

思ったより簡単だったね

ママのアイコン画像ママ

そうね、これなら私にもできそうだわ

おおもとのアイコン画像おおもと

万が一のためにちゃんとバックアップはとってね

最後に、当ブログのh2・h3のCSSをご紹介します。

/*メインカラムの見出し*/
.post h2 {
background:#a9eee6;
box-shadow: 0px 0px 0px 5px #a9eee6;
border: dashed 2px #f8acac;
padding: 0.7em 1em;
color: #545454;
margin-bottom:2em
}

.post h3 {
background-color:#fff;
border-color:#a9eee6;
border-left: solid 8px #f8acac;
color: #545454;
margin-bottom:2em
}
/*サイドバーの見出し*/
.sidebar h3 {
text-align:center;
background:#a9eee6;
box-shadow: 0px 0px 0px 5px #a9eee6;
border: dashed 2px #f8acac;
padding: 0.4em 0.7em;
color: #545454;
margin-bottom:2em
}

今回の記事は以上になります。

この記事を書いた人

・面白いネタ
・ためになるネタ
・時事ネタ
・しょうもないネタ
を日々更新していきます!
誤字脱字が多いかもしれませんが、愛嬌と言うことで暖かく見守ってください。

ブログを楽しむテーマ「SWELL」

当ブログで使用している有料テーマ「SWELL」はブログを楽しく書く事を思い出させてくれるテーマ

  • 簡単におしゃれな文章が作れる
  • マウスだけでおしゃれなブログを作れる
  • テーマ製作者に事を気軽に聞ける環境
  • 簡単に収益化ができる仕組みを搭載

楽しく文章を書く事以外にもワクワクさせてくれる機能がアナタを待っています!

SWELLは初心者〜上級者まですべての人にオススメのテーマ

今のマンネリ化した環境から脱出したい人はSWELLを使ってください!

ブログが書きたくて書きたくてたまらない!!!!!

SWELLはそんな思いにさせてくれます。

おおもとのアイコン画像おおもと

SWELLのおかげで毎日記事が書けています♪

SWELLに興味がある人は公式サイトをチェックしてください。

\ SWELL公式サイトをチェック /

コメント

コメントする

Contents
閉じる