はてなブログテーマのデザイン「クリスタブルー」を自作して公開しました。

f:id:tableturning:20151031193058p:plain

はてなブログテーマ「クリスタブルー」を作って公開しました。

最近、はてなブログのテーマ作りに結構はまっています。ブログの構成が決まっているので一度きちんとしたデザイン設定さえすればデザインの制作は簡単ですし、できることも限られているので一日もあれば作れます。

今まで作ってきたデザインは暖色系だったのに対し、今回はシンプルなブルーカラーに統一しました。もちろんレスポンシブ対応、ナビゲーションも5つ設定することができます。

クリスタブルー～CrystalBlue～ - テーマストア - はてなブログ

ナビゲーション設定について

f:id:tableturning:20151031193714p:plain

白を基調としたナビゲーションです。マウスオーバーでブルーのラインがつきます。

ナビゲーションを設定する際はカスタマイズが必要になります。やり方自体は簡単です。

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

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>

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

設定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="リンク先URL１">リンク名１</a></li>

<li id="menu02"><a href="リンク先URL２">リンク名２</a></li>

<li id="menu03"><a href="リンク先URL３">リンク名３</a></li>

<li id="menu04"><a href="リンク先URL４">リンク名４</a></li>

<li id="menu05"><a href="リンク先URL５">リンク名５</a></li>

</ul></nav>

リンクは5つまで設定ができますがリンクが5つもないという方は、最後のメニュー番号を「menu05」にしてください。

<nav class="clearfix">

     <div id="toggle"><a href="#">メニュー</a></div>

<ul id=nav_menu>

<li id="menu01"><a href="リンク先URL１">リンク名１</a></li>

<li id="menu02"><a href="リンク先URL２">リンク名２</a></li>

<li id="menu05"><a href="リンク先URL５">リンク名５</a></li>

</ul></nav>

こんな感じ。

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

f:id:tableturning:20151028100410j:plain

サイドメニューについて

f:id:tableturning:20151031194046p:plain

サイドメニューに設定したリンクやカテゴリーなどリストがあるものにはクリスタルのアイコンが着きます。

今回ははてなブログでは標準的な右カラムで作っていますのでサイドメニューの位置を変更することも特にないと思います。

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

Vtuberやってるはてなブロガーです。アニメやゲーム等の紹介をしているブログです。

ナビゲーション設定について

サイドメニューについて

関連記事

関連リンク