初心者ブログ

初心者ブログ WordPressのブロックエディターで見出しデザインを簡単に変更する方法を解説

初心者ブログ
この記事は約7分で読めます。
スポンサーリンク

1. Intro

こんにちわ。たひろ夫です。

最近ブログを書いていて思ったことがあります。
見出しがシンプル過ぎると逆に読みにくいし、楽しくない雰囲気の記事に
なるなー見出しを好きなデザインに簡単に変更できたらなーと。

しかし、変更する方法を調べてみてもHTMLやらCSSやらプログラミングぽい
感じのコードがでてきて意味がよくわからない。難しい。

WordPressでブログを始めたばかりの方だとこんな状況になるんじゃないかなー
と思います。

ていう話で、
本日はWordpressのブロックエディターで見出しを変更するする方法について
WordPressを始めたばかりの初心者の方にもわかりやすく
解説していきたいと思います。

見出しのデザインを変更したいけど変更する方法がわからないという方は
是非一読下さい。

2. 見出しのデザインが変更できるしくみ

見出しのデザインを変更するにはCSS言語を追加します。

CSSって?という方は、まずは構成についてを今回の内容に関連する部分だけ
でよいので簡単なイメージを掴みましょう。

イメージとしては、
WebサイトはHTMLという言語でページの構造を作り、
CSSという言語でデザイン(文字の色、大きさ、背景の色、配置 etc.)を
していると思ってもらうと簡単かと思います。
下に簡単な例を示します。

上段のHTMLのみは、
HTMLでWebサイト上に”テストです。”と表示するように指示しています。

下段のHTML+CSSは、
さらにCSSで、pのところの文字色を#ffffffに、背景色を#0071a1に
装飾するように指示しています。
※CSSでは色はコードで指示します。

要するに、見出しのHTMLに好きなデザインのCSSを追加してあげることで
見出しのデザインを変更することができるということです。

3. 見出し用にデザインしたCSSの準備

まずはCSS言語で見出し用にデザインしたコードを作成します。

と言っても、
WordPress始めたばかりの方だったらほとんど作成できるわけありませんね。
こればかりは勉強する必要があります。

なので、ネットから探してきます。
”CSS 見出し” 等のキーワードでネット上を探すとたくさんの見出しデザインが
提供されていますのでそれを活用させていただきましょう。
(もちろんCSS言語を勉強して一からでもOKです。)

お気に入りのデザインのCSSを見つけたらカラーコードの部分だけ変更して
お好みの色に変更する方もいるかと思います。
そんなときにカラーコードを調べるには下のサイトがおすすめです。

■HTML Color codes

HTML Color Codes
Get HTML color codes for your website. Color chart, color picker and color palettes.

4. ブログに見出し用のCSSを追加

お好みのデザインのCSSコードを見つけたらブログに追加します。
手順は以下の通りになります。

①外観 → カスタマイズをクリックします。

②追加CSSをクリックします。(下の方にあります。)

③CSSコードを入力します。
 CSSコードは、タグ名.クラス名 { CSSコード } で記載していきます。

今回は、見出しレベルH2, H3, H4に下の装飾を付けてみます。

■見出しレベルH2の装飾例のCSSコード

h2.test{
 padding: .5em .75em;
 background: -webkit-linear-gradient(top, #69b4e6 0%, #3498db 100%);
 background: linear-gradient(to bottom, #69b4e6 0%, #3498db 100%);
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);

}

■見出しレベルH3の装飾例のCSSコード

h3.test{
 position: relative;
 padding-bottom: .5em;
 border-bottom: 4px solid #ccc;

}
h3.test::after {
 position: absolute;
 bottom: -4px;
 left: 0;
 z-index: 2;
 content: ”;
 width: 20%;
 height: 4px;
 background-color: #DF0101;

}

■見出しレベルH4の装飾例のCSSコード

h4.test{
 position: relative;
 padding: .5em .75em;
 background-color: #F3F781;
 border-radius: 6px;
 box-shadow: 2px 2px 4px rgba(0, 0, 0, .1) inset;

}
h4.test::after {
 position: absolute;
 top: 100%;
 left: 30px;
 content: ”;
 width: 0;
 height: 0;
 border: 10px solid transparent;
 border-top: 15px solid #F3F781;

}

④CSSコードの入力が完了したら公開をクリックします。

⑤×をクリックして閉じたらCSSの追加は完了です。

※Simple Custom CSSというプラグインをインストールされている方は、
 そちらで追加してもOKです。
 (Simple Custom CSSの方が見やすく編集しやすいと思います。)

5. 追加したCSSをブログに反映する方法

①投稿の編集画面を開きブロックの追加をクリックします。

②見出しをクリックします。

③見出しの文字を入力します。

④詳細設定をクリックします。

⑤HTMLとして編集をクリックします。

⑥タグにクラス名を追加します。(下の青字部分。)
 <h2> → <h2 class=”test”>

⑦これで完了です。プレビューするとCSSが反映されています。

⑧見出しレベルH3, H4についても同様に反映します。
 見出しレベルH3, H4の見出しの文字を入力します。

⑨HTMLとして編集からタグにクラス名を追加します。(下の青字部分。)
 <h3> → <h3 class=”test”>
 <h4> → <h4 class=”test”>

⑩これで完了です。プレビューするとCSSが反映されています。

5. 変更した見出しを登録しておく方法

WordPressのブロックエディターでは ”再利用ブロックに登録” という
作成したブロックを記憶してくれる機能があります。
これにデザインを変更した見出しをブロックとして登録しておくことで、
これから記事を書くときに何度でも簡単に呼び出すことができ非常に便利です。

①HTMLとして編集でタグのみにします。(見出しの文字を削除する。)
 <h2 class=”test”></h2>
 <h3 class=”test”></h3>
 <h4 class=”test”></h4>

②詳細設定をクリックします。

③再利用ブロックに追加をクリックします。

④ブロックの名前を付けて保存をクリックします。
 同様にH3、H4についても再利用ブロックに追加 → 名前を付けて保存します。
 これで再利用ブロックの登録は完了です。
 同じ装飾を付けた見出しを使用したいときにかなり便利になります。

⑤まず、ブロックの追加をクリックします。

⑥再利用可能をクリックします。(1番下にあります。)

⑦名前を付けて登録したブロックがあるので、
 使用したいブロックをクリックします。

⑧このままでは見出しの文字を入力できませんので、
 詳細設定をクリックします。

⑨通常のブロックへ変換をクリックします。

⑩すると、通常のブロックに戻るので見出しの文字を入力できます。

⑪プレビューすると、先ほど登録したH2と同じ装飾が付いた新しい見出しが
 できています。

コメント

タイトルとURLをコピーしました