ブログの読みやすい文字と画像の貼り方「テーマLuxeritas」

ブログの読みやすい文字と画像の貼り方・Word PressテーマLuxeritas色鉛筆

ブログで記事を書く時の以下7つの設定を説明します。

(※2020年9月現在はテーマを変更しています)

  1. 字体を選ぶ
  2. 文字サイズを決める
  3. 行間を決める
  4. 文字色の変更
  5. 画像の貼り方
  6. 吹き出し機能
  7. 囲み枠を使う

ブログで読みやすい文字と行間

字体(フォントファミリー)

ローマ字「Segoe UI + Helvetica」 と、日本語は「游ゴシック + San Francisco」を設定。

  • 拡大したり、縮小しても見やすい文字にする
  • 文章の内容に会う文字デザインにする
「文字」変更手順

Word Pressダッシュボードから、「Luxeritas カスタマイズ(外観)」をクリック

文字(フォントファミリー)

ローマ字フォント、日本語フォントにそれぞれチェックを入れる

文字サイズ

ブログで読みやすい文字サイズは16〜18px。

文字サイズ設定

Word Pressのダッシュボードから「Luxeritas カスタマイズ(外観)」をクリック

Luxeritasの「文字サイズ」

6行目の「記事全体」を 18px に変更

投稿の行間

「マージン」とは、1段落ごとの隙間のことです。

上マージン1.3em 下マージン1.3emをそれぞれ 1.5 に書き換えます。

「行の高さ」は、その段落の中にある文章の隙間部分です。

ブログの読みやすい文字と画像の貼り方
投稿の行間の設定

Word Pressのダッシュボードから「Luxeritas カスタマイズ(外観)」をクリック

投稿の行間

マージン1.5 、行の高さ1.9( デフォルト)にします。

※「リスト行間」は初期設定のまま。

文字色

黒よりグレーの方がコントラストが抑えられ、目に優しく読みやすい。

文字色の設定

WPダッシュボードから、「Luxeritasカスタマイズ(外観)」を選択

文字色

文字色(Body)

おすすめの#333333(グレー)を入力してから、カスタマイズで微調整してください

画像貼り付け・フリー素材おすすめ

 フリー素材 イラスト・アイコン

 フリー素材 写真

画像の貼り方

エディター画面の左上をクリックして「コンテンツブロック」から「画像」のアイコンを選択する。

ブログの読みやすい文字と画像の貼り方・Word PressテーマLuxeritas

グレーの枠が現れたら、ドラッグするか、メディアライブラリーから選択する。

ブログの読みやすい文字と画像の貼り方・Word PressテーマLuxeritas
画像の貼り方

エディターの左上にある➕をクリックして「コンテンツブロック」を表示

「画像」アイコンをクリック

ダウンロードした画像をここの中へドラッグして貼り付け
または、枠内の「メディアライブラリ」をクリックして、ライブラリーの中の写真を選択

吹き出し・囲み枠

例えば、読者の気持ちや疑問に寄り添ったをつぶやきにしてみると、共感してもらいやすくなります。もしも会話形式にするなら人数は2人、多くても3人がいいと思います。理由は、3人以上の会話だと、スマホで見たときに読みづらいからです。

吹き出し

コンテンツブロックのLuxseritasから、吹き出しアイコンを選択する。

ブログの読みやすい文字と画像の貼り方・Word PressテーマLuxeritas
吹き出し設定

エディターの左上にある➕をクリックして「コンテンツブロック」を表示

スクロールして、一番下の「Luxeritas Blocks」を開く

「吹き出しアイコン」をクリック

画像選択

画面右上にある歯車⚙みたいなアイコンをクリック

吹き出しサイズ、画像サイズ、左右の位置など好みの設定をチェックすればOK!

囲み枠

囲み枠の設定

①”吹き出し”の方法で出た表示をスクロール

「枠線ブロック」や、「トピック」を選択

②画面右上にある歯車⚙みたいなアイコンをクリック

枠の太さや、大きさなど好みの設定をチェックする

まとめ 

  • 文字や文章、画像設定は、「PC」「スマホ」「タブレット」それぞれで表示を確認する
  • 吹き出しには、読者の悩みや疑問を書いて共感することで本文へ誘導する効果がある
  • 囲み枠は本文で強調したいことを読者に伝える効果がある
  • 「見やすさ・読みやすさ」=「読者に伝わる」

以上です。

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