【変更】Cocoonの見出しデザインをカスタマイズしてみました

Cocoonの見出しカスタマイズ Cocoonテーマ

こんにちは。先週インフルエンザにかかってから、一向に体力が回復しない カタアヤ(@_kara_po)です。

突然ですが、Cocoonの見出し部分のデザインを一部変更しました。些細な違いなのですが、自分への覚え書きのために 記事にまとめておこうと思います。

以前のカスタマイズについては、過去記事をご覧頂けると嬉しいです。

Cocoonの見出しデザインをカスタマイズしてみました
カタアヤ こんにちは。低気圧が近づくとなんだか頭が重たい カタアヤ(@_kara_po)です。 今日は、Cocoon...

 

変更のきっかけ

皆さんはサイトやブログの文字色をどのように設定していますか?

私は一応デザイン畑の出身ですが、デザインを学び始めた時に徹底的に叩きこまれたウチのひとつに「K100指定(Webカラーでは#000000)の文字は めちゃくちゃダサイので使うな!」というものがありました。

あえて、の効果を狙うのなら良いのですが、真っ黒・真っ白・真っ赤に真っ青……そういった原色のものは一気に素人臭さが増してしまい、よっぽどのセンスがないと使いこなせない劇薬のような色なのです。あと単純に、見る人の目に優しくありませんよね

ですので、サイトデザインをする時も 微妙にグレーに寄った「#222222」で文字色指定していたのですが、先日「Adobe Creative Cloud(通称CC)」について検索している時に、偶然 下記の記事を目にしました。

ブログの文字色は黒じゃダメ!?大手サイトの文字色比較
あなたのWebサイト/ブログの文字色(テキストカラー・フォントカラー)は何色にしているでしょうか?多くの方が「黒色」とお答えになるのではないでしょうか。もし文字色が“真っ黒”である場合は、色を見なおし

「うんうんわかる。文字色に真っ黒指定はダメなんだよね~」と、若干上から目線で記事を読み始めたのですが、自分の色指定は 大手企業サイト様に比べ、コントラストが強めだったことが発覚…(とほほ)

今より少しでも読みやすいブログを目指して、記事本文の色指定を Google検索結果が表示されるページと同じ「#545454」に変更することにしました。

全体の文字色を修正した弊害

早速Cocoon設定の「全体」ページで 全体の文字色を変更したのですが、CSSで指定していた見出しのラインと文字の色が ちぐはぐしてしまう場所が出てきました。

記事本文の色は「#545454」、見出し部分は目に飛び込んで来やすい様に 以前から指定していた「#222222」に統一することにしました。

フラットデザインへの憧れ

実は以前から「見出し3(以前のデザインを貼っておきます↓)」のデザインが、個人的に気に入っていなくてですね…もにょもにょ。

H3デザイン

サイト全体を フラットデザイン風に統一したい、という密かな野望があるのですが、ずっと この「見出し3」だけ浮いてしまっている気がしていたのです。

これは、サイト開設当時 Cocoonのデフォルトの設定で表示されている ボックスの左右の線の消し方がわからなかった… という、なんとも情けない理由によるデザイン…。

じっくり腰を据えて検索した今なら、左右の線の消し方がわかります!!

なので、更新し始めたら意外に使う機会の多かった「見出し3」を、自分の気に入ったデザインにすることに決めました。

実際に変更したCSSコード

前回同様、私が追加した 見出し変更のCSSコードをまとめておきます。太字部分が 前回からの変更&追加箇所になります

H1デザイン

.article h1 {
border-bottom: 3px solid #222222;/* 線の太さ 線の種類 線の色 */
color: #222222;/*文字色*/
line-height: 1.4;/*行間*/
letter-spacing: 0.2em;/*文字間*/
}

見出し下のラインの色と、文字色をコード指定。
スマホで見ると2行で表示されることも多いので、見出しの行間も数字で指定することにしました。

 

H2デザイン

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

見出し1と同じく、行間を数値指定。大きなデザイン変更は無しです。

 

H3デザイン

.article h3 {
border-left: none; /* 左線不要 */
border-right: none; /* 右線不要 */
border-top: 3px solid #77ccbb; /* 線の太さ 線の種類 線の色 */
border-bottom: 3px solid #77ccbb; /* 線の太さ 線の種類 線の色 */
color: #222222; /* 文字の色 */
line-height: 1.4;/*行間*/
letter-spacing: 0.2em;/*文字間*/
}

「見出し3」はサイトカラーで上下にラインをつけた、今までの「見出し4」に近いデザインになりました。(以前の「見出し4」より上下の線が太いです)
指定:none; で、親テーマのCSS設定をリセットしています

 

H4デザイン

.article h4 {
color: #222222; /*文字の色*/
border-top: none; /* 上線不要 */
border-bottom: 2px dashed #77ccbb; /* 線の太さ 線の種類 線の色 */
line-height: 1.4;/*行間*/
letter-spacing: 0.2em;/*文字間*/
}

「border-color: #77ccbb;」を削除。ラインは「border-bottom: 2px dashed #77ccbb;」で一括指定。以前あった上の線は「border-top: none; 」で削除しています。
「上下ライン」>「下ライン」「見出し3」>「見出し4」の関係が、分かりやすくなったのではないでしょうか。

 

H5デザイン

 

.article h5 {
color: #222222;/*文字の色*/
border-bottom: 1px dashed #545454;/* 線の太さ 線の種類 線の色 */
line-height: 1.4;/*行間*/
letter-spacing: 0.2em;/*文字間*/
}

「見出し4」より点線を細く、色もサイトカラーから地味な文字色に変更して 「見出し4」>「見出し5」の印象になるように調整しました。

 

H6デザイン

.article h6 {
color: #222222;
border-bottom: none;
line-height: 1.4;/*行間*/
letter-spacing: 0.2em;/*文字間*/
}

前回からデザインは全く変更なしです。文字色と行間を新たに指定しています。「見出し6」まで使う記事はそうそう無いと思いますが、文字は装飾無しでシンプルな太字に設定しています。

 

まとめ

以上が、今回の見出しデザインの変更点になります。もし「気に入ったデザインがあったよ~」という方が居たら、コピペで使って頂いてかまいません!

最後に、私が参考にさせて頂いたブログの記事を紹介させて頂きます。

大変ためになりました ありがとうございます!!

Cocoon見出しのカスタマイズ:hタグ装飾が反映しないとき試す(セレクタ)指定方法
WordPressテーマCocoonを使い参考にしたページの通り見出しの変更をしたけど、うまく反映しないのはなぜ??と装飾し始めた頃は思うかもしれません。大半の原因は以下の通り。 hタグの指定(場所)方法が間違っている 優先順位が(親テ

もっと記事を書かなければ…と思っているのですが、Cocoonのカスタマイズに熱中してしまって なかなか記事更新が進みません。

Googleアドセンス申請前に、気になってる部分はとことんカスタマイズしてしまいたいです。

コメント