詳しいプロフィールはこちら
記事の書き方

ツイート埋め込みをたった5秒で中央揃えにする方法

  /

ツイッターには、記事にわかりやすくツイートを表示する『ツイート埋め込み』という機能があります。

＞＞＞ツイート埋め込みのやり方はこちら（外部リンク）

このツイート埋め込み、実は初期設定のままだと、パソコンでみるとツイートが左寄り（揃え）になっています。（スマホでは問題ありません）

このままだと少し見た目がよくないですよね。

 

そこで、『簡単』かつ『すぐ』できる、埋め込みツイートの見た目をよくする方法をみつけたのでシェアします。

ブログによくツイートを埋め込むひとには絶対役立つはずです。

 

 

目次
  1. ツイート埋め込みを中央に置くには『コードを変える』必要がある
  2. 爆速でコードを置き換える拡張機能『Search and Replace』
  3. ツイート埋め込みコードを置き換えるには『Input fields only?』にチェックをいれよう
  4. コードの最後の1行を消すと表示が速くなる
  5. 「文章だけではイメージが湧きにくい...」という方へ。作業過程をサクッとGIF画像でみる
  6. おわりに

ツイート埋め込みを中央に置くには『コードを変える』必要がある

WordPressの方なら、『ビジュアルエディタ』から『テキストエディタ』に変えて表示されるコードを書き換えます。

 

「1個1個いちいちコードを書き換えないといけないのか…」と思いますよね。ぼくもそう思って書き換える気がありませんでした。

そこで便利なGoogle Chromeの拡張機能をご紹介します。

 

爆速でコードを置き換える拡張機能『Search and Replace』

『Search and Replace』の詳しい使い方は、以下の記事を参考にしてください

＞＞＞『Search and Replace』の使い方

ほとんどの場合は、『search for』に置き換えたい言葉を入力して、『Replace with』に置き換えたあとの言葉を入力するだけです。

ユーザー辞書登録に登録して時短！！

  • 『ツイート』と入力 → 『class=”twitter-tweet”』を表示
  • 『揃え』と入力 → 『class=”twitter-tweet tw-align-center”』を表示

置き換えるときは『ツイート』と『揃え』を入力するだけで済みます。

 

ツイート埋め込みコードを置き換えるには『Input fields only?』にチェックをいれよう

チェックをいれておかないと、入力している文章が検索に引っかかりません。

どの言葉が置き換えられるのか、太字やマーカーなどの強調表示がないので少し注意が必要です。意図しない文章に置き換えちゃうと、表示が崩れたりするので。

 

コードの最後の1行を消すと表示が速くなる

 

こちらの情報をもとに、『Search and Replace』を使って置き換えます。

『1つ目のコードに1などを加える』というのは、置き換えるときにすべてのコードが消えないようにするセーブのようなものです。

 

加えてから最後の1行をコピペして、置き換えると

 

「文章だけではイメージが湧きにくい…」という方へ。作業過程をサクッとGIF画像でみる

 

おわりに

埋め込みツイートを中央に揃える5ステップまとめ

  1. Google Chromeの拡張機能『Search and Replace』をインストール
  2. search forに『class=”twitter-tweet”』を入力
  3. Replace withに『class=”twitter-tweet tw-align-center”』を入力
  4. 置き換え
  5. 最後の一行のコードは、コピペして空白に置き換え

必要な設定と注意点

  • 『Input fields only?』の項目にチェックをいれる
  • 間違えて違う言葉に置き換えないように要注意（表示が崩れる可能性あり）
  • 『最後の1行』は1つは残さないといけないので、文字を加えるなどして消えないように工夫する

中央に揃えることを統一しだすと、すべて同じようにしたくなるひとにはピッタリの内容だったのではないでしょうか。

ぼくもかなりの神経質なので、個人的な悩まされていたことが解決できて一安心です。

「気になるけど、めんどくさい！」ってひとに届くとうれしいです。

 

ではでは。

 

あわせて読みたい
▶ パソコンでみているページをスマホですぐみる方法