はじめまして。0→1の順で読んでねSTART

ブログ記事を見やすく装飾する方法でファン倍増【ポイント3つ】

「ブログ記事を見やすく装飾する方法がわからない‥‥」

WordPressにはさまざまな装飾機能があるので、どの機能を使ったらいいのか迷ってしまいますよね。

そこで今回は、以下の内容をわかりやすく解説します。

この記事でわかること

\ 見たい内容をTap・Click!! /

装飾の方法だけでなく、装飾で意識するべきポイントをマスターすれば、記事の見やすさが倍増します。

見やすさを意識した装飾で、読者を集めてアクセス数の伸び悩みを解消しましょう!

ぼんちゃん

ポイントを押さえれば難しくありません

今回は、当サイトで使用しているWordPressテーマ「SWELL」を例に解説しています。

この記事を書いた人

ぼんちゃん(妻)
  • 夫婦ブロガー / Webライター
  • 2021年1月副業にブログを開設し、2022年1月フリーに
  • 物事をコツコツやるのが得意
  • にほんブログ村「ブログ村建国18周年記念イベント」入賞

\ 当サイトのWordPressテーマ /

もくじ

ブログ記事の装飾で意識するべきポイント3つ

ブログの装飾方法を知る前に、装飾で意識するべきポイントを押さえましょう。

装飾の方法をマスターしても、ポイントを押さえなければ見やすい記事に仕上げることはできません。

ぼんちゃん

「強い装備はあるが、装備の活用方法を知らない」のと同じです

ここで押さえておくべき装飾のポイントは、次の3つです。

❶シンプルにする

ブログ記事の装飾は、できるかぎりシンプルにしましょう。

装飾でごちゃごちゃした印象を与えてしまうと、読者が離脱する原因となります。

ブログ記事を装飾するときは、シンプルに仕上げることを心がけましょう

装飾でごちゃつき感を出してしまうと、読者が離脱する原因となります

特にマーカーや太文字を使う際は、重要な部分だけに絞って使うのがコツです。

上記のNG例では、マーカーや太文字を多用しています。

ぼんちゃん

どこが重要なのかがわからず「見づらい」と感じるでしょう

ブログ記事を装飾するときは、シンプルに仕上げることを心がけましょう。

装飾でごちゃつき感を出してしまうと、読者が離脱する原因となります。

特にマーカーや太文字を使う際は、重要な部分だけに絞って使うのがコツです。

上記のように、重要な部分に絞ってマーカーや太文字を使っただけで、シンプルな印象に激変します。

マーカーはひとつの見出しにつき1〜2個にしておくと、シンプルな印象をキープできるでしょう。

❷統一感を出す

装飾する際は、色合いや文字サイズを統一して見やすくすることが必要不可欠です。

ブログ装飾は、色合いや文字サイズを統一することで見やすくなります。

色合いや文字サイズにばらつきがあると、読者は違和感を感じてしまうかもしれません

色をサイトカラーに合わせ、文字サイズを一定にするだけでも、スッキリした印象の記事になりますよ

上記のNG例では、複数の色を使用している上、文字サイズにばらつきがあります。

ぼんちゃん

読んでいて「見づらい」とストレスを感じるのではないでしょうか

ブログ装飾は、色合いや文字サイズを統一することで見やすくなります。

色合いや文字サイズにばらつきがあると、読者は違和感を感じてしまうかもしれません。

色をサイトカラーに合わせ、文字サイズを一定にするだけでも、スッキリした印象の記事になりますよ。

上記のように、複数の色を使わず文字サイズを統一すれば、記事の読みやすさが向上します。

カラーは2〜3色に限定する、文字サイズは一定にすることがおすすめです。

❸余白をつくる

文章がぎっしり詰まった文章は、インプットに向いていません。

そのため、装飾を使った「余白作り」を意識しましょう。

ブログでよく使われる装飾機能は、「リスト」「ボックス」「吹き出し」です。

また、文章を強調したいときには「マーカー」や「太文字」を使います。

画像を挿入したり、Twitterを埋め込んだりすることも可能です。

上記のNG例は文章が続き、読者が読み飽きてしまう可能性が高まります。

ぼんちゃん

文章ばかりだと、インプットするのに疲れてしまいますよね‥‥

ブログでよく使われる装飾機能は、次の3つです。

  • リスト
  • ボックス
  • 吹き出し

また、文章を強調したいときには「マーカー」や「太文字」を使います。

画像を挿入したり、Twitterを埋め込んだりすることも可能です。

上記のように、リストを使って箇条書きにするだけで全体に余白ができます。

余白を作れば文章の「圧迫感」をなくせるので、読者のストレス軽減を期待できるでしょう。

ブログ記事で装飾が必要な箇所

ブログ記事で装飾が必要な箇所は、次の3つです。

ここからは、WordPressテーマ「SWELL」を例にあげて、各装飾の設定や使い方について詳しく解説していきます。

ぼんちゃん

ブログ記事の装飾は、慣れてしまえば簡単にできますよ!

ブログ記事の「目次」の装飾

以下のように、目次では記事の内容が一覧表示されます。

記事の目次

目次は「表示・非表示」を選べたり、表示デザインを変えたりすることができます。

ぼんちゃん

目次はユーザーの利便性を上げるため「表示」にしておきましょう

目次を設定・装飾する方法には、以下の2通りがあります。

  1. SWELLの目次機能を使う
  2. プラグインを利用する

❶SWELLの目次機能を使う

SWELLの場合、デフォルトで用意された機能を使って、目次の設定・デザイン変更をすることが可能です。

STEP
WordPressの「外観」→「カスタマイズ」を選択
目次の設定方法
STEP
「投稿・固定ページ」をクリック
目次の設定方法
STEP
「目次」をクリック
目次の設定方法
STEP
「投稿ページに目次を表示」にチェック
目次の表示設定
STEP
「目次タイトル」を入力
目次のタイトル設定
STEP
「目次のデザイン」を決める
目次のデザイン設定

選べるデザインは、全部で4つ。

\ タップして拡大! /

目次デザインの種類
STEP
「目次のリストタグ」を選ぶ
目次のリストタグ設定

選べるリストタグは、全部で2つ。

\ タップして拡大! /

目次のリストタグの種類
STEP
ドット・数字(リストタグ)のカラーを設定
リストタグのカラー設定
STEP
見出しの表示を設定
目次の表示設定

ユーザーの利便性を高めるには、見出しを「h3」まで表示するのがおすすめです。

STEP
「公開」をクリック
公開のクリック
ぼんちゃん

ここまで設定すれば、目次が自動で挿入されます

サイトの雰囲気にあわせて、好きな見た目に変えてみましょう!

❷プラグインを利用する

easy table of contentsのページ
出典:WordPress

目次を設定・装飾するなら、プラグインの「Easy Table of Contents」を使う方法がおすすめです。

Easy Table of Contentsを使えば、以下のような細かい設定もカスタマイズできます。

  • 目次の折りたたみ表示設定
  • 文字サイズ
  • 背景や枠のカラー設定
ぼんちゃん

プラグインを有効化して設定するだけなので簡単です!

Easy Table of Contentsの詳しい利用手順については、以下の記事でくわしく解説しているので、あわせて参考にしてください。

ブログ記事の「見出し」の装飾

記事を見やすくするには、見出しの装飾も欠かせません。

以下の画像は、見出しの有無を比較したものです。

見出しの有無の比較

見出しを装飾しておけば、内容ごとの区切りがわかりやすくなるので、読者の理解も深まるでしょう。

ここからは、SWELLを例にあげて「見出しの装飾方法」を見ていきます

STEP
WordPressの「外観」→「カスタマイズ」を選択
見出し装飾の設定方法
STEP
「投稿・固定ページ」をクリック
見出しの装飾設定
STEP
「コンテンツのデザイン」を選択
見出しの装飾設定
STEP
「見出しのデザイン設定」を設定
見出しデザイン設定
  • 見出しのキーカラー(メインカラー)
  • 見出し2〜4のデザイン

見出し2のデザイン(タップして拡大)

見出し2のデザイン例6つ
見出し2のデザイン例5つ

見出し3のデザイン(タップして拡大)

見出し3のデザイン例

見出し4のデザイン(タップして拡大)

見出し4のデザイン例
STEP
「公開」をクリック
公開のクリック
ぼんちゃん

カラーとデザインを決めるだけなので簡単です!

ちなみに、「見出しの設定方法」や「SEOに強い見出しを付けるコツ」について、以下の記事でくわしく解説しています。

ブログ記事の「本文」の装飾

本文装飾のない記事は、読者に堅苦しい印象を与えてしまうかもしれません。

読者にとって「読みやすい記事」を書くためにも、以下の機能を使って本文を装飾しましょう。

ぼんちゃん

SWELLを例に、各機能の使い方を紹介します

はじめのうちは、装飾に時間をかけ過ぎないように最低限の機能を駆使しましょう。

❶マーカー

重要な文章を目立たせたいときには「マーカー」を使いましょう。

マーカーを使うには、以下の方法で「スタイル」と「カラー」を設定する必要があります。

STEP
「SWELL設定」→「エディター設定」を選択
マーカー設定
STEP
「マーカー」タブをクリック
マーカー設定
STEP
好きな「スタイル」を選ぶ
マーカースタイルの選択
STEP
好きな「カラー」を設定する
マーカーのカラー設定
STEP
「変更を保存」をクリック

以下のように、設定したマーカーは記事投稿画面に表示される「ツールバー」から使えます。

マーカーの使い方

マーカーの多用により、ごちゃつき感が出ないように気をつけましょう。

ぼんちゃん

マーカーで使う色は、多くても2〜3色がGOODです

❷太字

マーカーと同様、重要な部分は「太字」を使って強調できます。

以下の手順を行えば、太字の下に点線をつけることも可能です。

ぼんちゃん

点線をつけない場合、特に必要な設定はありません

STEP
WordPressの「外観」→「カスタマイズ」を選択
太字の設定方法
STEP
「投稿・固定ページ」をクリック
太字の装飾設定
STEP
「コンテンツのデザイン」を選択
太字の装飾設定
STEP
「太字の下に点線をつける」にチェック
太文字の点線設定

太字は、記事投稿画面に表示される「ツールバー」から使えます。

太文字の使い方

マーカーと太字の併用もできるので、必要に応じて使いましょう。

ぼんちゃん

マーカーと太字は、自分なりにルールを決めて使うのがおすすめです

❸リスト

箇条書きでまとめるときは、SWELLの「リスト」機能を使いましょう。

リストを使うには、以下の手順にそってカラーを設定する必要があります

STEP
「SWELL設定」→「エディター設定」を選択
リストのカラー設定
STEP
カラーセットの「リスト設定」を設定
STEP
「変更を保存」をクリック

カラーを設定したら、さっそく本文にリストを挿入してみましょう。

リストの挿入方法は、以下のとおりです。

STEP
記事投稿画面の「+ボタン」をクリック
リストの挿入方法
STEP
「リスト」を選択
リストの挿入方法
STEP
「親のリストブロックを選択」をクリック
リストの挿入方法
STEP
好きなスタイルを選択
リストのスタイル選択

SWELLはリストのデザインが豊富なので、サイトの雰囲気に合わせて装飾しやすいでしょう!

タップして拡大 !!

リストのデザイン例
リストのデザイン例
ぼんちゃん

カスタマイズ性が高く、使いやすさ抜群です!

❹吹き出し

文章ばかりの単調なブログは、読者の離脱率を高めます。

吹き出しを使えば文章の圧迫感をなくせるので、読者のストレスが軽減するでしょう。

ぼんちゃん

吹き出しは感情を表現したり、内容をまとめたりするときに使えます

SWELLで吹き出しを使うには、以下の手順で「カラー設定」と「ふきだしセット登録」を行いましょう。

STEP
「SWELL設定」→「エディター設定」を選択
吹き出しのカラー設定
STEP
「ふきだし」からカラーを設定
吹き出しのカラー設定
STEP
「変更を保存」をクリック
STEP
WordPressの「ふきだし」を選択
吹き出し設定
STEP
必要事項を入力
ふきだしセットの登録
  • ふきだしセットのタイトル:管理用タイトル
  • アイコン画像:吹き出しのアイコン
  • アイコン名:吹き出しの下に表示される名前
  • 各種設定:吹き出しの形状や向き、色
STEP
「登録」をクリック
ふきだしセットの登録

登録した吹き出しは、以下の手順で本文に挿入できます

STEP
記事投稿画面の「+ボタン」をクリック
吹き出しの挿入方法
STEP
「ふきだし」を選択
吹き出しの挿入方法
STEP
「ふきだしセット」から選ぶ
ふきだしセットの選択
STEP
吹き出しの挿入完了

ふきだしセットは複数登録できます。

表情の違うアイコン画像を吹き出しに設定し、場面ごとに使い分けるのもひとつです。

ぼんちゃん

ふきだしセットに登録しておけば、すぐ呼び出せるので便利ですね!

【まとめ】見やすいブログ装飾でファンを増やそう

今回は、ブログ記事の装飾について解説しました。

この記事のまとめ

\ 見たい内容をTap・Click!! /

今回紹介した3つのポイントを意識した装飾により、記事の見やすさは倍増します。

読みやすいブログは読者の離脱を減らせるので、より多くのブログファンを増やせること間違いありません

装飾を終えたら「アイキャッチ画像」や「本文中に入れる画像」を作成し、さらなる読者ファーストの記事を目指しましょう!

ぼんちゃん

画像のある記事は説得力が増すので、SEO評価も上がります!

\ 画像を探したい !! /

この記事が気に入ったら
フォローしてね!

SHARE !
  • URLをコピーしました!
もくじ