山形を拠点に活動するフリーランスWEBデザイナーのサイト兼備忘録です

Gutenbergの埋め込みが寄せられない!を解決するCSSを考えてみた。

Gutenbergの埋め込みは3層構造。それに合わせたCSSを適用。

ということで、ようはどんなソースが吐き出されるか確認を怠ったのが最大の原因なのですが…Gutenbergの埋め込みは次の図のような三層構造になっています。

  • 一番外側がfigure.wp-block-embed(全部の埋め込み共通)で、たとえばYoutubeなら.wp-block-embed-youtube、Twitterなら.wp-block-embed-twitterなどどいう感じの個別のclassが割り当てられています。そして要の.alignleft,.aligncenter,.alignrightという寄せに関するclassも同じく一番外側に充てられています。
  • その内側が、div.wp-block-embed__wrapperというiframeを包み込むdivとfigcaptionというキャプションが入っています。
  • 一番内側が埋め込み本体のiframeです。

その結果導き出した埋め込みのCSSがこちら。


.wp-block-embed > .wp-block-embed__wrapper{width:100%;}
.wp-block-embed > figcaption{text-align: center;}
.wp-block-embed.alignleft{float:left;margin-right:1em;}
.wp-block-embed.aligncenter{margin-right:auto;margin-left:auto;}
.wp-block-embed.aligncenter::after{clear:both;}
.wp-block-embed.alignright{float:right;margin-left:1em;}

ただし、figcaptionのtext-alignに関しては、埋め込みのキャプションの位置が左右にずれたらかっこつかないかな?とおもって自分なりにつけたものです。また、.alignleftと.alignrightのmarginも自分のサイトに合わせて適宜調整してください。

キーワードタグ:

投稿日時:


コメント

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

※コメントは承認制となっています。管理人の承認を得て初めて掲載されます。
※コメントには以下の HTML タグと属性のみ使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください