05-31 今日の改造

ヘッダーメニューの変更

Stinger3のオリジナル ヘッダーメニューの変更をしています。
インストール直後のヘッダーメニューのデザインが物足りなく感じたのでCSSで編集してみようと思いました。

ヘッダーメニューオリジナル

ヘッダーメニューオリジナル

上の画像の通り、左詰めの文字だけだったので、背景に色を被せて尚且つ透かしを入れ、左右の行長いっぱいに伸ばしてみようと取り掛かりました。そして、編集後のメニューは下記の画像です。この画面ではマウスカーソルをヘッダー枠に載せない状態のヘッダーメニューです。

ヘッダーメニューマウスOFF

ヘッダーメニューマウスOFF

そして、マウスカーソルをヘッダー枠に載せた状態のヘッダーメニューが、下記の画像です。マウスカーソルを置いた状態では選択された項目の背景と赤 の3px でアンダーラインを付加しました。

ヘッダーメニューマウスON

ヘッダーメニューマウスON

難儀しました

ここにたどり着くまで、バックグラウンドやマージンの設定など夢にまで出てくる始末でした(笑)
後ほど追記いたします。

Follow me!

投稿者プロフィール

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