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

Contents

1. Intro
２. 見出しのデザインが変更できるしくみ
3. 見出し用にデザインしたCSSの準備
4. ブログに見出し用のCSSを追加
5. 追加したCSSをブログに反映する方法
5. 変更した見出しを登録しておく方法

1. Intro

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

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

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

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

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

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

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

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

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

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

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

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

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

Sponsor Link

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

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

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

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

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

■HTML Color codes

Html Color Codes Picker, Hex,RGB,Hsl

Explore HTML color codes with our advanced color picker, palette generator, and real-time charts. Learn HEX, RGB, HSL, a...

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;
}