ブログ運営

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

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

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

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

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

この記事のポイント

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

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

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

わんこず
わんこず
カスタマイズする前に2つ注意点があるぞ!

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

JIN公式HP

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

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

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

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

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

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

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

PC表示・カスタマイズ前

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

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

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



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

PC表示・カスタマイズ後
Haru
Haru
中央表示のみです!

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



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




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

PC表示・カスタマイズ後
Haru
Haru
ツイートを中央表示して外枠にうっすーく影を付けてみたよ!
わんこず
わんこず
画像だとわかりにくいからカスタマイズ画面で確認してみてくれ!

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



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




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

PC表示・カスタマイズ後
Haru
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

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

JINカスタマイズまとめ
  1. 『外観』→『CSS編集』を開く
  2. カスタマイズしたいCSSを追加する
Haru
Haru
少しでもお役に立てたら幸いです!
わんこず
わんこず
最後まで読んでくれてありがとう!ブログの更新情報はtwitterで発信しているからフォロー(@yurupura_haru)してくれたら嬉しいぞ♪

ブログランキング参加中!ポチっとお願いします▼

にほんブログ村 ブログブログ ブログ初心者へ
にほんブログ村