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

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

こう考えると、ものすごい人数から見られているのか🧐

『ツイート＝校長先生の話』と考えるなら、どれだけの生徒に話が響いてるのか？ってことでもあるよね😶
https://t.co/P1kHSh9sgt

— riku × 行動力提供ブロガー (@dscrx100love) 2018年1月9日

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

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

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

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

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

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

【埋め込みツイートを中央揃えにする💃🏻】

・埋め込みツイートのコード一行目の『”twitter-tweet”』を『”twitter-tweet tw-align-center”』に変える

パソコンでみると、ツイートが左揃えになっていて違和感があるからこの置き換えは必須！！https://t.co/2axA6QmtxE @ryoheifree

— riku × 行動力提供ブロガー (@dscrx100love) 2018年1月10日

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

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

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

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

「埋め込みツイートをすべて中央揃えにするのはめんどくさい…」

そんなひとにオススメなのが、Google Chromeの拡張機能『Search and Replace』🖊

記事編集画面で
・search forに『class=”twitter-tweet”』
・Replace withに『class=”twitter-tweet tw-align-center”』
を入力して置き換えるだけ！

— riku × 行動力提供ブロガー (@dscrx100love) 2018年1月10日

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

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

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

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

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

置き換えるときの、必要な設定と注意点

・必要な設定
👉🏻『Input fields only?』の項目にチェックをいれる☑

・注意点
👉🏻どのワードが置き換え対象になっているかわからない（事前に⌘+Fで検索をかけて確認しよう）
👉🏻きちんと置き換えられたかわからない（置き換え後に検索をして確認しよう）

— riku × 行動力提供ブロガー (@dscrx100love) 2018年1月10日

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

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

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

意外と知らない人多いけど、ツイートの埋め込みをするとき、下の画像のオレンジの枠のコードは1回だけでおけ。

僕は複数のツイートを埋め込む時は、1個1個消してます。
細かいことだけど、これでちょこっと表示速度の改善につながるよ。 pic.twitter.com/sv5DWKGXq5

— 沖ケイタ@仮想通貨 (@namakemono0309) 2017年11月2日

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

ツイート埋め込みコードの最後の一行は必要ない👀

Google Chromeの拡張機能『Search and Replace』を使うと
・1つ目のコードに『1』などを加える（残すため）
・search forに『<p>〜コード〜</p>』
・Replace withには何も入力しない
の3ステップで置き換え完了😎

慣れると5秒できるよ😇 https://t.co/AHQxHY50uc

— riku × 行動力提供ブロガー (@dscrx100love) 2018年1月10日

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

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

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

おわりに

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

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

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

ではでは。

おすすめ学習サービス「スタディサプリ」

スタディサプリは、効率的に勉強したい学生の悩みをすべて解決してくれるサービスです。

学校が必要ないと思わされるほど高品質な講座が4万本以上あります。

受験勉強で勝ちたいという方は使ってみてください

≫スタディサプリをみてみる