当ブログはちょこちょこカスタマイズされています。
色味やヘッダー、見出しはちょこちょこ変えてますが、基本的な形は大きく変えていません。
記事本数が増えてきたらメニューバーを設置したほうが見やすくなります。
とっても簡単なのでよかったら参考にしてみてください！
ブログやってるとプログラミングを勉強してて良かったと思う。カスタマイズはブログ愛が深まる！ - 人生をシンプルにしたたかに生き延びる☆
メニューバーの設置
こういう感じでボタンをクリックするとそれに分類されるタグのものにさらに細分化されるように私はしています。
リンク先の設定をしていきます
まずは管理画面からデザインに移動します。
スパナマークからヘッダーに移動
タイトル下の箱のところにコードを入れていきます。
コードをコピペ貼り付けします。
赤文字の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; }
アドセンスコードを自動挿入に切り替え！当分ブログのカスタマイズに精を出します。 - 人生をシンプルにしたたかに生き延びる☆
まとめ
私はいろんなブログからちょこちょこ参考になるのを使わせていただきました！
上のコードは私のこのブログのをそのまま貼り付けましたのでご了承ください！
尚、テーマを変更したりするとcssなどが全て消えてしまうのでテーマを変更するときはお気をつけください！
色味や幅などでブログの雰囲気も変わるので、デザインCSSをいじりながら調整してみてください！
アドセンスがなかなか通らない。。?はてなブログでのスマホ向け広告nendの申請から設定まで。 - 人生をシンプルにしたたかに生き延びる☆
