ブログテーマ「510」のカスタマイズ – ナビゲーションの付け方

HTMLの準備

以下のようなHTMLをご自身で記入して頂く必要があります。

<nav id="global-navigation">
<div class="global-navigation-inner">
<div class="menu">
<a href="#">HOME</a>
</div>
<div class="menu">
<a href="#">ABOUT</a>
</div>
<div class="menu">
<a href="#">PROFILE</a>
</div>
<div class="menu">
<a href="#">ARCHIVE</a>
</div>
<div class="menu">
<a href="#">CONTACT</a>
</div>
</div>
</nav>

このうち、実際にカスタマイズする部分はこちらになります。

<div class="menu">
<a href="#">HOME</a>
</div>

これを「1セット」とみなして、必要な分だけ並べていくことになります。

改変する部分は2点あります。

まず「#」の部分をご自身のURLに置き換えて下さい。
そして「HOME」の部分を実際に表示したいテキストに置き換えて下さい。

例えば、Yahoo! JAPANをメニューに置きたい場合は以下のようになります。

<div class="menu">
<a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a>
</div>

このようなセットを以下の箇所に入れて下さい。

<nav id="global-navigation">
<div class="global-navigation-inner">
<!-- ここにセットを複数置いてください --!>
</div>
</nav>

ここまで完了したら、実際にはてなブログのデザインに反映させます。

はてなブログへの反映

まずヘッダーのメニューを表示させて「デザイン」のメニューを選択してください。

そうしたらまず「スパナアイコン」をクリックして設定メニューを開き、「ヘッダ」のメニューをクリックして下さい。

すると詳細な設定が表示されるので、「タイトル下」をクリックするとテキストボックスが拡大されますので、先ほど用意したHTMLをここに貼り付けて下さい。

最後に「変更を保存する」ボタンをクリックするのを忘れないようにして下さい。

お疲れ様でした。これで完了です。

ブログ説明文

このナビゲーションを付けた場合、ブログの説明文が表示されているとデザイン的に不格好になってしまいます。

そのため、設定画面から説明文を空にした方が見栄えとしては良くなると思います。

ヘッダー画像

ちなみに「ゴトーのブログ」ではタイトルをテキストではなく、画像に設定しています。
しかし画像を設定した場合、デフォルトではおそらくデザインが崩れていまうかと思います。

これはバグではなく、ヘッダー画像のサイズに応じて、ご自身がCSSを別途カスタマイズして頂く必要があります。
一律に設定することはヘッダー画像の性質上、どうしてもできませんのでご了承下さい。