広告 AFFINGER

AFFINGER5【テキストと画像をバランスよく横に並べる】

2021年2月19日

AFFINGER画像

AFFINGER5で、テキストと画像をバランスよく横並びにする方法の紹介です。

記事後半では、さらにこだわりたい・・・・・・人向けのカスタマイズも紹介しています。

 

こんな人のお役に立てる記事です。

小豆
小豆
画像とテキストを横並びで表示させたい。
一度自分でやってみたけど、あまりにも左右のバランスが悪くなってしまい断念。
あと、スマホでの見え方も気に入らなかったんだよなぁ。

AFFINGER5でテキストをと画像をバランスよく横並びにする

まずは、こちらを見て下さい。

AFFINGER5の機能は使わずに、WordPress標準の機能だけでテキストと画像を横並びにしてみました。

バランスの悪い並べて表示

 

テキストと画像のバランスが、めちゃくちゃですね。

小豆
小豆
そうそう。
この見た目が気に入らなくて、横並びにするのを断念したんだ。

で、AFFINGER5の機能を利用して横並びにした場合がこちら。

バランスの良い並べて表示

小豆
小豆
おぉ! こういうのがやりたった!
見た目のバランスがすごく良いね。
さらにスマホでの見え方にも違いが出ているんだ。
大福
大福

 

横並び表示はスマホでの見え方に注意

パソコンでは見栄えの良い「テキストと画像の横並び」表示も、スマホで見た場合は残念な感じに・・。

実際の表示がこちらです。

パソコンでの見え方 スマホでの見え方
パソコンでの表示 スマホでの見え方1

画像はクリックで拡大できます

縦長画面のスマホでの「横並び表示」には、だいぶ無理がありますね。

テキストの改行がやたら多すぎて、文章が読みづらくなってしまいます。

小豆
小豆
うーん。
でもパソコンでは、どうしても横並びにしたいんだよなぁ。

AFFINGER5なら、こんな問題も即解決です。

パソコンでの見え方 スマホでの見え方
パソコンでの表示 スマホでの見え方2

画像はクリックで拡大できます

AFFINGER5なら、「パソコンでの表示」と「スマホでの表示」を別々に設定することが可能です。

これなら、スマホでの見え方を気にすることなく、横並び表示を利用することができますね。

大福
大福
スマホで見たときは、横並び表示が自動的に解除されるんだ。

横並び表示の設定手順

テキストと画像をバランスよく配置するには、AFFINGER5の【レイアウト】機能を使用します。

手順

  1. レイアウトを作成
  2. テキストと画像を挿入
  3. 既存のテキストを削除

 

step
1
レイアウトを作成

レイアウト設定

タグ → レイアウト → PCとTab → 任意のレイアウトを選択

「PCとTab」を選択すると、スマホでは横並びをしない設定にすることができます。

 

step
2
テキストと画像を挿入

コンテンツを挿入

左右それぞれのレイアウト内に、テキストと画像を挿入

 

step
3
既存のテキストを削除

テキストを削除

テキストと画像の挿入が完了したら、「このテキストは最後に消してください」を削除

画像の位置を微調整する方法

画像位置の微調整

小豆
小豆
うーん。
もう少し画像の位置を下にもっていきたいなぁ。

こんな時には、プラグイン【Advanced Editor Tools(旧 TinyMCE Advanced】の利用が便利です。

画像位置を調整

画像の位置を調整済み

 

実際の手順がこちらです。


  • 画像を選択

    画像を選択


  • 画像の挿入/編集をクリック

    画像の編集


  • 余白を入力

    余白を設定

    高度な設定 → 上下余白 を入力


 

ここで入力した「余白」は、スマホ表示にも反映されます。
余白を大きく入れすぎると、スマホで見たときのバランスが不自然になることがあります。

 

まとめ:記事の見やすさを意識しよう

ブログ記事の作成時に最も気を付けたいのは、「記事の見やすさ」。

どんなに良い内容の記事でも「見づらい(読みづらい)記事」は、ユーザーの離脱率を上げてしまいます。

小豆
小豆
ってか、この記事読みづらっ!
別の記事を見ることにしよう。

記事を書いた後は、必ず見やすい記事になっているかを「パソコン」「スマホ」それぞれで確認したいですね。

 

  • 関連記事

 

当ブログ限定AFFINGER6購入特典

AFFINGER購入アイキャッチ
【AFFINGER6購入特典】当ブログ限定オリジナル特典を13個紹介

続きを見る

 

AFFINGER利用者向けオリジナル特典の販売

\ AFFINGER6にも対応済み /

オリジナル特典バナー

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ&役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

  • AFFINGER5利用者向けカスタマイズ集 9選
  • AFFINGER利用者向けカスタマイズ&役立つテクニック 14選

 

2022年1月1日より期間限定で割引販売いたします。
・利用者向けカスタマイズ集 9選:2,980円 → 2,480円
・カスタマイズ&役立つテクニック 14選 4,980円 → 3,980円

 

特典詳細ページへ移動する

Sponsored Links

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴5年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-AFFINGER