IT the Best

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

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

f:id:Surprisedblog:20201018234054j:plain

 

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

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

 

 

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

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

www.it-the-best.com

 

サイトマップの種類

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

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

 

 

 

コード生成ツール 

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

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

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

 

階層カテゴリー用

 








開く


<style>
/* 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    
   */
  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) { }
          c_name = c_name.replace(/ \([\d]*\)$/, "");
          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;
          $.ajax({
              type: 'GET',
              url: url,
              dataType: "html",
              success:(data) => {
                  let html = $($.parseHTML(data));
  
                  let entries = html.find(".archive-entries"); // すべて取得
                  if (typeof t.options == "object") {
                      if (t.options.content==4) {
                          // サムネない場合
                          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;
                          });
                      }
                  }
  
                  // スタイル設定用のクラスを追加
                  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();
              }
          })
      }
  }
}
{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 = [];
    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 = ListPageByAllCategory_HierarchyCategory.sortingCategory(category_name);
        if (element.tagName !== "BODY" && category_list.length > 1) {
            element.style.display = "none"; // 階層化カテゴリーを非表示にする
        }
    })
}
}
{exclusion}
$(function () {
  ListPageByAllCategory.show({content:4,style:1});
});
</script>

 

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

 

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

www.it-the-best.com