ホームページの記事は、文章を掲載するだけでも作成できます。
しかし、文章が長くなると、どこが重要なのか分かりにくくなり、訪問者が途中で読むのをやめてしまうことがあります。
重要な言葉にマーカーを引いたり、大切な案内を枠で囲んだりすることで、記事の内容を読みやすくできます。
今回、文章の装飾に使用するのは、最初にインストールした次の2つのプラグインです。
- RichText Extension
- VK Blocks
それぞれ役割が異なるため、装飾したい内容に合わせて使い分けます。
RichText ExtensionとVK Blocksの違い
簡単に分けると、次のようになります。
| プラグイン | 主な役割 |
|---|---|
| RichText Extension | 文章の一部分を強調する |
| VK Blocks | 文章や案内をまとまりごと装飾する |
例えば、文章の中にある大切な言葉へ色付きのマーカーを引くときは、RichText Extensionを使用します。
注意事項やポイントなど、複数の文章を枠で囲んで目立たせるときは、VK Blocksを使用します。
RichText Extensionとは？
RichText Extensionは、文章の一部分に装飾を付けるためのプラグインです。
文章の中にある重要な言葉や、読者に覚えてもらいたい部分を選択して、色付きのマーカーなどを付けられます。
RichText Extensionでは、マーカーの色、太さ、透明度などを設定できます。
RichText Extensionの使用例
例えば、次の文章があるとします。
ホームページは、作った後に記事を増やしていくことが重要です。
この中の、
記事を増やしていくことが重要です
という部分だけに色付きのマーカーを付けます。
文章全体を装飾するのではなく、特に読んでもらいたい部分だけを強調するのがポイントです。
RichText Extensionでマーカーを付ける方法
- WordPressで投稿または固定ページの編集画面を開きます。
- 装飾したい文章を入力します。
- マーカーを付けたい文字をドラッグして選択します。
- 文章の上に表示される編集メニューを確認します。
- RichText Extensionの装飾メニューを選択します。
- 使用したいマーカーを選びます。
- 編集画面で表示を確認します。
プラグインやWordPressのバージョンによっては、ツールバーの「その他」や下向きの矢印をクリックすると、マーカーの項目が表示されます。
マーカーを使うと良い場所
マーカーは、次のような内容に使うと効果的です。
- 記事の結論
- 特に覚えてもらいたい言葉
- 商品やサービスの大きな特徴
- 読者に行動してもらいたい内容
- 間違えやすい部分
- 重要な注意点
- 料金や期間などの重要な条件
例えば、次のような部分です。
お申し込みには事前予約が必要です。
月額料金にはサーバー代とドメイン代も含まれています。
記事を公開する前に、必ず内容を確認してください。
こうした重要な部分へマーカーを付けると、文章を流し読みしている人にも内容が伝わりやすくなります。
VK Blocksとは？
VK Blocksは、WordPressの編集画面に便利なブロックを追加するプラグインです。
文章を枠で囲んだり、注意事項を目立たせたり、ボタンや吹き出しを設置したりできます。
VK Blocksには、枠線ボックス、アラート、ボタン、吹き出し、FAQなど、記事を見やすくするためのブロックが用意されています。
VK Blocksで使いやすい装飾
初心者の方は、最初に次のような装飾を使うとよいでしょう。
枠線ボックス
文章や案内を枠で囲み、ひとまとまりの情報として見せられます。
次のような内容に向いています。
- 重要なポイント
- 手順のまとめ
- 商品やサービスの特徴
- 料金に含まれる内容
- 読者に覚えてもらいたいこと
アラート
注意事項や間違えやすい点を、目立つ形で表示できます。
次のような内容に向いています。
- 操作上の注意
- 契約に関する注意
- 入力間違いへの注意
- 保存や公開の押し忘れ
- 元に戻せない操作の説明
ボタン
お問い合わせページや申し込みページなどへ移動するリンクを、押しやすいボタンとして表示できます。
次のような案内に使用します。
- お問い合わせはこちら
- 講座の詳細を見る
- お申し込みはこちら
- サービス内容を確認する
- 料金を確認する
吹き出し
会話形式で説明したり、よくある疑問を親しみやすく伝えたりできます。
次のような内容に向いています。
- 初心者が疑問に思うこと
- お客様からよくある質問
- 講師からのアドバイス
- 操作中に注意してほしいこと
VK Blocksで枠を追加する方法
- WordPressで投稿または固定ページの編集画面を開きます。
- 装飾を入れたい場所をクリックします。
- 「＋」ボタンをクリックします。
- ブロックの検索欄を開きます。
- 「VK」または「枠線ボックス」と入力します。
- 使用したいブロックを選択します。
- 枠の中に文章を入力します。
- 右側の設定画面で、色やデザインを調整します。
すでに入力した文章を枠に入れたい場合は、文章をコピーしてから枠線ボックスを追加し、その中へ貼り付ける方法が分かりやすいでしょう。
RichText ExtensionとVK Blocksの使い分け
どちらを使えばよいか迷った場合は、強調する範囲で判断します。
一部分だけを強調したい場合
RichText Extensionを使います。
- 一つの言葉
- 一つの文章
- 金額
- 期間
- 特に重要な結論
文章全体を目立たせたい場合
VK Blocksを使います。
- 複数行の注意事項
- 手順のまとめ
- 料金に含まれる内容
- お問い合わせ案内
- 重要な説明
- よくある質問
一つの文章の中で大切な部分を目立たせるのがRichText Extension、複数の文章をひとまとまりとして見せるのがVK Blocksです。
装飾は使いすぎない
装飾を増やしすぎると、どこが重要なのか分からなくなります。
すべての文章に色や枠を付けるのではなく、特に読んでもらいたい部分だけに使用してください。
装飾するときは、次の点を意識します。
- 色の種類を増やしすぎない
- 同じ意味には同じ色を使う
- 一つの段落すべてにマーカーを付けない
- 枠を連続して並べすぎない
- 本当に重要な部分だけを強調する
- パソコンとスマートフォンの両方で確認する
色の使い方を決めておく
記事によって色の使い方が変わると、ホームページ全体がまとまりにくくなります。
例えば、次のように色の役割を決めておきます。
- 黄色：重要なポイント
- 赤色：注意事項
必ずこの色にする必要はありませんが、ホームページ全体で使い方をそろえることが大切です。
装飾の使用例
記事の中では、次のように使い分けられます。
記事の結論
記事の中で最も大切な一文に、RichText Extensionのマーカーを付けます。
操作上の注意
間違えると問題が起きる内容は、VK Blocksのアラートや枠線ボックスで囲みます。
手順のまとめ
複数の操作をまとめるときは、VK Blocksの枠線ボックスを使います。
お問い合わせへの案内
記事の最後に、VK Blocksのボタンを使ってお問い合わせページへ案内します。
装飾した後に確認すること
装飾が終わったら、プレビューを開いて確認します。
- 強調したい内容が目立っている
- 色が多すぎない
- 文字が読みにくくなっていない
- 枠の中に文章が正しく入っている
- ボタンから正しいページへ移動できる
- スマートフォンでもレイアウトが崩れていない
- 記事全体のデザインに統一感がある
編集画面だけでなく、実際の表示画面でも確認することが大切です。
最後に確認しましょう
- RichText Extensionを有効化した
- VK Blocksを有効化した
- 重要な言葉にマーカーを付けた
- 注意事項やポイントを枠で囲んだ
- 必要に応じてボタンや吹き出しを使用した
- 色を使いすぎていない
- 装飾の使い方を統一した
- プレビューで表示を確認した
- スマートフォンでも確認した
- 最後に「公開」または「更新」をクリックした
RichText Extensionは文章の一部分を強調するとき、VK Blocksは文章や案内をまとまりごと装飾するときに使用します。
2つのプラグインを使い分けることで、ホームページの記事が読みやすくなり、大切な内容を訪問者へ伝えやすくなります。