WordPressのoEmbed埋め込みカードのスタイルシートを変更してコンパクトにする

このエントリーをはてなブックマークに追加

WordPress 4.4 以降ではでは自分のサイトの URL を一行書いておくと、自動的に oEmbed 埋め込みカード (ブログカード) として表示してくれます。

WordPressのoEmbed 埋め込みカードのスタイルシートを変更してコンパクトにする

ただデフォルトだと、ゆったりとスペースを取り過ぎのようにも思えましたので、スタイルシートの変更をしてコンパクトにしてみることにしました。

ビフォー・アフター

WordPress で oEmbed 埋め込みカードをデフォルトで表示すると次のようになります。

WordPress oEmbed 埋め込みカードのデフォルト

ここでスタイルシートをいじると少しコンパクトにすることができます。

WordPress oEmbed 埋め込みカードでスタイルシートを変更したもの

以下でここで行ったスタイルシートの変更について説明します。

変更の仕方

外観→テーマの編集で functions.php に以下のコードを追加します。

長く見えるのは、オリジナルの wp-includes/embed.php の中で定義されている print_embed_styles 関数と同様にスタイルシート全体を直接出力しているためです。

オリジナルの関数からの変更点は以下の通りです。

  • .wp-embed-featured-image.square : アイキャッチを右に寄せて小さくします。
    • float: left → right
    • max-width: 160px → 100px
    • margin-bottom: 0px 追加
  • .wp-embed-footer : サイトのタイトルと上の段落の間を狭めます。
    • display: table → block
    • margin-top: 30px → 10px
  • .wp-embed-meta : サイトタイトルとコメント数が左に詰まるのでスペースを空ける
    • padding-left: 32px 追加

参考

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です