猫の視線の先にあるものとは
カッと見開かれた猫の視線の先には・・・・・にぼし!煮干しの袋を開ける音で飛んできます。耳いいですね。飼い主が美味しくいただきます。
記事で例示したコンポーネントを実際に作ってみようと思ったら、実装できない使い方がありましてね・・・
- 画像と文章エリアの幅が1:3の割合のレイアウト
- 画像は左右どちらにも配置できる
- テキストは回り込みしない
- スマホの時は縦並びになり画像は中央揃えで先に来る
これ自体がクリック可能な要素になる場合がある- 画像の下に別の小さな要素を配置する場合がある
- 変形スタイル:
リンク要素var、囲みボーダー付き、背景色付き
リンク要素にはできませんでした、というか、WPブロックのマークアップでリンク要素の中に別のブロック入れるのができない、、
画像と文章を逆に
カッと見開かれた猫の視線の先には・・・・・にぼし!煮干しの袋を開ける音で飛んできます。耳いいですね。飼い主が美味しくいただきます。
囲みボーダーつき
囲みボーダーバージョン
背景色つき
色設定だけでできました!
この記事に追加しているCSS
.bl_media13 { } @media only screen and (min-width: 652px) { .bl_media13_ttl { --heading--font-size-h2: var(--global--font-size-lg); } } @media (min-width: 600px) { .bl_media13.bl_media13__rev { flex-direction: row-reverse; } } @media (max-width: 781px) and (min-width: 600px) { .bl_media13__rev .wp-block-column:nth-child(2n) { margin-left: 0; margin-right: 2em; } } @media (min-width: 782px) { .bl_media13__rev .wp-block-column:not(:first-child) { margin-left: 0; margin-right: 2em; } } .bl_media13__borderd.bl_media13 { padding: 1.25em 2.375em; border: 2px solid currentColor; }