WordPressのブロックエディタ（グーテンベルク）を使い、枠線ボックス内に画像とリンクを入れる方法

※自分用のメモです。

以下のような、ブログでよく見かける「合わせて読みたい」のブログカードのような見やすい枠線ボックスをブログに載せたいと思い試したことをメモしておきます。

Table of Contents

枠線ボックス内に画像とテキストを載せる使用例

こんな感じで、画像とテキスト、urlなどを入れ込むことができます。

ここに伝えたいことや、urlなどを入れることができますよ。

↑本当に販売中なので、興味がありましたらぜひどうぞ。
※販売は、猫ちゃんのポーチです。

画像とテキストを並べただけのものより、見やすいかと思います。

ブロックエディタを使います。

＋をクリックし、枠線ボックスを挿入

検索窓から「カラム」をクリックし、50/50 にする。
同じ画面では、「カラムメニュー」でおしゃれにできる方法も表示されていますがまた今度にします。

左のカラム内をクリックし、画像を挿入。
画像に枠やシャドウなどをつけておしゃれにもできます＾＾

右のカラムをクリックし、＋をクリックして「カスタムhtml」を選ぶ。
イラストACのアソシエイトリンクの「ブログ」からurlをコピペ。

おしまい

枠線ボックス内に、画像とテキストボックスを挿入してメディアを左に表示する設定にしてもOK。

この場合、挿入した画像にはシャドウや枠線などの装飾はできません。