css

wordpressの見出しタイトルをcssデザインで装飾する方法について紹介。

前回記事では見出しと目次を併用の有効性について解説しましたが、今回はその見出しをcssで装飾して、見栄えをアップデートする方法を確認しましょう。

☑wordpress見出しタイトルをcssデザインするには

見出しtitleのcss編集はカスタマイズ設定から

wordpressにおける見出しtitleのCSS編集として、ここではカスタマイズ設定からの編集方法を紹介します。

カスタマイズ設定を行うには、ワードプレスダッシュボードの外観タブより、カスタマイズを選択しましょう。

そしてカスタマイズ画面で追加CSSを選択します。そこへCSSコードを記載することで、見出しタイトルをデザインすることが可能です。

h1やh2などそれぞれで見出し設定可能

まずはcssサンプルコードを見てみましょう。下記がコード記載例です。

h3 { border-bottom: solid 5px black; }

このコードではh3で設定された見出しのみ、このcssデザインが適用されることになります。

お使いのテーマやプラグインにより、h1やh2、h3などがあらかじめ設定されているものもあります。まずはコードを記載し、プレビューを確認しながら適用される見出しを確認しつつ作業を進めていきましょう。

見出しデザインはシンプルなものから取り組もう

cssデザインも凝り出すと底が深いもの。おすすめはまずシンプルなデザインから適用させることです。

いろいろ試していく内に、自身サイトにハマる見出しcssデザインが見つかるようになります。そのためには、まずはシンプルな見出しデザインをいろいろ試していくことが肝要です。

それでは後述する見出しcssデザインで、見出しの編集に取り掛かっていきましょう。

☑見出しcssコードについて(コピペ可能)

見出しタイトルに下線を設定するcss

まず紹介するのは、見出しタイトルに下線を設定するcssです。下記に適用コード、適用例について記載します。

h3 { border-bottom: solid 5px black; }

 このコードについて簡単に説明します。h3は前述したように、h3に適用された見出しについて適用されることを指します。

border-bottomは下線を引くコード。solidで線の太さ、その後のblackは線の色を規定します。

見出しタイトルの背景色を設定するcss

次に紹介するのは見出しタイトルに背景色を設定するcssです。下記にコード記載例、適用例を提示します。

h3 { background: #ff7f50; padding: 0.3em; }

backgroundが背景色を編集するコードになります。ここで#ff7f50はカラーコードとなり、ここでは橙色になります。

paddingは見出し背景色が適用される、文字列との余白を規定します。

見出しタイトルを囲み線を設定するcss

最後に紹介するcssコードは、見出しタイトルの文字列を線分で囲むコードになります。以下にコード記載例、適用例を提示します。

h3 {
 color: #000000;
border: solid 3px #006400;
border-radius: 1.0em;
}

colorは文字列の色を編集します。#以下にカラーコードを設定します。

borderはsolidで囲み線の太さ、#以下で囲み線のカラーコードを設定します。

border-radiusは囲み線で構成される四角形の、丸みのもたせかたを設定します。

☑見出しデザインcss利用の留意点

css適用にはページ表示速度も気にしよう

見出しの見栄えを改善してくれるcss。でもcssの使いすぎにも要注意です。

cssはページの表示速度にも寄与します。余分なcssコードの詰め込みは、ページ表示速度の遅延につながる恐れがあります。

せっかく来訪者の見やすさを意識したcssの適用で、表示速度の遅延で来訪者へのストレスとならないよう注意しましょう。

利用中のテーマ、記事レイアウトと調和を図ろう

cssでの見出しデザインにおいては、利用中のテーマやレイアウトととの調和を図ることも大切です。

たとえばテーマの背景色。見出し背景色をcssで編集する際、テーマの背景色と被ってしまうと、とても見づらくなる可能性があります。

まずはプレビューで確認しつつ、自身利用中のテーマそしてレイアウトと調和のとれた見出しデザインを心掛けましょう。

見出しにはグローバルメニュー編集も有効

ヘッダー見出しにも有効なのが『グローバルナビゲーションメニュー』。

グローバルナビゲーションメニューを作成すれば、ヘッダーでサイトコンテンツを簡単に紹介できます。

そしてグローバルナビメニューで上手くカテゴリー分けをできれば、ユーザーいろんな記事も読んでもらえる可能性も上がります。

そんなグローバルナビゲーションメニューの編集方法についても記事にしてみました。

興味のある方はぜひご覧ください。

ブログSEOに必要なグローバルナビゲーションメニューの作成例とは