投稿日:

はてなブログを、グリッド表示にする方法

ブログ記事が多くなって、古い記事があまり読まれない場合、グリッドデザインにしてみてはどうだろう?

※この記事は、このブログが「はてなブログ」だった頃に書いたものです。

私の思う、グリッドデザインの長所と短所

長所

  • 一度にたくさんの情報を見せることができる
  • 統一感があって、分かりやすい
  • 写真がいっぱい並んでるので、クリックしてもらいやすい

短所

  • 慣れてない人は、情報が多すぎてとまどう場合がある
  • キャッチーな写真を使わないと、全体的に退屈な印象を与えてしまう

私のブログに関しては「デザインをどうこうする前に記事をもっと書けよ!」というツッコミは置いておいて、公式テーマの「Life」を使って、こんな感じに適応してみた。

↓PC版は3列

f:id:bumblehop:20170828081404j:plain

↓タブレットは2列

f:id:bumblehop:20170828081409j:plain

↓スマフォは1列(これは最初から)

f:id:bumblehop:20170828081412j:plain

公式テーマLifeを使ったやり方

まず、管理画面から「デザイン」をクリック

f:id:bumblehop:20170828085124j:plain

つぎに、スパナマークをクリック

f:id:bumblehop:20170828085130j:plain

ページの下の方のデザインCSSと書いてある部分をクリック

f:id:bumblehop:20170828085131j:plain

超簡単に、2列にしたいだけなら以下のコード


	#main-inner {
		flex-wrap: wrap;
		display: flex;
	}
	.page-index .entry, .page-archive .archive-entry {
		width: 40%;
		overflow: hidden;
		margin: 5%;
	}

私の場合、PCでは3列、その他では2列と1列にしたかったのと、右のメニューカラムが広すぎたので、こうした


@media screen and (min-width: 1024px){
#box2 {
	width: 27%;
}
#wrapper {
	margin-right: -27%;
	padding-right: 27%;
}
	#main-inner {
		padding-right:30px;
		flex-wrap: wrap;
		display: flex;
	}
	.page-index .entry, .page-archive .archive-entry {
		width: calc(50% - 30px);
		overflow: hidden;
		margin: 15px;
	}
}


@media screen and (min-width: 1280px) {
#box2 {
	width: 24%;
}
#wrapper {
	margin-right: -24%;
	padding-right: 24%;
}
	.page-index .entry, .page-archive .archive-entry {
		width: calc(33.3% - 30px);
		overflow: hidden;
		margin: 15px;
	}
}

もしなんか気づいた事があれば、速攻で直しますので、教えてくだされ。
よろしくお願いします。

ご清聴ありがとうございました。

Additional Reading...

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA