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

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

はてなブログ/ボトムナビゲーション改訂版

はてなブログ

(2016/10/19)以下に汎用版があります。

www.imuza.com


jQuery なしで、はてなブログにボトムナビゲーションを作った前回の記事「はてなブログ=スマホ用カスタマイズ、最新記事、カテゴリーのナビゲーションをボトムに表示する(jQueryなし) - IMUZA.com」ですが、いろいろなテーマで試してみますと、結構修正しなくちゃいけないところが多いですね。

原因は、「最新記事」や「カテゴリー」のクラスhatena-module, hatena-module-recent-entries, hatena-module-category, hatena-module-title, hatena-module-bodyなどの設定がそのまま反映されますので、そのうち不都合な設定を上書きするかクリアしないと思うようにならないということです。

Chrome や Firefox のデベロッパーツールを使って、問題となっているスタイルを上書きすれば問題ないのですが、結構ハードル高いかもです。

設定されているクラスを取ってしまって新しいスタイルを設定するか、要素自体を移動してしまうかで汎用性のあるものにできそうですのでやってみようとは思いますが、とりあえずスクリプト部分の不都合がありましたので修正した改訂版を以下に上げました。


修正箇所

  • Latest, Category の高さを決め打ちしてしまっていますので可変にしました。
  • Latest, Category を表示している時に Top をタップしてもパネルが消えない不都合を修正しました。
  • Top へのスムーズスクロールスピードをゆっくりにしました。


導入方法

前記事を合わせてお読みください。


次のコードの4行目サイトURLを自分のサイトの URL に変更して、カスタマイズ > フッタ に入れてください。

<div id="nav-panel">
  <a href="javascript:void(0)" class="nav-prev nav-none" title="Prev"></a>
  <a href="javascript:void(0)" class="nav-next nav-none" title="Next"></a>
  <a href="*****サイトURL*****" class="nav-home" title="Home"></a>
  <a href="javascript:void(0)" class="nav-recent" title="Latest"></a>
  <a href="javascript:void(0)" class="nav-category" title="Category"></a>
  <a href="javascript:void(0)" class="nav-top" title="Top"></a>
</div>
<script>
  function togglePanel(a, b) {
    document.getElementsByClassName(a)[0].classList.toggle('visible');
    document.getElementsByClassName(b)[0].classList.remove('visible');
  }

  function scrollToTop() {
    document.getElementsByClassName('hatena-module-recent-entries')[0].classList.remove('visible');
    document.getElementsByClassName('hatena-module-category')[0].classList.remove('visible');
    y = window.pageYOffset;
    setTimeout(function(){
      if (y >= 0){
        y = y - y / 20 - 1;
        window.scrollTo(0, y);
        setTimeout(arguments.callee, 10);
      }else{
        window.scrollTo(0, 0);
      }
    }, 10);
  }

  (function(){
    var checkRef = 0,
      nowLoc = window.location.href,
      thisHost = location.hostname,
      thisRef = document.referrer;
    if (thisRef.indexOf(thisHost) !== -1) checkRef = 1;
    if (thisRef === 'http://' + thisHost + '/') checkRef = 2;
    if (checkRef !== 0) {
      var prev = document.getElementsByClassName('nav-prev')[0];
      prev.classList.remove('nav-none');
      prev.addEventListener('click', function(){history.back()}, false);
    }
    if (checkRef === 0 && nowLoc === 'http://' + thisHost + '/') checkRef = 2;
    var pagerNext = document.getElementsByClassName('pager-next')[0];
    if (checkRef !== 0 && pagerNext !== undefined) {
      var next = document.getElementsByClassName('nav-next')[0];
      next.classList.remove('nav-none');
      next.setAttribute('href', pagerNext.getElementsByTagName('a')[0]);
    }
    document.getElementsByClassName('nav-recent')[0].addEventListener('click', function(){togglePanel('hatena-module-recent-entries', 'hatena-module-category')}, false);
    document.getElementsByClassName('nav-category')[0].addEventListener('click', function(){togglePanel('hatena-module-category', 'hatena-module-recent-entries')}, false);
    document.getElementsByClassName('nav-top')[0].addEventListener('click', scrollToTop, false);
    document.getElementsByClassName('hatena-module-category')[0].style.height = document.getElementsByClassName('hatena-module-category')[0].clientHeight + 'px';
    document.getElementsByClassName('hatena-module-recent-entries')[0].style.height = document.getElementsByClassName('hatena-module-recent-entries')[0].clientHeight + 'px';
    document.getElementsByClassName('nav-top')[0].addEventListener('click', scrollToTop, false);
  })();
</script>


カスタマイズ > デザインCSS に次のスタイルを追加してください。ナビゲーション、パネルの背景色はコメント部分のカラーコードを変更してください。

@media (max-width: 480px) {
  .hatena-module {
    all: initial;
  }
  .hatena-module-recent-entries,
  .hatena-module-category {
    position: fixed;
    left: 0;
    bottom: 46px;
    width: 100%;
    margin-bottom: 0;
    z-index: -1;
    -webkit-transition: z-index 0.3s linear;
    transition: z-index 0.3s linear;
  }
  .hatena-module-recent-entries .hatena-module-title,
  .hatena-module-category .hatena-module-title,
  .hatena-module-recent-entries .hatena-module-body,
  .hatena-module-category .hatena-module-body {
    position: relative;
    background: #2528b7;
    color: #ffffff;
    font-size: 14px;
    bottom: -100%;
    -webkit-transition: bottom .3s linear;
    transition: bottom .3s linear;
  }
  .hatena-module-recent-entries a,
  .hatena-module-category a {
    color: #ffffff;
  }
  .hatena-module-recent-entries .urllist-title-link,
  .hatena-module-category .urllist-title-link {
    line-height: initial;
  }
  .hatena-module-recent-entries .hatena-urllist li,
  .hatena-module-category .hatena-urllist li {
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    overflow: hidden;
  }
  .hatena-module-recent-entries .hatena-urllist li a,
  .hatena-module-category .hatena-urllist li a {
    display: block;
    padding: 0;
    border: none;
    font-size: initial;
    padding: 5px 10px;
    height: 42px;
    overflow: hidden;
  }
  .hatena-module-recent-entries .hatena-urllist li a:hover,
  .hatena-module-category .hatena-urllist li a:hover {
    color: rgba(255, 255, 255, 0.5);
  }
  .hatena-module-recent-entries .recent-entries-date-link,
  .hatena-module-recent-entries .recent-entries-categories,
  .hatena-module-recent-entries .recent-entries-entry-body {
    display: none;
  }
  .hatena-module-recent-entries .hatena-urllist li a.recent-entries-image-link,
  .hatena-module-recent-entries .hatena-urllist li a.bookmark-widget-counter {
    display: none;
  }
  .hatena-module-recent-entries .hatena-module-title {
    margin: 0;
    padding: 0;
    border: none;
    font-size: initial;
    font-weight: normal;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }
  .hatena-module-recent-entries .hatena-module-title a {
    display: block;
    line-height: 42px;
    padding: 5px 10px;
    height: 42px;
    font-weight: bold;
  }
  .hatena-module-recent-entries .hatena-module-title a::after {
    content: "すべての記事一覧";
    position: absolute;
    left: 0;
    width: 100%;
    background: #2528b7;
    padding-left: 10px;
    padding-right: 10px;
  }
  .hatena-module-category .hatena-module-title {
    display: none;
  }
  .hatena-module-category .hatena-urllist li a {
    height: initial;
  }
  .visible.hatena-module-recent-entries,
  .visible.hatena-module-category {
    z-index: 1;
  }
  .visible.hatena-module-recent-entries .hatena-module-title,
  .visible.hatena-module-category .hatena-module-title,
  .visible.hatena-module-recent-entries .hatena-module-body,
  .visible.hatena-module-category .hatena-module-body {
    bottom: 0;
  }
  #nav-panel {
    font-family: 'Helvetica', 'Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, MS PGothic, sans-serif;
    line-height: initial;
    z-index: 2;
    height: 46px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #1c1f8c;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  #nav-panel a {
    text-align: center;
    width: 20%;
    display: block;
    color: #ffffff;
    font-size: 21px;
    text-decoration: none;
  }
  #nav-panel a:active {
    color: rgba(255, 255, 255, 0.5);
  }
  #nav-panel a.nav-none {
    color: rgba(255, 255, 255, 0.3);
  }
  #nav-panel a::after {
    content: attr(title);
    display: block;
    font-size: 11.2px;
  }
  #nav-panel a.nav-prev::before {
    font-family: blogicon;
    content: "\f005";
  }
  #nav-panel a.nav-next::before {
    font-family: blogicon;
    content: "\f006";
  }
  #nav-panel a.nav-home::before {
    font-family: blogicon;
    content: "\f017";
  }
  #nav-panel a.nav-top::before {
    font-family: blogicon;
    content: "\f007";
  }
  #nav-panel a.nav-recent::before {
    font-family: blogicon;
    content: "\f031";
  }
  #nav-panel a.nav-category::before {
    font-family: blogicon;
    content: "\f039";
  }
  #footer {
    margin-bottom: 46px;
  }
}


なお、当然のことなので書いていませんが、レスポンシブデザインのテーマを使用している場合のカスタマイズです。