ゴリアテ | ゲーム・アニメのブログ

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

ゴリアテ | アニメ・ゲームブログ

アニメ・漫画・ゲームのレビューやグッズ等の紹介をしているブログです。メジャーなグッズから知られていないものまで幅広く取り扱っています。

はてなブログでナビゲーション付のデザインテーマを作ってみた

はてなブログ

はてなブログでナビゲーション付のテーマを作りました。企業サイトなどでよくみるこういう奴です。

f:id:tableturning:20151027210735j:plain

トップページやおすすめのカテゴリなど、用途に合わせて設定することが可能です。テーマは下記リンクからご覧いただけます。

ナチュリ~Naturally~ - テーマ ストア - はてなブログ

 

もちろんレスポンシブ対応しています。スマホでもちゃんと写ります。ナビゲーションはすっきりとたたまれて写ります。

f:id:tableturning:20151027212340p:plain

 

見出しのデザインや基本的なレイアウト構成は前回の構成と同じです。今回のデザインの特徴はナチュラルで植物をテーマにした自然なデザインなのでしっとりとした印象を持つと思います。あとはてなブログでナビゲーションを作るというのがひとつの命題だったためそれも実装しました。

撫子と桜 - テーマ ストア - はてなブログ

 

ヘッダメニューの設定方法

ヘッダメニューについてですが、カスタマイズが必要になります。 やり方自体は簡単です。

設定1:まずはデザイン設定→カスタマイズ→タイトル下に下記のコードを先頭に追加します。

f:id:tableturning:20151028100128j:plain

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
  $("#toggle").click(function(){
    $("#nav_menu").slideToggle();
    return false;
  });
  $(window).resize(function(){
    var win = $(window).width();
    var p = 480;
    if(win > p){
      $("#nav_menu").show();
    } else {
      $("#nav_menu").hide();
    }
  });
});
</script>

f:id:tableturning:20151028100410j:plain

※このコードはナビゲーションのスマホ用表示を調整するためのコードです。

 

設定2:ナビゲーションを反映するためのHTMLをカスタマイズします。下記のコードがテンプレートのHTMLです。リンクさせる予定のURLとナビゲーションにつけるリンク名をそれぞれ5つ設定しましょう。

下記のコードのリンク先URLリンク名を変更します。

<nav class="clearfix">
     <div id="toggle"><a href="#">メニュー</a></div>
<ul id=nav_menu>
<li id="menu01"><a href="リンク先URL1">リンク名1</a></li>
<li id="menu02"><a href="リンク先URL2">リンク名2</a></li>
<li id="menu03"><a href="リンク先URL3">リンク名3</a></li>
<li id="menu04"><a href="リンク先URL4">リンク名4</a></li>
<li id="menu05"><a href="リンク先URL5">リンク名5</a></li>
</ul></nav>

 

設定3:設定2で作ったHTMLを設定1で追加したコードの下に追加します。これでナビゲーションの設定が完了です。

f:id:tableturning:20151028100410j:plain

サイドメニューについて

サイドメニューはこのようなデザインになっています。ブラウン基調のボックスでレイアウトされていますが、ラインの色がコンテンツごとに変わっています。カテゴリーやリンクなどでリスト化される部分については花のアイコンがつくようになっています。

f:id:tableturning:20151027211019j:plain

こちらもはてなブログでは非常に珍しい左カラムですが設定で右側にすることもできます。下記のコードをデザイン設定のCSS設定の最後に追加してください。

#main {
    float: left;
}

#box2 {
  float: right;
}

関連リンク

ナチュリ~Naturally~ - テーマ ストア - はてなブログ

撫子と桜 - テーマ ストア - はてなブログ

 

関連記事

当サイトは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、 Amazonアソシエイト・プログラムの参加者です。
Copyright © 2015 golyat.jp All Rights Reserved.
当ホームページに掲載されている文章などの著作権は筆者に帰属しています。私的利用の範囲を超える著作物の複製や無断転載は法律で禁じられておりますのでご遠慮ください。