[ 解決済 ] 【機能追加要望】画像へのオーバーレイ・ボタンのパターン要望

[たわしそふと]

■ 期待する動作
X-T9を使っており、ノーコードのみでのＨＰ構築を推奨実行しています。

固定ページに表示している画像の任意の位置にオーバーレイで表示するボタンのパターンが欲しいです。
現在のＨＰがかなり画像データを多用するため、なくていつも困っています。
以前は自分でHTMLやCSSを書いていましたが、X-T9ではどうしてもノーコードを貫徹したいので
どうぞよろしくご検討をお願いいたします。　m(＿ ＿)m

■ 自分で試した事
VK パターンライブラリを「ボタン」「オーバレイ」で検索するも該当なし。

■ その他特記事項
たぶん「ボタン」ではなく、「オーバレイ・オプションのある画像」のパターンになるのかもしれませんね。

[対馬 俊彦]

このパターン ↓ はいかがですか？

ヒーローエリア_画像の上にあまり要素が被らないレイアウト用（文字背景なし）

カバーブロックの設定で、上下方向（上・中央・下）と左右方向（左・中央・右）の配置を指定できます。
位置を細かく調整するには、余白やスペーサーを使うことになります。

このパターンを試してみてご希望のことができなければ、
そうじゃなくてこういうのが欲しい、と返信してもらえれば、いい回答が得られるかもしれません。

> 以前は自分でHTMLやCSSを書いていましたが

もしかしたら、<map> と <area> で作るイメージマップのことなのでしょうか？

[たわしそふと]

対馬さん
重ねてのご回答、ありがとうございました。

今回ご指摘いただいたブロックの存在は知っていましたが、私のスキルが不足しており、説明を読んだだけでは私の意とするようにボタン配置がオーバーレイできるものとは判断できなかったからです。
タイトル自体も難しくて「これって…何ぁに？？…」てな理解しかできませんでした。(-_-;)

おすすめ頂いたからには早速試してみようとおもっております。
少し後日になりますが結果をお知らせして、その内容によってはクローズさせていただく予定です。

＞もしかしたら、<map> と <area> で作るイメージマップのことなのでしょうか？
そうでしたね、昔は左上座標を指定して貼り付けていました。
要するに背景画像の任意の地点にボタンを配置したいわけですが、このパターンで試してみますね。

ひとまずはご回答の御礼まで。　m(＿ ＿)m

[対馬 俊彦]

VK パターンライブラリの中でよさそうなものをお伝えしたのですが、
背景画像 ＋ ボタン のシンプルなものを作るのであれば、
カバーブロックにボタンブロックを入れて、いちから作る方がわかりやすいです。

[石川＠Vektor,Inc.]

なんとなく CTA カテゴリーで検索したらご希望に近いものが探しやすいかもしれません。

https://patterns.vektor-inc.co.jp/?post_type=vk-patterns&pattern-category=cta&s&supported-themes_operator=or&license-classification_operator=or&pattern-type_operator=or&pattern-industry_operator=or&pattern-category_operator=and&pattern-product_operator=or&demo-site_operator=or&vkfs_form_id=11755

[たわしそふと]

対馬さん
重ねてのご回答をありがとうございました。

まず、パターンライブラリの「ヒーローエリア_画像の上に…」を試してみましたら、やはり画像がトップ画面用のワイドサイズ固定のようなのと、ボタン以外の要素を消さねばならないので、ちょっと違うかなと感じました。
ちなみに試しているうちにやっとこのパターン名の意味が理解できました。（笑）
WordPress初級者とはこんなものですねー。(;’∀’)

次に
＞カバーブロックにボタンブロックを入れて、いちから作る方がわかりやすいです。
なるほど、言われてみれば納得でした。
WordPress初級者にもほどがありますねー。(;’∀’)

この方法でやっていこうと思います。m(＿ ＿)m

[たわしそふと]

石川さん
いつもアドバイスありがとうございました。

「CTAカテゴリー」での検索が盲点でした。
なるほど、応用パターンとして便利に使えそうです。
まだ全然このあたりの感覚がついていけていませんが、X-T9しか知らないアマチュアでもちゃんと立派なホームページが作れるのだということを世間に啓発していくために、これからも頑張っていきます！

余生をX-T9に捧げているジジイwwなので、これからもどうぞよろしくご指導ください。
m(＿ ＿)m

というわけで、クローズさせていただきます。
むな様重ねてありがとうございます。

[対馬 俊彦]

たわしそふとさん、

X-T9しか知らないアマチュアでもちゃんと立派なホームページが作れるのだということを…

余生をX-T9に捧げているジジイwwなので…

そのあたりのことをアドベントカレンダーに書いてみませんか？

[たわしそふと]

対馬さん
お誘いありがとうございます。

私、現在ブログ持ってないので、とりあえずどうしよう！？！
どこかに隠し部屋でも作りますかね。

でも、技術的なTIPS話なんぞまったくできないのでバラエティになっちゃいますよ。
…まぁ、津島さんが責任取っていただけるなら。(*’▽’)

ではどうぞよろしくお願いいたします。　m(_ _)m

[対馬 俊彦]

いい枠を確保しましたね！

> 技術的なTIPS話なんぞまったくできないのでバラエティになっちゃいますよ。

いまのところ、技術的なTIPS話に偏り過ぎているように思うので、
たわしそふとさんの記事でアドベントカレンダーに彩りを添えてください。

X’MASイブを楽しみにしてます～😊

[投稿者]

投稿