大人気のタイル風デザイン！はてなブログでカスタマイズする方法【コピペするだけ】

f:id:xiangcai925:20180528213447j:plain

当ブログのメインコンセプトは「ファーストクラスとビジネスクラスで世界一周」だというのに、最近ブログカスタマイズの記事ばっかり書いています。どうも、パクチーです。今回の記事もブログカスタマイズについて更新します。そろそろ軌道修正しよう、、、。

さて、ちまたで大人気の（？）、トップページをタイル風に表示するカスタマイズ。最近はてなブログのテーマでも、オシャレなタイル風のデザインが増えてきていますよね。

f:id:xiangcai925:20180528203959p:plain

「UNDER SHIRT（リンクに飛びます）」様や、

f:id:xiangcai925:20180528204210p:plain

「Haruni (リンクに飛びます）」様などがタイル風デザインの代表ではないでしょうか？

そんなデザインを自力で、CSSで作り上げる方法をコピペだけで完成するよう、わかりやすく解説してきます。ちなみに当ブログのベースのとなるテーマは「Innocent（リンクに飛びます）」で作っております。

レイアウトを変えたいと考えている人も、タイル風デザインがちょっと気になっている人も、もしよろしければ参考にしてみてください。

※はてなブログのデザインテーマを変更をすると、今までのCSSが全て削除されてしまうので、必ずバックアップを取っておきましょう。また、大幅にデザイン変更する際は、デザインテスト専用の非公開ブログを作ってそちらで一度試してみることをオススメします。

スポンサードリンク

一覧形式表示にしておきましょう

前提として、トップページの表示形式を「一覧形式」にしておきましょう。カード型レイアウトにしてあると、なお良し！

設定の仕方は前回の記事を参考にしてください。

f:id:xiangcai925:20180526012121p:plain

このような状態からスタートしていきます。

タイル風デザインCSS

御託はこれぐらいにしておきましょう。あなたがやること、それは以下のコードをデザインCSS内にコピー＆ペーストするだけ。

/* タイル風 */
#content {
    background-color: #e5e9ef;/* コンテンツ部分の背景色 */
}
.page-archive .archive-entry {/* 記事一覧 */
    background-color: #fff;/* タイルの背景色 */
    padding: 0px;/* 余白 */
    border-radius: 10px;/* 角の丸み */
}
.entry {/* 記事 */
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
}
.hatena-module {/* サイドバー */
    background-color: #fff;
    padding: 0px 10px 25px 10px;
    border-radius: 10px;
}