＃016　WordPressの見出しをCSSでカスタマイズ

イントロダクション

今日は見出しのデザインをカスタマイズしていくそうです。

ちなみに現在使っている見出しはCocoonのスキンの初期設定のままだったりします。
（デザイン的には下の画像みたいなやつを使用しております。）

例によって例のごとく、別に今のデザインのままで不満は全くありませんが……師匠がやれというのならやりましょう。

だって、抵抗しても無駄だという事は、今までの講習で嫌というほど味わってきましたからねっ！

ふふっ、人は成長する生き物なんですよ。

長い物には巻かれて生きましょう！

WordPressにおける見出しの概念

とりあえず、今まで基本的に『H2』という水素みたいな名称の見出しを1種類しか使ってこなかった訳ですが、普通の人は他に『H3』や『H4』という見出しも併用するものらしいです。

一応、種類としては『H1～H6』までの6種が存在しておりますが、そんなに細かく使用する事にメリットがないとの事で、とりあえずは一番使う事が多い『H2～H4』の3つのデザインを変更してみる事になりました。

尚、この1～6の番号は何の意味があるのかという事ですが、要するに数字が小さい方が優先順位が高いみたいです。

H1の見出しは記事のタイトルに使用され、H2は大見出し、H3はH2内における小見出し、H4はH3内における小見出しといった風に徐々に階層化されていくようなんですね。

って、半月ほどブログをやってきて初めて知りましたわっ！

最初の内はH2だけ使っていれば良いと言われてたので深く考えずに使ってましたが、

この見出しって、そういう仕組みで成り立ってたんですか！？

地味に衝撃の事実が判明しましたが、まあ最初の頃は教えられる事が多すぎてイッパイイッパイでしたからね。その上で更に細かい所まで講習されたら過労死してましたわ。

CSSを追記して見出しのデザインをカスタマイズしよう

って事で、やはりCSSを追記しないとデザイン変更できないみたいです。

今回で3回目なのでボチボチ新鮮味はなくなってきましたが、苦手意識は相変わらずです。

ともあれ、前回みたいにグダグダと文句を垂れていても問題解決しないのは実証済みです。さっさと本題に入る事にしましょう。

まず、最初に現在使用している見出しの無効化をしなければいけないようです。

これをしないとＣＳＳを追記しても反映されないか、もしくは混ざり合って正常に表記されない事があるみたいですね。

やり方については上記のサイト様を参考にさせて頂きました。

※尚、私の環境では追加ＣＳＳの欄に日本語を入力すると公開できなかったので、全部消して追記しています。

で、肝心の追記ＣＳＳですが、上記のサイト様を参考に手を加えたり、そのまんま使わせて頂いております。

基本的には当ブログに合うように色を青系に変更等させてもらいました。

と、いう事で早速お披露目していきましょう。

まずはＨ4です。
多分あんまり使わないような気がするので、シンプルな感じにしてみました。

次はＨ3です。
参考サイト様のサンプルをそのまんま使わせて頂いております。

最後は一番使用頻度が高いＨ2です。
師匠に尋ねながら、参考サイト様のサンプルを複合して作りました。
地味に1時間かかっています。

※追記。↓新しい見出しの記事はこちらとなります。

今回使用したＣＳＳ

バックアップ的に、一応今回改修したCSSの方を記載しておきます。
前半が今までの見出しを無効化するもので、後半が新しいＨ2～Ｈ4の見出しですね。

.article h2,
.article h3,
.article h4,
.article h5,
.article h6
{
padding: 0;
margin: 0;
background:none;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}

.article h2 {
position: relative;
color: white;
background: -webkit-linear-gradient(to right, rgb(33, 150, 243), transparent);
background: linear-gradient(to right, rgb(33, 150, 243), transparent);
color: white;
 line-height: 1.4;
padding: 1em 1em 1em 1.8em;
border-radius: 12px 12px 12px 12px;
}

.article h2:before {
font-family: FontAwesome;
content: “\f14a”;
 font-weight: 900;
position: absolute;
left : 0.5em;
}

.article h3 {
position: relative;
background: #eff4ff;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;
}

.article h3:before {
font-family: FontAwesome;
content: “\f041”;
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #81a1e4;
font-weight: 900;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px #4967b4;
}

.article h4 {
position: relative;
padding: 0.25em 0;
}
.article h4:after {
content: “”;
display: block;
height: 4px;
background: -webkit-linear-gradient(to right, rgb(33, 150, 243), transparent);
background: linear-gradient(to right, rgb(33, 150, 243), transparent);
}

今回の経費＆記事作成時間

今日はCSSの書き換えが地味に難航しました。

ちゃんと追記したのに反映されなかったり、エラーが出たり。

師匠が居なかったら投げ出してましたわっ！

と、いう事で精神的に疲れましたので今回はここまで。

累計出費＆記事作成時間を発表して終わりにしましょう。

最後まで読んでくださった方はありがとうございました。

この投稿をInstagramで見る

神音の社(@shionnoyashiro)がシェアした投稿

※フォーマット統一用のリライト作業済みの記事です。