隣の花の育てかた

~気になるお隣さん【5人家族+ねこ】の家庭事情~

5人家族節約術
ねことの暮らし
我が家の愛用品
子ども3人子育てのあれこれ

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

f:id:Sakuranbox:20210312211931p:plain

 

 

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

 

 

だけどずっとやりたくてもCSSのコードがわからず諦めかけていましたが、やっとコードを見つけました!!

 

 

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

 

 

私と同じようにCSS初心者・カテゴリー別記事一覧をTOPページのようにしたい方の参考になれば幸いです

 

 

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

 

 

 

 

 

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

f:id:Sakuranbox:20210312164555p:plain

⇓⇓⇓

f:id:Sakuranbox:20210312164549p:plain

 

 

TOPページのカスタマイズCSSの一部を書き直しているだけです

 

 

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

 

f:id:Sakuranbox:20210312165813j:plain
f:id:Sakuranbox:20210312165809j:plain


 

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

 

 

 

TOPページはカード型にカスタマイズ

 

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

 

blog.hatena.ne.jp

 

 

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

 

  • PC→カード型
  • モバイル→一列

 

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

 

 

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

 

 

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

 

 

無理!!

 

 

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

 

f:id:Sakuranbox:20191031170801j:plain

 

 

 

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

 

 

 

カテゴリー別記事一覧のCSSコードはこれだった!

 

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

 

 

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

 

 

<<それがこちらの記事>>

⇓ 

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 だったんです

 

 

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

 

 

分かればすべて良し!! 

 

 

 

カテゴリー別記事一覧はTOPページのCSSを一部書き直すだけで完成

 

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

 

 

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

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

 

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

 

 

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

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 もTOPページの記事一覧のことを指しています

 

 

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

 

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

 

 

 

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

 

 

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

 

 

 

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

 

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

 

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

 

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

 

/* カテゴリー別記事一覧 ページカード型 */
@media screen and (min-width: 767px) {
/*TOP カテ別一覧 カード型小さく*/
.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;/*角を丸く*/
}
}

 

 

追加・変更したところ

 

  • カードを小さくした

カード型が少し大きく感じたので4~7行目の追記でTOPページもカテ別記事一覧も小さくしています

 

 

  • カードとカードの間の空白を広くした
f:id:Sakuranbox:20210312154250j:plain
f:id:Sakuranbox:20210312153055j:plain

 

20行目の20pxを50pxに変えました

 

 

なぜかというと、また下記にも書きますがカテゴリー欄を消したためスペースがTOPページの時よりも小さくなったんです

 

 

TOPページでは触っていませんがカテ別一覧の時だけ見にくかったので空白を少し広く取りました

 

 

  • タイトルの背景色とカードの四角をすこし丸くした

41行目(PC 版)・83行目(モバイル版)でカテ別一覧のタイトルの背景色を設定できます

 

 

私はPC版はTOPページと同じ色で、モバイル版は別色にしてみました

 

f:id:Sakuranbox:20210312155340j:plain
f:id:Sakuranbox:20210312155343j:plain

 

違ったほうがわかりやすいかな?と思って

 

 

42行目(PC版)・84行目(モバイル版)でカード型 or タイトルの四角を少し丸みを持たせました

 

 

四角がよければ削除して、もっと丸みを待たせたければ数値を大きくしてください

 

 

  • 導入文とカテゴリー名を非表示に

58~60行目でPC版・モバイル版両方で記事の説明文?導入文?最初の文章を削除

 

f:id:Sakuranbox:20210312153138j:plain

 

 

61~63行目でカテゴリー名を消しています

 

f:id:Sakuranbox:20210312153124j:plain
 

カテゴリー別の記事一覧なので必要ないだろうと思って消してみました!

 

 

必要でしたら61~63行目を削除してください

 

 

  • モバイル版のタイトルの文字の大きさを変更

72~76行目

 

カテ別記事一覧の時のみタイトルの文字の大きさ・行間を調整!

お好きなサイズを指定してください

 

 

  • モバイル版タイトル下に破線
f:id:Sakuranbox:20210312161234j:plain

 

89行目

モバイル版のみタイトル下に破線をつけて区切ってみました

必要なければ削除してください

 

 

  • アイキャッチの四角

104行目

モバイル版のアイキャッチ画像の四角を少し丸くしました

 

 

長かった…
ここまで読んでいただいた方お疲れさまでした

 

 

 

カテ別記事一覧のコードがわかればカスタマイズが広がる!

 

半ばあきらめかけてたカテ別記事一覧のカスタマイズ

 

 

ひょんなことからコードを見つけて実装!!

 

CSSを追記するときはバックアップを取ってからにしてね

 

カテ別記事一覧のコードを見つけたことによって、今まであきらめていたカスタマイズもできるようになりました

 

 

例えば私の場合

 

  • おすすめメニューの位置
  • タイトルの大きさ
  • 背景色

 

 

TOPページをカスタマイズしたのにカテ別記事一覧はそのままの方

テーマによっては初めから一列になっているもの、カード型になっているものもありますが、そうではないテーマの方のお役に立てれたら幸いです