どうも、りょうかん（@ryokan_1123）です。
ブログ歴は５年。アフィリエイトとWEBライティングで生計を立ててます。
当ブログでは、2018年4月よりワードプレスのテーマ「JIN」を使ってきました。
≫ WordPressのテーマを「JIN」に変更しました！メリットとデメリットをまとめておきます。
全体的に大満足なテーマなんですが、１点だけ記事を書くたびに気になっていたことがありまして・・・、それが【埋め込みツイートが左寄り表示されること】です。
スマホで閲覧する際には問題ないのですが、PCで読む際には右側の空白が気になってしまい、どうにか中央表示にしたいなと常々思っていました。（すみません、細かくて）
というわけで、この記事では【ワードプレステーマ「JIN」で埋め込みツイートを中央表示させる方法】を解説していきます。
コピペするだけで完了するので、ぜひ試してみてください。
✔︎ 埋め込みツイートを中央表示させる方法を解説しています
✔︎ スマホでの表示にはわかりやすい変化はありません（PC表示のみ）
✔︎ カスタマイズの［追加 CSS］にコピペするだけの簡単な方法です
ちなみに、この記事で紹介しているカスタマイズ方法は、ワードプレステーマ「JIN」でのみ動作確認をしています。他のテーマで正常に動作する保証はできませんので、ご注意ください。
実装したときの表示例【JINカスタマイズ】
この記事で紹介する方法を実装した実例を載せておきます。「ブログを毎日更新ができるのは「プロ意識」を持ったから【マインド次第】」という記事での表示例です。
カスタマイズ前は下図の通り。ツイートが左寄りに表示されています。
左寄り表示になっている（カスタマイズ前）一方で、今回紹介する方法でカスタマイズした後には下図のように表示されます。
中央表示になっている（カスタマイズ後）見栄えだけの問題なので、どちらが良い悪いという話ではないです。
「JIN」で埋め込みツイートを中央表示させる方法
前置きが長くなっても仕方ないので、サクッと紹介していきます。手順は下記の３つだけ。
① ダッシュボードより ［外観］≫［カスタマイズ］≫［追加 CSS］ と開く
② 後述のCSSコードをそのままコピーして貼り付ける
③ 埋め込みたいツイートのURLを投稿画面にコピペする
順に説明していきます。
① ［外観］≫［カスタマイズ］≫［追加 CSS］ と開く
ダッシュボードから ［外観］≫［カスタマイズ］≫［追加 CSS］ と開いていきましょう。
［カスタマイズ］の下の方にあるので気づきにくいかもしれませんが、［追加 CSS］は覚えておくと便利です。
② 後述のCSSコードをそのままコピーして貼り付ける
［追加 CSS］を開いたら、下記のCSSコードをそのままコピペしてください。これで保存すれば終わりです。
/*埋め込みツイートを中央表示させるCSSコード*/
.twitter-tweet {
margin: 0 auto !important;
}
ちなみに、「Ver1.82」以降にアップデートすると、上記のようにプログラムコードを記載できる『シンタックスハイライター機能』が使えるのでアップデートしてない人は参考にどうぞ。
≫ JINテーマ搭載の「シンタックスハイライター機能」を使う方法
③ 埋め込みたいツイートのURLを投稿画面にコピペする
CSSの変更ができたら、埋め込みたいツイートのURL(リンク)を投稿画面にコピペしてみましょう。しっかり表示されていることを確認すればOKです。
たまに聞かれるんですが、「JIN」の場合はリンクを貼り付けるだけで自動表示してくれるので、下図のように「ツイートをサイトに埋め込む」でコードを取得する必要はありません。
いちいちコードを取得するのも時間の無駄なので、覚えておくと良いかなと。
追記：中央表示に加えて「ぼかし影」を付ける方法
本題からは脱線しますが、中央表示だけじゃなく「ぼかし影」を付ける方法も紹介しておきます。
ツイートの四方に薄い影を付けることができるので試してみてください。
/*埋め込みツイートを中央表示＆ぼかし影を付けるCSSコード*/
.twitter-tweet {
margin: 0 auto !important;
box-shadow: 0 0 5px gray;
border-radius: 6px!important;}補足しておくと、4行目を変更すれば好みのデザインに変更することも可能です。各項目の説明は下記の通りなので我流でアレンジしてみましょう。
box-shadow: (左右の長さ) (上下の長さ) (ぼかし長さ) (色);
特に「色」についてはカラーコードでも設定できるので、オリジナリティを発揮しやすいと思います。（ 僕は #42424230 で設定してます）
まとめ：デザイン以上に「中身」にもこだわろう
「神は細部に宿る」という言葉があるように、ブログ運営においてデザインの細かい部分までカスタマイズする気持ちは非常に大事です。
が、それ以上に重要なのは【記事(コンテンツ)の中身】であることを忘れてはいけません。
ブログを長く運営していくためにも、しっかりと稼ぐ方法も考えながらブログ運営を続けていきましょう。「ブログで稼ぐための記事の書き方のコツ」も合わせて参考にしてみてください。
というわけで、要点をまとめて記事を終えます。
① ダッシュボードより ［外観］≫［カスタマイズ］≫［追加 CSS］ と開く
② 後述のCSSコードをそのままコピーして貼り付ける
③ 埋め込みたいツイートのURLを投稿画面にコピペする
/*埋め込みツイートを中央表示させるCSSコード*/
.twitter-tweet {
margin: 0 auto !important;
}
というわけで、今回の記事は以上です。
では、また！
【最新版】無制限モバイルWiFiルーター26社を徹底比較してベストを決めた
