ブログ運営

【JINカスタマイズ】埋め込んだインスタグラム投稿のデザインを変更する方法

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

記事を書いているときに、Instagramの投稿を引用することってありますよね?

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

…と思ったのでインスタの引用表示もカスタマイズしてみました。

この記事のポイント

 埋め込んだインスタグラム投稿のデザインのカスタマイズ

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

埋め込んだツイートのデザインのカスタマイズは>>>【JINカスタマイズ】ワードプレスに埋め込んだTwitterデザインを変更する方法をどうぞ

【JINカスタマイズ】ワードプレスに埋め込んだTwitterデザインを変更する方法こんにちはHaru(@yurupura_haru)です。 記事を書いているときに、Twitterのツイートを引用することってありま...

ワードプレスに埋め込んだインスタグラム投稿のデザインを変更する前の注意点

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

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

JIN公式HP

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

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

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

ワードプレスに埋め込んだインスタグラム投稿のデザインを変更する方法

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

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

JINでインスタグラムの投稿を記事内に引用する際は、インスタグラムの投稿を表示して『埋め込む』を選択してコードをコピーします。

コピーしたコードを『テキスト』に貼り付ければOKです。

Haru
Haru
早速カスタマイズを紹介していくよ
PC表示・カスタマイズ前

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

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

今回のカスタマイズの参考画像は、エナガサトミさん(@enagasatomi)のInstagramから拝借しております♬

北欧を愛するセンス抜群のブログ>>>エナガのつぶやき>>>Instagramもチェックしてね!




埋め込んだインスタグラム投稿を中央表示する方法

PC表示・カスタマイズ後

Haru
Haru
中央表示のみです!

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



/*埋め込んだインスタ投稿を中央表示するコード*/
.instagram-media {
margin: 0 auto !important;
}




埋め込んだインスタグラム投稿を中央表示+横幅サイズを固定する方法

PC表示・カスタマイズ後

Haru
Haru
中央表示+横幅サイズを350pxに固定しました
わんこず
わんこず
コードの350pxの数字を変更すると横幅のサイズを調整出来るぞ

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



/*埋め込んだインスタ投稿を中央表示+横幅を固定するコード*/
.instagram-media {
margin: 0 auto !important;
max-width: 350px !important;
}




埋め込んだインスタグラム投稿を中央表示+外枠全体に陰影を付ける方法

PC表示・カスタマイズ後
Haru
Haru
中央表示して右下にうっすーく陰影を付けて浮き出るデザインにしてみたよ!
わんこず
わんこず
ちょっと御洒落感出るな!

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



/*埋め込んだインスタ投稿を中央表示させて陰影を付けるコード*/
.instagram-media {
margin: 0 auto !important;
box-shadow: 10px 10px 15px -10px!important
}




埋め込んだインスタグラム投稿を中央表示+外枠の右下に強めに陰影を付ける方法

PC表示・カスタマイズ後
Haru
Haru
中央表示して外枠右下に強めに影を付けてかっこいい浮き出たデザインにしてみたよ!
わんこず
わんこず
需要があるといいな!

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



/*埋め込んだインスタ投稿を中央表示させて外枠に強めの陰影を付けるコード*/
.instagram-media {
margin: 0 auto !important;
box-shadow: 8px 8px 13px -5px!important;
}

ワードプレスに埋め込んだインスタグラム投稿のデザインを変更する方法まとめ

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

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

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