AFFINGER

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

ツイートを並べて表示

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

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

 

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

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

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

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

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

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

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

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

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

スマホでの閲覧時はツイートが横並びには表示されません。
PC、タブレットでの閲覧時にのみ横並び表示されるように設定してあります。

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

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

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

手順

  1. レイアウトタグを挿入
  2. 埋め込みコードをコピー
  3. コードを貼り付け

 

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

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

レイアウトタグを挿入

タグレイアウトPCとTab(959px以上)左右50%

ここではPCとタブレット表示時のみツイートが横並びに表示されるPCとTabを選択しています。
全サイズを選択すれば、スマホ表示でもツイートを横並びにできますが、表示が小さくなりすぎて見づらくなるのでおすすめしません。

 

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

埋め込みコードをコピー

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

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

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

 

step
3
コードを貼り付け

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

埋め込みコードを貼り付け

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

テキストの削除

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

テキストの削除は「ビジュアル画面」、「テキスト画面」どちらで行っても大丈夫です。
僕の場合は、わかりやすいのでビジュアルで行っています。

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

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

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

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

 

画像を横並び

逆光の写真補正後

クリックで拡大できます

圧縮後の写真

クリックで拡大できます

扇風機TOP

クリックで拡大できます

 

テキストを横並び

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト

 

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

 

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

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

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

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

 

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

Twitter埋め込み
【ブログに他人のTwitterを埋め込む方法】と5つの便利な小技

続きを見る

 

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

AFFINGERの評判
AFFINGERの評判を使用歴1年の僕が解説【見本サイトも紹介】

続きを見る

こちらの記事もよく読まれています

  • この記事を書いた人
大福

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-AFFINGER

© 2020 大福日記