ダンゴムシ情報

* 生物飼育、マクロ撮影、ブログカスタムなどの情報共有 *

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

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

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

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

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

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

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

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

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

カスタマイズしたはてなブログの記事リスト

スマホ表示 サイドバー

 

カスタマイズしたはてなブログの記事リスト

PC表示 サイドバー

 

カスタマイズしたはてなブログの記事リスト

PC表示 記事末尾
(記事末尾モジュールはProのみの機能です)

Photo by hokori / yu_dai

引用元

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

みやもとメモ

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

Minimal Green

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

サルワカ

【はてなブログ】関連記事のデザインカスタマイズ方法とサンプル19選 (saruwakakun.com)

 

デザイン設定

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

レスポンシブ:◯

  1. 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…優先して反映する;
}
}

  1. ・元から記述されているコードは消さないで下にペーストします。
  2. ・他に自分でコードを入力している場合も同様に下に追加でペーストします。
  3. ・通常、コードは下のコードが優先して反映されます。
  4. ・上手く反映されないコードがある場合は、「 ;  」の前に!importantと入力すると優先して反映されます。
  5. ・サムネイルの縦横比はCSSではなくサイドバーモジュールの編集画面で個々に設定しています。
  6. ・はてなブログはダウンロード不要で使えるアイコンフォントが125種あり、太字部分のコードを差し替えるだけでアイコンを変えられます。
  7. アイコンフォントのコードはこちらのサイトで調べられます。↓
  8. はてなブログで使えるアイコンフォント全125種 - フジブロっ! (fuji-blo.com)
  9. ・アイコンフォントを項目ごとに変えたい場合はこちらのサイトが参考になります。↓
  10. はてなブログのサイドバーをカスタマイズする方法【コピぺOK】 | Joujilog
  11. ・↓カラーコードはこのサイトで調べられます。
  12. WEB色見本 原色大辞典 - HTMLカラーコード

 

以上、ご参考になれば幸いです。

 

 

\CSSを勉強する/