WordPressで見出しを装飾する方法

Written by Joe
見出し

←おそらくオレンジにデコレーションされています。

されてなければ、ctrl+F5キーを押して再読み込みしてみてください。

さて、僕は、他の方のブログを見ていて見出しがきれい、飾られていることに気づきました。思えば僕は、見出しなんてろくに使ったこと無かったです。
で、自分のサイトの見出しもデコレーションしたくなりました。誰かが見出しデコレーションプラグインくらい作っているだろうと探してみたがそれらしきものはない。

簡単に手順を紹介

どうやっているんだろう?
どうやら、テーマ用CSSファイルを編集して、やるようだ。僕がカスタマイズした方法を適当に紹介しよう。

  1. WP 見出し カスタマイズ とでも検索して、気に入ったCSSのコードを見つけて自分の好みの色などにアレンジする
  2. 「外観」→「テーマ編集」→右の列の下の方の「スタイルシート(style.css)」をくりっく。
  3. 投稿フォーマットで、たとえば見出し3で記述する語に飾りをつけたいなら、ページ内検索とかで「h3」とでも検索。
  4. h2, .h2 {
    font-size: 1.05rem;
    line-height: 1.2rem;
    }
    みたいな記述を探す。テーマによって若干違う。
  5. ここに、先ほどカスタマイズしたコードで書き換える。このブログだと
    h2, .h2 {
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 18px;
    border-left:7px double #FFA500;
    border-bottom:1px dashed #FFA500;
    padding:.6em .8em
    }
    になる。
  6. 変更を保存

注意

僕のテーマはシンプルを売りにしてる?のかな?と予想。そのため、見出しも本文もカスタマイズなしに設定されてしまっていた。このおかげでちょっとなやんだ。その魔のコードの例がこちら

  • h1, .h1,
    h2, .h2,
    h3, .h3,
    h4, .h4,
    h5, .h5,
    h6, .h6 {
    text-decoration: none;
    }

「全てのフォーマットで装飾を施しません」

^^

まぁ良い。わかりやすいとこに書いてあってよかった(当然

分からない事がある?質問しよう!