隣の花の育てかた

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

【はてなブログPRO向け】トップページをPCではカード型にスマホでは並列にカスタマイズしてみた~ナチュリ~【コピペOK!】

f:id:Sakuranbox:20191031132703j:image

 

 

はてなPROになるとトップの記事一覧が全文形式ではなく一覧形式に変更することができます

 

 

そこで!

 

 

PC表示ではカード型

スマホ表示ではアイキャッチと記事タイトルを並列になるようにカスタマイズしました

 

 

ってことで

今回はトップページに関するカスタマイズ編!

 

 

自分がどのコードを使っているのか把握するための備忘録でもあります

 

 

色やデザインの参考になれば幸いです

 

 

必ず事前にバックアップをしてから追加しましょう!

 

 

 

 

トップページの完成はこんな感じ

 

当ブログテーマではナチュリを使用しています

 

 

ナチュリのカスタマイズを検索しても出てこなかったのでカード型はナチュリ以外で使用しているCSSを頂きました

 

PROの方向けのカスタマイズになります

 

 

PC表示のカード型の完成はこんな感じに 

 

アイコンと名前を変えたので完成した当時のものです(汗)

 

 

before

f:id:Sakuranbox:20191031142702p:plain

 

⇩⇩⇩

after

f:id:Sakuranbox:20191031142629p:plain

 

 

スマホ表示の並列はこんな感じに

 

before

f:id:Sakuranbox:20191031142647p:plain

 

⇩⇩⇩

after

f:id:Sakuranbox:20191031143031p:plain

 

それぞれCSSに追記してカスタマイズしていきます

 

 

 

まずトップページを一覧形式にしておこう

 

まず初めにPROでしか変更ができないトップページの表示形式を一覧形式にしましょう

 

 

設定➡詳細設定➡トップページの表示形式で変更できます

 


f:id:Sakuranbox:20191031164913j:image

f:id:Sakuranbox:20191031164917j:image

 

 

PCでは2列のカード型にするので表示形式の下のトップページの記事数は偶数の14記事に変更しました

 

 

PC表示のトップページをカード型にカスタマイズ

 

PCでのみカード型にカスタマイズしていきます

 

f:id:Sakuranbox:20191031142629p:plain

 

 

記事の概要文は消してアイキャッチと記事タイトル・カテゴリーのみのシンプルなデザインに

 

 

カード型CSSはこちら☟

 

デザイン➡スパナマークのカスタマイズ➡デザイン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;
}
}
@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
}
}
.page-index .entry-description{
  display:none;
}

 

 

MinimalGreenさんのカスタマイズ記事は初心者にも分かりやすく書き方も含め勉強になります

 

 

 

スマホ表示のトップページをアイキャッチとタイトルを並列にカスタマイズ

 

スマホ表示でカード型は見にくい…(個人的に)

 

 

なのでスマホではアイキャッチと記事タイトルを並列にしたい!

 

 

だけど色々CSSを触ったけどウンともスンとも言わない。。。

 

 

何をやっても変わらないので制作者様のゴリアテさんに泣きつきました

 

 

デフォルトのデザインを変えようとしているなんとも失礼な私に翌日という速さでコードを組み立ててくれました

 

 

神対応すぎる!

足向けて寝られない!!!

 

 

そのコードをカスタマイズ記事に載せてもいいかアポを取ったらこれまた快く承諾してくださったのでご紹介します

 

 

もう一回言わせてほしい…

ほんと神すぎる!!

 

 

 

作って頂いたスマホ版 並列CSSがこちら☟
body.page-index .entry-title {
	padding:5px 0 5px 5px;
	width:95%;
	line-height:0.8
	}
body.page-index .entry-title a{
	color: #454545 !important;
	font-size: 0.6em;
	}
body.page-index.page-archive .archive-entries .archive-entry{
		position: relative;
		margin: 0 0 8%;
	}
body.page-index.page-archive .archive-entries .entry-title{
		width: 58%;
	}
body.page-index section.archive-entry .categories {
		width: 58%;
	}
body.page-index .entry-thumb-link{
	position: absolute;
	top: 0;
	right: 0;
	}
body.page-index .entry-thumb-link .entry-thumb{
		margin: 0;
	}
.entry-date.date.first, .date {
	display: none;
}

 

デモサイトに載せて頂きました

 

 

 

作って頂いたCSSコードは

  • アイキャッチ⇒右
  • 記事タイトル⇒左

になっています

 

f:id:Sakuranbox:20191031170822j:image

 

 

なので

  • アイキャッチ⇒左
  • 記事タイトル⇒右
  • 文字を大きく
  • 下に点線の仕切り

をしてさらに見やすいようにカスタマイズしました

 

 

記事タイトルの下に下線で区切ることで見やすくなりましたよね

(本当はアイキャッチの下にも入れたかったけど分からず…)

 

f:id:Sakuranbox:20191030211948j:image

 

 

【完成】 トップページをスマホでは並列にするCSSはこちら☟

 

デザイン➡スパナマークのカスタマイズ➡デザインCSSにPC版カード型CSSの下にコピペしてください

 

 

スマホ表示でのみ並列にしたいので @media screen and (max-width: 768px) {}を追記しました

 

 

ダブルクリックで全コピ出来ます

 

/*スマホ表示*/
@
media screen and (max-width: 768px) { body.page-index .entry-title { float:right;/*記事タイトルを右に*/ padding:5px 0 5px 5px; width:95%; line-height:1.00em;/*行間*/ } body.page-index .entry-title a{ color: #402000 !important;/*記事タイトルの色*/ font-size: 0.65em;/*記事タイトルの文字の大きさ*/ } body.page-index.page-archive .archive-entries .archive-entry{ position: relative; margin: 0 0 8%; } body.page-index.page-archive .archive-entries .entry-title{ width: 58%; } body.page-index section.archive-entry .categories { float:right;/*カテゴリーを右に*/ width: 58%; border-bottom: 1px dashed #dddddd;/*カテゴリー下の破線をつける*/ padding-bottom: 15px; } body.page-index .entry-thumb-link{ position: absolute; top: 0; left: 0;/*アイキャッチを左に*/ } /*アイキャッチの画像*/ body.page-index .entry-thumb-link .entry-thumb{   width: 100%; height: 100px; background-position: center center;/*中央寄せに*/   display: block; margin: 0 auto; border-radius: 8px;/*角を丸く*/ }
/*日付を消す*/ .entry-date.date.first, .date { display: none; } }

 

PC初心者が調べながら書き加えてるので合ってるか分かりませんがこれで反応してくれました

 

 

記事タイトルの文字色や大きさ、行間はブログに合うように調整してください

 

 

今回、作って頂いたスマホ表示の並列は他のテーマで試していないので反応するか分かりません。自己責任でお願いします

 

 

さいごに

 

どのテーマにしようかテーマストアで選んでいたらブログタイトルにぴったりでかわいいテーマを発見☆。.:*・゜

 

 

まさに一目ぼれ!!

 

 

それが当ブログで使用させて頂いているのゴリアテさん制作のナチュリ~Naturally

 

blog.hatena.ne.jp

 

 

このままでも十分かわいいのですがこのデザインを崩さず、もう少し落ち着いた感じにしたくてパソコンど素人がカスタマイズに挑戦しました

 

 

自分の備忘録でもあるカスタマイズシリーズ

今回はトップページに関するカスタマイズでした

 

 

ナチュリのカスタマイズを検索してもなかったのでPC表示のカード型はナチュリ以外でも対応できるコードを使用しています

 

 

今回、作って頂いたスマホ表示の並列は他のテーマで試していないので反応するか分かりません。自己責任でお願いします

 

 

CSSを追加する前に念のため、前のCSSをコピペしてメモに残してから書き加えましょう

 

 

もし失敗してもコピペで元に戻せるので安心感が違います

 

 

パソコン初心者が一つカスタマイズするのにかかるのは1分単位ではなく1時間単位!!

 

 

CSSの意味すら分からなかった私でも調べながら(ほとんど助けてもらいながら)なんとかできました!

 

 

 

今回かーなーりお世話になって頭が上がらないテーマ製作者ゴリアテさんのブログはこちら☟

www.golyat.jp