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

2022年1月17日

Twitter横並び

 

ブログに埋め込んだツイートが大き過ぎたり、余白が気になる…

いい解決方法ないかな??

 

今回はこんな疑問を解決していきます。

 

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

 

コードの挿入などは行わず、AFFINGERの機能を使って作業しますので、簡単に行うことが可能です。

 

 

   本記事の内容

  • Twitterのツイートを横並びに表示させる方法について
  • ブログの表示レイアウトの編集方法について

 

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

\ AFFINGERのカスタマイズまとめ /

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

 

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

 

自分のブログなどにおいて、ツイートを貼り付ける際に以下の問題が挙げられます。

  • サイズが大きすぎる
  • 余白により、バランスが悪い

 

他にも、ツイートを2つ貼り付ける際に画面いっぱいとり過ぎて、ページの使い方が悪い問題も発生します。

 

具体例として以下のような表示形式です。

 

良くない例

一つ一つのツイートの表示がとても大きく、右の余白もかなり気ってしまいますね…。見た目的にも良いもととは言えないです。

 

こういった問題には、ツイートを横並びで表示してみましょう。

 

以下ツイートの横並び例

 

ツイートを横並びで表示するとこんな感じなります。無駄な余白がなく、見た目もスッキリしている感じですね。

 

AFFINGERの機能を使うことで、簡単にレイアウトを整えることができます。

 

注意ポイント

スマホでの表示の際には、横並びの表示形式はされません。

設定画面上において、PC・タブレットでの表示の時に横並びに表示されます。

 

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

 

されでは、ツイートを横並びに表示させていきましょう。

 

手順はたった3ステップで設定が可能です。コードの書き換えや難しい編集作業は一切ありません。

 

作業手順

  • レイアウトタグの挿入
  • 埋め込みコードをコピーする
  • コードを貼り付ける

 

以上の手順になります。順番に進めていきましょう。

 

レイアウトタグの挿入

投稿画面やツイートを埋め込みたい箇所に「レイアウトタグ」の挿入をしていきます。

 

タグ」→「レイアウト」→「PCとTab(959px以上)」→「左右50%」を選択して、横並びのタブを挿入する。

 

 

以上の操作で、横並びの2列のレイアウトの画面設定が完了です。

 

ポイント

「レイアウト」を「全サイズ」に設定すると同じく2列のレイアウトが可能ですが、スマホでの表示する際にも設定が反映されます。

画面の表示する幅を考えた上で、設定をおこなってください。

 

埋め込みコードをコピーする

埋め込みを行いたいツイートのコードを取得します。

 

Twitterにてコードを取得作業を行いましょう。ツイートのメニューボタンを選択してください。

 

 

ツイートメニューより「コードの埋め込み(Embed Tweet)」を選択し、ツイッター公式ページに移動します。

 

 

ツイートコードを「Copy Code」にてコピーしましょう。

 

以上の作業より、自分がブログに埋め込みたいツイートの埋め込みコードをコピーします。

 

あとは、コピーされたコードをブログに貼り付けるだけに作業になります。以上の作業で自分のサイトに特定のツイートを表示させることができます。

 

簡単ですね!

 

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

 

参考記事

Twitterの埋め込み方
【WordPress】Twitter(ツイート)の埋め込み方について

続きを見る

 

コードを貼り付ける

埋め込みコードの貼り付けは必ず「テキスト画面」にて行ってください。

 

 

ポイント

  • 「このテキストは最後に消して下さい(50%)」の下にコピーした埋め込みコードをそれぞれ貼り付けます。
  • 初めはわかりやすいように「このテキストは最後に消して下さい(50%)」を消さずに作業するのがオススメです。

 

最後に「このテキストは最後に消して下さい(50%)」を消しましょう。

 

 

以上で作業終了です。

 

横並び表示は色んな場面で活用可能

 

複数のツイートを表示したいときに便利な「横並び表示(レイアウト)機能」です。その他にも画像やテキストを表示するときにとても便利なので、ぜひ活用してみましょう。

 

サンプルとして、いくつかのパターンを紹介します。

 

画像の横並び

送信メールテンプレートのメリット

 

テキストの横並び

  • テキスト
  • テキスト
  • テキスト
  • テキスト
  • テキスト
  • テキスト
  • テキスト
  • テキスト
  • テキスト

 

上記のレイアウトは3分割のレイアウトで表示されています。

 

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

 

まとめ

以上、AFFINGERの機能を活用した、ブログ内でツイートを横並び表示する方法でした。

 

埋め込みツイートを活用することで、参考記事の作成なのでもかなり活用できます。

 

また、有名ブロガーや著名人のツイートを埋め込むことで記事自体の説得力を上げることにもつながるので、ぜひ取り入れてみてください。

 

ブログとTwitterなどのSNSを上手く活用して、読者の獲得を目指しましょう!

 

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER
-, ,