カテゴリー別記事一覧のデザインをＴＯＰページのようにカスタマイズ【はてなブログPRO】

f:id:Sakuranbox:20210312211931p:plain

ＴＯＰページをカード型にしたからカテゴリー別記事一覧も同じようにさせたい！

だけどずっとＣＳＳのコードがわからず諦めかけていましたが、やっとコードを見つけました！！

なので備忘録として記事にしてみました

カテゴリー別記事一覧をＴＯＰページのようにしたい方の参考になれば幸いです

他テーマで検証していないのでバックアップしてから追記してくださいね

当ブログのカテゴリー記事一覧の完成はこんな感じ
ＴＯＰページはカード型にカスタマイズ
カテゴリー別記事一覧のＣＳＳコードはこれだった！
カテゴリー別記事一覧はＴＯＰページのＣＳＳを一部書き直すだけで完成
当ブログのカテゴリー別記事一覧のＣＳＳはこちら
- 追加・変更したところ
カテ別記事一覧のコードがわかればカスタマイズが広がる！

当ブログのカテゴリー記事一覧の完成はこんな感じ

f:id:Sakuranbox:20210312164555p:plain

⇓⇓⇓

f:id:Sakuranbox:20210312164549p:plain

ＴＯＰページのカスタマイズＣＳＳの一部を書き直しているだけです

モバイル版はこのようになりました！

何もカスタマイズしていない方は下記に私が参考にさせて頂いた記事をご紹介させていただきますのでカスタマイズしてみてください

＼このカスタムははてなPRO契約が必要です／

私は１年更新で契約中！

ＴＯＰページはカード型にカスタマイズ

当テーマはナチュリを使わせてもらっています

blog.hatena.ne.jp

このままでも可愛いいのですがＴＯＰページをカスタマイズしています

ＰＣ→カード型
モバイル→一列

ＰＣカード型はMinimal Greenさんのを参考にカスタマイズ

はてなブログのトップページ一覧形式表示を使ってカード型レイアウトに - Minimal Green

Minimal Greenさんのはモバイルは表示されないのでテーマに既存しているデザインが反映されます

ナチュリはモバイル版だと大きくて見にくいので自分で何とかしようとしましたが…

無理！！

何をどうしたらいいのか全く分からず製作者様のゴリアテさんに泣きついてモバイル版　並列コードを作って頂きました

www.tonari-hana.com

ソースコード - ナチュリ～Naturally～

このＴＯＰページのカスタマイズＣＳＳを使用してカテゴリー別記事一覧のデザインを全く同じようにしていきます

カテゴリー別記事一覧のＣＳＳコードはこれだった！

ずっと探し求めていたカテゴリー別記事一覧のＣＳＳコード

ヘッダー下のおすすめメニューを探していた時に見つけました！！

＜＜それがこちらの記事＞＞

⇓

www.gipsyjazznyumon.com

この記事の非表示のところを見ていたら category の文字が！！

.page-entry .toprecommend-container,
.page-entry .toprecommend-toptitle,
.page-archive-category .toprecommend-container,
.page-archive-category .toprecommend-toptitle
{
display:none;/*記事ページなどには表示しない*/
}

一気に大興奮！！

探し求めていたコードは　.page-achive-category　だったんです

答えがわかっていると「冷静に考えれば分かるコードをなぜ分からなかったんだ…」となりましたがＣＳＳ初心者なので【しょうがない！】

分かればすべて良し！！

カテゴリー別記事一覧はＴＯＰページのＣＳＳを一部書き直すだけで完成

当ブログで使わせていただいてるお二人のＴＯＰページのコードを見てみましょう

Minimal Greenさんのカスタマイズコードを見てみるとＣＳＳは

.page-index から始まっています

.page-index .archive-entries {
  display: -webkit-flex;

ナチュリ製作者様のゴリアテさんが作ってくれたＣＳＳは

body.page-index.page-archive 又は body.page-index から始まっています

body.page-index .entry-title {
	padding:5px 0 5px 5px;
または

body.page-index.page-archive .archive-entries .archive-entry{
　　position: relative;

.page-index も .page-archive もＴＯＰページの記事一覧のことを指しています

この２つを .page-achive-category（カテゴリー別記事一覧）に書き直せばいいわけです

ひこ

ゴリアテさんの body は残したままです
body.page-archive-categoryと書き直します

ＴＯＰページのデザインがカテゴリー別記事一覧にも適用され、バラバラだったデザインが統一されすっきり！

コードを書き換えたＣＳＳにさらに手を加えて満足いくカテゴリー別記事一覧ができました

当ブログのカテゴリー別記事一覧のＣＳＳはこちら

デザイン→カスタマイズ→デザインCSSに追記してください

　※ナチュリ以外のテーマで試していません
　　バックアップを取ってからにしましょう

ダブルクリックで全選択できるよ

/* カテゴリー別記事一覧　ページカード型 */
@media screen and (min-width: 767px) {
/*ＴＯＰ　カテ別一覧　カード型小さく*/
.page-archive .archive-entries .categories {
  padding-top: 0px;
  margin-bottom: 0px;
}
.page-archive-category .archive-entries .entry-title {
  padding-bottom: 0px;
  }
.page-archive-category .archive-entries {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.page-archive-category .archive-entry {
  margin-bottom: 50px!important;/*間の空白*/
  padding-bottom: 20px;
  box-sizing: border-box;
  width: calc(50% - 20px);
}
.page-archive-category .entry-thumb {
  float:none;
  display: block;
  width: 100%;
  height: 200px;
  background-position: center center;
  background-size: cover;
}
.entry-thumb-link:hover {
  opacity:0.7;
}
.page-archive-category .archive-entry {
    position: relative;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    background-color: #fffdf7;/*タイトルの背景色*/
    border-radius: 8px;/*角を丸く*/
}
.page-archive-category .entry-thumb-link {
    order: 1;
    height: 200px;
}
.page-archive-category .archive-entry-header {
    order: 2;
}
.page-archive-category .categories {
    order:3;    
}
.page-archive-category .archive-entry-body {
    order:4
}
}
.page-archive-category .entry-description{
  display:none;/*説明文　非表示*/
}
.page-archive-category .categories a {
 display: none;/*カテゴリー非表示*/
 }
/*スマホ表示*/
@media screen and (max-width: 767px) {
body.page-archive-category .entry-title {
   float:right;/*記事タイトルを右に*/
   padding:5px 0 5px 5px;
   width:95%;
   line-height:1.00em;/*行間*/
}
body.page-archive-category .entry-title a{
   color: #402000 !important;/*記事タイトルの色*/
   font-size: 16px;/*記事タイトルの文字の大きさ*/
   line-height: 1.75em;/*行間*/
}
body.page-archive-category .archive-entries .archive-entry{
   position: relative;
   margin: 0 0 8%;
}
body.page-archive-category .archive-entries .entry-title{
   width: 58%;
   background-color: #e4dcc950;/*タイトル背景色*/
   border-radius: 8px;/*角を丸く*/
}
body.page-archive-category section.archive-entry .categories {
    float:right;/*カテゴリーを右に*/
    width: 58%;
    border-bottom: 1px dashed #dddddd;/*カテゴリー下の破線をつける*/
    padding-bottom: 15px; 
}
body.page-archive-category .entry-thumb-link{
   position: absolute;
   top: 0;
   left: 0;/*アイキャッチを左に*/
}
/*アイキャッチの画像*/
body.page-archive-category .entry-thumb-link .entry-thumb{
　　width: 100%;
    height: 100px;
    background-position: center center;/*中央寄せに*/
　　display: block;
    margin: 0 auto;
    border-radius: 8px;/*角を丸く*/
}
}