WordPressブロックエディタで難しいコードは使わずに「記事を見やすくする方法」STEP1です。今回は「文字の装飾」編です。
「段落・蛍光マーカー・見出し・リスト」ブロックの使い方を図解を使って解説していきます！
そして、ブロックエディタをより簡単に編集するために、今回はVK Blocksという無料プラグインを使っています。WordPress標準のブロック機能をさらに便利に拡張してくれたり、新たにブロックアイテムを追加してくれる無料プラグインです。
VK Blocksの詳細については下記の記事を参考にしてみてくださいね！
💡 VK Blocksでできること一覧と導入方法はコチラ！ブロックエディタを使いやすく便利にしてくれる無料プラグインです✨
それではスタートです！
段落ブロックで文字を装飾してみる
本文の文字を入力するためのブロック「段落ブロック」。まずはツールの役割から解説！
文字の大きさを変えたり、色を変えたりする基本操作です！
1. 段落ブロックを追加
- プラスボタンをクリックでブロックを追加（左上、右どちらのボタンでもOK）
- “文章を入力”のところにカーソルを合わせて直接書いてもOK
2. 段落ブロックのツール役割
- ブロックの役割、スタイルを変換できる
- この部分をクリックして上下にドラッグすると好きな位置にブロックを移動できる
- クリックでブロックを上下に移動できる
- テキスト配置の変更（左寄せ、中央寄せ、右寄せ）
- VK Blocksプラグインの効果→デバイスのサイズによって改行を入れることができる
- テキストを太字に
- テキストをイタリック（斜め）に
- テキストにリンクを付けれる
- その他装飾メニュー一覧がプルダウンで表示される
- ブロックの編集メニュー（削除、複製など）
3. 文字のカスタマイズメニュー
- 【タイポグラフィ】フォントサイズを変更できる
- 【色設定】文字全体の色、文字全体の背景の色を変更できる
- 【蛍光マーカー】文字に好きな色のマーカーを引くことができる
- 【テキストの色】選択した文字の色、選択した文字の背景の色を変更できる
右上の赤枠「ブロック」のタブをクリックすると、下の赤枠タイポグラフィなどのメニュー一覧が表示されます。文字の大きさや色を変更するメニューはここです。
＼タブをクリックすると、カスタマイズメニューがプルダウンで表示される／
まずは上記①〜③が使いこなせるだけでバリエーションの幅が大きく広がります。その他のメニューは細かくデザインをしたい場合に設定するためのメニューですので最初はあまり使わなくてOKです。
４.蛍光マーカーを引いてみる
＼蛍光マーカー基本12色＋カスタムカラーも設定できる／
蛍光マーカー 蛍光マーカー
蛍光マーカー 蛍光マーカー
蛍光マーカー 蛍光マーカー
蛍光マーカー 蛍光マーカー
蛍光マーカー 蛍光マーカー
蛍光マーカー 蛍光マーカー
簡単！説明必要ないかも！
蛍光マーカーを引きたい文字を選択して、
右側のブロック編集メニュー「蛍光マーカー」で色を選択するだけ！
見出しを作ってみる
長い記事の場合に本文を章ごとに区切ってより見やすく構成していきます。そこで大事なのが「見出し」を作ることです。記事が整理されて見やすいですし、SEO対策（検索順位をあげる）にも繋がります☻
見出しタイトルを入れよう
サブテキストを追加することも！
各項目ごとにタイトルをつけてあげるイメージですね！
1. 見出しブロックを追加
- ブロック追加ボタンをクリック
- ブロック検索で「見出し」と入力
- 好きな方の「見出し」ブロックを選ぶ
③の「見出し」ブロックは左側がWordPress標準の見出し、右側はVK Blocksの見出しです。好みで使い分けてもらってOKです！
2. 見出しブロックのカスタマイズメニュー
WordPress標準見出し
＼WordPress標準見出しの場合／
- ブロックの役割を変更できる
- 幅広か全幅を選べる（表示幅を選べる）
- 見出しの重要度を選べる（H1〜H6まで、数字が小さい方が大見出し）※設定大事
- 【スタイル】表示デザインを変更できる
- 【タイポグラフィ】文字の大きさを変更できる
- 【色設定】文字色と背景色を変更できる
- 【蛍光マーカー】好きな色の蛍光マーカーが引ける
WordPress標準見出しポイント
▶︎表示デザイン選択肢が多い！
標準見出しの場合はVK Blocksの拡張機能で表示デザインを画像のように複数から簡単に選ぶことができます。
スタイルを”標準”に設定している場合は、使ってるwordpressテーマのデザインになります。
その場合は、見出しの重要度H1〜H６によってデザインが変化するので、テーマのデザインと画像の中のデザインの複数から好きなものをチョイスできます♪
VK Blocks見出し
＼VK Blocks見出しの場合／
- ブロックの役割を変更できる
- 見出しの重要度を選択できる（H1〜H6、数字が小さい方が大見出し）※設定大事
- 【スタイル設定】標準か装飾なしか選択
- 【余白設定】文字の余白、ブロック全体の余白を設定できる
- 【見出し設定】文字のサイズ、色の変更ができる
- 【Font Awesomeアイコン設定】文字の前後にアイコンを追加、色設定
- 【サブテキスト設定】見出しの補足などをサブテキストを追加できる
- 【蛍光マーカー】好きな色の蛍光マーカーが引ける
VK Blocks見出しポイント
▶︎デザインの細かい設定が簡単！
リストを作ってみる
項目を並べて書きたいとき、順序を書きたいときに「リスト」ブロックは便利です！
＼11種類のアイコンが追加される！／
アイコンの色も変更することができます♪
可愛いアイコン11種類から選択＆色を変えることもできます♪
1. リストブロックを追加
- プラスボタンをクリック
- ブロック検索で「リスト」と入力
- 「リスト」ブロックをクリック
2. リストブロックのカスタマイズメニュー
- ブロックの役割を変更できる
- 箇条書きリストにする
- 番号つきリストにする
- インデント（段落）をつけたり外したりできる
- 【スタイル】リストアイコンを選べる
- 【色設定】文字色、背景色を設定できる
- 【蛍光マーカー】文字に好きな色の蛍光マーカーを引ける
- 【リストアイコンの色】リストアイコンの色を変更できる
記事を見やすくする方法STEP1「ブロックエディタで文字の装飾をしよう」でした！これが使えるだけでもグッと記事の表現バリエーションがUPしますのでぜひ活用してみてくださいね！
最後まで読んでいただきありがとうございます！
▼VK Blocksの機能を使いながら簡単にサイト型ホームページが作れるWordPressテーマ
▼MeBeはConoHa WINGレンタルサーバーを使用しています😇
