カテゴリ選択とブログ内検索

ノウハウ-ブログのカストマイズ ノウハウ

本日は、グローバルナビに設置したカテゴリ選択とブログ内検索のお話です。

カテゴリの選択

普通、グローバルナビに設定するカテゴリは、一つずつ選んで手で設定します。しかし、このブログのカテゴリは２１個もあって、その１つ１つを設定するのは大変な作業になります。

(・～・：)

そこで、グーグル先生にお尋ねしたところ、自動でカテゴリ一覧を取得する方法を教えていただきました。とても素晴らしい方法です。

www.ituore.com

ブログ内検索

サイドバーにブログ内検索のモジュールがあります。私もしばらくはサイドバーに表示していたのですが、グローバルナビの中に入れてみました。

設定するコードは、サイドバー・モジュールのコードをそのまま使いました。

モーダルウィンドウ

カテゴリ選択とブログ内検索をそのままグローバルナビに表示させることもできたのですが、今回はモーダル・ウィンドウで表示するようにしました。

モーダル・ウィンドウとは、本文の上に小さなウィンドウを表示する方法です。

モーダルウィンドウ

作り方は次の記事で教えていただきました。

カスタマイズしやすい！自分で作るjQueryモーダルウィンドウ | それからデザイン スタッフブログ

設定場所は

次の２ヶ所です。

ダッシュボード → デザイン → カストマイズ → フッタ

<!-- 03.モーダルウィンドウ↓ -->
<div class="modal" id="modal01">
  <!-- モーダルウィンドウが開いている時のオーバーレイ -->
  <div class="overLay modalClose"></div>
  <!-- モーダルウィンドウの中身 -->
  <div class="inner">
    <div class="modal-title">カテゴリ一覧</div>
    <div class="modal-body">
      <div class="categories-menu">
      <form>
        <select>
          <option value="hide">-- 選択してください --</option>
          </select>
          <i class="fa fa-angle-down" aria-hidden="true"></i>
        </form>
      </div>
      <a href="" class="modalClose">閉じる</a>
    </div>
  </div>
</div>
<div class="modal" id="modal02">
  <!-- モーダルウィンドウが開いている時のオーバーレイ -->
  <div class="overLay modalClose"></div>
  <!-- モーダルウィンドウの中身 -->
  <div class="inner">
    <div class="modal-title">キーワード検索</div>
    <div class="modal-body">
      <form class="search-form" role="search"
       action="http://tk450.hatenablog.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>
      <a href="" class="modalClose">閉じる</a>
    </div>
  </div>
</div>
<!-- 03.モーダルウィンドウ↑ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
<!--
  var $fttr = $.noConflict(true);
  (function($) {
    $(function() {
      // 03.モーダルウィンドウ↓
      // モーダルウィンドウが開くときの処理
      $(".modalOpen").click(
        function() {
          $(window).scrollTop(0);
          var navClass = $(this).attr("class"), href = $(this).attr("href");
          $(href).fadeIn();
          $(this).addClass("open");
          $(".main-navigation").toggleClass("toggled");
          return false;
      });
      // モーダルウィンドウが閉じるときの処理
      $(".modalClose").click(function() {
        $(this).parents(".modal").fadeOut();
        $(".modalOpen").removeClass("open");
        return false;
      });
      // 03.モーダルウィンドウ↑
      // 04.カテゴリ選択↓
      var categories;
      $.get("/categories").done(function(data) {
        categories = $(data).find(".entry-content ul li a");
        categories.each(function() {
          var categoryUrl = $(this).attr("href");
          var categoryText = $(this).text();
        $("<option></option>", {
          "value" : categoryUrl,
          "text" : categoryText
        }).appendTo(".categories-menu select");
      });
    });
    $(".categories-menu select").change(function() {
      window.location = $(this).find("option:selected").val();
    });
    // 04.カテゴリ選択↑
    });
  })($fttr);
//-->
</script>

tk450.hatenablog.comと書かれた部分は、このブログです。もし、コピペされる方はご自分のブログＵＲＬに変更して下さい。

ダッシュボード → デザイン → カストマイズ → デザインCSS

/* 03.モーダルウィンドウのスタイル↓ */
.modal {
 position: absolute;
 width: 100%;
 height: 100vh;
 top: 0;
 left: 0;
 display: none;
}

.overLay {
 position: absolute;
 top: 0;
 left: 0;
 background: rgba(200, 200, 200, 0.9);
 width: 100%;
 height: 100vh;
 z-index: 10;
}

.modal .inner {
 position: absolute;
 z-index: 11;
 top: 30%;
 left: 50%;
 transform: translate(-50%, -50%);
 border-radius: 8px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 -o-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 padding: 10px;
 margin: 0 auto;
 text-align: center;
 border: 1px solid #333;
}

.modal-title {
 padding: 8px;
 background: rgba(137, 189, 211, 0.8);
 border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.modal-body {
 padding: 8px;
 background: rgba(255, 255, 255, 0.9);
}
/* 03.モーダルウィンドウのスタイル↑ */

/* 04.カテゴリ選択と検索のデザイン↓ */
.categories-menu {
 position: relative;
 margin: 3px;
 overflow: hidden;
 border: 1px solid #333;
}

.categories-menu select {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 background: none;
 border-radius: 0;
 display: block;
 width: 150%;
 padding: 0.5em 1em;
 margin: 0;
 border: 0;
 outline: none;
 font-size: 16px;
 line-height: 1.5;
}

.categories-menu .fa-angle-down {
 position: absolute;
 top: 0;
 right: 0;
 display: block;
 padding: 0.5em 1em;
 font-size: 20px;
 font-weight: bold;
 pointer-events: none;
 border-left: 1px solid #333;
}

.categories-menu .fa-angle-down {
 background: rgb(97, 101, 134);
 color: #fff;
}

form>i {
 margin: 0;
}
/* 04.カテゴリ選択と検索のデザイン↑ */

まとめ

本日は、このブログに設定しているカテゴリ選択とブログ内検索をご紹介しました。

今回、落ちは・・・ないです。

(;д；)

おしまい

※最新の設定は、こちらの記事でご確認ください。

カテゴリ一覧
キーワード検索