はてなブログのモジュール(記事リスト)カスタマイズ

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

はてなブログ記事リストのカスタムをご紹介します。

関連記事・注目記事・最新記事を一気に同じ形式にカスタマイズできます。

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

カスタムしたサイドバー記事リスト

カスタムしたサイドバー記事リスト

写真をテーマにカスタムしました。

スマホで表示した時、狭い画面幅の中でサムネイルと文字が横並びになると文字が読みづらいので横並びにならないようにしています。

記事ごとの区切り線は消しました。

Photo by hokori / yu_dai

引用元

こちらのサイトを参考にして作成しました。

みやもとメモ

【はてなブログ】サイドバーの画像サイズを修正（CSS対応） - みやもとメモ (hatenablog.com)

Minimal Green

はてなブログで使えるサイドバーカスタマイズまとめ - Minimal Green (minimal-green.com)

サルワカ

デザイン設定

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

レスポンシブ：◯

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

記事リストのコード

↓これを【デザインCSS】に貼ります

.hatena-module-title{
position:relative;
padding-left:25px;

font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
font-size: 18px;

font-weight:bold;
letter-spacing:1.5pt;
color:#696969;
}
.hatena-module-title a{
color:#696969;
}
.hatena-module-title::before {

position: absolute;
content:"\f03c";
font-family: blogicon;
font-size: 1em;
left:0px;
top:2px;
color:#696969;
}

li.urllist-item {
border:none!important;
padding-top:0px;
padding-bottom:30px;
}
.urllist-image {
border:7px solid white;
box-shadow:5px 5px 10px 1px silver;
margin:0px 30px 15px 0px!important;
}
@media (max-width: 480px){.urllist-image {
width:60%;
margin-right:300px!important;
margin-left:5px!important;
}
}

CSS解説

↓サイドバータイトルについて

.hatena-module-title{
position:relative…相対位置を指定;
padding-left:25px…左にアイコンフォントのための空間を空ける;

font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif…字体;
font-size: 18px…文字の大きさ;

font-weight:bold…文字の太さ;
letter-spacing:1.5pt…文字と文字の間隔;
color:#696969…色;
}
.hatena-module-title a{
color:#696969記事リストのタイトル文字の色;
}↓サイドバータイトルのアイコンフォントについて
.hatena-module-title::before {

position: absolute絶対位置を指定;

left:0px左端に配置;
top:2px僅かに下にずらす;
content:"\f03c"…アイコンのコード;
font-family: blogicon…字体;
font-size: 1em…サイズ;
color:#696969…色;
}

li.urllist-item {
border:none…記事ごとの区切り線を無くす!important;
padding-top:0px…記事ごとの上の余白;
padding-bottom:30px…記事ごとの下の余白;
}↓記事サムネイルについて
.urllist-image {
border:7px…枠幅 solid…点線 white…枠の色;
box-shadow:5px右に影をつける 5px下に影をつける 10px影のぼかし幅 1px影の拡張 silver影の色;
margin:0px…上 30px…右 15px…下 0px…左!important;
}↓スマホ表示の場合の変更箇所
@media (max-width: 480px){.urllist-image {
width:60%…画面幅に対するサムネイルの横幅;
margin-right:300pxサムネ右の余白!important…優先して反映する;
margin-left:5pxサムネ左の余白!important…優先して反映する;
}
}