一般人だけどブログ収入へ向けて歩くその足跡<2018.06.08>

■ 足跡

f:id:nagasawanet:20180610135737j:plain

前回は、ヘッダーの画像をpicky-picsというツールを使用して作る作業をお勉強してみました。いろんなことを学ばせていただける。有り難いです。

今回は、その作ったヘッダーの部分をさらにカスタマイズしてみたく、カテゴリーを入れてみたいと思い頑張ってみることにします。

 ■ ヘッダーにカテゴリーを作ってみたい

ヘッダーの部分にカテゴリーがあるサイトはよく目にします。私も作ってみたいと思いました。調べてみると作り方を説明してくれている先達がいましたのであやかってトライしてみようと思います。

■ ヘッダーにカテゴリーを入れる作業開始

① 下記のコードを「タイトル下」に入れる。

<nav id="scroll-menu">
<ul class="scroll-menu-inner">
<li><a href="">カテゴリ1</a></li>
<li><a href="">カテゴリ2</a></li>
<li><a href="">カテゴリ3</a></li>
<li><a href="">カテゴリ4</a></li>
<li><a href="">カテゴリ5</a></li>
<li><a href="">カテゴリ6</a></li>
<li><a href="">カテゴリ7</a></li>
<li><a href="">カテゴリ8</a></li>
<li><a href="">カテゴリ9</a></li>
<li><a href="">カテゴリ10</a></li>
</ul>
</nav>

<style>
#scroll-menu {
height: 40px;/*メニューの縦幅*/
background-color: #444;/*メニューの背景色*/
}
#scroll-menu .scroll-menu-inner {
list-style-type: none;
width: 1000px;/*メニューの横幅*/
height: 100%;
margin: 0 auto;
padding: 0;
text-align: center;
}
#scroll-menu li {
float: left;
height: 100%;
}
#scroll-menu a {
display: block;
height: 100%;
padding-right: 15px;
padding-left: 15px;
color: #fff;/*文字色*/
font-size: 70%;
font-weight: bold;
text-decoration: none;
line-height: 40px;/*メニューの縦幅*/
}
#scroll-menu a:hover {
background-color: #555;/*マウスホバー時の背景色*/
}
@media screen and (max-width: 1000px) {/*メニューの横幅*/
#scroll-menu {
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
#scroll-menu .scroll-menu-inner {
margin: 0;
}
}
</style>

② カテゴリ名と対応URLを入れる。

「カテゴリ1~10」に文字を入れ「href=""」に対応するURLを入れる。

<li><a href="https://nagasawanet.hatenablog.com/archive/category/お灸のこと">お灸のこと</a></li>

こんな風にしてみました。

③ カテゴリーの数を調整する。

必要なカテゴリーが私の場合現時点で6個だったので7~10を削除。削除したら、残りの6個が左寄りになってしまった。真ん中にするにはどうしたらよいのかを調べました。

padding=内側の余白
margin=外側の余白

とのこと。


padding-right: 15px;
padding-left: 15px;


だったのを


padding-right: 15px;
padding-left: 60px;


にしてみたら真ん中になりました。

<参考にさせていただいたブログ>

kumacrow.blog111.fc2.com

④ メニューの背景色を変える。

続いて、メニューの背景色を変えてみようと思いました。

background-color: #444;/*メニューの背景色*/

こちらを↓に。

background-color: #ffe4c4;/*メニューの背景色*/

 

color: #fff;/*文字色*/

こちらを↓に。

color: #ffa500;/*文字色*/

<参考にさせていただいたブログ>

www.colordic.org

 

 

■ まとめ

 今回は、はてなブログのヘッダーにカテゴリーを入れてみたくて先達のブログを参考にお勉強をしてみました。カテゴリーの数を変えたり色を変えたりと予測していなかったこともお勉強できました。楽しかったです♬