この中の「wp-embed-template.css」を、前回調べたカードの各要素のクラス名と照らし合わせば、どの要素にどんなスタイルを指定しているかわかります。「wp-embed-template.min.css」はミニファイされたCSSファイルです。「wp-embed-template-ie.css」はIE用でしょうね。それに「.min」がついたのはミニファイファイル。CSSファイルで探して、デフォルトのスタイルを調べます。カードをまったくのオリジナル仕様にする(デフォルトを修正する程度ではない)場合は、このようなデフォルトスタイルの把握は不要。896行目あたりから、カードのHTMLの<head>部にCSSを書き出す指定があります。<style>要素でじかにCSSが書き出されます。方法1:CSSファイルを追加するEmbedカードのスタイルを編集する方法で、まずは、CSSファイルを追加するやり方。追加したいCSSファイルを指定します。「embed_head」というフックを使います。'my_embed_style');上の例では、テーマ内の「css」ディレクトリに追加したいファイル「new_wp-embed-template.css」を置きました。コピーして、上書きしたい部分だけ変更し、デフォルトと同じ部分は削除したもの。<head>内にじかに書き出されるので、ミニファイ化しておきます。ミニファイにはこちらのサイトが便利。デフォルトのスタイルを読み込まないようにします。'print_embed_styles');方法2:embed-content.phpをテーマ内で編集カードの<head>部に書き出されるCSSはいじらず、カードの<body>部分にオリジナルのCSSを書き出して、<head>部のものを上書きする方法です。<style>要素でCSSを追加します。コピーして、アクティブなテーマのルートに置いて編集します。カード本体の要素も編集できます。画像アスペクト比によってレイアウトが変わるのなんて、このサイトでは不要なので、if文を削除しちゃった。触らずに済むのでお手軽です。Embedカードは、この方法でスタイルを編集しています。カスタマイズするなら上記の2つの方法を併用すれば、Embedカードを完全にオリジナルなものに書き換えることもできます。写真集サイト(抜粋文がなく、それ以外に撮影場所や撮影機器などのスペックがあるとか)などでは、デフォルトのカードの構成はミスマッチです。Embedカードをカスタマイズするといいですね。なく、Embedカードの他のテンプレートもテーマ内に置いて編集し、方法1のやり方で、スタイルをそっくり置き換えればOK。余談です:overflow:autoで回りこみを制御するちょっと話はそれますが、CSSの件で1つメモ。floatで「抜粋文」と横並びにすると、親要素の幅によって「抜粋文」が箱型にならずに画像の下に回ることがあります。「抜粋文」のほうに指定しておきます。対策として、さらに「zoom:1」も加えておくと良いのかな。この場合、スマホビューだと読みにくいレイアウトになるので、画像のfloatを解除し、画像を親要素の幅いっぱいにする指定も必要です。ほっといても何も影響ないので放置↑)カードのCSS編集は自サイトのカードのみ有効けっこう当たり前のことなんですが。<iframe>要素の幅を変更すれば、他のサイトから貼り付けたEmbedカードにも、自サイトのカードにも、どっちにも効きます。カードの<iframe>への指定は、自サイト内の表示の指定。HTMLやCSSについては、カスタマイズは自サイトのもののみ可。HTML(やCSS)は、相手のサーバから呼び出されるので、相手サイトで設定されたカードが表示される。どんなに気に入らなくても(笑)これを編集することはできません。<iframe>要素の幅を小さくして、コンパクトにするくらいならできるけどw逆に自サイトのEmbedカードを他サイトで貼ってもらったら、自分でカスタマイズしたカードが表示されるってわけですね。これも、先方がどんなに気に入らなくても勝手に編集されることはありません(笑)ブランディングが必要なサイトの場合は、Embedカードのカスタマイズも必要ですね。膨大なCSSを仕込んだり、ブログカードに見えないようなレイアウトにするのは、やめたほうがいいね。次回は、Embedカードのリンクを別ウィンドウで開くようにしてみます。Embedカードのリンクを別ウィンドウで開く(PCのみ。Embedカードのリンクを別ウィンドウで開く(PCのみ。Embedカード(ブログカード)について調べたことをメモっています。Embed(埋め込み)機能が意外とオモシロイ。Embedカードで置けるそうなので、どんなカードが貼られるのか試してみました。jQuery、WordPressなど、Webデザイン関連をメモっていく覚え書きサイトです。Reserved.^。