水瓶座列車

どこまで行けるか、とりあえず発車します。

Bloggerのメニューバーを自分で作成するのは超簡単

f:id:aquarius999:20200430222326j:plain

 

私が初めてブログを書き始めたのがBloggerでした。

最初は、記事を書くことで精一杯でしたが、徐々に記事が増え始めると、

カテゴリをメニューにして表示させたくなります。

自作しないで、メニューを表示させる一番簡単な方法が下記の手順です。

 

1.ダッシュボードのレイアウトを選択する。 

2.Cross-columnの「ガジェット追加」を押す。 

3.「ラベル」を探して右側にある「+」を押す。 

4.何もせずに下部にある「保存」を押す。

  

私が最初これをやってみた時、見た目は完璧だったのですが、

リンクをクリックしてみると、文字が小さくなって下の方になったりと、

変な感じになってしまいました。

 

まだ、この時は、HTMLやCSSを理解していなかったので直すことができず、

メニュー表示をしませんでした。

そして月日が経ってHTML/CSSを理解できたので、

もう自分でメニューを作った方が楽な気がしたので作りました。

 

作り方は、前述した3のところで「ラベル」ではなく、

「テキスト」もしくは、「HTML/JavaScript」を選択し、HTMLを書きます。

HTMLの参考例として、こんな感じです。 

 

<ul id="mymenu">
<li><a href="https://xxxxx/search/label/退職">退職</a></li>
<li><a href="https://xxxxx/search/label/転職">転職</a></li>
<li><a href="https://xxxxx/search/label/雑記">雑記</a></li>
</ul>

 

 少し説明をすると、xxxxxには、自分のBloggerのアドレスを当てはめてください。

「/search/label/」は、Bloggerのカテゴリリンクの一部で必ずこれになります。

そして、これ以降が自分で設定したカテゴリ名になっていて、日本語のままでも大丈夫です。

<a>タグ内に書くリンクの文字列は、Bloggerで表示されるカテゴリアドレスをそのままコピペしています。

 

HTMLに少し慣れていれば、全然難しくありません。

使っているタグは、<ul>、<li>、<a>のみです。

後からCSSでカスタマイズするために、<ul>にidを割り当てています。

id名は、なんでも構いませんので、自分で変更しても大丈夫です。

  

また、背景色を変えるときは、

「テーマ」->「カスタマイズ」->「上級者向け」ー>「CSSを追加」

で、私の場合は、<ul>タグのid名をmymenuにしているので、

ul#mymenu {
    background-color: #4682b4;
}

のコードを追加すると変更することができます。

#4682b4は、カラーコードなので、自分に合った色に変更してください。

背景色以外にもCSSで変更できますので、自分に合ったデザインに設定してみてください。

 

 

 

 

 

 

<関連・おすすめ記事>

aquarius-train.hatenablog.com