AFFINGER 投稿記事のカスタマイズ

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

2022年1月17日

当サイトのコンテンツには、広告を記載している場合があります。＜景品表示法に基づく記載＞

Twitter横並び

 

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

いい解決方法ないかな？？

 

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

 

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

 

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

 

 

   本記事の内容

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

 

この記事を書いた人

 

＼ 当ブログ使用テーマ ／

  • 誰でも簡単オシャレなデザイン！
  • インフォトップ月間総合第１位！
  • SEO対策と収益UPを標準で搭載！

有名ブロガーに愛用されているSEO最強WordPressテーマ。本ブログも使用中のカスタマイズ性が抜群のテーマです！

AFFINGER6の購入はこちら

 

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

 

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

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

 

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

 

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

 

良くない例

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

 

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

 

以下ツイートの横並び例

 

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

 

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

 

注意ポイント

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

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

 

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

 

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

 

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

 

作業手順

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

 

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

 

レイアウトタグの挿入

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

 

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

 

 

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

 

ポイント

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

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

 

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

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

 

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

 

 

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

 

 

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

 

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

 

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

 

せなお
簡単ですね！

 

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

 

参考記事

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

続きを見る

 

コードを貼り付ける

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

 

 

ポイント

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

 

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

 

 

以上で作業終了です。

 

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

 

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

 

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

 

画像の横並び

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

 

テキストの横並び

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

 

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

 

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

 

まとめ

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

 

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

 

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

 

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

参考トップページのカスタマイズに関する記事かこちら

 

参考アップデートやインストール・プラグインに関する記事はこちら

 

参考投稿記事のカスタマイズも関する記事はこちら

 

参考Gogleアドセンス×AFFINGERのカスタマイズについての記事はこちら

 

 

  • この記事を書いた人

せなお

ブログ月間1.6万PV｜YouTubeチャンネル登録者数1000達成！｜最新のITスキルとAIに関する情報発信｜ガジェットレビュー｜Webデザイン｜ 動画編集スキル｜X, Instagramでも情報発信｜本業の3倍稼ぐことのが目標

-AFFINGER, 投稿記事のカスタマイズ
-,