My Frist Class Trip

2018年2月末より、ファーストクラス&ビジネスクラスで世界一周しています。飛行機レポートや、観光情報などをお届け。

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

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;
}

上記のコードは私のブログで使われてある物と全く同じです。各自で好みの色 / 数字に変更してください。

角の丸みの大きさは、数字が大きいほど丸みが強くなります。逆に0に近いほど、四角に近くなる。

f:id:xiangcai925:20180528212439p:plain

これで完成。だんだんと形が出来上がってきました。

自分の思い通りにデザインが完成するのが、たまらなく嬉しくて楽しい。

ではまた次回お会いしましょう。皆様も良きカスタムライフを!

スポンサードリンク