見出しのサンプルとカスタマイズコードです。見やすいサイトは見出しが整っていて、ストレス無く読み進める事ができますよね。
当サイトで使っている見出しのカスタマイズコードを紹介しますが、特にオシャレなデザインでも無いので、カスタマイズするきっかけになってくれたら嬉しいです。
見出しを使い分ける
WordPressの見出しは「H1〜H6」6つのデザインに分かれており、それぞれの役割は以下のとおりです。
- H1:記事タイトル
- H2:大分類
- H3:中分類
- H4:小分類
- H5:小小分類
- H6:小小小分類
まぁH5とH6は少しふざけてしまいましたが・・イメージできましたでしょうか?
H1はタイトル用なのでさておき、ブロックエディターで選べる見出しはH2〜H4まで。H5〜H6はHTMLモードにして編集すれば使うことができます。
H6まで必要になるケースが個人的にはありませんでしたが、逆に見出しではなく「パッと呼び出せるデザイン」として考えると活用の幅も広がります。
カスタマイズ方法
Cocoonであれば以下のいずれかの場所にコードを追加・編集します。サイト全体にデザインが適用されるので、ページ毎でのカスタマイズは不要です。
- 外観 → カスタマイズ → 追加CSS
- 外観 → テーマエディタ → style.css
※②は子テーマ(Cocoon child)を編集
見出しサンプルとカスタマイズコード
実際に当サイトで使っている見出しを紹介します。雰囲気や要領を掴んでカスタマイズしてみてください。
WordPressの見出しをカスタマイズ
H1はフォントサイズと位置を変えただけのシンプルなカスタマイズです。paddingはさておき、フォントサイズ「23」の数値を大きくしたり小さくしたり・・どの様に変化するか試してみてください。
.article h1 {
font-size: 23pt;
padding: 0.2em;
}
WordPressの見出しをカスタマイズ
H2は背景を濃い目のカラーにして文字を白くしてみました。更に背景の角に丸みを持たせています。
.article h2 {
position: relative;
color: #fff;
background: #454537;
line-height: 2;
padding: 0.3em 0.3em 0.3em 0.5em;
border-radius : 7px;
font-size: 13pt;
font-family: 'Noto Sans JP', sans-serif;
}
.article H2 {
margin-left: -0.7em;
margin-right: -0.7em;
width: auto;
max-width: none;
border-radius: none;
}
WordPressの見出しをカスタマイズ
H3は先頭にラインを付けています。H2よりは控えめにして段落の文章よりは目立たせる、そんなことを意識しました。
article h3 {
padding: 0.4em;
color: #000;
font-size: 12.5pt;
background: #ffffff;
border-left: solid 4px #fb6542;
border-top: none;
border-right: none;
border-bottom: none;
font-family: 'Noto Sans JP', sans-serif;
}
WordPressの見出しをカスタマイズ
先頭にFontAwesomeのアイコンを配置。この見出しではf0c8というシンプルなスクエアのアイコンを使っています。アイコンとフォント、2つの要素を横に並べている訳ですが、意外と位置の調整が難しいです。
PCとスマホでの見え方を確認しながらpaddingの値を調整してみてください。
.article h4 {
position: relative;
padding: 0 0 0 18px;
border-bottom: none;
border-top: none;
color: #454545;
font-size: 10.5pt;
}
.article h4:before {
font-family: FontAwesome;
content: "\f0c8";
position: absolute;
left : 0em;
color: red;
padding-top: 0;
}
見出しのカスタマイズ
シンプルな罫線でテキストを囲みました。フォントの種類も変更してテキストは中央寄せに。
article h5 {
margin: 5px 2%;
border:1px gray solid;
line-height: 3em;
text-align: center;
color: gray;
font-family: 'Baloo Thambi 2', noto sans jp;
font-weight: bold;
}
フォントはGoogleフォントを使っています。かなり多数のフォントが無料で使えますので、導入方法は以下の記事を参考にしてください。
WordPress Cocoon
もはや見出しではなく何かのアクセントとして使えるかなと思って作成しました。
.article h6 {
margin: 10px 10%;
background: #000;
color: red;
font-size: 25px;
font-family: 'Ultra', serif;
text-align: center;
}
※こちらもGoogle Fontsを使っているので、コード内のフォントはそのまま使えない可能性があります
/*色が変わる見出し*/
.midashi3 {
animation: bg-color 5s forwards;
animation-duration: 5s;
color: #e73e92;
font-size: 15pt;
text-align:center;
font-family: 'Baloo Thambi 2', noto sans jp;
font-weight: bold;
}
.midashi3 a{
color: #e73e92;
text-decoration: none;
display: block;
}
@keyframes bg-color {
0% { background-color: #fff; }
30% { background-color: #e2e8e4; }
60% { background-color: #bcb6e5; }
100% { background-color: #393939; }
}
Comment