はてなブログのトップページをタイルカード風レイアウトにしてみよう

おすっ！つな（@tu_na_69）です(∩´∀｀)∩

はてなブログのトップページをタイル風の一覧レイアウトにするカスタマイズです。

はてなブログPROのみのカスタマイズとなりますが、CSSだけでできるのがポイントです。

タイルカード風レイアウト

トップページ一覧のコンテンツを枠線で囲んでタイル風レイアウトにするカスタマイズです。うんとおしゃれになります。

参考にさせていただいたのはこちらのサイトです。

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

トップページの一覧表示を2列のカード型レイアウトにするカスタマイズはこちらを参考にしてください。

pea-nut.hatenablog.com

ここにCSSを書き加えていきます。

「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」

カード型一覧のコードを書き込んでいる場合は近くに貼り付けるといいと思います。

ここでは、2列タイル風レイアウトで紹介していきます。

タイル風CSS

影付きです。

以下のコードを加えます。

.page-index .archive-entry {

    background-color: #fff;/* タイル背景色 */

　　border: 1px solid #ccc;/* タイルの枠線 */

    border-radius: 2px;/* 角の丸み */

    padding: 2px;/* 余白 */

　　box-shadow:1px 1px rgba(0, 0, 0, 0.2);/* 影 */

}

数値や色を変えたり、使わないコードを削除したりしてお好みでカスタマイズしてください。

せっかくなのでいくつか紹介しますね。

 影なしタイル風CSS

タイルの影なしバージョンです。

.page-index .archive-entry {

    background-color: #fff;/* タイル背景色 */

　border: 1px solid #ccc;/* タイルの枠線 */

    border-radius: 2px;/* 角の丸み */

    padding: 2px;/* 余白 */

}

影のみタイル風CSS

枠線を消して右と下の影のみのタイル風です。余白を多めにとった方がすっきりするかも。

.page-index .archive-entry {
background-color: #fff;/* タイル背景色 */
border-radius: 2px;/* 角の丸み */
box-shadow:1px 1px rgba(0, 0, 0, 0.2);/* 影 */
padding: 5px;/* 余白 */
}

色付きタイル風CSS

タイルの背景色を変えるだけでもだいぶ雰囲気が変わります。

背景色を変更し、枠線を削除してみました。

.page-index .archive-entry {

    background-color: #f5f5dc;/* タイル背景色 */

    border-radius: 2px;/* 角の丸み */

    padding: 2px;/* 余白 */

}

 スマホをタイル風にしない

2列タイル風レイアウトをスマホで表示するとレイアウトが崩れたり、枠線のために窮屈なレイアウトになってしまいます。

そこでスマホの時は枠線の表示を消したい！という方は、こちらのコードを加えてください。

@media (max-width: 478px){
.page-index .archive-entry {
border: none;
box-shadow: none;
}
}

 まとめ

ほかにも、枠線や影の色を変えたり、太さを変えたりして自分なりの好みのレイアウトにしてみてください。