3歩進んで2歩更に進む。

筋トレで克己心を高め投資に活かしたい。平成生まれのアスリート系エンジニアのブログ


はてなブログをリニューアル!テーマ「stripe」が秀逸だった

AD

f:id:ktkooon:20171009174337p:plain

夏が終わりおセンチな気分を筋トレでごまかしつつもやる気があまりノッていなかったktkooonです。

時期的なものですかね…。ただただ会社終わりと休日はダラダラ過ごす日々でした。ですが、そんな時はあえてそうしています。やる気がない時はとことんダラダラして、自分を見つめ直すようにしています。

そうこうしているとやる気が充電されていくのが毎年の自分のパターンです。やる気スイッチが入る方法は人それぞれ違うので、研究してみると面白いかもしれません。

やる気が充電されてきたので、放置気味で月間1万PVに届かなくなったこのブログをリブートさせようとデザインを変えてみました。

割りといい感じのデザインテーマなので、これからデザインテーマ変えようとしている方の参考になればと思います。

デザインテーマを変えた理由

ちなみに以前使っていたテーマはこちらです。

レスポンシブルー - テーマ ストア

シンプルでモバイルでも難なく表示できてなかなか良かったんですが、以下の点がちょっと微妙でした。

  • このテーマにあうグローバルナビゲーション(以下グロナビ)を自作したもののしっくりこなかった
  • カテゴリページで日付がずれるバグがあった?(独自CSSが悪さしてたかも…)

あとは、1年使ってみてちょっと飽きてきたというのもあり今回変えてみました。

デザインテーマの人気順を物色

モバイルで見やすいことと、しっくりくるグロナビが簡単に作れそうという軸で選びました。

と言っても、どれを選んだらよいのか分からないのでひとまずテーマストアの人気順カテゴリから色々見ていきました。

テーマ ストア - はてなブログ

キャプチャにグロナビが出ているテーマは、しっくりくるサンプルコードが公開されています。

迷ったのは大体こんなところ

Brooklyn - テーマ ストア

Innocent - テーマ ストア

stripe - テーマ ストア

どれもシンプルでよさそうです。キャプチャにモバイル画面があって、きっとモバイルでも綺麗に見えるんじゃないかと期待を込めて「stripe」に決めました。

デザインテーマ「stripe」を使ってみた感想

デザインテーマ「stripe」を使ってみて気付いたところを何点か。

"続きを読む"ボタンや"次のページ"ボタンがオシャレ

デザイン大事。"続きを読む"ボタンや"次のページ"ボタンがなんとも可愛らしい。

f:id:ktkooon:20171009171443p:plain

f:id:ktkooon:20171009173207p:plain

しっくりくるグロナビのサンプルコードがある

「stripe」の説明ページにしっくりくるグローバルナビのコードがあります。

stripe - テーマ ストア

これを説明通り自分のブログにセットして、リンクを書き換えるだけでいい感じのグロナビが作れます。

f:id:ktkooon:20171009171925p:plain

実際に書き換えた後はこんな感じです。

<ul id="nav-menu">
<li><a href="http://ktkooon.hatenablog.com/archive/category/%E9%9B%91%E8%A8%98">ノージャンル</a></li>
<li><a href="http://ktkooon.hatenablog.com/archive/category/%E7%AD%8B%E3%83%88%E3%83%AC">筋トレ</a></li>
<li><a href="http://ktkooon.hatenablog.com/archive/category/%E3%83%9E%E3%83%8D%E3%83%BC">投資とマネー</a></li>
<li><a href="http://ktkooon.hatenablog.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E9%81%8B%E7%94%A8">ブログ運用</a></li>
<!-- 端末ごとに表示する項目を調整 -->
<!--
<li class="nav-menu-hidden-phone"><a href="#">スマートフォンで非表示</a></li>
-->
<!-- 右端の残りのドロップダウンメニュー -->
<li class="hover-click"><a href="#"><i class="blogicon-reorder"></i> More</a>
   <ul>
   <li><a href="http://ktkooon.hatenablog.com/archive/category/%E4%B8%AD%E5%A4%AE%E7%B7%9A%E6%B2%BF%E7%B7%9A%E7%8B%AC%E3%82%8A%E3%83%A1%E3%82%B7">中央線沿線独りメシ</a></li>
   <li><a href="http://ktkooon.hatenablog.com/archive/category/Mac%E3%83%8E%E3%82%A6%E3%83%8F%E3%82%A6">Macノウハウ</a></li>
   </ul>
</li>
</ul>
<!--jQueryを使用-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(function() {
  var contents = $(".hover-click > ul");
  $(".hover-click > a").click(function(){
    $(contents).toggle();
    return false;
  });
  $(".hover-click")
  .mouseover(function(){
    $(contents).show();
  })
  .mouseout(function(){
    $(contents).hide();
  });
});
</script>

こちらのページに端末ごとに表示する項目を制御する方法が書いてありますが、今回は特に制御なしで設定しました。

(実際の見え方はこのブログの見え方で確認できますので、触りつつ別記事も見ていただけると嬉しいです^_^)

レスポンシブデザインモードでオンでモバイルでもサクッと適用

他のデザインテーマでも割りと一般的?なんですかね。デザイン > スマートフォン> 詳細設定で以下のチェックを入れるだけでサクッとモバイル最適化できました。素晴らしい。

f:id:ktkooon:20171009173516p:plain

シンプルさを活かした方がよさそう

以前はど派手なヘッダー画像を置いていました。ですが、この「stripe」の場合シンプルさを活かして主張しすぎないヘッダー画像、もしくは設定なしがしっくりきそうです。シンプルイズベスト。

おわりに

ものの1時間程度で、デザインテーマ決めからもろもろの設定が完了しました。サクッとテーマを変えれるのもはてなブログの良さですね^_^

はてなブログ Perfect GuideBook

そしてついでに独自ドメインも設定してみました。
過去の自分の記事がここで活躍。

www.step-forward5.net

もしブログを書くのに行き詰まったり、ちょっと飽きてきたら気分転換にデザインテーマを変えてみると良いかもしれません。

気分転換できたので、ぼちぼち今後も更新していきたいと思います。

おわり

AD