こんにちはHaru(@yurupura_haru)です。
記事を書いているときに、Instagramの投稿を引用することってありますよね？
…と思ったのでインスタの引用表示もカスタマイズしてみました。
埋め込んだインスタグラム投稿のデザインのカスタマイズ
埋め込んだツイートのデザインのカスタマイズは＞＞＞【JINカスタマイズ】ワードプレスに埋め込んだTwitterデザインを変更する方法をどうぞ
読みたい目次をクリック
ワードプレスに埋め込んだインスタグラム投稿のデザインを変更する前の注意点
①このカスタマイズは、JINでのみ動作確認が出来ています。他のテーマでの動作確認は出来ておりません。
②今回のカスタマイズは、CSS部分に触れるため必ずバックアップを取ってからの作業をお願いします！
③テーマを使用している場合は『子テーマ』を編集してください！
ワードプレスに埋め込んだインスタグラム投稿のデザインを変更する方法
今回、変更したい点はこちらの2点です。
- 埋め込んだInstagram投稿を中央表示に変更
- 埋め込んだInstagram投稿の外枠のデザイン変更（2種類）
JINでインスタグラムの投稿を記事内に引用する際は、インスタグラムの投稿を表示して『埋め込む』を選択してコードをコピーします。
コピーしたコードを『テキスト』に貼り付ければOKです。
カスタマイズ無しだと、PCで見たとき表示が左に寄っているのが気になります。
今回のカスタマイズの参考画像は、エナガサトミさん（＠enagasatomi）のInstagramから拝借しております♬
北欧を愛するセンス抜群のブログ＞＞＞エナガのつぶやきと＞＞＞Instagramもチェックしてね！
埋め込んだインスタグラム投稿を中央表示する方法
カスタマイズする方法は、『外観』→『CSS編集』の画面で下記のCSSを追加するだけです。
/*埋め込んだインスタ投稿を中央表示するコード*/
.instagram-media {
margin: 0 auto !important;
}
埋め込んだインスタグラム投稿を中央表示＋横幅サイズを固定する方法
カスタマイズする方法は、『外観』→『CSS編集』の画面で下記のCSSを追加するだけです。
/*埋め込んだインスタ投稿を中央表示＋横幅を固定するコード*/
margin: 0 auto !important;
max-width: 350px !important;
}
埋め込んだインスタグラム投稿を中央表示＋外枠全体に陰影を付ける方法
カスタマイズする方法は、『外観』→『CSS編集』の画面で下記のCSSを追加するだけです。
/*埋め込んだインスタ投稿を中央表示させて陰影を付けるコード*/
.instagram-media {
margin: 0 auto !important;
box-shadow: 10px 10px 15px -10px!important
}
埋め込んだインスタグラム投稿を中央表示＋外枠の右下に強めに陰影を付ける方法
カスタマイズする方法は、『外観』→『CSS編集』の画面で下記のCSSを追加するだけです。
/*埋め込んだインスタ投稿を中央表示させて外枠に強めの陰影を付けるコード*/
.instagram-media {
margin: 0 auto !important;
box-shadow: 8px 8px 13px -5px!important;
}
ワードプレスに埋め込んだインスタグラム投稿のデザインを変更する方法まとめ
- 『外観』→『CSS編集』を開く
- カスタマイズしたいCSSを追加する
ブログランキング参加中！ポチっとお願いします▼
＼ブログ✖️SNSで稼ぎたい人は／
＼Twitterで言えない情報を配信／
＼最短でフォロワー1000人達成／
