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

広告

はてなブログテーマ「Theme510」におけるナビゲーションの設置方法を解説した記事になります。

Theme510ではナビゲーションをつけることができますが、ご自身でデザインのカスタマイズを行って頂く必要があります。以下の手順に沿って行っていただければ、専門的な知識は必要ありませんので、ぜひ挑戦してみて下さい。

ナビゲーションとは

ナビゲーションは上の画像の赤線のところにあたり、ブログタイトルの下に設置されます。

これはモバイルのように横幅が小さい場合、メニューが溢れてしまっても、横スクロール可能になっています。
逆にPCで横幅が溢れてしまうと、スクロールバーが表示されて不格好になってしまうので、表示できる数は限りが有ります。

設置方法

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>

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

はてなブログへの反映

f:id:hogehoge223:20161207193856p:plain

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

f:id:hogehoge223:20161207194242p:plain

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

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

f:id:hogehoge223:20161207194439p:plain

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

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

注意点

ブログ説明文

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

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

f:id:hogehoge223:20161207194934p:plain

ヘッダー画像

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

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