はてなブログをレスポンシブ対応にしてみた。

このブログはslimってテーマを使ってます。
どうやらカスタマイズのヘッダやらフッタにjsがそのまま書けるっぽいので、
ちょこちょこCSS加えたりjs書いたりしてレスポンシブ対応にしてみました。

メニュー部分はデザイン>カスタマイズから
ヘッタを内にメニューのアイコンを作るDOMを作成
(空span量産でイケてないけれど！)

<a id="spNav" href="#box2"><span></span><span></span><span></span></a>

フッタを選択してメニュー表示用のスクリプトを記述

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
  var $nav = jQuery('#spNav'); // 
  var $aside = jQuery( $nav.attr('href') );
  $(document).on('click', '#spNav', function(evt) {
    if($nav.hasClass('active')) {
      $nav.removeClass('active');
      $aside.removeAttr('style');
    } else {
      $nav.addClass('active');
      $aside.show();
    }
    return false;
  });
});
</script>

あとはデザインCSSで頑張る感じ。

/* spNav */
#spNav {
  position: absolute;
  top: 97px; /* globalHeader 37px + margin 60px */
  left: 10px;
  display: none;
  padding: 5px;
  width: 22px;
  height: 18px;
  overflow: hidden;
  background-color: #FFF; 
  border-radius: 2px;
}
#spNav span {
  display: block;
  margin-top: 3px;
  background-color: #666;
  width: 100%;
  height: 4px;
}
#spNav span:first-child {
  margin-top: 0;
}
#spNav.active {
  background-color: #E9E9E9; 
}
#spNav.active span {
  background-color: #4f5759;  
}
/* responsive */
@media (min-width:960px) {
  /* 小さくない時は常にasideメニューを表示しておく */
  aside#box2 {
    display: block !important;
  }
}
@media (max-width:960px) {
  aside#box2 {
    display:none;
    float: none;
    position: absolute;
    top: 124px; /* globalHeader 37px + margin 60px + btn 18 + 10 */
    left: 0px;
    padding: 25px 25px 0;
    background-color: #FFF;
    border: 1px solid #E9E9E9;
    width: 220px
  }
  #spNav {
    display: block;
  }
}