MENU

WordPress「SWELL」カスタマイズ|インスタ埋め込みを中央寄せ&影をつける。

2020 5/10
WordPress「SWELL」カスタマイズ|インスタ埋め込みを中央寄せ&影をつける。

今回はWordPressテーマ「SWELL」のカスタマイズとして、Instagram投稿の埋め込みに中央寄せ&影をつける方法を解説していきます。

他記事にてツイッターでも同様のカスタマイズをする方法を紹介したのですが、インスタグラムにおいても以下のように見た目が変わるようカスタマイズしていたので備忘として記事にしました。

Before
After

ブロックエディターでは画像だけでなくSNSの埋め込みも配置設定で位置を変更できるのですが、毎回埋め込むたびに位置を変更するのも億劫なので、CSSにて全てのインスタ埋め込みを「中央寄せ」で表示しています

またそのことに加えて、細かい修正ですがもともと埋め込みの周りにあった「枠線」を消して「影」をつけるカスタマイズも施しました。

もちろん「SWELL」以外のWordPressテーマでも実装可能ですので、サイトデザインやブログの雰囲気に合わせてカスタマイズを取り入れてみてくださいね。

カスタマイズの際には子テーマを導入しておくことと、あくまで自己責任でお願いします(※エラーなどがあれば気軽にお問い合わせくださいね)。

目次

カスタマイズコードをコピーする

まずはカスタマイズコードをコピーしていきましょう、今回は一応以下3パターンにわけてコードを掲載しているのでお好みで選んでもらえればと思います。

  • インスタ埋め込みを中央寄せ&影をつける
  • インスタ埋め込みを中央寄せ
  • インスタ埋め込みに影をつける

インスタ埋め込みを中央寄せ&影をつける

/* インスタ埋め込みを中央寄せ&影 */
.instagram-media {
    margin: 0 auto !important;
    box-shadow: 0 4px 13px rgba(0, 0, 0, 0.12)!important;
    border-radius: 4px!important;
    border: 0px solid rgb(0, 0, 0)!important;	
}

インスタ埋め込みを中央寄せ

/* インスタ埋め込みを中央寄せ */
.instagram-media {
    margin: 0 auto !important;
}

インスタ埋め込みに影をつける

/* インスタ埋め込みに影をつける */
.instagram-media {
    box-shadow: 0 4px 13px rgba(0, 0, 0, 0.12)!important;
    border-radius: 4px!important;
    border: 0px solid rgb(219, 219, 219)!important;	
}

カスタマイズコードを貼り付ける

3種類のカスタマイズコードの中から1つを選んでコピーしたら、SWELL子テーマのスタイルシートに貼り付けるだけで完了です。特にショートコードを使う必要などもないのでお手軽ですね。

コードを貼り付ける場所

実際にコードを貼り付ける場所については、WordPressの管理画面から「外観→テーマエディター→スタイルシート(style.css)」に貼り付けていきましょう。

実際にサイト上で確認する

コードを貼り付け「ファイルを更新」ボタンをクリックしたら、実際に記事の中にインスタグラムの投稿を埋め込んでみましょう。このような感じでカスタマイズされましたね。

カスタマイズがうまく反映されていない場合には、「コントロールキー(Ctrl)」「F5」を同時に押してキャッシュを削除した上でページを更新してみてください。

まとめ

ということで今回は、Instagramの投稿を埋め込む際に中央寄せ&影をつけるカスタマイズについて紹介しました。

こちらの記事ではツイッターの埋め込みで同様のカスタマイズを行う方法を解説していますが、合わせて実装するとバランスが取れて良いと思います。ぜひ参考までに。

あわせて読みたい
WordPress「SWELL」カスタマイズ|Twitter埋め込みカードを中央寄せ&影をつける。
WordPress「SWELL」カスタマイズ|Twitter埋め込みカードを中央寄せ&影をつける。今回はWordPressテーマ「SWELL」のカスタマイズとして、Twitter埋め込みカードを中央寄せ&影をつける方法を解説していきます。GutenbergのブロックエディターではTwitt...

このカスタマイズはパソコンで記事を閲覧する際にはもちろん、スマホで閲覧する際にも埋め込みがシンプルかつ綺麗なデザインに見えるようになると個人的には思っています。

特にSNS投稿の埋め込みが多いブログやサイトなどで参考にしてみてくださいね、もちろん「SWELL」以外のWordPressテーマでも実装可能なのでよかったらお試しください。

この記事が気に入ったら
フォローしてね!

目次
閉じる