私の使っているブログデザインについてまとめ！カード型トップページなど

f:id:konayuu:20210202122534j:plain

みなさんこんにちは。こなゆです。

私のブログに来てくれる人もだんだん増えてきたので、

私の使っているデザイン、CSSコードだったりを紹介していこうと思います。

意外と他人のホームページのデザインを細かいところまで載せてくれる人はいないと思います。

それはきっと真似されてしまうからです。笑

それでも私は、私と同じような境遇の人（デザインよくわからない、この人のブログのデザインいい！欲しい！と思った時）の助けになりたいと思います。

他人のデザインいいなと思うことは、多々ありますよね？(*^^)

紹介している記事リンクに飛べばコピペできるようになっていますので、ぜひ参考にしてみてくださいね！

トップページ（記事一覧）について
- CSS
- 反映のさせ方
デザインテーマに関して
文中のBOX（枠）などに関して
ヘッダー下にオススメ記事を出す
まとめ

トップページ（記事一覧）について

トップページはこんな感じで、カード型のトップページにしています。

（本当は3列にしたかったなんて言えない）

（厳密には3列にはできたのですが、今使ってるデザインの左右の余白をうまく調整できなくて、ただただ縦長の3列になってしまったので諦めました）

f:id:konayuu:20210115024744p:plain

CSS

@media (min-width: 768px){
.page-index .archive-entries {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}

.page-index .archive-entry {
margin-bottom: 20px!important;
padding-bottom: 20px;
box-sizing: border-box;
width: calc(50% - 20px);
}

.page-index .entry-thumb {
float:none;
display: block;
width: 100%;
height: 200px;
background-position: center center;
background-size: cover;
border-radius: 8px;
}
.entry-thumb-link:hover {
opacity:0.7;
}
.page-index .entry-description{
display:none;
}
}

@media (min-width: 768px){
.page-index .archive-entry {
position: relative;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.page-index .entry-thumb-link {
order: 1;
height: 200px;
}
.page-index .archive-entry-header {
order: 2;
}
.page-index .categories {
order:3;
}
.page-index .archive-entry-body {
order:4
}
}