カテゴリー別アーカイブ - IT the Best
↑ 当ツールで生成したコードで、カテゴリー別記事一覧を表示しています。
カテゴリー別記事一覧のサイトマップページ
はてなブログで、ユーザー向けのサイトマップページを作成するためのJavaScriptコードとスタイルコードを生成します。
カテゴリー別に記事一覧を取得し、記事内に表示します。
下の記事の処理に、オプションとして4種類の表示内容,スタイルの選択をできるようにしたものです。
サイトマップの種類
- 記事タイトルだけ(リンクだけ、日付なし)
- 記事タイトル・サムネ(サムネがない場合記事はタイトルのみ)
- 記事タイトル・サムネ・カテゴリー
- 記事タイトル・サムネ・カテゴリー・記事概要(はてなスターも含む)
コードを設置したページには、はてなモジュールのカテゴリーリストが存在する必要があります。
コード生成ツール
表示形式の種類を選択し、コードをコピーします。コピーしたコードを記事内(固定ページ)に貼り付けることで、カテゴリー別の記事一覧を表示するサイトマップページを作成することができます。
スタイルは、「記事タイトル・サムネ・カテゴリー・記事概要(はてなスターも含む)」の表示内容用に作成しました。
スタイルは、はてなブログのデフォルトテーマをもとに作成しています。
そのため、異なるテーマを使用していたり、独自スタイルを適用しているなどの場合、レイアウトが崩れる可能性があります。
階層カテゴリー用
サンプル:
指定しない場合、カテゴリー記事一覧の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}
$(function () {
ListPageByAllCategory.show({content:4,style:1});
});
</script>
階層カテゴリーについてはコチラ
更新情報
2020/11/25
- 一度に表示する最大記事数の指定が可能
- 表示されていない記事を表示するためのもっと見るボタンの設置が可能
2020/11/28
- 「階層カテゴリー用の場合に、階層化していないカテゴリの記事一覧が表示されない」という問題を修正。