はてなブログの記事一覧のレイアウトをスマホだけ変える

本ページにはプロモーションが含まれます。

はてなブログをカスタムするためのCSSをご紹介します。

使えそうであればご自由にコピペしていただき構いません。

今回は、「記事一覧」のカスタムをご紹介します。

カスタムした「記事一覧」

カスタムした「記事一覧」

Photo by hokori / yu_dai

写真が映えるようにサムネイルを3/2の比率にして写真風の白い枠線を付けてみました。

スマホ表示ではfloat:leftを使って概要文がサムネイルの下に来るようにしています。

引用元

なすみのメモ帳

はてなブログの「記事一覧」をカスタマイズ！（CSS解説付き）【Minimalism】 - なすみのメモ帳

MDN

float - CSS: カスケーディングスタイルシート | MDN

デザイン設定

デザインテーマ：Smooth(デフォルト)

レスポンシブ：◯

Smooth以外のテーマをお使いでも解説を見ながらコードの数値をいじれば使えると思います。

記事一覧のコード

【デザインCSS】に貼るコード

.page-archive .archive-entries .archive-entry {
padding:15px;

margin:0px;
width: 100%;
border:none;
border-bottom: 2px dotted silver;
background:none;
}
.page-archive .archive-entries .entry-title {
font-size: 0px;
}
.page-archive .entry-title a {
font-size: 18px;
font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
letter-spacing:1.5pt;
}
.page-archive .entry-thumb {
width: 300px;
height: 200px;
border:7px solid white;
box-shadow:5px 5px 10px 1px silver;
margin-right:30px;
margin-left:10px;
margin-bottom:5px;
}
.entry-description{
font-size:14px;
margin-top:15px;
}
@media (max-width: 480px){.entry-description{
display:float;
float:left;
}
}

CSS解説

↓記事一つの塊について

.page-archive .archive-entries .archive-entry {
padding:15px;…塊の内側の余白

margin:0px;…塊の外側の余白
width: 100%;画面に対して幅100%取る
border:none;デフォルトの枠線消す
border-bottom下に線を引く: 2px…線の太さ dotted…点線 silver…線の色;
background:none…背景色なし;
}
.page-archive .archive-entries .entry-title {
font-size: 0px;デフォルトの文字を消す
}↓タイトルについて
.page-archive .entry-title a {
font-size: 18px…文字サイズ;
font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif…字体;
letter-spacing:1.5pt…文字と文字の間隔;
}↓サムネイルについて
.page-archive .entry-thumb {
width: 300px;…幅
height: 200px;…高さ
border枠線を付ける:7px…線の太さ solid…実線 white…線の色;
box-shadow:5px…右に影を付ける 5px…下に影を付ける 10px…ぼかし具合 1px…影の拡張 silver…影の色;
margin:0px…上側 30px…右側 15px…下側 10px…左側;
}↓概要文について
.entry-description{
font-size:14px…文字サイズ;

margin-top:15px…概要文の上の余白;
}↓スマホ表示の場合、概要をサムネの下にする
@media (max-width: 480px){.entry-description{
display:float…自由に移動させる;
float:left…左端に配置 !important…優先;
}
}