【はてなブログPro】トップページをＰＣは「カード型」にスマホは「並列」にカスタマイズ！～ナチュリ～【コピペＯＫ！】

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

そこで！

1. PC表示…カード型
2. スマホ表示…アイキャッチと記事タイトルを並列

このようにカスタマイズしました

今回はトップページのカスタマイズ編！

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

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

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

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

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

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

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

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

before

⇩⇩⇩

after

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

before

⇩⇩⇩

after

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

＼ このカスタムははてなPro契約が必要です／

私は１年更新で契約中！

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

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

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

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

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

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

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

カード型ＣＳＳはこちら☟

デザイン➡スパナマークのカスタマイズ➡デザイン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;
}

はてなブログのトップページ一覧形式表示を使ってカード型レイアウトに - Minimal Green

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

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

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

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

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

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

神対応すぎる！

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

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

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

ほんと神すぎる！！

作って頂いたスマホ版　並列ＣＳＳがこちら☟

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コードは

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

になっています

なので

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

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

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

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

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

デザイン➡スパナマークのカスタマイズ➡デザイン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;
}
}

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

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

ひこ

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

さいごに

それが当ブログで使用させて頂いているのはゴリアテさん制作のナチュリ～Naturallyというテーマです

blog.hatena.ne.jp

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

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

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

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

ひこ

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

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

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

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

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

www.golyat.jp

＼ このカスタムははてなPro契約が必要です／

１年契約で７０３円/月！
難しいセキュリティやスパム対策は丸投げしてこの価格

カスタマイズも広がるので私のようにカスタムしたいけど難しいことは無理！って方におすすめです