CSSで同行見出しエリアに画像を配置
この投稿の内容
独学で勉強しているため、下記のCSS内に無駄なコードがあると思います。諸兄から見て削除できるコードがあるときはご教授いただければ幸いです。今後の独学の励みになります。よろしくお願いいたします。
①本文中に「2行どりの同行見出し」として画像を貼り付ける。
②その画像にマウスONで画像を切り替えて表示。
③本文は回り込ませる。
※下記に表紙している画像にマウスONすると画像が変わります。クリックするとリンク先へジャンプしてしまいますので注意して下さい。
また、行末が揃ってないのはMSPゴシック(プロポーショナル)の書体を使用しているためです。

宇うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう
このパラメータは Bizvektor 専用ですが、他のテーマでも使えると思います。Bizvektor では固定ページと投稿ページでは呼び出される関数が違うみたいで、margin や height の数値等が異なっている模様。それぞれ専用のCSSクラスを追加で作成しました。ご使用には注意して下さい。
CSSに追加
/*---------------「マウスON」で画像を切り替える---------------*/ p.demo5{ width: 100%; height: 50px; float: left; margin-right: 10px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; } .demo5 a{ display: block; float: left; margin-right: 10px; margin-bottom: 0px; padding-bottom: 0px; padding-left: 0px; } .demo5 img{ border: none; margin-right: 10px; margin-bottom: 0px; padding-bottom: 0px; padding-left: 0px; } .demo5 a:hover{ /*background: none;*/ background: url(http://ほにゃらら.拡張子) no-repeat; /*上の「ほにゃらら.拡張子」はマウスONで表示したい画像のURLを入れる*/ } .demo5 a:hover img{ visibility: hidden; }
HTML
<div class="demo5"><a href="http://asamai-cts.jp/memorandum/hp-created-course/"><img src="http://ほにゃらら.拡張子" alt="btn_01" width="220" height="50" /></a>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div> ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
投稿者プロフィール

- asamai-cts Owner
-
あさまいCTSの代表オヤジです(2021年現在=60歳)
横手市中央町で「ラーメン与市」を2012年まで約15年間を経営。
その後、「横手市雇用創出協議会 実践支援員」を経て、一時会社勤めをするが体調を崩し、再度、自営業の世界に戻る。
現在の「あさまいCTS」は2019年1月に起業。業務内容は主に、パソコンの修理、出張スマホ・パソコン教室、ホームページ作成 その他何でも屋みたいなものです・・・
最新の投稿
Blog2023年9月18日② AppSheetで写真管理の「スマホアプリ」を作った(AppSheetの作成) 修正分
備忘録2023年9月16日② AppSheetで写真管理の「スマホアプリ」を作った(AppSheetの作成)
備忘録2023年9月16日① AppSheetで写真管理の「スマホアプリ」を作った(準備編)
新着情報2023年5月5日CHAT GPTでVBAコード生成してみた