隣の花の育てかた

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

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

f:id:Sakuranbox:20191031132703j:image

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

そこで!

PC表示ではカード型

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

 

ってことで

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

 

まだまだ全体のカスタマイズは未完ですが自分がどのコードを使っているのか把握するための備忘録です

何かあっても責任負えないので必ず事前にバックアップをしてから追加しましょう!

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

 

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

f:id:Sakuranbox:20191012213048j:plain

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

ナチュリのカスタマイズを検索しても出てこなかったのでカード型はナチュリ以外で使用している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表示ではカード型にしたほうがスクロールが少なく目に記事がたくさん入るのでPC表示でのみカード型にカスタマイズしました。

 

f:id:Sakuranbox:20191031142629p: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;
}
}
@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さんのカスタマイズ記事は初心者にも分かりやすく書き方も含め勉強になります

 

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

f:id:Sakuranbox:20191031104800j:image

スマホ表示でカード型は見にくくなりそうなのでアイキャッチと記事タイトルを並列にしたく色々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;
}

 

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

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

 

作って頂いたCSSコードはアイキャッチ⇒右記事タイトル⇒左になっています

f:id:Sakuranbox:20191031170822j:image

 

なのでアイキャッチ⇒に、記事タイトル⇒にして文字も大きくカスタマイズしました。

 

さらに記事タイトルの下にサイドバーの新着記事と同じように点線の仕切りを記事タイトル下に入れてみました

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

f:id:Sakuranbox:20191030211948j:image

区切りが少しあるだけでも見やすくなりました☆。.:*・゜

 

コードはこちら☟

デザイン➡スパナマークのカスタマイズ➡デザイン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初心者が調べながら書き加えてるので合ってるか分かりませんがこれで反応してくれました

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

 

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

 

さいごに

f:id:Sakuranbox:20191012211549j:image

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

 

まさに一目ぼれ!!

 

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

blog.hatena.ne.jp

 

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

 

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

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

 

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

 

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

 

PC表示はナチュリではないテーマを使用している方から頂いているCSSなのでどのテーマでも対応できるかと思いますが設定する前に念のため、前のCSSをコピペしてメモに残してから書き加えましょう

 

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

 

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

CSSの意味すら分からなかった私でも調べながらなんとか出来ました!

 

ブログを始めるまではCSSが何かすら分からなかったパソコンど素人の私でも出来たのは先人者様たちがCSSを残してくれたおかげです。

まだカスタマイズ未完なのでCSSのお勉強は暫く続きそうです!

 

 

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

www.golyat.jp