WordPressの見出しのカスタマイズ備忘録

イントロダクション

さて、今回は表題にもあるようにWordpressの見出しをカスタマイズしていきます。

今まで使っていた見出しはスマホなんかで見ると非常に見難かったので、もうちょっと視認性が高いものに修正したり、新規で作り直そうと考えています。

いや～、普段は自分のブログをモバイルとかで見ないので気付きませんでしたわ。

ちなみに前回作った見出しの記事は↑こちらとなりますので、良ければ合わせて見ていって下さると嬉しいです。

※尚、カスタマイズをすると全記事の見出しが最新版に変更されるので、これを読んでいる方は既に完成版を目にしているんじゃなかろうかと思いますが、気にしないで下さい。

見出しを視認性が高いものにカスタマイズする

現在、当ブログではH1～H4までの4種類の見出しを使っているんですけど、その中のH2とH3が特にスマホ上で視認性が悪いので、今回はこの2つをカスタマイズしていこうと考えています。

使用したコードと変更方法は次項でまとめて記載しますので、とりあえずは色々と変更して良さそうなやつを模索していきましょう。

では、まずはH2ですね。

う～ん。今使っているH2の見出しは↑こちらなんですが、PC表示でも文字数が多くなると見難くなっちゃいますね。

見出しの形状そのものは気に入ってますので、こちらは文字の色を変えるか背景色を変えるかして対応してみようと思います。

って、事で↑グラデーションの位置を上から下に変更してみました。前よりも視認性が上がったような気がしますけど、まだちょっと見難いですね。

3分後。↑グラデーションを濃くして視認性を更に上げてみました。

スマホでも確認してみましたが、特に問題なさそうなのでこれでH2の見出しは完成という事にしておきましょう。

では、次のH3を改修していきましょう。

今現在使っているのは↑こちらの見出しなんですけど、フォントが小さすぎて非常に使い難かったりします。

と、いう事であんまりゴテゴテしたものじゃなく、↑こんな風にシンプルな感じにしてみました。

ちなみにコードはこちらからお借りしています。

このままでも悪くはありませんが、色合いが当ブログに合ってないので改修しましょう。

そういう訳で5分後。↑さっきの見出しを青系統に改修してみました。

先程のH2の見出しのコードを流用してグラデーションもかけてます。

スマホで確認した所、特に視認性も悪くはなさそうですので、これを正式採用という事にしましょう。初期のH3の見出しよりは使いやすいですしね。

では、次項で具体的なCSSの設定方法と今回使ったコードを記載していきます。

見出しのカスタマイズ方法＆今回のCSSコード

初期の頃の記事だと具体的な見出しのカスタマイズ方法が書いてなかったので、備忘録がてら記載していこうと思います。

見出しのカスタマイズ方法

まず、Wordpressのダッシュボードから『外観』→『カスタマイズ』を選択します。

左側に出現したリストの中から『追加CSS』を選択します。

出現したリストの中身にコードを追加するか、修正して上部の『公開』ボタンを押すと見出しのデザインが更新されます。

今回のCSSコード

.article h1,
.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;
}

ちなみに上部のコードを冒頭部分に入れておかないと、デフォルト状態のH1～H6までの見出しのデザインが無効化されませんので注意が必要です。

.article h2 {
  position: relative;
  color: white;
	background: -webkit-linear-gradient(top, #0099FF, #87cefa);
  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 {
  padding: 0.5em;
  color: #ffffff;
  background: -webkit-linear-gradient(top, #0099FF, #87cefa);
 border-left: solid 5px #9400d3;
}

で、今回変更したH2とH3の見出しのコードがこちらになります。

※尚、私の環境だと日本語とかの全角文字を使うと正常に変更が反映されませんでしたので、半角文字を使った方が良いです。

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

今まではH1とH2の大見出ししか使ってこなかったので、できればこれからはH3以降も使えたら使っていこうと思います。

個人的には、あんまり見出しを多くすると目次を見て読むのがメンドくなって直帰してしまう読者の方が増えそうな気がするんですけど、SEO的には増やした方が良いみたいなんですよね。

まあ、感覚的に私が読者だったら許容できるだろうというレベルまでは増やしてみようと思います。

では、恒例の累計出費＆記事作成時間を発表して今回は終わりにしましょう。

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