ブログデザインのカスタマイズ

はてなブログの見た目の変更は、テーマのインストール等で行います。6月から現在のテーマ｢コンテンツ｣に変更するにはしたものの、細かいところは放置していました。

100記事到達したのを機に、細かいところを改善しました。いろいろ調べましたが、次やるときはすっかり忘れていると思うので、メモを残しておきます。

ベースのテーマ:CONTENS
- グローバル（トップ下）メニューのレスポンシブ対応
- HTML & CSS
ボトムメニユー
更新日を表示して、アイコンをつける
確認している不具合
リンク

ベースのテーマ:CONTENS

開発されたのは2016年、1万インストール超え。スマホでもPCでも統一デザインで閲覧できるレスポンシブルデザインです。紺色ベースのシンプルさが気に入ってインストールしました。

blog.hatena.ne.jp

グローバル（トップ下）メニューのレスポンシブ対応

テーマ「CONTENTS」では、グローバルメニューを表示させるにはHTMLとCSSのコピペが必要。

PCやタブレットでは紺色のリンクバーになりますが、スマホでは3番線のハンバーガーボタンの表示に変わります。

HTML & CSS

▼ HTMLを表示



<code>
<div class="navi">
  <div class="toggle"><a href="#">MENU</a>
  </div>
  <ul class="menu">
    <li><a href="https://driveon43.com/archive/category/100%E8%A8%98%E4%BA%8B">100記事</a></li>
    <li><a href="https://driveon43.com/archive/category/%E6%9B%B8%E3%81%8F%E4%BD%9C%E6%A5%AD">書く作業</a></li>
    <li><a href="https://driveon43.com/archive/category/%E9%81%93%E8%B7%AF">道路</a></li>              
    <li><a href="https://driveon43.com/archive/category/%E5%82%99%E5%BF%98%E9%8C%B2" target="_blank">備忘録</a></li>
    <li>
      <div class="navi-search">
        <form class="search-form" role="search" action="https://driveon43.com/search" method="get">
        <input type="text" name="q" class="search-module-input" value="" placeholder="検索" required>
        <input type="submit" value="検索" class="search-module-button" />
        </form>
      </div>
    </li>
    <li class="close">
      <a href="#">close</a>
    </li>
  </ul>
</div>

<!-- header部分に記載してあれば不要かも -->             
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
    $(".toggle").click(function(){
        $(this).next().slideToggle();
    });   
    $(".close").click(function(){
        $(this).parent().slideToggle();
            return false;
    });
 $(window).resize (function(){
    var win = $(window).width();
    var resp = 767;
    if(win > resp){
      $(".menu").show();
    } else {
      $(".menu").hide();
    }
  });
})(jQuery);
</script>
</code>

▼ CSSを表示

/* メニューのトグル化 */
.toggle,.close{
  display: none;
}
@media only screen and (max-width: 767px) {
  .menu{
    display: none;
    width: 100%;
  }
  .menu a:hover{
    background: #ccc;
  }
  .toggle{
    display: block;
    position: relative;
    width: 100%;
  }
  .close{
  display: block;
  position: relative;
  width: 100%;
  background: #457B9D;
  }
  .toggle a{
    display: block;
    padding: 12px 0 10px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background:#1D3557;
  }
  .toggle:before{
    position: absolute;
    font-family: "blogicon";
    content: "\f003";
    top: 50%;
    right: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    color:#fff;
  }
}
/* メニューのトグル化ここまで*/

テーマの公式ブログを見ながらやりました。

レスポンシブ対応とグローバルメニューをトグルメニュー化する方法を解説 - DREAMARK