【JINカスタマイズ】ワードプレスに埋め込んだTwitterデザインを変更する方法

Warning: imagejpeg(/home/haru000/haru000.xsrv.jp/public_html/wp-content/uploads/pz-linkcard/cache/b2241f35ce8c047e0a770611166218d3671366a1c96f9386f603d5504a35dd10.jpeg): Failed to open stream: No such file or directory in /home/haru000/yurupura.com/public_html/wp-content/plugins/pz-linkcard/pz-linkcard.php on line 2280

Warning: Undefined array key "sns-tw-x" in /home/haru000/yurupura.com/public_html/wp-content/plugins/pz-linkcard/pz-linkcard.php on line 943

こんにちはHaru(@yurupura_haru)です。

記事を書いているときに、Twitterのツイートを引用することってありますよね？

Haru

そのデザインをもっと美しく整えたい！

…と思ったのでカスタマイズしてみました。

この記事のポイント

　埋め込んだツイートのデザインのカスタマイズ

わんこず

デザインにこだわりたい人は最後まで読んでね

読みたい目次をクリック

ワードプレスに埋め込んだTwitterツイートのデザインを変更する前の注意点

わんこず

カスタマイズする前に２つ注意点があるぞ！

①このカスタマイズは、JINでのみ動作確認が出来ています。他のテーマでの動作確認は出来ておりません。

JIN公式HP

②今回のカスタマイズは、CSS部分に触れるため必ずバックアップを取ってからの作業をお願いします！

③テーマを使用している場合は『子テーマ』を編集してください！

Haru

カスタマイズは何が起きても自己責任で何卒よろしくお願いします

ワードプレスに埋め込んだTwitterツイートのデザインを変更する方法

今回、変更したい点はこちらの2点です。

埋め込んだツイートを中央表示に変更
埋め込んだツイートの外枠のデザイン変更（2種類）

JINでツイートを記事内に引用する方法は、ツイートを表示して『ツイートをサイトに埋め込む』を選択コードをコピーしたら『テキスト』に貼り付けでOKです。

PC表示・カスタマイズ前

カスタマイズ無しだと、PCで見たときツイートが左に寄っているのが気になります。

Haru

アイキャッチや画像は中央に表示されているから合わせた方が綺麗だと思う

それでは早速カスタマイズを紹介します。

埋め込んだツイートを中央表示する方法

PC表示・カスタマイズ後

Haru

中央表示のみです！

カスタマイズする方法は、『外観』→『CSS編集』の画面で下記のCSSを追加するだけです。

ツイートを中央表示させるコード

/*埋め込んだツイートを中央表示させるコード*/
.twitter-tweet {
margin: 0 auto !important;
}

埋め込んだツイートを中央表示＋外枠全体に薄く影を付ける方法

PC表示・カスタマイズ後

Haru

ツイートを中央表示して外枠にうっすーく影を付けてみたよ！

わんこず

画像だとわかりにくいからカスタマイズ画面で確認してみてくれ！

カスタマイズする方法は、『外観』→『CSS編集』の画面で下記のCSSを追加するだけです。

中央表示＋外枠に影を付けるコード

/*埋め込んだツイートを中央表示させて外枠に影を付けるコード*/
.twitter-tweet {
margin: 0 auto !important;
box-shadow: 0 0 5px #42424230;
border-radius: 6px!important;}

埋め込んだツイートを中央表示＋外枠の右下に薄く影を付ける方法

PC表示・カスタマイズ後

Haru

ツイートを中央表示して外枠右下にうっすーく影を付けて浮き出たデザインにしてみたよ！

わんこず

これ需要あるか？！

カスタマイズする方法は、『外観』→『CSS編集』の画面で下記のCSSを追加するだけです。

中央表示＋右下に影を付けるコード

/*埋め込んだツイートを中央表示させて外枠の右下に影を付けるコード*/
.twitter-tweet {
margin: 0 auto !important;
box-shadow:#42424230 8px 8px 15px -1px!important;
border-radius: 6px!important;}

今回のカスタマイズに使用したカラーコード#42424230は、Bear face@くまさん（＠Bearface18）から拝借させていただきました♬

カスタマイズの神ブログ＞＞＞for-men