ワードプレスでボタンを横幅フルスクリーンで表示し、縦幅を固定の高さで表示させ、マウスオーバーで画像を切り替えたいのですが、横幅が見切れてしまいます。
使用している画像は1920×250pxの画像です。
レスポンジブ対応でスマホで表示された時でも縦幅固定、横幅を端末に合わせて縮小させて表示させたいです。
今使って見たのが
<div class="demo01"> <a href="#">サンプル</a> </div>
と記入し
CSSに
.demo01 { background: url("/img/btn_sample_out.png") no-repeat; /* ロールオーバー時のチラつき防止 */ } .demo01 a { width: 100%; height: 250px; background: url("/img/btn_sample_out.png") no-repeat; display: block; text-indent: -9999px; } .demo01 a:hover { background-image: url("/img/btn_sample_over.png"); }
と記入しています。
displayをtableに変えて見たりしましたがよくわかりません。
ネットでいろいろ調べましたが
どうすればいいのかわからず困っております。
<追記と致しまして。>
今使用しているテーマは
Customizr Pro
入手先は
https://presscustomizr.com/
です。
お分かりになる方教えて頂けますと幸いです。
宜しくお願い致します。
質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、使用されているテーマは自作テーマでしょうか?それとも公開されているテーマでしょうか?後者の場合は入手先をリンクつきで質問文に追記してください。
回答1件
あなたの回答
tips
プレビュー