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

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

2019 12/11

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

GutenbergのブロックエディターではTwitterをはじめとした各種SNSの埋め込みがカンタンにできるのですが、以前からツイートを埋め込む際にはこのようなカスタマイズを行なっていました(SWELL開発者の了さんのツイートをお借りしました)。

Before
画像
After
画像

かなり細かいカスタマイズなので需要があるかは微妙ですが…Twitterカードを埋め込む際にWordPressのデフォルトデザインから「配置」「影」をカスタマイズしています

個人的にはこっちの方が好きなので備忘録として紹介していきますね、SWELL以外のWordPressテーマでも実装可能なので何か参考になれば嬉しいです。

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

目次

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

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

  • Twitterカードを中央寄せ&影をつける
  • Twitterカードを中央寄せ(影なしのまま)
  • Twitterカードに影をつける(左寄せのまま)

Twitterカードを中央寄せ&影をつける

/* Twitter埋め込みを中央寄せ&影 */
twitter-widget {
    box-shadow: 0 4px 13px rgba(0, 0, 0, 0.1)!important;
}
.twitter-tweet {
    margin: 0 auto !important;
}

Twitterカードを中央寄せ

/* Twitter埋め込みを中央寄せ */
.twitter-tweet {
    margin: 0 auto !important;
}

Twitterカードに影をつける

/* Twitter埋め込みに影をつける */
twitter-widget {
    box-shadow: 0 4px 13px rgba(0, 0, 0, 0.1)!important;
}

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

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

コードを貼り付ける場所

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

画像

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

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

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

まとめ

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

細かいカスタマイズでしたが、他のブログやサイトとちょっとした差別化をする上でも役立つのでぜひ参考になれば嬉しいです。以下記事ではインスタグラムで同様のカスタマイズ設定を解説しているので、合わせて参考にしてもらえればと思います。

あわせて読みたい
WordPress「SWELL」カスタマイズ|インスタ埋め込みを中央寄せ&影をつける。
WordPress「SWELL」カスタマイズ|インスタ埋め込みを中央寄せ&影をつける。今回はWordPressテーマ「SWELL」のカスタマイズとして、Instagram投稿の埋め込みに中央寄せ&影をつける方法を解説していきます。他記事にてツイッターでも同様のカスタ...

もちろん「SWELL」以外のWordPressテーマでも実装することができるので、他テーマを使っている場合にも試してみてくださいね。

この記事も読まれています

目次