WordPress の見出しを変更したい

おっかしいなぁ… Office 365 の技術的なblogを書いていこうと思っているのに、なぜか毎日WordPressばかり触ってる^^;

WordPressのテーマはディレクトリに登録された無料のものを使わせてもらってます。

外国の無料テンプレートはクールなのはうれしいのですが、日本語のサイトだと少し雑然とした感じになります。(アルファベットと画像だけだとそんなことないんだけどなぁ)
特に段落が変わったり、見出しを付けたとしても、のっぺりとした印象はぬぐえません。

てことで、見出し部分をカスタマイズして見ようと思います。

Heading-customize-b

 

見出し3、見出し4とか使ってるんですかね?
テーマによっては使ってるんでしょうけど、まぁだいたい大丈夫だと思うので、ここをカスタマイズしてみます。
実際にカスタマイズして、別のページに問題があったら戻すってことで。

さて、子テーマ作ろうと思ったら…

テーマのカスタマイズといえば、子テーマです。
wordpressの無料ダウンロードできるテーマのスタイルシートを直接カスタマイズしちゃうと、アップデートしたときにカスタマイズが上書きされてなくなっちゃいますからね。

参考:
WordPressテーマTwenty Elevenの見出し(hタグ)スタイルを修正します!

ということで、Wordpressの設定画面を操作していると…
Heading-customize-1

なんですか?このメニューは?

参考:
[WordPress] 出先からでもサクッとCSSを変更出来るJetpackの「CSS編集」が便利

WordPressでSass,Lessが使える!Jetpackでブラウザからコンパイル!

をぉ!これは便利っぽいですね!
子テーマ作らなくて良さそうです。

早速CSS編集メニューから編集してみます。

コピペヤーです。先人の知恵を拝借です
WordPress見出しの使い方とカスタマイズ (ドキドメ!)さんの内容をそのままコピペです。
下線だけつけてみましょう。

.entry-content h3 {
border-left: 5px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;}

恐ろしいです….思い通りに見出しの変更が出来ました(^^)/
Heading-customize-2

見出し4もいろいろ変えて、こんな感じになりました。
Heading-customize-3

Heading-customize-4

うむ、すっごい便利です。
朝の1時間でこれだけで来たら十分でしょ(^^)/