読者です 読者をやめる 読者になる 読者になる

Traveling Creator's Life

旅するクリエイターちびまやのライフスタイルマガジン!

はてなブログ(無料)をカスタマズしてみました!④ -グローバルナビゲーション編-

f:id:ogimaya26:20151209001933j:plain

プロに移行しようと思っているのですが、その前に、PCはかなり無料でもカスタマイズできたので、参考になればいいなと思って、私が使用したコードを紹介したいと思います。(HTML/CSSにあまり触ったことのない初心者さん向けです*)




今回は「グローバルナビゲーション」です。

f:id:ogimaya26:20160130204714j:plain


※ご使用のテンプレートによってうまく反映されない場合もあります。


HTMLを編集しよう


まずはHTMLを編集しましょう!

編集箇所

「ダッシュボード」→「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」を編集します。
f:id:ogimaya26:20160130205322j:plain


貼り付けコード


ここに以下のコードを貼り付けます。

<!--グローバルナビゲーション-->
 <div id="nav">
    <ul>
        <li><a href="ここにカテゴリページのURLを貼り付け">表示したい名前</a></li>
        <li><a href="ここにカテゴリページのURLを貼り付け">表示したい名前</a></li>
        <li><a href="ここにカテゴリページのURLを貼り付け">表示したい名前</a></li>
        <li><a href="ここにカテゴリページのURLを貼り付け">表示したい名前</a></li>        
    </ul>
</div>

<li></li>の中が表示されます。
日本語になっているところは、自分のページに合わせて編集してください。
カテゴリページのURLは、カテゴリページを開いたときに出るURLを貼り付け。
表示したい名前は、このサイトだと「TRAVEL」や「CREATIVE」という文字部分です。


↓イメージはこんな感じ。↓
f:id:ogimaya26:20160130212456j:plain


ちなみにこのブログだとこうなります。

<!--グローバルナビゲーション-->
 <div id="nav">
    <ul>
        <li><a href="http://chibimaya.hatenablog.com/archive/category/TRAVEL">TRAVEL</a></li>
        <li><a href="http://chibimaya.hatenablog.com/archive/category/CREATIVE">CREATIVE</a></li>
        <li><a href="http://chibimaya.hatenablog.com/archive/category/MENTAL">MENTAL</a></li>
        <li><a href="http://chibimaya.hatenablog.com/archive/category/LIFE">LIFE</a></li>
        <li><a href="http://chibimaya.hatenablog.com/archive/category/STUDY">STUDY</a></li>
        <li><a href="http://chibimaya.hatenablog.com/archive/category/TIPS">TIPS</a></li>
    </ul>
</div>


するとこんな感じに表示されると思います。
f:id:ogimaya26:20160130213124j:plain


CSSを編集しよう!


次はCSSを使って表示を整えましょう!

編集箇所

「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」を編集します。
f:id:ogimaya26:20160130214012j:plain


貼り付けコード


このブログでは、上と下にラインがあるシンプルなデザインなので、こんなCSSになります。

/**ナビ**/
#nav{
    margin:30px 0 60px 0;
    border-top:1px solid #333;
    border-bottom:1px solid #333;
    padding:20px 0;
}
#nav ul{
    text-align:center;
    list-style:none;
}
#nav ul li{
    display:inline-block;
    margin-right:50px;
    font-weight:bold;
}
#nav ul li:last-child{
    margin-right:0;
}
#nav ul li a{
    text-decoration:none;
    color:#000;
}

#nav ul li a:hover{
    color: #4393c4;
}

オリジナルのデザインにしたい場合は自分でCSSを調整する必要があります!

簡単なCSSの説明


margin:領域間の余白の調整に使います。
padding:領域内の余白の調整に使います。
color:文字色が変更できます。(a:hoverというはカーソルを合わせた時の指定)
font-weight:文字の太さを変更できます。

カラーコードは「カラーコード表」などを参考にしてみてください*
詳しく知りたい方は「スタイルシートリファレンス(目的別)」を参考に!




私が使用したコードを簡単に紹介しました。何か参考になれば嬉しいです。
「こういうデザインにしたい」など、私にできる難しいのでなければ、コメントいただければ相談に乗りますのでお気軽にどうぞ^^