ブログ内のツイートを横並びで表示する方法【AFFINGER5編】

ブログ内に埋め込んだツイートを横並びで表示する方法の紹介です。

コードの書き換えや追加などは一切行わずに、AFFINGER5の機能を利用して行います。

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

小豆

ブログ内に複数のツイートを埋め込んだ時の無駄な余白がすごく気になる。
ツイートを横並びに表示してスッキリ見せることってできないのかな？

AFFINGER5ならブログ内のツイートを簡単に横並びにできる

いきなりですが、まずは２つのツイートをブログ内に埋め込んだ時の表示を見て下さい。

2019年2月にブログを開設して1年3ヶ月で記事数は200記事を突破。

最初は100記事も書くことあるかな？って不安だったけど、まだまだ書きたいことがいっぱい。

続けることでやっぱり人って成長していくんですね。

ブログからの収入も20万を突破したし、継続してよかった。

— 大福＠まったりブロガー (@daifuku_diary) May 28, 2020

グダグダと長い文章は、全然読まれないよね。

文章が長くなり過ぎてしまった時は、以下の方法が便利。

✔️箇条書きを使う
✔️見出しを入れて区切る
✔️文章の途中に画像を入れる

これだけで圧倒的に文章が読まれるようになる。

— 大福＠まったりブロガー (@daifuku_diary) May 31, 2020

小豆

一つ一つのツイート表示が大き過ぎるし、右の余白もかなり気になる。

見た目がスッキリしているとは、お世辞にも言えないですね。

で、ツイートを横並びで表示するとこんな感じ。

小豆

無駄な余白がなくて、見た目もスッキリだ。

AFFINGER5の機能を使えば、ツイートを簡単に横並び表示することができます。

AFFINGER5でツイートを横並び表示する方法

手順はたった3ステップ。

コードの書き換えや追加などの難しい操作は一切ありません。

step
1レイアウトタグを挿入

まずはツイートを埋め込みたい箇所に「レイアウトタグ」を挿入します。

タグ→レイアウト→PCとTab（959px以上）→左右50％

step
2埋め込みコードをコピー

ブログに埋め込みたいツイートの埋め込みコードをコピーします。

埋め込みコードの発行方法については、こちらの記事を参考にしてください。

参考ブログに特定のツイートを埋め込む方法

step
3コードを貼り付け

埋め込みコードの貼り付けは必ずテキスト画面で行います。

このテキストは最後に消して下さい（50%）の下にコピーした埋め込みコードをそれぞれ貼り付けます。

最後に、このテキストは最後に消して下さい（50%）のテキストを削除します。

横並び表示は色んな場面で大活躍

複数のツイートを表示したいときに便利な「横並び表示（レイアウト）機能」ですが、ツイート以外を表示するときにもとても便利です。

いくつかのパターンを紹介します。

大福

PCタブレットでのみ横並び表示されるように設定してあります。
スマホで閲覧する場合は、画面の向きを横にすると横並び表示されるよ。

画像を横並び

クリックで拡大できます

クリックで拡大できます

クリックで拡大できます

テキストを横並び

大福

ここでは左右横並びではなく、3分割のレイアウトを選択してみたよ。

まとめ：埋め込みツイートを上手に活用しよう

埋め込みツイートを活用すれば、記事の説得力を上げることができます。

たとえば僕一人が「○○最高！」と言うよりも、複数の第三者の意見があるほうが真実味が増しますよね。

というわけで、ブログでレビュー記事を書くときなどにはツイートの埋め込みが大活躍です。

ブログ内に埋め込んだツイートのカスタマイズは、こちらの記事でも紹介しています。

AFFINGER6の購入を検討している人には、こちらの記事が参考になるはずです。

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

＼ AFFINGER6にも対応済み ／

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

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

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