CSSで同行見出しエリアに画像を配置

この投稿の内容

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

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

宇うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう

このパラメータは Bizvektor 専用ですが、他のテーマでも使えると思います。Bizvektor では固定ページと投稿ページでは呼び出される関数が違うみたいで、margin や height の数値等が異なっている模様。それぞれ専用のＣＳＳクラスを追加で作成しました。ご使用には注意して下さい。

ＣＳＳに追加

/*---------------「マウス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>
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

Follow me!

@asamai_cts

投稿者プロフィール

近江公人asamai-cts Owner

あさまいCTSの代表オヤジです（2021年現在＝60歳）
横手市中央町で「ラーメン与市」を2012年まで約15年間を経営。
その後、「横手市雇用創出協議会　実践支援員」を経て、一時会社勤めをするが体調を崩し、再度、自営業の世界に戻る。
現在の「あさまいCTS」は2019年１月に起業。業務内容は主に、パソコンの修理、出張スマホ・パソコン教室、ホームページ作成　その他何でも屋みたいなものです・・・