人生をシンプルにしたたかに生き延びる☆

毎日やりたいことだけやって生きていく(時にはしたたかに)。ミニマリズムな生き方・考え方を綴ります。

はてなブログのメニューバーをカスタマイズ!記事本数が増えてきたらやると見やすい!

f:id:simpledancer:20170430124701p:plain

当ブログはちょこちょこカスタマイズされています。

色味やヘッダー、見出しはちょこちょこ変えてますが、基本的な形は大きく変えていません。

記事本数が増えてきたらメニューバーを設置したほうが見やすくなります。

とっても簡単なのでよかったら参考にしてみてください!

メニューバーの設置 

f:id:simpledancer:20170716200614p:plain

こういう感じでボタンをクリックするとそれに分類されるタグのものにさらに細分化されるように私はしています。

リンク先の設定をしていきます

まずは管理画面からデザインに移動します。

f:id:simpledancer:20170716200817p:plain

スパナマークからヘッダーに移動

タイトル下の箱のところにコードを入れていきます。

f:id:simpledancer:20170716201032p:plain

コードをコピペ貼り付けします。

赤文字のurlと#にはリンク先のURLを。

青文字のタイトルは親要素、緑色のタイトルは子要素です。

<nav class="main-navigation">
<div class="menu-toggle">メニュー</div>
<div class="main-navigation-inner">
<ul>
<li><a href="url">ホーム</a></li>
<li><a href="url">プロフィール</a></li>
<li>
<a href="#" class="has-child">ミニマリスト</a>
<ul>
<li><a href="url">断捨離系</a></li>
<li><a href="url">生き方・考え方</a></li>
<li><a href="url"></a></li>
</ul>
</li>
<li>
<a href="#" class="has-child">美容・ダイエット</a>
<ul>
<li><a href="url">アンチエイジング</a></li>
<li><a href="url">食生活</a></li>
</ul>
</li>
<li>
<a href="url" class="has-child">レシピ</a>
<ul>
<li><a href="url">宅飲みレシピ</a></li>
</ul>
</li>
<li>
<a href="#" class="has-child">リンク</a>
<ul>
<li><a href="url">プログラミング</a></li>
<li><a href="url">ポールダンス</a></li>
</ul>
</li>
</ul>
</div>
</nav>

 

デザインCSSで見た目を整える。

横幅と、文字を真ん中におくためにまず

/* </system> */
@media screen and (min-width: 1024px) {
.main-navigation {
text-align: center;
}
}

このコードを貼り付けます。幅は任意で変更してください。

メニューバーの背景色、文字色、幅、hover(クリックした時に変わる色指定)などをします。サイズは80%を指定してますが任意で変更してください!色も(color→文字の色です)

<!-- メニューバー -->
#manubar{
width:80%; }
#menubar ul{
display:table;
width:100%;
margin: 20;
padding: 20;
background-color: #FFFFFF; }
#menubar li{
display: table-cell;
width:40%;

background-color: #000000; }
#menubar li a{
display: block;
margin:0 auto;
width:15%;
padding:15px;
border: 1px solid #FFFFFF;
text-decoration: none;
color: #FFFFFF;
text-align: center;
font-size: 20px; }
#menubar li a:hover{
background-color: #333333; }

 

www.netyasun.com

まとめ

私はいろんなブログからちょこちょこ参考になるのを使わせていただきました!

上のコードは私のこのブログのをそのまま貼り付けましたのでご了承ください!

尚、テーマを変更したりするとcssなどが全て消えてしまうのでテーマを変更するときはお気をつけください!

色味や幅などでブログの雰囲気も変わるので、デザインCSSをいじりながら調整してみてください!