はてなブログで【目次】をサイドバーに表示する方法 | はてなブログカスタマイズ

Photo by Fotis Fotopoulos on Unsplash

今回のはてなブログカスタマイズは、記事の目次をサイドバーにも表示するものです。

記事のよこに目次を置き、スクロール追従させることで、読んでいるところを把握することができ、記事が読みやすくなります。
記事が長い場合に効果的です。

当カスタマイズは、スクロール追従させることを想定したカスタマイズ内容になっています。

事前準備

目次をサイドバーに表示するために、表示用のHTMLモジュールを追加します。

HTMLモジュールの追加方法がわからない場合は、コチラの記事を参考にしてください。

 www.it-the-best.com

スクロール追従させる場合

目次をスクロール追従させる場合は、サイドバーの一番下にモジュールを追加することをお勧めします。

記事の目次

目次の表示方法

記事の目次を表示するには、記事編集画面で入力補助ツールバーから「目次」ボタンをクリックします。

という文字が入力され、この文字の位置に記事の目次が表示されます。

記事の見出しが目次として表示されます。

サイドバーに表示する

ここからは、本題のサイドバーに目次を表示する手順になります。

※当カスタマイズでは、jQueryを使用しています。jQueryの設置方法は「jQueryの設定方法 - jQueryを使用するまでの手順 |【jQuery】 - IT the Best」をご覧ください。

本題のサイドバーに表示する方法ですが、当記事ではHTML要素のクローンを生成して表示します。

1. 目次のクローン生成からサイドバーへの表示
   サイドバーの一番下に空のHTMLはてなモジュールを作成し、そこに目次を追加します。
   

   <script>
   var toc=$(".entry-content .table-of-contents"); // 目次
   if (toc.length>0) { // 目次が存在する
      var toc_clone=toc.clone(true); // 目次のクローン生成
      var sidebar_last=$("#box2-inner>.hatena-module.hatena-module-html").last() // サイドバーの一番下のモジュール
      var tocHatenaModule=$(document.createElement("div")).addClass("hatena-module hatena-module-html").append($(document.createElement("div")).addClass("hatena-module-body").append(toc_clone))
    sidebar_last.after(tocHatenaModule); // サイドバーのいっちばんしたのモジュールに追加
   }
   </script>

   Copy
2. サイドバーに表示した目次の固定
   

   <style>
   #box2-inner{
      height:100%;
   }
   #box2-inner>.hatena-module:last-child{
      position: sticky; /* スクロール追従 */
      top: 10px;
   }
   </style>

   Copy

これで、記事の目次をサイドバーに表示することができます。
※JavaScriptはサイドバーより後に記述します

JavaScriptコードの記述方法についてはコチラ

強調表示

記事を読んでいるときに、どの目次内を読んでいるのかわかるように目次を強調表示する処理を追加しました。

これは、スクロールするたびに見出しの位置を取得し、その見出しが画面トップに来た時に目次を強調表示させるものです。 

今回は、記事の見出しがページトップに来た時に、目次にクラスの追加/削除を行い強調表示をします。

<script>
$(window).on("scroll", function (e) {  // スクロールするたびに呼ばれる
    var targetElement=false; // 強調表示を行う要素
    $("#box2-inner .hatena-module .table-of-contents li>a").each(function (i, element) {// 目次の見出しごとの処理
        var headingName = $(element).attr("href").replace(/^#/, ""); // 見出し名
        var headingPosition = $("#" + headingName)[0].offsetTop;     // 見出しの位置格納
        $(element).removeClass("toc-highlight");                     // 強調表示クラスの削除
        if (window.scrollY>=headingPosition) {                       // 見出し位置がスクロール量より小さい
            targetElement=element;                               // 強調表示を行う要素を更新
        }
    });
    if (targetElement) {
        $(targetElement).addClass("toc-highlight");                   // 強調表示クラスの追加   
    }
});
</script>
<style>
.toc-highlight{
    background:blue;
    color:white;
}
</style>

Copy

【コピペok】はてなブログでユーザー向けのカテゴリー別サイトマップページを作成する 表示内容,スタイルの変更可能 | はてなブログカスタマイズ はてなブログツール

カテゴリー別アーカイブ - IT the Best
↑ 当ツールで生成したコードで、カテゴリー別記事一覧を表示しています。 

カテゴリー別記事一覧のサイトマップページ 

はてなブログで、ユーザー向けのサイトマップページを作成するためのJavaScriptコードとスタイルコードを生成します。

カテゴリー別に記事一覧を取得し、記事内に表示します。

下の記事の処理に、オプションとして４種類の表示内容,スタイルの選択をできるようにしたものです。

www.it-the-best.com

サイトマップの種類

• 記事タイトルだけ(リンクだけ、日付なし)
• 記事タイトル・サムネ(サムネがない場合記事はタイトルのみ)
• 記事タイトル・サムネ・カテゴリー
• 記事タイトル・サムネ・カテゴリー・記事概要(はてなスターも含む)

コードを設置したページには、はてなモジュールのカテゴリーリストが存在する必要があります。

コード生成ツール 

表示形式の種類を選択し、コードをコピーします。コピーしたコードを記事内(固定ページ)に貼り付けることで、カテゴリー別の記事一覧を表示するサイトマップページを作成することができます。

スタイルは、「記事タイトル・サムネ・カテゴリー・記事概要(はてなスターも含む)」の表示内容用に作成しました。

スタイルは、はてなブログのデフォルトテーマをもとに作成しています。
そのため、異なるテーマを使用していたり、独自スタイルを適用しているなどの場合、レイアウトが崩れる可能性があります。

階層カテゴリー用

 

記事タイトルだけ(リンクだけ、日付なし)
記事タイトル・サムネ
記事タイトル・サムネ・カテゴリー
記事タイトル・サムネ・カテゴリー・記事概要(はてなスターも含む)

必要最低限のみ(横向きの一覧にする)
カード形式
カード形式-レスポンシブ
カード形式2
2カラム形式
2カラム形式-レスポンシブ

サムネイルがないときにNO IMAGEを表示する

  サンプル:  

NO IMAGE

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

表示する最大記事数(カテゴリーごと):

指定しない場合、カテゴリー記事一覧の１ページで表示される記事数が、表示する最大記事数となります。

もっと見るボタンを配置する

全ての記事が表示されていない場合に、もっと見るボタンがリストの後ろに表示されます。

背景色:

文字色:

文字の大きさ:

文字の太さ:

Padding(詰め物):

ボーダー:

ボーダー左:

Margin(余白):

SAMPLE TITLE

開く

背景色:
文字色:

<style>

/* other */
                .ListPageByAllCategory-archive-entries-more {
                  cursor: pointer;
                  font-size: small;
                }
                
                .ListPageByAllCategory-archive-entries-more:hover {
                  color: #174fec;
  }

/* title */
.ListPageByAllCategory-archive-entries-title {
font-weight: bold;
padding: 5px 15px;
border: 1px solid #eee;
border-left: 4px solid #666;
background-color: #fafafa;
margin: 3em 2px 1em 4px;
font-size: large;
  }

/* ListPageByAllCategory-archive-entries */
  .archive-entries.ListPageByAllCategory-archive-entries {
    white-space: nowrap;
    overflow: auto;
  }
  .archive-entries.ListPageByAllCategory-archive-entries section {
    display: inline-block;
    white-space: normal;
  }

.ListPageByAllCategory-archive-entries section .entry-thumb-link .entry-thumb-no-image {
  background-color: #333;
  background-image: linear-gradient(45deg, #3a3a3a 25%, #3e3e3e 25%, transparent 75%, #444444 75%);
  background-size: 5px 5px;
  background-position: 0px 0px,3px 3px;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  font-size: x-large;
}

.ListPageByAllCategory-archive-entries section .entry-thumb-link .entry-thumb-no-image .entry-thumb-no-image-text {
  width: 100%;
  }

/* card */
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card {
    padding: 2px 5px;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
  }
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section {
    white-space: normal;
    display: inline-block;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    overflow: hidden;
    border-radius: .5em;
    width: 100%;
    max-width: 225px;
    height: 220px;
    scroll-snap-align: center;
    padding: 0;
    -webkit-box-shadow: 1px 2px 7px #ccc;
            box-shadow: 1px 2px 7px #ccc;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section:not(:first-child) {
    margin-left: 10px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .archive-entry-header {
    position: relative;
    line-height: 1;
    top: 126px;
    height: 93px;
    margin: 0 7px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .archive-entry-header .archive-date {
    position: absolute;
    display: inline-block;
    font-size: x-small;
    font-weight: bold;
    z-index: 100;
    bottom: 3px;
    margin: 0 0 7px;
    padding: 4px 4px 0;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .archive-entry-header .archive-date a {
    color: #333;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .archive-entry-header .entry-title {
    position: absolute;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
    font-size: small;
    font-weight: bold;
    left: 0;
    z-index: 100;
    border: 0;
    margin: 0;
    line-height: 1.4;
    height: 2.8em;
    top: 30px;
    padding: 0 4px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .archive-entry-header .entry-title a {
    color: #333;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .categories {
    position: absolute;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    z-index: 100;
    margin: 7px;
    padding: 0 5px;
    top: 126px;
    font-size: x-small;
    height: 20px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .categories .archive-category-link {
    display: inline-block;
    font-size: x-small;
    font-weight: bold;
    color: #333;
    margin: 0;
    margin-right: 5px;
    padding: 0;
    background-color: unset;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .entry-thumb-link {
    display: block;
    position: absolute;
    z-index: 50;
    top: 0;
    width: 100%;
    height: 126px;
    max-width: 225px;
    overflow: hidden;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .entry-thumb-link .entry-thumb {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .entry-thumb-link .entry-thumb::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    -webkit-transition: all 0.5s cubic-bezier(0.26, 0.77, 0.43, 0.9);
    transition: all 0.5s cubic-bezier(0.26, 0.77, 0.43, 0.9);
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .archive-entry-body {
    display: none;
    position: absolute;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-flow: wrap;
        flex-flow: wrap;
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    z-index: 100;
    line-height: 1;
    bottom: 0px;
    padding: 4px 2px;
    height: 5px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .archive-entry-body .entry-description {
    position: relative;
    bottom: -100px;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    max-height: 4.8em;
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    z-index: 100;
    font-size: small;
    color: white;
    line-height: 1.2;
    margin: 5px 6px 5px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .archive-entry-body .social-buttons {
    position: relative;
    bottom: -100px;
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    overflow: hidden;
    padding: 0 4px;
    margin: 2px 0;
    z-index: 100;
    width: 100%;
    max-height: 4.2em;
    line-height: 1.2;
  }
  
  @media screen and (min-width: 960px) {
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .entry-thumb-link .entry-thumb {
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .archive-entry-body {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .archive-entry-body::after {
      content: "";
      position: absolute;
      bottom: 30%;
      height: 0%;
      width: 40px;
      left: calc(50% - 20px);
      border: 0;
      background-color: #777;
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section:hover .entry-thumb-link .entry-thumb {
      -webkit-transform: scale(1.05);
              transform: scale(1.05);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section:hover .entry-thumb-link .entry-thumb::after {
      background-color: rgba(0, 0, 0, 0.1);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section:hover .archive-entry-body::after {
      height: 25%;
      border: 1px solid #777;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .archive-entry-body:hover {
      height: auto;
      background-color: rgba(0, 0, 0, 0.8);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .archive-entry-body:hover .entry-description {
      bottom: 0;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .archive-entry-body:hover .social-buttons {
      bottom: 0;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card section .archive-entry-body:hover::after {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 1px solid #888;
      background-color: transparent;
    }
  }

/* card-responsive */
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive {
    padding: 2px 5px;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
  }
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section {
    white-space: normal;
    display: inline-block;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    overflow: hidden;
    border-radius: .5em;
    width: 100%;
    max-width: 225px;
    height: 220px;
    scroll-snap-align: center;
    padding: 0;
    -webkit-box-shadow: 1px 2px 7px #ccc;
            box-shadow: 1px 2px 7px #ccc;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section:not(:first-child) {
    margin-left: 10px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-header {
    position: relative;
    line-height: 1;
    top: 126px;
    height: 93px;
    margin: 0 7px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-header .archive-date {
    position: absolute;
    display: inline-block;
    font-size: x-small;
    font-weight: bold;
    z-index: 100;
    bottom: 3px;
    margin: 0 0 7px;
    padding: 4px 4px 0;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-header .archive-date a {
    color: #333;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-header .entry-title {
    position: absolute;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
    font-size: small;
    font-weight: bold;
    left: 0;
    z-index: 100;
    border: 0;
    margin: 0;
    line-height: 1.4;
    height: 2.8em;
    top: 30px;
    padding: 0 4px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-header .entry-title a {
    color: #333;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .categories {
    position: absolute;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    z-index: 100;
    margin: 7px;
    padding: 0 5px;
    top: 126px;
    font-size: x-small;
    height: 20px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .categories .archive-category-link {
    display: inline-block;
    font-size: x-small;
    font-weight: bold;
    color: #333;
    margin: 0;
    margin-right: 5px;
    padding: 0;
    background-color: unset;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .entry-thumb-link {
    display: block;
    position: absolute;
    z-index: 50;
    top: 0;
    width: 100%;
    height: 126px;
    max-width: 225px;
    overflow: hidden;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .entry-thumb-link .entry-thumb {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .entry-thumb-link .entry-thumb::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    -webkit-transition: all 0.5s cubic-bezier(0.26, 0.77, 0.43, 0.9);
    transition: all 0.5s cubic-bezier(0.26, 0.77, 0.43, 0.9);
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-body {
    display: none;
    position: absolute;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-flow: wrap;
        flex-flow: wrap;
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    z-index: 100;
    line-height: 1;
    bottom: 0px;
    padding: 4px 2px;
    height: 10px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-body .entry-description {
    position: relative;
    bottom: -100px;
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    z-index: 100;
    font-size: small;
    color: white;
    line-height: 1.2;
    margin: 3px 4px 5px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-body .social-buttons {
    position: relative;
    bottom: -100px;
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    overflow: hidden;
    padding: 0 4px;
    margin: 2px 0;
    z-index: 100;
    width: 100%;
    max-height: 7em;
    line-height: 1.2;
  }
  
  @media screen and (min-width: 960px) {
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section {
      max-width: 308px;
      height: 260px;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-header {
      height: 96px;
      top: 164px;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-header .archive-date {
      margin: 0px;
      padding: 4px 8px;
      bottom: 8px;
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-header .entry-title {
      font-size: 14px;
      top: 26px;
      padding: 5px 5px 5px 8px;
      height: calc(2.8em + 5px);
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-header .entry-title a {
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .categories {
      padding: 0 6px 0 9px;
      margin: 8px 7px 0;
      top: 164px;
      height: 18px;
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .categories .archive-category-link {
      padding: 0 8px 0 0;
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .entry-thumb-link {
      max-width: 308px;
      height: 164px;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .entry-thumb-link .entry-thumb {
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-body {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-body::after {
      content: "";
      position: absolute;
      bottom: 30%;
      height: 0%;
      width: 40px;
      left: calc(50% - 20px);
      border: 0;
      background-color: #777;
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section:hover .entry-thumb-link .entry-thumb {
      -webkit-transform: scale(1.05);
              transform: scale(1.05);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section:hover .entry-thumb-link .entry-thumb::after {
      background-color: rgba(0, 0, 0, 0.1);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section:hover .archive-entry-body::after {
      height: 25%;
      border: 1px solid #777;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-body:hover {
      height: auto;
      background-color: rgba(0, 0, 0, 0.8);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-body:hover .entry-description {
      bottom: 0;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-body:hover .social-buttons {
      bottom: 0;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card-responsive section .archive-entry-body:hover::after {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 1px solid #888;
      background-color: transparent;
    }
  }

/* card2 */
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 {
    padding: 2px 5px;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
  }
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section {
    white-space: normal;
    display: inline-block;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    overflow: hidden;
    border: 1px solid #eee;
    border-radius: .2em;
    width: 100%;
    max-width: 386px;
    height: 255px;
    scroll-snap-align: center;
    padding: 0;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section:not(:first-child) {
    margin-left: 10px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .archive-entry-header {
    position: relative;
    top: 0px;
    line-height: 1;
    height: 100%;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .archive-entry-header .archive-date {
    position: absolute;
    display: inline-block;
    z-index: 100;
    font-size: x-small;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 0.2em;
    margin: 5px 3px 0px;
    padding: 4px 8px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .archive-entry-header .archive-date a {
    color: #333;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .archive-entry-header .entry-title {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    overflow: hidden;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-family: apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    font-weight: bold;
    font-size: 16px;
    border: 0;
    margin: 0;
    height: 65px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 3px 5px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .archive-entry-header .entry-title a {
    color: #ffffff;
    text-shadow: 0px 0px 20px #000000;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .categories {
    position: relative;
    overflow: hidden;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    z-index: 100;
    bottom: 98px;
    height: 30px;
    margin: 0 3px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .categories .archive-category-link {
    display: inline-block;
    font-size: x-small;
    font-weight: bold;
    color: #333;
    background-color: rgba(255, 255, 255, 0.8);
    margin: 0;
    padding: 2px 8px;
    border-radius: .2em;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .entry-thumb-link {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .entry-thumb-link .entry-thumb {
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    margin: 0;
    width: 100%;
    float: unset;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .entry-thumb-link .entry-thumb::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    -webkit-transition: all 0.5s cubic-bezier(0.26, 0.77, 0.43, 0.9);
    transition: all 0.5s cubic-bezier(0.26, 0.77, 0.43, 0.9);
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .archive-entry-body {
    position: absolute;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-flow: wrap;
        flex-flow: wrap;
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    z-index: 100;
    line-height: 1;
    bottom: 0px;
    padding: 4px 2px;
    height: 10px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .archive-entry-body .entry-description {
    font-size: small;
    color: white;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    line-height: 1.2;
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    margin: 3px 4px 5px;
    max-height: 4.8em;
    position: relative;
    bottom: -5em;
    z-index: 100;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .archive-entry-body .social-buttons {
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    width: 100%;
    max-height: 70px;
    padding: 0 4px;
    position: relative;
    bottom: -75px;
    z-index: 100;
  }
  
  @media screen and (min-width: 960px) {
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .archive-entry-header .archive-date {
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      background-color: rgba(255, 255, 255, 0.4);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .archive-entry-header .entry-title {
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      background-color: rgba(0, 0, 0, 0.4);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .archive-entry-header .entry-title a {
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      opacity: 0.6;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .categories {
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .categories .archive-category-link {
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      background-color: rgba(255, 255, 255, 0.4);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .entry-thumb-link .entry-thumb {
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .archive-entry-body::after {
      content: "";
      position: absolute;
      bottom: 30%;
      height: 0%;
      width: 40px;
      left: calc(50% - 20px);
      border: 0;
      background-color: #777;
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section:hover .archive-entry-header .archive-date {
      background-color: rgba(255, 255, 255, 0.8);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section:hover .archive-entry-header .entry-title {
      background-color: rgba(0, 0, 0, 0.8);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section:hover .archive-entry-header .entry-title a {
      opacity: 1;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section:hover .categories .archive-category-link {
      background-color: rgba(255, 255, 255, 0.8);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section:hover .entry-thumb-link .entry-thumb {
      -webkit-transform: scale(1.05);
              transform: scale(1.05);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section:hover .entry-thumb-link .entry-thumb::after {
      background-color: rgba(0, 0, 0, 0.1);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section:hover .archive-entry-body::after {
      height: 25%;
      border: 1px solid #777;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .archive-entry-body:hover {
      height: auto;
      background-color: rgba(0, 0, 0, 0.8);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .archive-entry-body:hover .entry-description {
      bottom: 0;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .archive-entry-body:hover .social-buttons {
      bottom: 0;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section .archive-entry-body:hover::after {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 1px solid #888;
      background-color: transparent;
    }
  }
  
  @media screen and (max-width: 480px) {
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-card2 section {
      height: 205px;
      max-width: 366px;
    }
  }

/* column */
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column {
    padding: 2px 5px;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
  }
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section {
    position: relative;
    white-space: normal;
    overflow: hidden;
    height: 152px;
    display: inline-block;
    margin-right: 10px;
    scroll-snap-align: center;
    width: 450px;
    padding: 0;
    border: 0;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .archive-entry-header {
    position: absolute;
    top: 10px;
    right: 10px;
    left: 150px;
    height: 132px;
    width: 280px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .archive-entry-header .archive-date {
    position: absolute;
    bottom: 0px;
    right: 10px;
    font-weight: bold;
    font-size: small;
    margin: 0;
    width: 100%;
    text-align: right;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .archive-entry-header .archive-date a {
    color: #8c8c8c;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .archive-entry-header .entry-title {
    position: relative;
    top: 45px;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-family: apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
    max-height: 3.9em;
    line-height: 1.3;
    font-weight: bold;
    font-size: 16px;
    border: 0;
    margin: 0;
    padding: 0;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .archive-entry-header .entry-title a {
    color: #333;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .categories {
    overflow: hidden;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    position: absolute;
    top: 10px;
    left: 150px;
    right: 10px;
    margin: 0;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .categories .archive-category-link {
    display: inline-block;
    font-size: x-small;
    font-weight: bold;
    color: #333;
    margin: 0;
    padding: 1px 12px;
    margin-right: 10px;
    background-color: white;
    border-radius: .5em;
    border: 1px solid #ccc;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .entry-thumb-link {
    position: absolute;
    top: 10px;
    left: 0px;
    height: 132px;
    width: 132px;
    border-radius: 0.5em;
    overflow: hidden;
    border: 1px solid #ddd;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .entry-thumb-link .entry-thumb {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .archive-entry-body {
    position: absolute;
    top: 10px;
    right: 10px;
    left: 150px;
    height: 132px;
    display: none;
  }
  
  @media screen and (max-width: 550px) {
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column {
      -ms-scroll-snap-type: unset;
          scroll-snap-type: unset;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section {
      margin-right: 0;
    }
  }
  
  @media screen and (min-width: 960px) {
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section {
      border-right: 1px solid #ccc;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .archive-entry-header .archive-date {
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .archive-entry-header .entry-title {
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .entry-thumb-link .entry-thumb {
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .entry-thumb-link .entry-thumb::after {
      content: "";
      width: 100%;
      height: 100%;
      display: block;
      -webkit-transition: all 0.5s cubic-bezier(0.26, 0.77, 0.43, 0.9);
      transition: all 0.5s cubic-bezier(0.26, 0.77, 0.43, 0.9);
      -webkit-transition-delay: 0.1s;
              transition-delay: 0.1s;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .archive-entry-body {
      display: block;
      overflow: hidden;
      top: unset;
      left: calc(100% - 15px);
      width: 5px;
      line-height: 1;
      padding: 0px;
      height: 100%;
      border-radius: .2em;
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .archive-entry-body .entry-description {
      overflow: hidden;
      display: -webkit-inline-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      font-size: small;
      line-height: 1.4;
      max-height: 4.2em;
      margin: 2px 5px;
      color: white;
      opacity: 0;
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .archive-entry-body .social-buttons {
      overflow: hidden;
      display: block;
      line-height: 1.4;
      max-height: 4.7em;
      opacity: 0;
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .archive-entry-body::after {
      content: "";
      position: absolute;
      right: 0;
      width: 0px;
      height: 40px;
      border-radius: 2em;
      top: calc(50% - 20px);
      border: 0;
      background-color: #777;
      background-color: rgba(0, 0, 0, 0.75);
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section:hover .entry-thumb-link .entry-thumb {
      -webkit-transform: scale(1.05);
              transform: scale(1.05);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section:hover .entry-thumb-link .entry-thumb::after {
      background-color: rgba(0, 0, 0, 0.1);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section:hover .archive-entry-body::after {
      width: 60%;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .archive-entry-body:hover {
      width: 290px;
      left: 150px;
      padding: 8px;
      background-color: rgba(0, 0, 0, 0.75);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .archive-entry-body:hover .entry-description {
      opacity: 1;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .archive-entry-body:hover .social-buttons {
      opacity: 1;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column section .archive-entry-body:hover::after {
      z-index: -1;
      opacity: 0;
      width: 100%;
      height: 100%;
      top: 0;
      border-radius: 0;
    }
  }

/* column-responsive */
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive {
    padding: 2px 5px;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
  }
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section {
    position: relative;
    white-space: normal;
    overflow: hidden;
    height: 152px;
    width: calc(100% - 10px);
    display: inline-block;
    margin-right: 10px;
    scroll-snap-align: center;
    min-width: 450px;
    padding: 0;
    border: 0;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .archive-entry-header {
    position: absolute;
    top: 10px;
    right: 10px;
    left: 150px;
    height: 132px;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .archive-entry-header .archive-date {
    position: absolute;
    bottom: 0px;
    right: 10px;
    font-weight: bold;
    font-size: small;
    margin: 0;
    width: 100%;
    text-align: right;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .archive-entry-header .archive-date a {
    color: #8c8c8c;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .archive-entry-header .entry-title {
    position: relative;
    top: 45px;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-family: apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
    max-height: 3.9em;
    line-height: 1.3;
    font-weight: bold;
    font-size: 16px;
    border: 0;
    margin: 0;
    padding: 0;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .archive-entry-header .entry-title a {
    color: #333;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .categories {
    overflow: hidden;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    position: absolute;
    top: 10px;
    left: 150px;
    right: 10px;
    margin: 0;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .categories .archive-category-link {
    display: inline-block;
    font-size: x-small;
    font-weight: bold;
    color: #333;
    margin: 0;
    padding: 1px 12px;
    margin-right: 10px;
    background-color: white;
    border-radius: .5em;
    border: 1px solid #ccc;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .entry-thumb-link {
    position: absolute;
    top: 10px;
    left: 0px;
    height: 132px;
    width: 132px;
    border-radius: 0.5em;
    overflow: hidden;
    border: 1px solid #ddd;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .entry-thumb-link .entry-thumb {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
  }
  
  .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .archive-entry-body {
    position: absolute;
    top: 10px;
    right: 10px;
    left: 150px;
    height: 132px;
    display: none;
  }
  
  @media screen and (max-width: 550px) {
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive {
      -ms-scroll-snap-type: unset;
          scroll-snap-type: unset;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section {
      width: 100%;
      margin-right: 0;
    }
  }
  
  @media screen and (min-width: 960px) {
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section {
      height: 255px;
      max-width: 663px;
      border-right: 3px solid #ddd;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .archive-entry-header {
      height: 100%;
      top: 0;
      left: 343px;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .archive-entry-header .archive-date {
      top: 200px;
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .archive-entry-header .entry-title {
      font-size: 18px;
      top: 70px;
      -webkit-line-clamp: 4;
      max-height: 5.2em;
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .categories {
      top: 20px;
      left: 343px;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .categories .archive-category-link {
      padding: 3px 12px;
      border-radius: 0;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .entry-thumb-link {
      height: 235px;
      width: 323px;
      left: 10px;
      border-radius: 0.3em;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .entry-thumb-link .entry-thumb {
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .entry-thumb-link .entry-thumb::after {
      content: "";
      width: 100%;
      height: 100%;
      display: block;
      -webkit-transition: all 0.5s cubic-bezier(0.26, 0.77, 0.43, 0.9);
      transition: all 0.5s cubic-bezier(0.26, 0.77, 0.43, 0.9);
      -webkit-transition-delay: 0.1s;
              transition-delay: 0.1s;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .archive-entry-body {
      display: block;
      bottom: -120px;
      opacity: 0;
      top: unset;
      left: 343px;
      line-height: 1;
      height: auto;
      -webkit-transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
      transition: all 0.3s cubic-bezier(0.4, 0.48, 0.15, 0.71);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .archive-entry-body .entry-description {
      overflow: hidden;
      display: -webkit-inline-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      font-size: small;
      line-height: 1.2;
      max-height: 4.8em;
      margin: 0;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section .archive-entry-body .social-buttons {
      max-height: 3.2em;
      overflow: hidden;
      display: block;
      line-height: 1.4;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section:hover .archive-entry-header .archive-date {
      top: 100px;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section:hover .archive-entry-header .entry-title {
      top: 55px;
      -webkit-line-clamp: 2;
      max-height: 2.6em;
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section:hover .entry-thumb-link .entry-thumb {
      -webkit-transform: scale(1.05);
              transform: scale(1.05);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section:hover .entry-thumb-link .entry-thumb::after {
      background-color: rgba(0, 0, 0, 0.1);
    }
    .ListPageByAllCategory-archive-entries.ListPageByAllCategory-archive-entries-column-responsive section:hover .archive-entry-body {
      bottom: 10px;
      opacity: 1;
    }
  }

</style>

{exclusion}

<script>

class ListPageByAllCategory {
                /**
                 * @param {JSON} options
                 *
                 * content:
                 * 1=link only(title),
                 * 2=1 and thumbnail,
                 * 3=2 and category,
                 * 4=3 and summary
                 * style:
                 * 1=card,
                 * 2=card-responsive,
                 * 3=card2,
                 * 4=column,
                 * 5=column-responsive
                 * no_image:boolean
                 * max_articles:number
                 * more:boolean
                 */
                static show(options) {
                  this.options = options;
                  let c = this.get_allCategory();
                  this.show_archive(c);
                }
                static get_allCategory() {
                  // 全てのカテゴリーを取得
                  var categoryList = [];
                  let categories = $(".hatena-module-category .hatena-module-body>ul>li");
                  categories.each(function (i, e) {
                    var c_name = $(e).find(">a").text();
                    try {
                      // 先方、後方にある空白を消す
                      c_name = c_name.replace(c_name.match(/(^[\s].*?)[\S]/)[1], "");
                      c_name = c_name.replace(c_name.match(/[\S].*?([\s].*)$/)[1], "");
                    } catch (error) {}
                    categoryList.push(c_name);
                  });
                  return categoryList;
                }
                static show_archive(categoryList, completedHandler) {
                  let t = this;
                  let entry = $("#main-inner article .entry-content");
                  entry.addClass("page-archive"); // 記事一覧ページと同じスタイルにするためにクラスを追加
                  let completeCount = 0;
                  for (const category of categoryList) {
                    let url =
                      location.origin +
                      "/archive/category/" +
                      category.replace(/ \([\d]*\)$/, "");
                    let allPageArticles = 0;
                    try {
                      allPageArticles = Number(category.match(/ \(([\d]*)\)$/)[1]);
                    } catch (error) {}
                    $.ajax({
                      type: "GET",
                      url: url,
                      dataType: "html",
                      success: (data) => {
                        let html = $($.parseHTML(data));
                        let entries = html.find(".archive-entries").clone().empty(); // すべて取得
              
                        entries.attr("data-page", "1");
                        entries.attr("data-all-page-articles", allPageArticles);
                        entries.attr(
                          "data-max-articles",
                          t.options.max_articles ??
                            html.find(".archive-entries").find("section").length
                        );
                        entries.attr("data-now-page-articles", 0);
              
                        entries = t.getMaxNumberEntries(
                          t,
                          category,
                          entries,
                          completedHandler
                        );
              
                        // スタイル設定用のクラスを追加
                        entries.addClass("ListPageByAllCategory-archive-entries");
                        // option
                        if (typeof t.options == "object") {
                          if (t.options.style == 1) {
                            entries.addClass("ListPageByAllCategory-archive-entries-card");
                          } else if (t.options.style == 2) {
                            entries.addClass(
                              "ListPageByAllCategory-archive-entries-card-responsive"
                            );
                          } else if (t.options.style == 3) {
                            entries.addClass("ListPageByAllCategory-archive-entries-card2");
                          } else if (t.options.style == 4) {
                            entries.addClass("ListPageByAllCategory-archive-entries-column");
                          } else if (t.options.style == 5) {
                            entries.addClass(
                              "ListPageByAllCategory-archive-entries-column-responsive"
                            );
                          }
                        }
                        entry.append(entries); // エントリーに追加
              
                        // タイトルの追加
                        let title = $(document.createElement("div"))
                          .addClass("ListPageByAllCategory-archive-entries-title")
                          .text(category);
                        entries.before(title);
                      },
                    }).always(function () {
                      completeCount += 1;
                      if (completeCount == categoryList.length && completedHandler) {
                        completedHandler();
                      }
                    });
                  }
                }
                static contentFormat(t, entries) {
                  // content
                  if (t.options.content > 1) {
                    // サムネない場合
                    if (t.options.no_image) {
                      entries.find("section").each((i, e) => {
                        if ($(e).find(".entry-thumb-link").length < 1) {
                          let link = $(e)
                            .find(".archive-entry-header .entry-title-link")
                            .attr("href");
                          $(e)
                            .find(".categories")
                            .after(
                              $(document.createElement("a"))
                                .addClass("entry-thumb-link")
                                .attr("href", link)
                                .append(
                                  $(document.createElement("div"))
                                    .addClass("entry-thumb entry-thumb-no-image")
                                    .append(
                                      $(document.createElement("span"))
                                        .text("NO IMAGE")
                                        .addClass("entry-thumb-no-image-text")
                                    )
                                )
                            );
                        }
                      });
                    }
                  }
                  if (t.options.content < 4) {
                    // 記事タイトル・サムネ・カテゴリー
                    entries.find("section.archive-entry .archive-entry-body").remove();
                  }
                  if (t.options.content < 3) {
                    // 記事タイトル・サムネ(サムネがない場合記事はタイトルのみ)
                    entries.find("section.archive-entry .categories").remove();
                  }
                  if (t.options.content < 2) {
                    // 記事タイトルだけ(リンクだけ、日付なし)
                    entries.find("section.archive-entry .entry-thumb-link").remove();
                    entries.find("section.archive-entry").each(function (i, e) {
                      let title = $(e).find(".archive-entry-header a.entry-title-link");
                      let item = $(document.createElement("li")).append(title);
                      e.outerHTML = item[0].outerHTML;
                    });
                  }
                }
                /**
                 *
                 * @param {number} number
                 * @param {jQuery} entries
                 */
                static getMaxNumberEntries(t, category, entries, completedHandler) {
                  let page = Number(entries.attr("data-page"));
                  let allPageArticles = Number(entries.attr("data-all-page-articles"));
              
                  let url =
                    location.origin +
                    "/archive/category/" +
                    category.replace(/ \([\d]*\)$/, "") +
                    "?page=" +
                    page;
                  this.getArchive(
                    url,
                    (data) => {
                      let html = $($.parseHTML(data));
                      let moreEntries = html.find(".archive-entries");
                      if (
                        t.appendArticles(entries, moreEntries) &&
                        entries.find("section,li").length != allPageArticles
                      ) {
                        this.getMaxNumberEntries(t, category, entries, completedHandler);
                      }
                    },
                    (data) => {
                      // more
                      if (t.options.more) {
                        entries
                          .find(".ListPageByAllCategory-archive-entries-more")
                          .first()
                          .remove();
                        if (allPageArticles > entries.find("section,li").length) {
                          entries.append(
                            t
                              .moreButton()
                              .click(() =>
                                t.getMaxNumberEntries(t, category, entries, completedHandler)
                              )
                          );
                        }
                      }
                    }
                  );
                  return entries;
                }
                static appendArticles(entries, moreEntries) {
                  let page = Number(entries.attr("data-page"));
                  let allPageArticles = Number(entries.attr("data-all-page-articles"));
                  let maxArticles = Number(entries.attr("data-max-articles"));
                  let nowPageArticles = Number(entries.attr("data-now-page-articles"));
                  let carryOverNumbers = entries.attr("data-carry-over-numbers")
                    ? Number(entries.attr("data-carry-over-numbers"))
                    : maxArticles;
                  let len = entries.find("section,li").length;
                  let moreLen = moreEntries.find("section").length;
                  let addNumber = carryOverNumbers > 0 ? carryOverNumbers : maxArticles;
                  let nextPage = false;
                  entries.attr("data-carry-over-numbers", 0);
              
                  if (addNumber + nowPageArticles > moreLen) {
                    nextPage = true;
                    addNumber = moreLen - nowPageArticles;
                    entries.attr("data-page", ++page);
                    entries.attr("data-now-page-articles", 0);
                    entries.attr(
                      "data-carry-over-numbers",
                      carryOverNumbers > 0
                        ? carryOverNumbers - moreLen
                        : maxArticles - addNumber
                    );
                  } else {
                    entries.attr("data-now-page-articles", nowPageArticles + addNumber);
                  }
              
                  if (nextPage && addNumber + len > allPageArticles) {
                    if (len - nowPageArticles + moreLen >= allPageArticles) {
                      nextPage = false;
                      entries.attr("data-page", --page);
                    }
                    addNumber = allPageArticles - len;
                    entries.find(".ListPageByAllCategory-archive-entries-more").remove();
                    entries.attr("data-now-page-articles", addNumber - maxArticles);
                  }
              
                  entries.append(
                    moreEntries.clone().find("section").splice(nowPageArticles, addNumber)
                  );
                  this.contentFormat(this,entries);
              
                  return nextPage;
                }
                static getArchive(url, successCallBack, alwaysCallBack) {
                  $.ajax({
                    type: "GET",
                    url: url,
                    dataType: "html",
                    success: (data) => successCallBack(data),
                  }).always((data) => alwaysCallBack(data));
                }
                static moreButton() {
                  return $(document.createElement("span"))
                    .text("もっと見る")
                    .addClass("ListPageByAllCategory-archive-entries-more");
                }
              }

{exclusion}

{exclusion}class ListPageByAllCategory_HierarchyCategory extends ListPageByAllCategory {
                static show(options) {
                  this.options = options;
                  let c = this.Exclude_HierarchyCategory(this.get_allCategory());
                  this.show_archive(c, this.hiddenHierarchyCategory);
                }
                static Exclude_HierarchyCategory(categoryList) {
                  // 階層カテゴリーの除外
                  var NEWcategoryList = [];
                  let singleCategory = [];
                  let hierarchyCategory = [];
                  for (const category of categoryList) {
                    if (!category.match(/[\S]/)) {
                      continue;
                    }
                    let c = this.sortingCategory(category);
                    if (c.length > 1 && !hierarchyCategory.includes(category)) {
                      hierarchyCategory.push(category);
                    } else if (c.length == 1 && !singleCategory.includes(category)) {
                      singleCategory.push(category);
                    }
                  }
              
                  for (const category of singleCategory) {
                    let ct = category.replace(/ \([\d]*\)$/, "");
                    let flag = true;
                    for (const hCategory of hierarchyCategory) {
                      let hct = hCategory.replace(/ \([\d]*\)$/, "");
                      let categories = this.sortingCategory(hct);
                      if (categories.indexOf(ct) == 0) {
                        flag = true;
                        break;
                      } else if (categories.indexOf(ct) > 0) {
                        flag = false;
                      }
                    }
                    if (flag && !NEWcategoryList.includes(category)) {
                      NEWcategoryList.push(category);
                    }
                  }
                  return NEWcategoryList;
                }
                static sortingCategory(category) {
                  // カテゴリーを仕分けする
                  var csList = [],
                    cs = "";
                  var flag = true;
                  for (var s of category) {
                    if (s == "'" || s == '"') {
                      flag = !flag;
                    }
                    if (flag && s === "-") {
                      csList.push(cs);
                      cs = "";
                    } else {
                      cs = cs + s;
                    }
                  }
                  csList.push(cs);
                  return csList;
                }
                static hiddenHierarchyCategory() {
                  // 階層化カテゴリーを非表示にする
                  $(
                    ".ListPageByAllCategory-archive-entries [class*='category-']:not(.hidden-processed)"
                  ).each(function (index, element) {
                    try {
                      var category_name = element.className.match(/ category-(.*)/)[1];
                      var category_list = this.sortingCategory(category_name);
                      if (element.tagName !== "BODY" && category_list.length > 1) {
                        element.style.display = "none"; // 階層化カテゴリーを非表示にする
                      }
                      $(element).addClass("hidden-processed");
                    } catch (error) {}
                  });
                }
              }

{exclusion}

$(function () {
  ListPageByAllCategory.show({content:4,style:1});
});
</script>

Copy

スマホの場合はPC版表示にすることで、記事編集画面でHTMLコードの記述ができます。

階層カテゴリーについてはコチラ

www.it-the-best.com

更新情報

2020/11/25

• 一度に表示する最大記事数の指定が可能
• 表示されていない記事を表示するためのもっと見るボタンの設置が可能

2020/11/28

• 「階層カテゴリー用の場合に、階層化していないカテゴリの記事一覧が表示されない」という問題を修正。

【コピペok】はてなブログ 記事デザインサンプル集 スマホも簡単にカスタマイズ可能！ | はてなブログデザインカスタマイズ

はてなブログの記事用デザインのパーツを備忘録ついでにツール的な感じでまとめました。CSSを生成するツールになっているため、クラス名・スタイルの変更が可能です。(ブラウザによっては正常に動作しないかも...)

スマホからでも簡単に、カスタマイズから実装までができるようにスタイルの編集、ボタンでコードのコピーができるようになっています。

コピペOKです。

コピー用テキストエリア(ページ下部)を設置したので、使用したいデザイン(スタイル)をまとめてコピーすることが可能です。

• コピー用テキストエリアにスタイルを追加する場合は、「追加」ボタンを押してください。

補足
アイコンはFontAwesomeを使用しています。

カラーボックス - 背景色,枠線,アイコン付き

 

 

p

 .color-box

 .cb-large .cb-orange .cb-yellow .cb-blue .cb-red .cb-green .cb-gray .cb-border .cb-bb .cb-bl .cbb-orange .cbb-pink .cbb-red .cbb-skyblue .cbb-blue .cbb-green

 .cb-deep

 .cb-border .cbd-yellow .cbd-orange .cbd-blue .cbd-navy .cbd-red .cbd-green .cbd-gray

 .cb-title

 .cb-orange .cb-blue

 .cb-icon .cb-icon:before

 .cbi-information:before .cb-orange::before .cb-blue::before .cb-green::before

タイトルhtmlcssjs

 

 

 

 

レスポンシブデザイン

@media screen and (max-width: 500px) {
  .color-box.cb-icon {
    padding: 0 20px 20px;
  }
  .color-box.cb-icon:before {
    font-size: 30px;
    line-height: 30px;
    padding: 10px 0 5px;
    text-align: center;
    display: block;
    position: unset;
    border-bottom: 1px solid;
    border-right: 0;
  }
}

Copy

文字の強調表示 1 - 下線,マーカー

 

 

span

 .under

 .u-blue .u-green .u-yellow .u-red .u-orange

 .marker

 .m-blue .m-red .m-green .m-yellow .m-orange .m-gray .m-pink

タイトルhtmlcssjs

 

 

 

 

文字の強調表示 2 - 囲い

 

 

span

 .highlight

 .h-blue .h-green .h-red

タイトルhtmlcssjs

 

 

 

 

ブログカードのヘッドアイコン

 

 

p>iframe

 .blog-card

 

 .bc-icon .bc-icon::before

 .bci-reference::before .bci-google::before .bci-border::before .bci-bb::before .bcib-red::before .bcib-blue::before .bcib-green::before

 .bci-under .bci-under::before

 .bciu-red::before .bciu-green::before .bciu-blue::before

 .bci-slice .bci-slice::before

 .bcis-blue::before .bci-sgreen::before

タイトルhtmlcssjs

 

 

 

 

記事ページ,一覧ページのカテゴリーリンク

はてなブログの初期テーマのCSS

.categories a {
    display: inline-block;
    background: #e9f0f2;
    margin: 0 .3em 0 0;
    padding: 0 10px;
    font-size: 12px;
}

 

 

a

 .entry-category-link .archive-category-link

 

タイトルhtmlcssjs

 

a

 

 

BorderRadius

 

 

div

 .br-02em .br-05em .br-2em .br-4em .br-5em .btr-02em .btr-05em .btr-2em .btr-4em .btr-5em .bbr-02em .bbr-05em .bbr-2em .bbr-4em .bbr-5em

タイトルhtmlcssjs

 

a

 

 

Border

 

 

div

 .b1-light .b1-med .b1-dark

タイトルhtmlcssjs

 

a

 

 

背景色

 

 

div

 .bg-light .bg-gray

タイトルhtmlcssjs

 

a

 

 

影

 

 

div

 .bs-light .bs-med .bs-large

タイトルhtmlcssjs

 

a

 

 

バッジ

全パターン

 

 

p

 .badge

 .badge-x-small .badge-small .badge-medium .badge-large .badge-x-large .badge-lightwhite .badge-white .badge-darkwhite .badge-lightblack .badge-black .badge-lightgray .badge-gray .badge-darkgray .badge-lightred .badge-red .badge-darkred .badge-lightblue .badge-blue .badge-darkblue .badge-navy .badge-lightgreen .badge-green .badge-darkgreen .badge-lightorange .badge-orange .badge-darkorange .badge-lightyellow .badge-yellow .badge-darkyellow

タイトルhtmlcssjs

 

a

 

 

Copy styleタグ コメント

<style>

 

</style>

【手順あり】はてなブログのカテゴリー・パンくずをコピペで簡単に階層化表示にする「スマホも簡単」 | はてなブログカスタマイズ | 階層化カテゴリー

 

投稿日：2019/10/23

当記事は、はてなブログのカテゴリーを階層化(多階層化)するためのカスタマイズ情報です。当記事のScriptを設置し、記事のカテゴリーを当記事に記してあるように階層化することで、カテゴリーモジュールとパンくずリストを階層化することができます。

カテゴリー・パンくずリストを階層化表示にする

完成イメージを見る 

完成イメージ(パンくずリスト)

完成イメージ(カテゴリーリスト)

はてなブログのカテゴリー・パンくずリストの表示を階層化表示にカスタマイズするには、階層化表示にするための処理の追加と階層カテゴリーの入力の2つの作業が必要です。

• 階層化表示にするための処理の追加
• 階層カテゴリーの入力

まず、階層化表示にするための処理の追加を行います。

手順１：階層化表示にするための処理の追加

1. 外部ファイルの読み込み
2. コードをサイトに埋め込む

はてなブログのカテゴリー・パンくずリストを階層化表示にするための処理の追加方法を2つ用意しました。外部ファイルの読み込みによる方法と、コードを埋め込む方法の2つです。

jQueryファイルの読み込むはどちらの方法でも必須です！！

※HTML要素のid、クラス名や位置を変更している場合は、階層化できない可能性があります。

jQueryファイルの設置

外部ファイルの読み込みによる方法と、コードを埋め込む方法どちらでもjQuery JavaScriptコードをより容易に記述するためのもの。のファイル読み込みは必須です。

はてなブログの管理画面から 設定 ＞ 詳細設定 ＞検索エンジン最適化 ＞headに要素を追加の記述欄に、コチラのコードを貼り付けます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

階層化処理の追加方法１：外部ファイルを読み込む

カテゴリー・パンくずリストを階層化表示するために読み込む必要のあるファイルは2つあります。

1. JavaScriptファイル
2. CSSファイル

ファイル一覧を見る 

JavaScript(通常版と圧縮版)

• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.3/hierarchycategory.js
• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.3/hierarchycategory.min.js

CSS(通常版と圧縮版)

• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.1/hierarchycategory.css
• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.1/hierarchycategory.min.css

設置方法

Step1:HTMLコードをコピーする

階層化するためのファイルを読み込むために下記のHTMLコードをコピーします。

<script async src="https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.3/hierarchycategory.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.1/hierarchycategory.min.css">
Copy

Step2:headに追加する

jQuery同様、はてなブログの管理画面から 設定 ＞ 詳細設定 ＞検索エンジン最適化 ＞headに要素を追加の記述欄に、コピーしたコードを貼り付けます。

※画像のファイルは古いバージョンになります。

 これで、ファイルを読み込むための設置作業は終了です。

階層化処理の追加方法２：コードを埋め込む

外部ファイルを読み込まずにScriptコード、スタイルコードを直接html記述欄に記入して実現する方法です。

埋め込み方法

Step1:HTMLコードをコピーする

下のテキストエリアのHTMLコードには、階層化に必要なScript、スタイルのコードが含まれています。

※クラス名に重複があると、正常に動作しない可能性があります。

先頭から2行目の$(function(){... })で囲まれた部分は、カテゴリーの階層化やパンくずリストの表示などの実行コードです。こちらのコードでは、階層化させるカテゴリーリストの指定や、パンくずリストのオプションを指定することができます。コードを書き換えることで、パンくずリストの区切り文字などを変更できます。


Copy

<script>
$(function(){ // DOMツリー構築後実行
    let hatena_category = new HatenaModule_Category($("#box2 .hatena-module-category"));
    hatena_category.toHierarchize(); // 階層化
    // 記事ページのパンくずリストを生成   トップページの有無及び名前、区切り文字,microdataの指定が可能
    HatenaModule_Category.createBreadCrumbList_entry({ top: "Top", delimiter: ">", microdata: true });
    // カテゴリー記事一覧ページ(/archive/entry/...)のタイトルを階層表示にする リンク設定の有無,区切り文字(初期値:>)の指定が可能
    HatenaModule_Category.createBreadCrumbList_archiveCategory({ link: true, delimiter: "" });
    hatena_category.hiddenHierarchyCategoryTag(); // 階層カテゴリータグを非表示にする
});

class HatenaModule {
    constructor(hatenamodule_element) {
        this.element = hatenamodule_element;
    }
}
class HatenaModule_Category extends HatenaModule {
    constructor(categorymodule_element) {
        super(categorymodule_element);
        this.categoryList=this.getCategoryList();
        let hierarchy=this.getHierarchyCategoryList();
        this.hierarchyCategoryList=hierarchy["hierarchyCategoryList"];
        this.hierarchyCategories=hierarchy["hierarchyCategories"];
    }
    getCategoryList() {
        let categoryList = [];
        $(this.element).find("li>a").each(function (i, e) {
            categoryList.push(HatenaModule_Category.escapeSpace($(e).text()));
        })
        return categoryList
    }
    getHierarchyCategoryList() {
        let hierarchyCategoryList = [];
        let hierarchyCategories=[]; // 階層別のカテゴリー
        for (let i of this.categoryList) {
            if (HatenaModule_Category.checkHierarchy(i)) {
                hierarchyCategoryList.push(i);
                for (let c of HatenaModule_Category.split_hierarchy(i)["category"]){
                    if(!hierarchyCategories.includes(c)){hierarchyCategories.push(c);}
                }
            }
        }
        // 最深部までのカテゴリーだけにする
        let list = hierarchyCategoryList;
        for (let i of list) {
            i = i.replace(/ \([\d]*\)$/, "");
            let splice_number = []
            for (let k of list) {
                let k_ = k.replace(/ \([\d]*\)$/, "");
                if (i.length > k_.length && i.indexOf(k_) == 0) {
                    splice_number.push(list.indexOf(k));
                }
            }
            for (let k = 0; k < splice_number.length; k++) {
                hierarchyCategoryList.splice((splice_number[k] - k), 1)
            }
        }
        return {"hierarchyCategoryList":hierarchyCategoryList,"hierarchyCategories":hierarchyCategories}
    }
    static getEntryCategories() {
        let categories = [];
        $(".entry-categories>.entry-category-link").each(function (i, e) {
            categories.push($(e).text());
        })
        return categories
    }
    static getEntryHierarchyCategories() {
        let Hcategories = [], t = this;
        $(".entry-categories>.entry-category-link").each(function (i, e) {
            if (t.checkHierarchy($(e).text())) {
                Hcategories.push($(e).text());
            }
        })
        // 最深部までのカテゴリーだけにする
        let list = Hcategories;
        for (let i of Hcategories) {
            let splice_number = []
            for (let k of list) {
                if (i.length > k.length && i.indexOf(k) == 0) {
                    splice_number.push(list.indexOf(k));
                }
            }
            for (let k = 0; k < splice_number.length; k++) {
                list.splice((splice_number[k] - k), 1)
            }
        }
        return list
    }
    static split_hierarchy(hierarchyCategory) {
        let number = false;
        if (hierarchyCategory.match(/ \([\d]*\)$/)) {
            number = hierarchyCategory.match(/ \([\d]*\)$/)[0];
            hierarchyCategory = hierarchyCategory.replace(/ \([\d]*\)$/, "") // 記事数除外   
        }
        let list = [];
        let str = "", flag = false;
        for (let i of hierarchyCategory) {
            if (i.match(/"|'/)) {
                if (i.match(flag)) {
                    flag = false;
                } else {
                    flag = i.match(/"|'/)[0];
                }
            }
            if (!flag && i == "-") {
                list.push(str);
                str = "";
            } else {
                str = str + i;
            }
        }
        if (str) {
            list.push(str);
        }
        if (number) {
            return { "category": list, "number": number }
        }
        return list
    }
    static checkHierarchy(category) {
        /*let ja="[\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u30e0-\u9fcf]";
        let reg = new RegExp("^("+ja+".*|[\w].*|'.*'"+'|".*")-');
        if(category.match(reg)){
            return true
        }*/
        let flag = false;
        for (let i of category) {
            if (i.match(/"|'/)) {
                if (i.match(flag)) {
                    flag = false;
                } else {
                    flag = i.match(/"|'/)[0];
                }
            } else if (!flag && i == "-") {
                return true
            }
        }
    }
    static escapeSpace(category) {
        let c = category.replace(/^([\s].*?)([\S].*[\S])([\s].*$)/, "$2");
        return c
    }
    static createBreadCrumbList_entry(option) { // 記事ページのパンくずリストを生成
        let categories, display_category;
        let list_1 = { "name": [], "url": [] }, list_2 = { "name": [], "url": [] };
        categories = HatenaModule_Category.getEntryCategories();
        if (!categories[0]) { return }
        display_category = categories[0]; //記事ページの先頭にあるカテゴリーをパンくずリストとして表示する
        // 階層カテゴリーの場合は階層化する
        let url = location.origin + "/archive/category/";
        let category_list = HatenaModule_Category.split_hierarchy(display_category);
        for (let i of category_list) {
            url = category_list[0] == i ? url + i : url + "-" + i;
            list_1["name"].push(i); list_1["url"].push(url);
            list_2["name"].push(i); list_2["url"].push(url);
        }
        // 階層カテゴリーの場合は階層化する
        let breadcrumbListElement = BreadCrumbList.createBreadCrumbElement(list_1, option); // パンくずリストエレメント
        let breadcrumbListItem = $(document.createElement("div")).addClass("breadcrumb-list")
        breadcrumbListItem.append(breadcrumbListElement);
        if (option) { // add microdata
            if (option.microdata) {
                let breadcrumbListMicroData = BreadCrumbList.createBreadCrumbJSON(list_2, option); // パンくずリストマイクロデータ       
                breadcrumbListItem.append(breadcrumbListMicroData);
            }
        }
        $("article .entry-inner>header").prepend(breadcrumbListItem);
    }
    static createBreadCrumbList_archiveCategory(option) { // カテゴリー記事一覧ページ(/archive/entry/...)のパンくずリストを生成
        let head = $("#main-inner>header.archive-header-category>.archive-heading");
        let category = head.text();
        let list = HatenaModule_Category.split_hierarchy(category);
        let c = "", link_c = "";
        // option
        let link_flag = false, delimiter = ">";
        if (option) {
            if (option.link) {
                link_flag = true;
                head.html("");
            }
            if (option.delimiter) {
                delimiter = option.delimiter;
            }
        }
        // option
        for (let i of list) {
            if (link_flag) {
                link_c = list[0] == i ? link_c + i : link_c + "-" + i;
                let url = location.origin + "/archive/category/" + this.hatena_urlescape(link_c);
                let a = $(document.createElement("a")).attr("href", url).text(i);
                let span = $(document.createElement("span")).text(delimiter);
                head.append(a, span)
            } else {
                c = list[0] == i ? c + i : c + delimiter + i;
            }
        }
        if (!link_flag) {
            head.text(c);
        } else {
            head.find("span:last-child").remove();
        }
    }
    static hatena_urlescape(str) {
        // let ja="[\\u30a0-\\u30ff\\u3040-\\u309f\\u3005-\\u3006\\u30e0-\\u9fcf].*";
        str = encodeURIComponent(str);
        let sym = /\!|\"|\#|\$|\&|\'|\(|\)|\=|\||\<|\>|\?|\+|\*|\}|\`|\{/g
        function replacer(match) {
            if (match == "*") {
                return "%2A"
            }
            return escape(match)
        }
        str = str.replace(sym, replacer)
        return str
    }
    findParentCategory(categoryList) {
        let p = categoryList[0];
        let ep = HatenaModule_Category.hatena_urlescape(p);
        let e = this.element.find('li[data="descendant-li-' + ep + '"]');
        return e
    }
    addToggleEvent() {
        let t = this;
        let ua = navigator.userAgent.match(/iphone|ipod|ipad|android/i) ? "sp" : "pc";
        let click = ua == "sp" ? "touchend" : "click";
        this.element.find(".descendant-li,.descendant-ul").each(function (i, e) {
            $(e).on(click, function (event) {
                if ($(event.target).data("move-flag")) { return }
                if (event.target.tagName === "A") { return }
                event.preventDefault();
                event.stopPropagation();
                if ($(event.target).hasClass("descendant-li")) {
                    $(event.target).toggleClass("opening");
                }
                $(event.target).find(">.descendant-ul").each(function (ii, ee) {
                    $(ee).slideToggle(350);
                    t.checkStringWrapp($(ee).find(".descendant-li>a"));
                })
                $(event.target).data("move-flag",false);
            })
            .on("touchstart", function () { $(event.target).data("move-flag",false) })
            .on("touchmove", function () { $(event.target).data("move-flag",true) });
        })
    }
    checkStringWrapp(a) { // テキストを折り返して、縦に伸びるのを防ぐ
        var normalHeight = $(".hatena-module-category ul li.descendant-li>a").height();
        var tagHeight = $(a).height(), BtagWidth = $(a).width();
        if (normalHeight * 2.8 <= tagHeight) {
            $(a).css({
                "white-space": "nowrap",
                "position": "absolute"
            });
            var AtagWidth = $(a).width();
            var marginLeft = "-" + Number(AtagWidth - BtagWidth) + "px";
            $(a).css({
                "margin-left": marginLeft,
                "position": "unset"
            });
            $(a).addClass("textwrap");
            $(a).parent().removeClass("opening");
        } else if ($(a).hasClass("textwrap") && $(a)[0].className.includes("textwrap")) {
            $(a).css({
                "margin-left": "unset",
                "white-space": "unset"
            });
            $(a).removeClass("textwrap");
            $(a).parent().addClass("opening");
        }
    }
    hiddenHierarchyCategoryTag() { //【タグ】階層カテゴリータグを非表示にする
        $("body").find(".archive-category-link[class*='category-'],.entry-category-link[class*='category-']").each(function (i, e) {
            try {
                let category = $(e)[0].className.match(/ category-(.*)/)[1];
                if (HatenaModule_Category.checkHierarchy(category)) {
                    $(e).css("display", "none");
                }
            } catch (error) {}
        })
    }
    toHierarchize() {
        let url = location.origin + "/archive/category/";
        // 「階層カテゴリーの第一階層と単独カテゴリー」以外を非表示にする
        let parentCategoryList = [];
        for (let i of this.hierarchyCategoryList) { // 階層カテゴリーの第一階層のみを抽出
            let parent = HatenaModule_Category.split_hierarchy(i).category[0];
            parentCategoryList.push(parent);
        }
        let t=this;
        $(this.element).find("li>a").each(function (i, e) {
            let category = HatenaModule_Category.escapeSpace($(e).text()).replace(/ \([\d]*\)$/, "");
            // categoryが、階層カテゴリー又は階層カテゴリーに含まれるカテゴリーであり、第一階層カテゴリーではない場合：非表示
            if ((HatenaModule_Category.checkHierarchy(category) || t.hierarchyCategories.includes(category)) && !parentCategoryList.includes(category)){
                $(e).parent().css("display", "none");
            }else{
                category = HatenaModule_Category.hatena_urlescape(category);
                $(e).parent().attr("data", "descendant-li-" + category);
            }
        })
        // 第一階層カテゴリーを元に、階層カテゴリーを追加する
        let ul = $(document.createElement("ul")).addClass("descendant-ul");
        let li = $(document.createElement("li")).addClass("descendant-li descendant-li-close");
        let a = $(document.createElement("a")).addClass("categoryname");
        for (let category of this.hierarchyCategoryList) {
            let result = HatenaModule_Category.split_hierarchy(category);
            let categoryList = result.category;
            let number = result.number;
            let parent = this.findParentCategory(categoryList);
            parent.addClass("descendant-li descendant-li-close");
            let url_ = "", e_category_ = "";
            for (let i = 0; i < categoryList.length; i++) {
                let e_category = HatenaModule_Category.hatena_urlescape(categoryList[i]);
                e_category_ = i == 0 ? e_category_ + e_category : e_category_ + "-" + e_category;
                if (parent.attr("data") == "descendant-li-" + e_category_) { // 対象categoryが既に存在する場合
                    url_ = parent.find(">a").attr("href").match("/archive/category/(.*)")[1];
                    continue
                } else if (parent.find('>ul>li[data="descendant-li-' + e_category_ + '"]').length > 0) { // 対象categoryが１階層下に存在する場合
                    parent = parent.find('>ul>li[data="descendant-li-' + e_category_ + '"]');
                    url_ = parent.find(">a").attr("href").match("/archive/category/(.*)")[1];
                    continue
                }
                url_ = i == 0 ? url_ + e_category : url_ + "-" + e_category;
                if (i != 0) { // 記事数取得
                    var text = this.element.find("ul.hatena-urllist>li>a[href='" + url + url_ + "']").text();
                    number = HatenaModule_Category.escapeSpace(text).match(/ \([\d]*\)$/);
                }
                let child_ul = ul.clone("true");
                let child_li = li.clone("true").attr("data", "descendant-li-" + e_category_);
                let child_a = a.clone(true).attr("href", url + url_).text(categoryList[i] + number);
                // アイコン用クラス    
                if (parent.hasClass("lowestlayer")) { parent.removeClass("lowestlayer"); }
                if (i == categoryList.length - 1) { child_li.addClass("lowestlayer"); }
                // アイコン用クラス
                parent.append(child_ul.append(child_li.append(child_a)));
                parent = child_li;
            }
        }
        this.addToggleEvent();
    }
}
class BreadCrumbList {
    static createBreadCrumbElement(breadcrumblist, option) {
        // breadcrumblist={name:[],url:[]}
        // option={top:name,delimiter:delimiter}
        if (option) {
            if (option.top) { // add top
                breadcrumblist["name"].unshift(option.top);
                breadcrumblist["url"].unshift(location.origin);
            }
        }
        let ol = $(document.createElement("ol")).attr({
            "itemscope": "",
            "itemtype": "https://schema.org/BreadcrumbList",
            "style": "display:flex;list-style:none;"
        })
        for (let i = 0; i < breadcrumblist.name.length; i++) {
            let name = breadcrumblist["name"][i], url = breadcrumblist["url"][i], number = i + 1;
            let li = $(document.createElement("li")).attr({
                "itemprop": "itemListElement",
                "itemscope": "",
                "itemtype": "https://schema.org/ListItem",
            });
            let a = $(document.createElement("a")).attr({
                "itemtype": "https://schema.org/Thing",
                "itemprop": "item",
                "href": url
            });
            let span = $(document.createElement("span")).attr("itemprop", "name").text(name);
            let meta = $(document.createElement("meta")).attr({
                "itemprop": "position",
                "content": number
            });
            ol.append(li.append(a.append(span)).append(meta));
            if (option) { // 区切り文字追加
                if (option.delimiter && !(option.delimiter == "nolast" && breadcrumblist.name.length - 1 == i)) {
                    let arrow = $(document.createElement("span")).text(option.delimiter);
                    ol.append(arrow);
                }
            }
        }
        return ol
    }
    static createBreadCrumbJSON(breadcrumblist, option) {
        // option={top:name}
        let script = $(document.createElement("script")).attr("type", "application/ld+json");
        let contents = {
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": []
        }
        if (option) {
            if (option.top) { // add top
                breadcrumblist["name"].unshift(option.top);
                breadcrumblist["url"].unshift(location.origin);
            }
        }
        for (let i = 0; i < breadcrumblist.name.length; i++) {
            let name = breadcrumblist["name"][i], url = breadcrumblist["url"][i], number = i + 1;
            let item = {};
            item["@type"] = "ListItem";
            item["position"] = number;
            item["name"] = name;
            item["item"] = url
            contents["itemListElement"].push(item);
        }
        script.html(JSON.stringify(contents));
        return script
    }
}
</script>
<style>
.hatena-module-category ul {
  list-style-type: none;
}
.hatena-module-category ul li {
  padding: 4px 0 4px 5px;
}
.hatena-module-category ul li .descendant-ul{
  display: none;
  position: relative;
  left: -10px;
}
.hatena-module-category ul .descendant-li{
  position: relative;
  cursor: pointer;
}
.hatena-module-category ul li:not(.descendant-li)>a{
  display: block;
}
.hatena-module-category>div>ul>li.descendant-li-close:not(.lowestlayer)::after{
  content: "";
  opacity: 0.7;
  color: gray;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  margin-top: 4px;
  margin-right: 8px;
  border-left: solid 2px currentColor;
  border-bottom: solid 2px currentColor;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: all .3s;
  transition: all .3s;
  z-index: 100;
}
.hatena-module-category>div>ul>li.descendant-li-close.opening:not(.lowestlayer)::after{
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  top: 16px;
}
.hatena-module-category ul>li.descendant-li-close:not(.opening):not(.lowestlayer):hover{
  background-color: #f8f8f8;
}
.hatena-module-category li li.descendant-li-close:not(.lowestlayer)::after{
  content: "";
  opacity: 0.7;
  color: gray;
  float: left;
  cursor: pointer;
  margin-top: 6px;
  margin-right: 7px;
  border-left: solid 6px currentColor;
  border-top: solid 6px transparent;
  border-bottom: solid 6px transparent;
  -webkit-transition: all .3s;
  transition: all .3s;
  position: relative;
  z-index: 100;
}
.hatena-module-category li li.descendant-li-close.opening:not(.lowestlayer)::after{
  position: absolute;
  z-index: 100;
  top: 8px;
  left: -10px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  z-index: 100;
}
.hatena-module-category ul li.descendant-li>a.textwrap{
  padding: 8px 0 8px 5px;
}
.hatena-module-category ul li.descendant-li>a.textwrap:hover{
  background-color: #f8f8f8;
}
</style>

Step2:HTML記述欄に記入する

コピーしたコードをはてなブログのHTML記述欄に記入します。記入場所はjQuery以降ならどこでも大丈夫だと思いますが、コード量が多いためサイドバーのHTMLモジュールに記入することをお勧めします。
はてなブログの管理画面から デザイン設定 ＞ スパナアイコン ＞サイドバー ＞モジュールを追加 ＞HTMLからHTML記述欄に、コピーしたコードを貼り付けます。

スマホのブラウザからの場合

PC版表示に切り替えることでスマホからでもコードを記述することができます。ページ下部に切り替えボタンがあります。

手順２：階層カテゴリーの入力

階層化の準備ができたら、記事のカテゴリーを階層書きします。当記事に載せたファイルとコードのScript処理では「-」(半角ハイフン)を区切り文字と認識し、階層化を行います。

パンくずリストに表示されるカテゴリーは先頭に置かれたカテゴリーです。

パンくずリストを表示しない設定になっていても表示される仕様になっています。表示したくない場合は、「階層化表示にするための処理の追加」の「コードを埋め込む」のHTMLコードから、下記のコードを消すことで表示されなくなります。
HatenaModule_Category.createBreadCrumbList_entry({top:"Top",delimiter:">",microdata:true});

例:３階層カテゴリーの書き方

第一階層から「はてなブログ」、「カテゴリー」、「階層化」の、3階層まであるカテゴリーにしたい場合の記述例。

はてなブログ-カテゴリー-階層化

パンくずリストのイメージ

例:１階層にハイフンを含めたい場合

第一階層から「CSS」、「box-shadow」 の2階層のカテゴリーにしたい場合の記述方法。「"」または「'」で囲みます。

CSS-"box-shadow"  または、 CSS-'box-shadow'

パンくずリストのイメージ

当ページのカテゴリ―・パンくずリストの場合は、記事編集のカテゴリーに以下の画像のようにカテゴリーを記入しています。

補足

カテゴリー一覧の階層カテゴリーの表示方法

最上位カテゴリーの場所に階層カテゴリーが追加されます。折りたたみ機能も備わっているためクリック(タッチ)により下層のカテゴリーが表示されます。

イメージ

パンくずリストをGoogleにクロールさせる方法

ページ内のパンくずリストをGoogle検索エンジンに認識させる

ページ内のパンくずリストをGoogle検索エンジン(クローラー)に認識させることで、検索結果にパンくずリストを表示させることができます。パンくずリストの設定はSEOにも効果的な対策です。

当処理では、動的にパンくずリストを生成するため、クローラーに認識させることができず、画像のようには表示されません。

2020/06/01 追記

動的(ページ表示後)にパンくずリストを生成していても検索結果に上の画像のようなパンくずリストが表示されることを確認しました！！

スマホの場合も含み、この項の作業をする必要もなく、検索結果にパンくずリストを表示することが可能です。

2020/05/24 追記動的にパンくずリストを生成しているため、Googleの構造化データテストツールでは認識されず、パンくずリストが画像のように表示されないと思っていましたが、Google Search Console(グーグルサーチコンソール)ではクロールによるパンくずリストの取得が成功している結果が出ました。
このため、この項(パンくずリストをGoogleにクロールさせる方法)では、生成されるパンくずリストを事前にページに埋め込むことでクローラーに認識させる方法をご紹介しますが、この作業をする必要はないかもしれません。

表示させるオススメの方法は、当処理でパンくずリスト要素と同時に生成されるパンくずリストのマイクロデータを記事内に記入する方法です。

「コードを埋め込む」のHTMLコードにある下記の赤文字の部分がパンくずリストのマイクロデータを生成するためのオプションです。

HatenaModule_Category.createBreadCrumbList_entry({top:"Top",delimiter:">",microdata:true});

取得方法

記事編集画面でプレビューを開きます。そしてプレビュー画面からパンくずリストにマウスカーソルを合わせて開発者ツール(Chromeの場合：右クリック＞検証)を開きます。

誰でも簡単にブログカスタマイズが「楽になる方法 」| 開発ツール - IT the Best

画像の青くハイライトされているコードがパンくずリストのマイクロデータです。このコードをコピーして記事編集画面のHTML編集テキストエリアに貼り付けます。

これで、Googleにパンくずリストを認識させることができるので検索結果にパンくずリストを表示することができます。※反映には時間がかかる場合があります

パンくずリストが正確に設定できているか確認する場合はコチラ

構造化データ テストツール

 スマホの場合

スマホの場合はおそらく開発者ツールがないため、パンくずリスト生成ツールから生成して記事に貼り付けることをお勧めします。

www.it-the-best.com

更新情報

・2019/10/23

バージョン１を公開

ファイルを見る 

• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.0/hierarchycategory.js
• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.0/hierarchycategory.min.js
• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.0/hierarchycategory.css
• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.0/hierarchycategory.min.css

・2019/11/11 (バージョン1.1)

スマートフォンでのタッチが正常に反応しない不具合の対処。
ータッチが正常に反応するように改善。

バージョン1.1を公開

ファイルを見る 

• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.1/hierarchycategory.js
• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.1/hierarchycategory.min.js
• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.1/hierarchycategory.css
• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.1/hierarchycategory.min.css

・2020/01/17 (バージョン1.2)

階層カテゴリーのタグを非表示にする処理を変更。対象をクラス「archive-category-link」「entry-category-link」を持つものだけに変更。

バージョン1.2を公開

ファイルを見る 

• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.2/hierarchycategory.js
• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.2/hierarchycategory.min.js

・2020/01/18 (バージョン1.2.1)

カテゴリーリストの階層化表示処理をDOM要素の構築後に行っていたが、その処理を行わない仕様に変更。

理由：階層化表示のためのレンダリング処理が、ページの表示速度を遅くするため。

下の動画にあるようにボタンを設置して、そのボタンをクリックすることで階層化処理が行われるようにしました。

変更点： 前バージョンからの変更点は、DOM要素構築後に実行される階層化の処理をコメントアウトしただけです。ちなみにこのコードです。
hatena_category.toHierarchy(); // 階層化

ボタンは別で作成しています。他の場所で階層化の処理を実行するのに使ったコードはコチラです。
let hatena_category = new HatenaModule_Category($("#box2 .hatena-module-category"));
hatena_category.toHierarchy(); // 階層化

バージョン1.2.1を公開

ファイルを見る 

• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.2.1/hierarchycategory.min.js

・2020/02/12 (バージョン1.3)

１．カテゴリーリストで、一階層しかないカテゴリー(階層カテゴリーでなく階層カテゴリーにも含まれないカテゴリー)が表示されない不備を修正。

２．カテゴリーリストの階層化表示をDOM要素構築後に実行させるかどうかをURLのクエリから判断させる仕様に変更。(「hierarchy=off」をクエリに含めることで階層化表示を行わない)
<script src="https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.3/hierarchycategory.min.js?hierarchy=off"></script>

３．関数名の変更などの細かい修正。(機能を変更するものではないコードの修正)
※階層化の関数名をtoHierarchy()からtoHierarchize()に変更しました。

バージョン1.3を公開

ファイルを見る 

• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.3/hierarchycategory.js
• https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.3/hierarchycategory.min.js

当記事で記載しているコード、外部ファイル※1のコードはコピーしてご自由にお使いください。ただし、再配布、転載、引用など第三者への公開目的で使用する場合は、必ず下記の著作権の表示をお願い致します。

Copyright (c) 2020 https://www.it-the-best.com https://www.it-the-best.com/entry/hatenablogcustom-category-hierarchy

※1：jQuery以外の外部ファイル

カテゴリー別にすべての記事一覧を表示する | 全カテゴリー別記事一覧ページ | はてなブログカスタマイズ

Photo by Iñaki del Olmo on Unsplash

www.it-the-best.com

全カテゴリー別記事一覧ページ

※当カスタマイズは環境によっては正常に動作しない可能性があります。

カスタマイズ概要

はてなブログでは、記事一覧をカテゴリー別に表示するページが作られますが、一つのカテゴリーだけに対する記事の一覧です。当カスタマイズは、一つだけではなくすべてのカテゴリーを対象に、記事の一覧を表示するためのはてなブログカスタマイズです。

以前投稿した「【はてなブログ】カテゴリー別記事一覧のサイトマップページを作る |【カスタマイズ】 - IT the Best」の改良版となります。

こちらの「カテゴリー別アーカイブ - IT the Best」が当カスタマイズの処理を実装したサイトマップページです。

期待できる効果

サイト内記事探索が一つのページで可能になるため、サイト訪問者が興味のある記事を容易に探しだすことができます。

カテゴリーリストからでも特定の記事を探すことは可能ですが、記事のタイトルやサムネイル、記事概要を表示した記事一覧の方が詳細な情報を提供できるため記事の探索に効果的です。

サイト訪問者が興味のある記事を見つけ出すことができれば、アクセスにつながるため、サイト内回遊率向上に期待できます。

※ 当カスタマイズはjQueryを使用しています。jQueryの設置方法は「jQueryの設定方法 - jQueryを使用するまでの手順 |【jQuery】 - IT the Best」をご覧ください。

埋め込みコード

全カテゴリー別記事一覧を表示するページのHTML記述欄にコチラのコードを設置します。DOMツリー構築後に処理が行われ、全カテゴリー別の記事一覧が表示されます。
スタイルは最低限必要とされるであろうものを設定してあります。

Copy

<script>
class ListPageByAllCategory {
    static run() {
        let c = this.get_allCategory();
        this.show_archive(c);
        this.set_Style();
    }
    static get_allCategory() { // 全てのカテゴリーを取得
        var categoryList = [];
        let categories = $(".hatena-module-category .hatena-module-body>ul>li");
        categories.each(function (i, e) {
            var c_name = $(e).find(">a").text();
            try { // 先方、後方にある空白を消す
                c_name = c_name.replace(c_name.match(/(^[\s].*?)[\S]/)[1], "");
                c_name = c_name.replace(c_name.match(/[\S].*?([\s].*)$/)[1], "");
            } catch (error) { }
            c_name = c_name.replace(/ \([\d]*\)$/, "");
            categoryList.push(c_name);
        })
        return categoryList
    }
    static show_archive(categoryList) {
        let entry = $("#main-inner article .entry-content");
        entry.addClass("page-archive") // 記事一覧ページと同じスタイルにするためにクラスを追加
        for (const category of categoryList) {
            let url = location.origin + "/archive/category/" + category;
            $.ajax({
                type: 'GET',
                url: url,
                dataType: "html",
            }).always((data) => {
                let entries = $($.parseHTML(data)).find(".archive-entries");
                // スタイル設定用のクラスを追加
                entries.addClass("ListPageByAllCategory-archive-entries");
                entry.append(entries); // エントリーに追加
                // タイトルの追加
                let title=$(document.createElement("div")).addClass("ListPageByAllCategory-archive-entries-title").text(category);
                entries.before(title);
            });
        }
    }
    static set_Style() { 
        $("head").append( // 横並びリストにするためのスタイル
            $(document.createElement("style")).html("\
                .ListPageByAllCategory-archive-entries{\n\
                    display: flex;white-space: nowrap;overflow: auto;\n\
                }\
            ")
        )
        $("head").append( // 独自スタイル
            $(document.createElement("style")).html("\
                .ListPageByAllCategory-archive-entries-title{\n\
                    font-size: large;\n\
                    font-weight: 600;\n\
                    margin:3em 0 2px 1em;\n\
                }\n\
                .ListPageByAllCategory-archive-entries section{\n\
                    min-width:100%;\n\
                }\n\
                .ListPageByAllCategory-archive-entries .archive-entry-body,\n\
                .ListPageByAllCategory-archive-entries .entry-title,\n\
                .ListPageByAllCategory-archive-entries .categories{\n\
                    white-space: normal;\n\
                }\
            ")
        )
    }
}
$(function () {
    ListPageByAllCategory.run()
})
</script>

 カテゴリーを階層化している場合

当サイトに記載してあるカテゴリーの階層化を実装している場合は、こちらのコードを設置します。
階層の一番上のカテゴリーのみを対象に記事一覧が作成されます。

Copy

<script>
class ListPageByAllCategory {
    static run() {
        let c = this.get_allCategory();
        this.show_archive(c);
        this.set_Style();
    }
    static get_allCategory() { // 全てのカテゴリーを取得
        var categoryList = [];
        let categories = $(".hatena-module-category .hatena-module-body>ul>li");
        categories.each(function (i, e) {
            var c_name = $(e).find(">a").text();
            try { // 先方、後方にある空白を消す
                c_name = c_name.replace(c_name.match(/(^[\s].*?)[\S]/)[1], "");
                c_name = c_name.replace(c_name.match(/[\S].*?([\s].*)$/)[1], "");
            } catch (error) { }
            c_name = c_name.replace(/ \([\d]*\)$/, "");
            categoryList.push(c_name);
        })
        return categoryList
    }
    static show_archive(categoryList, completedHandler) {
        let entry = $("#main-inner article .entry-content");
        entry.addClass("page-archive"); // 記事一覧ページと同じスタイルにするためにクラスを追加
        var completeCount = 0
        for (const category of categoryList) {
            let url = location.origin + "/archive/category/" + category;
            let ajax=$.ajax({
                type: "GET",
                url: url,
                dataType: "html",
            }).always((data) => {
                let entries = $($.parseHTML(data)).find(".archive-entries");
                // スタイル設定用のクラスを追加
                entries.addClass("ListPageByAllCategory-archive-entries");
                entry.append(entries); // エントリーに追加
                // タイトルの追加
                let title = $(document.createElement("div")).addClass("ListPageByAllCategory-archive-entries-title").text(category);
                entries.before(title);
            });
            ajax.done(function () {
                completeCount += 1;
                if (completeCount == categoryList.length) {
                    completedHandler();
                }
            })
        }
    }
    static set_Style() {
        $("head").append( // 横並びリストにするためのスタイル
            $(document.createElement("style")).html("\
                .ListPageByAllCategory-archive-entries{\n\
                    display: flex;white-space: nowrap;overflow: auto;\n\
                }\
            ")
        )
        $("head").append( // 独自スタイル
            $(document.createElement("style")).html("\
                .ListPageByAllCategory-archive-entries-title{\n\
                    font-size: large;\n\
                    font-weight: 600;\n\
                    margin:3em 0 2px 1em;\n\
                }\n\
                .ListPageByAllCategory-archive-entries section{\n\
                    min-width:100%;\n\
                }\n\
                .ListPageByAllCategory-archive-entries .archive-entry-body,\n\
                .ListPageByAllCategory-archive-entries .entry-title,\n\
                .ListPageByAllCategory-archive-entries .categories{\n\
                    white-space: normal;\n\
                }\
            ")
        )
    }
}
class ListPageByAllCategoryforHierarchyCategory extends ListPageByAllCategory {
    static run() {
        let c = this.Exclude_HierarchyCategory(this.get_allCategory());
        this.show_archive(c, this.hiddenHierarchyCategory);
        this.set_Style();
    }
    static Exclude_HierarchyCategory(categoryList) { // 階層カテゴリーの除外
        var NEWcategoryList = [];
        for (const category of categoryList) {
            let c = this.sortingCategory(category);
            if (c.length > 1 && !NEWcategoryList.includes(c[0])) {
                NEWcategoryList.push(c[0]);
            }
        }
        return NEWcategoryList
    }
    static sortingCategory(category) { // カテゴリーを仕分けする
        var csList = [], cs = ""
        var flag = true
        for (var s of category) {
            if (s == "'" || s == '"') {
                flag = !flag
            }
            if (flag && s === "-") {
                csList.push(cs)
                cs = ""
            } else {
                cs = cs + s
            }
        }
        csList.push(cs)
        return csList
    }
    static hiddenHierarchyCategory() { // 階層化カテゴリーを非表示にする
        $(".ListPageByAllCategory-archive-entries [class*='category-']").each(function (index, element) {
            var category_name = element.className.match(/ category-(.*)/)[1];
            var category_list = ListPageByAllCategoryforHierarchyCategory.sortingCategory(category_name);
            if (element.tagName !== "BODY" && category_list.length > 1) {
                element.style.display = "none"; // 階層化カテゴリーを非表示にする
            }
        })
    }
}
$(function () {
    ListPageByAllCategoryforHierarchyCategory.run()
})
</script>

カスタマイズ内容(一部)

全カテゴリーを取得する

カテゴリーリストからすべてのカテゴリーを取得します。

function get_allCategory() { // 全てのカテゴリーを取得
    var categoryList = [];
    let categories = $(".hatena-module-category .hatena-module-body>ul>li");
    categories.each(function (i, e) {
        var c_name = $(e).find(">a").text();
        try { // 先方、後方にある空白を消す
            c_name = c_name.replace(c_name.match(/(^[\s].*?)[\S]/)[1], "");
            c_name = c_name.replace(c_name.match(/[\S].*?([\s].*)$/)[1], "");
        } catch (error) { }
        c_name = c_name.replace(/ \([\d]*\)$/, "");
        categoryList.push(c_name);
    })
    return categoryList
}

 カスタマイズの対象

• 記事一覧を表示するページにカテゴリーリストが表示されている
• カテゴリーリストのHTML要素が以下のようになっている
  

  <div class="hatena-module hatena-module-category">
      <div class="hatena-module-title"></div>
      <div class="hatena-module-body">
          <ul class="hatena-urllist"></ul>
      </div>
  </div>

  カテゴリーをHTML要素のクラス"hatena-module-category hatena-module-body"内のulから取得しているためです。※おそらく、はてなブログで生成されるHTML要素は統一されていますが、異なる場合は正しいクラス名を指定してください。

カテゴリー別記事一覧を表示する

取得したカテゴリーごとに、記事一覧を取得し表示します。記事一覧の取得先は、はてなブログで元々用意されているカテゴリー別記事一覧ページから取得します。(http(s)://ドメイン/archive/category/カテゴリー名)

表示先は記事内になっています。("#main-inner article .entry-content")

function show_archive(categoryList) {
    let entry = $("#main-inner article .entry-content");
    entry.addClass("page-archive") // 記事一覧ページと同じスタイルにするためにクラスを追加
    for (const category of categoryList) {
        let url = location.origin + "/archive/category/" + category;
        $.ajax({
            type: "GET",
            url: url,
            dataType: "html",
        }).always((data) => {
            let entries = $($.parseHTML(data)).find(".archive-entries");
            // スタイル設定用のクラスを追加
            entries.addClass("ListPageByAllCategory-archive-entries");
            entry.append(entries); // エントリーに追加
            // タイトルの追加
            let title=$(document.createElement("div")).addClass("ListPageByAllCategory-archive-entries-title").text(category);
            entries.before(title);
        });
    }
}

URLの入力だけで任意の場所に【おすすめ記事】を表示する「はてなブログモジュール」の作成 | はてなブログカスタマイズ

URLを入力するだけの簡単作業で、おすすめの記事を表示させる「はてなモジュール」を作成するはてなブログカスタマイズです。

はてなブログおすすめ記事モジュール

目的

希望する場所に希望する記事の一覧を表示するためのはてなブログモジュールを作成するはてなブログカスタマイズです。当モジュールでは、自身がおすすめする記事のURLを入力するだけで、その記事を表示することができます。複数の記事の表示も可能です。

当モジュールの見本

- はてなブログカスタマイズのおすすめ記事 -

 

コードを3つ貼り付けるだけで、自身がおすすめしたい記事の一覧を希望の場所に表示することができます。

下記はその手順です。

当カスタマイズではjQueryを使用しているため、当カスタマイズコードを貼り付けたページにjQueryを設置する必要があります。jQueryの設置方法に関しては「jQueryの設定方法 - jQueryを使用するまでの手順 |【jQuery】 - IT the Best」をご覧ください。
※jQueryはカスタマイズコードより前に設置(記入)する必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

手順

ステップ１：処理コード、スタイルコードの設置

まず、jQueryよりうしろにこちらのコード(処理コード、スタイルコードを含む)をHTML記述欄に貼り付けます。
HTMLコードの記述方法は「HTMLコードの記述方法 | はてなブログカスタマイズ - IT the Best」をご覧ください。

<script>
class My_recommend_entries {
    constructor(element) {
        this.element = $(element);
    }

    show() {
        let m = My_recommend_entries;
        m.max_height=[];
        for (let i = 0; i < $(this.element).length; i++) {
            let e=$(this.element)[i];
            let hatenastar_option=$(e).data("hatenastar"); 
            let entries = $(document.createElement("div")).addClass("archive-entries");
            let resolve_count=0;
            let urllist;
            try{
                urllist = m.get_urlList(e);
            } catch (error) {
                continue
            }
            $(e).addClass("loading");
            for (const url of urllist) {
                let result = m.get_articleData(url,hatenastar_option);
                result["d"].done(function () {
                    resolve_count+=1;
                    if (result["data"].title != "") {
                        let section=m.create_element(result["data"]);
                        entries.append(section);
                        if(m.max_height<section.height()){ // sectionの高さ
                            m.max_height=section.height();
                        }
                    }
                    if (resolve_count==urllist.length) {
                        $(e).removeClass("loading");
                        if (!entries.html()) { //　空だったら
                            $(e).css("display","none");
                        }else{
                            m.set_event_hover_section(entries);
                        }
                    }
                })
            }
            $(e).append(entries);
        }
    }
    static get_urlList(element) {
        let urllist = $(element).data("url").split(",");
        for (let i = 0; i < urllist.length; i++) {
            if (!urllist[i].match(/http:\/\/|https:\/\//)) {
                urllist[i] = location.origin + "/entry/" + urllist[i];
            }
        }
        return urllist
    }
    static get_articleData(URL,hatenastar_option) {
        let html, data = {
            "html": "",
            "url": "",
            "thumbnail_path": "",
            "title": "",
            "summary": "",
            "postDate": "",
            "categories": [],
            "hatena_star_metadata": ""
        };
        let d = $.Deferred();
        $.ajax({
            type: 'GET',
            url: URL,
            dataType: "html",
        }).always((result) => {
            html = $($.parseHTML(result));//parse
            data["html"] = html;
            data["url"] = URL;
            data["thumbnail_path"] = html.filter('meta[property="og:image"]').attr("content");
            data["title"] = html.find("h1.entry-title>a").text();
            data["summary"] = html.filter('meta[property="og:description"]').attr("content");
            data["postDate"] = html.find(".date.entry-date.first time").text().replace(/[\s]/g, "");
            html.filter('meta[property="article:tag"]').each(function (i, e) { data["categories"].push($(e).attr("content")); });
            data["hatena_star_metadata"] = hatenastar_option=="none" ? "" : html.find(".entry-footer>.hatena-star-metadata"); 
            d.resolve();            
        });
        return { "d": d, "data": data }
    }
    static create_element(articleData) {
        let section = $(document.createElement("section")).addClass("archive-entry");
        let hatena_star=$(document.createElement("div")).addClass("archive-entry-body").append(
                $(document.createElement("span")).addClass("social-buttons").append(
                    $(document.createElement("span")).addClass("star-container"),
                    articleData["hatena_star_metadata"],
                )
            )
        // link
        let a = $(document.createElement("a")).attr("href", articleData.url);
        let main = $(document.createElement("div")).addClass("main-content");
        let sub = $(document.createElement("div")).addClass("sub-content");
        // thunmbnail
        let img =!articleData.thumbnail_path ? "" : $(document.createElement("div")).addClass("thunmbnail").append(
            a.clone(true).css({ 
                "background-image":"url("+articleData.thumbnail_path+")"
            })
        );
        // category
        let categories = $(document.createElement("div")).addClass("categories");
        // one
        if (articleData.categories[0]) {
            categories.append($(document.createElement("a")).attr({
                "href": location.origin + "/archive/category/" + articleData.categories[0],
                "class": "archive-category-link category-" + articleData.categories[0]
            }).text(articleData.categories[0]));   
        }
        // all
        // for (const c of articleData.categories) {
        //     let a=$(document.createElement("a")).attr({
        //         "href":location.origin+"/archive/category/"+c,
        //         "class":"archive-category-link category-"+c
        //     }).text(c);
        //     categories.append(a);
        // }
        let title = a.clone(true).text(articleData.title).addClass("entry-title");
        let postDate = $(document.createElement("a")).attr({
            "href": location.origin + "/archive/" + articleData.postDate.replace(/-/g, "/"),
            "class": "entry-postDate"
        }).text(articleData.postDate);
        let summary = !articleData.summary ? "" : a.clone(true).text(articleData.summary).addClass("entry-summary");
        section.prepend(img, main.append(categories, title, postDate),sub.append(summary),hatena_star);
        return section
    }
    static set_event_hover_section(element){
        let t=this;
        let h=$(element).height();
        $(element).find("section").hover(
            function(){
                let tt=$(this);
                setTimeout(function(tt){
                    if(tt.height()>t.max_height){
                        $(element).height(tt.height()+30);
                    }
                },310,tt);
            },function(){
                $(element).height(h);
            }
        );
    }
}

$(function(){ // DOM要素読み込み後に実行
    let my_recommend_entries = new My_recommend_entries(".My_recommend_entries");
    my_recommend_entries.show();
})
</script>

 <style>
/* my recommend entries */
.My_recommend_entries-title{
    text-align:center;
    border-top: 2px solid;
    border-bottom: 2px solid;
    font-weight: 600;
    margin: 10px 0;
}
.My_recommend_entries {
    text-align: center;
    position: relative;
    height: 240px;
}
.My_recommend_entries.loading::before {
    content: "";
    display: inline-block;
    padding: 25px;
    position: absolute;
    top: calc(50% - 40px);
    left: calc(50% - 10px);
    background: rgba(0, 0, 0, 0.41);
    border-radius: .2em;
    z-index: 1;
}
.My_recommend_entries.loading::after {
    content: "";
    display: inline-block;
    padding: 15px;
    color: white;
    border: 1px solid;
    border-bottom: 0;
    border-right: 0;
    border-radius: 2em;
    position: absolute;
    top: calc(50% - 30px);
    transition: all .3s;
    -webkit-transition: all .3s;
    animation: spin 1s infinite;
    -webkit-animation: spin 1s infinite;
    z-index: 5;
}
.My_recommend_entries:not(.loading)::before,.My_recommend_entries:not(.loading)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    width: 30px;
    height: calc(100% - 25px);
    /* -webkit-backdrop-filter: saturate(100%) blur(10px); */
    /* backdrop-filter: saturate(100%) blur(1px); */
    background: linear-gradient(to left, rgba(0,0,0, 0.1) 10%, transparent 90%);
    z-index: 1;
}
.My_recommend_entries:not(.loading)::before{
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0, 0.1) 10%, transparent 90%);
}
.My_recommend_entries>.archive-entries {
    position: relative;
    list-style: none;
    padding-inline-start: 0px;
    overflow: auto;
    overflow-y: hidden;
    white-space: nowrap;
    height: 240px;
}
.My_recommend_entries section:first-child{
    margin: 0 10px !important;
}
.My_recommend_entries section {
    display: inline-table !important;
    width: 200px;
    height: 210px;
    box-shadow: 0px 0px 3px 0 #444;
    margin: 0 10px 0 0 !important;
    border-radius: .3em;
    -webkit-transition: all .5s;
    transition: all .5s;
    text-align: left;
    white-space: normal;
    vertical-align: text-top;
    padding: 0 !important;
    border: 0 !important;
}
.My_recommend_entries section:hover {
    box-shadow: 0px 0px 3px 0 #444, 0px 7px 10px 0 #aaa;
}
.My_recommend_entries section .thunmbnail {
    display: flex;
    width: 100%;
    overflow: hidden;
    border-top-left-radius: .3em;
    border-top-right-radius: .3em;
    border-bottom: 1px solid #ccc;
    transition: all .5s cubic-bezier(0.01, 0.4, 0.25, 1);
    -webkit-transition: all .5s cubic-bezier(0.01, 0.4, 0.25, 1);
}
.My_recommend_entries section .thunmbnail a {
    height: 110px;
    width: 100%;
    background-size: cover;
    transition: all .5s cubic-bezier(0.01, 0.4, 0.25, 1);
    -webkit-transition: all .5s cubic-bezier(0.01, 0.4, 0.25, 1);
}
.My_recommend_entries section:hover .thunmbnail a {
    height: 75px;
    transform: scale(1.05);
}
.My_recommend_entries section:hover .thunmbnail a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(55, 55, 55, 0.2);
}
.My_recommend_entries section .main-content {
    margin: 7px 10px 3px;
    display: grid;
    transition: all .5s;
    -webkit-transition: all .5s;
}
.My_recommend_entries section .categories {
    margin: 0 0 5px;
    font-size: 11px;
}
.My_recommend_entries section .categories>a {
    font-size: x-small;
    border-radius: 0;
    margin: 0;
    padding: 0 3px 0 0;
    background: unset;
    color: #002ede;
    font-weight: 600;
    display: -webkit-inline-box;
    -webkit-box-orient: block-axis;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.My_recommend_entries section .entry-title {
    text-decoration: none;
    font-size: 11px !important;
    font-weight: 600;
    color: #293030 !important;
    line-height: 1.3;
    margin: 0;
    display: -webkit-inline-box;
    -webkit-box-orient: block-axis;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.My_recommend_entries section .entry-postDate {
    font-size: 12px;
    color: #a6a6a6;
    margin: 2px 0 0 0;
}
.My_recommend_entries section .sub-content {
    line-height: 1.3;
    -webkit-box-orient: block-axis;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 10px;
    font-weight: 600;
    margin: 0px 10px 7px;
    display: none;
}
.My_recommend_entries section:hover .sub-content {
    display: -webkit-inline-box;
    animation: delay-display-webkit-inline-box 0.2s;
    -webkit-animation: delay-display-webkit-inline-box 0.2s;
}
.My_recommend_entries section .sub-content>a {
    text-decoration: none;
    color: gray;
}
.My_recommend_entries section .archive-entry-body{
    margin: -10px 10px 2px;
    display: none;
}
.My_recommend_entries section:hover .archive-entry-body {
    display: block;
    animation: delay-display-webkit-inline-box 0.2s;
    -webkit-animation: delay-display-webkit-inline-box 0.2s;
}

@keyframes spin{
    0%{ transform: rotate(45deg); }
    14.3%{ transform: rotate(90deg); }
    28.6%{ transform: rotate(135deg); }
    42.9%{ transform: rotate(180deg); }
    57.1%{ transform: rotate(225deg); }
    71.4%{ transform: rotate(270deg); }
    85.7%{ transform: rotate(315deg); }
    100%{ transform: rotate(360deg); }
}
@-webkit-keyframes spin{
    0%{ transform: rotate(45deg); }
    14.3%{ transform: rotate(90deg); }
    28.6%{ transform: rotate(135deg); }
    42.9%{ transform: rotate(180deg); }
    57.1%{ transform: rotate(225deg); }
    71.4%{ transform: rotate(270deg); }
    85.7%{ transform: rotate(315deg); }
    100%{ transform: rotate(360deg); }
}
@keyframes delay-display-webkit-inline-box {
    0% {opacity: 0;}
    100% {opacity: 0;}
}
@-webkit-keyframes delay-display-webkit-inline-box {
    0% {opacity: 0;}
    100% {opacity: 0;}
}
/* my recommend entries */
  </style>

Copy

ステップ２：モジュールの作成

次に、表示したいおすすめ記事のURLを「,」区切りで下のテキストボックスに入力し、テキストエリアに表示されたコードをコピーします。直接記入することも可能です。

記事のURLは全て入力するか、「.../entry/」後のURLを入力します。

例

https://www.it-the-best.com/entry/hatenacustom-categorysitemap
または、
hatenacustom-categorysitemap

URL：

<div class="My_recommend_entries" data-url="" ></div>

Copy

ステップ３：モジュールの設置

最後に、ステップ２でコピーしたコードを任意の場所(HTML記述欄)に貼り付けます。このコードがある場所に、入力したURLの記事一覧が表示されます。

タイトル下に表示したい場合は、ダッシュボード ＞ デザイン ＞ カスタマイズ(スパナアイコン) ＞ ヘッダ ＞ タイトル下のHTML記述欄に記入します。

補足

• おすすめ記事モジュールのカテゴリーは、記事に設定された最初のカテゴリーが表示されます。
• 表示したい記事の追加は、ステップ２のコードの「data-url」にURLを記入するだけで可能です。
• 記事情報の取得対象：セレクタ―
  
  画像：meta[property="og:image"]
  記事のカテゴリー：meta[property="article:tag"]
  タイトル：h1.entry-title>a
  投稿日：.date.entry-date.first time
  記事概要：meta[property="og:description"]
  はてなスター：.entry-footer>.hatena-star-metadata
• 当サイトにあるようにマウスドラッグを可能にしたい場合は「【見本あり】ドラッグスクロール可能なリストを１行で実現する -オプションでエンドレススクロールも可能-【jQueryPlugin】| listmousedragscroll.js - IT the Best」をご覧ください。
  
• コードを圧縮したい場合は「JavaScript/CSSコード圧縮 便利簡単な無料圧縮ツール【Minifier】 - IT the Best」を参考にしてください。
• 記事内に当モジュールを設置すると、記事のはてなスターにモジュール内の記事のはてなスターが表示される可能性があります。モジュールの属性に「data-hatenastar="none"」を設定することではてなスターをなくすことができます。

はてなブログでJavaScript/HTMLコードを記述する方法-スマホ対応版 | はてなブログカスタマイズ方法

はてなブログをカスタマイズするのに必要な作業として、HTMLコードの記述があります。

この作業は特に難しくはありませんが、スマホからはてなブログをカスタマイズする方法は、PCとは違うのでまとめてみました。

PC

PCからは、ダッシュボード ＞ 設定 ＞ 詳細設定 ＞ 検索エンジン最適化 ＞ headに要素を追加から記述が可能です。

または、ダッシュボード ＞ デザイン ＞ カスタマイズ(スパナアイコン)のヘッダ、記事、サイドバー、フッタからHTMLコードを記述することができます。

サイドバーからは、 モジュールを追加 ＞ </> HTMLから記述可能です。

スマホ

スマホのブラウザからもheadに要素を追加にHTMLコードを記述する手順は同じですが、デザインからHTMLコードを記述するには、PC版表示にする必要があります。

はてなブログのダッシュボードからページ下部のPC版をタップします。

PC版表示にしたら、それ以降の手順はPCと同じです。