Wedding Road

結婚式の準備について 式場選びから結婚式アイテム作成、大変だったことややってよかったことなどリアルタイムで紹介していきます♪主に結婚式や結婚生活ついて書くつもりですが、雑記ブログ(ブログデザイン・その他)になりつつあります。

<よく読まれている記事>
ブログ1かげつ報告
Adsense合格
フランセス
PV up

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

 

f:id:konayuu:20210202122534j:plain

  

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

 

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

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

 

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

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

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

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

 

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

 

 

 

トップページ(記事一覧)について

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

(本当は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
}
}

 こちらのブログさんを参考に。とてもわかりやすい記事でした。

blog.minimal-green.com

反映のさせ方

下記画像参照。

ダッシュボード→①デザイン→②スパナマーク→③デザインCSSの欄にコピペです。

 

f:id:konayuu:20210113140810p:plain

 

貼り付け終わったらしっかり変更を保存するボタンをおしてくださいね!

デザインテーマに関して

はてなブログのテーマ「SOHO」を使っており、以前私が記事で紹介しています。

真っ白かつとてもシンプルなものが好きな人にはオススメのデザインです!

ただ、記事一覧がカード型のデザインとかにはなっていないので、

最初からカード型になっているデザインにした方がいいかもしれないと思ってきました。笑

飽きたら変えますね…。

www.konayu-wedding.com

 

文中のBOX(枠)などに関して

前回記事で紹介したものを主に使っています。

 

こんなデザインを使っているよ!
  • 今使用している黄色の枠
  • 角に丸がついている枠
  • 枠の途中にタイトルを書ける枠

 

www.konayu-wedding.com

 

ヘッダー下にオススメ記事を出す

これも別記事でまとめましたね。以下記事を参照してみてください(*^^)v

PV数上がることは間違いなしです!

読んでほしい記事に誘導できますよ(´・ω・`)

 

www.konayu-wedding.com

 

 

まとめ

今日は私がブログで使っているデザインについてまとめてみました。

まだまだ私もデザインは模索中ですが、ひとまずはこのデザインのまま過ごしてみようかなと思っています。

 

ただ上にも書きましたが、私はトップページのカードの表示が気に入ってません。笑

またアップデートすることがあれば、

記事もリライトしますのでよろしくお願いしますね(*'▽')

 

それではまた~。

 

 

ランキング参加しております!ポチっとお願いします(*'▽')

ブログランキング・にほんブログ村へにほんブログ村

// (bug fix)はてなブログ「一覧形式」の画像をオリジナルのものに変える