IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

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

f:id:Surprisedblog:20201018234054j:plain

 

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

 

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

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

 

 

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

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

www.it-the-best.com

 

サイトマップの種類

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

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

 

 

 

コード生成ツール 

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

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

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

 

階層カテゴリー用

 








  サンプル:
指定しない場合、カテゴリー記事一覧の1ページで表示される記事数が、表示する最大記事数となります。
全ての記事が表示されていない場合に、もっと見るボタンがリストの後ろに表示されます。

開く


<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>

 

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

 

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

www.it-the-best.com

 

 

 

更新情報

2020/11/25

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

 

2020/11/28

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