ツイッターには、記事にわかりやすくツイートを表示する『ツイート埋め込み』という機能があります。
こう考えると、ものすごい人数から見られているのか🧐
『ツイート＝校長先生の話』と考えるなら、どれだけの生徒に話が響いてるのか？ってことでもあるよね😶
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 for』に置き換えたい言葉を入力して、『Replace with』に置き換えたあとの言葉を入力するだけです。
ユーザー辞書登録に登録して時短！！
- 『ツイート』と入力 → 『class=”twitter-tweet”』を表示
- 『揃え』と入力 → 『class=”twitter-tweet tw-align-center”』を表示
置き換えるときは『ツイート』と『揃え』を入力するだけで済みます。
ツイート埋め込みコードを置き換えるには『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画像でみる
おわりに
埋め込みツイートを中央に揃える5ステップまとめ
- Google Chromeの拡張機能『Search and Replace』をインストール
- search forに『class=”twitter-tweet”』を入力
- Replace withに『class=”twitter-tweet tw-align-center”』を入力
- 置き換え
- 最後の一行のコードは、コピペして空白に置き換え
- 『Input fields only?』の項目にチェックをいれる
- 間違えて違う言葉に置き換えないように要注意（表示が崩れる可能性あり）
- 『最後の1行』は1つは残さないといけないので、文字を加えるなどして消えないように工夫する
中央に揃えることを統一しだすと、すべて同じようにしたくなるひとにはピッタリの内容だったのではないでしょうか。
ぼくもかなりの神経質なので、個人的な悩まされていたことが解決できて一安心です。
「気になるけど、めんどくさい！」ってひとに届くとうれしいです。
ではでは。
定価9980円の「発信の教科書」をタダでプレゼントいたします。
無料なのでサクッと受け取って、チャチャッと行動して、ポンッと結果だしちゃってください。
受け取りは下記のボタンからどうぞ。
