【簡単コピペCSS】スクロールしても着いてくる追尾型メニューで、はてなブログを快適に♪【無料版でもOK】

f:id:focuson30min:20210325180405j:plain

今回はCSS第二弾です！

前回のグローバルメニューはもう設置できましたか？

できていない方はそちらからやってみてください。

focuson30min.hateblo.jp

前回のグローバルメニューは、ヘッダー部分に表示されるものでした。

でも、記事を読んでいる時にもメニューが追尾してきたら、便利じゃないですか？

長い記事なんかだと上まで戻るのって大変ですからね。。

今回紹介する「追尾型メニュー」はこちらです！

f:id:focuson30min:20210325161346p:plain

スクロールしてもついてきます。

今回も前回と同じくらい簡単なので、是非試してみてください♪

HTMLの編集

まずは、以下をコピーしてください。

赤文字には自分のブログの飛ばしたいURLを、青文字には表示したい名前をそれぞれ入れてください！

貼り付けるところは前回と同じ、「デザイン→スパナマーク→ヘッダ→ヘッダのタイトル下」です！

あるものは消さずに、その下に挿入してくださいね！

f:id:focuson30min:20210323193030p:plain

「変更を保存」を押して完了です！

HTMLはこれだけですね♪

CSSの編集

続いて以下のCSSをコピペしましょう！

赤いところはカラーコードです。変えたい方は好きなものに変えてください。

上から「文字色、背景色、マウスが乗った時の文字色、マウスが乗った時の背景色」です。

ul.navi-top, ul.navi-top a {
color:#FFFFFF;
background-color:#000000;}

ul.navi-top a:hover {
color:#FFFFFF;
background-color:#808080;}

ul.navi-top {
position:fixed;
left:0;
top:0;
margin: 0;
padding:0;
font-size:14px;
width:100%;
text-align:center;
z-index:50;}

ul.navi-top li {
width: 125px;
display: inline-block;
list-style-type: none;
position: relative;}

ul.navi-top a {
line-height: 36px;
text-align: center;
padding-left:10px;
text-decoration: none;
font-weight: nomarl;
display: block;}

@media(max-width: 767px){
.navi-top{display:none; }
}

一番下の「@media」から始まる３行は、スマホでは表示しないようにするためのものです。スマホでも表示させたい場合は、３行を削除してください。

貼り付けるところは、「デザイン→スパナマーク→デザインCSS」です。これも今あるものを消さずに、下に追加してください。

f:id:focuson30min:20210323194120p:plain

「変更を保存」を押して、完了です！

これで基本的な設定は終了です。

アイコンフォントを使ってみる

この前紹介したアイコンフォントを使って、メニューの前を装飾してみましょう。

アイコンフォントの使い方はこちらの記事をご覧ください！

focuson30min.hateblo.jp

使用例はこちらです。

<ul class="navi-top">
<li><a href="ブログのトップページ URL"><tt class="blogicon-home lg"></tt> ホーム</a></li>
<li><a href="飛ばしたいURL"><tt class=" blogicon-account lg"></tt> 自己紹介</a></li>
<li><a href="飛ばしたいURL"><tt class="blogicon-pen lg"></tt> おすすめ</a></li>
<li><a href="飛ばしたいURL"><tt class="blogicon-mail lg"></tt> お問い合わせ</a></li>
</ul>

こうなります。かなり見やすくていいですね♪

f:id:focuson30min:20210325155326p:plain