カラーひよこのブログ

週休5日のセミリタイア暮らし 🍵🐤

【 ブログ 】見出し・目次・関連記事のデザインをコピペでカスタマイズ 【 簡単 】

よく見に来てくれる読者さんならパッと見て分かると思うのですが、久しぶりにブログのデザインを少しいじってカスタマイズしました。主に微調整で、夜中にあーでもないこーでもないと格闘してしまいましたが、 まとめておけば簡単に再現可能ですので記録しておきます。

ブログの「見出し」部分と「目次」、記事下部の「関連記事」周りのデザインのカスタマイズです。

✅  「はてなブログ」でのカスタマイズです

✅  CSS を修正する際、復元できるようにバックアップを取っておいてください

✅   はてなブログのデザインテーマによっては再現できない例もあり

当ブログにインストールしているのは「Blank」というテーマ。

「見出し」部分のカスタマイズ

左がカスタマイズ前、右がカスタマイズ後。

はてなブログ・見出しのカスタマイズ・修正前
はてなブログ・見出しのカスタマイズ・修正後

ただフォントが大きいだけのシンプル過ぎる見出しが「見出しタイトル」っぽくなってめりはりが出ました。角丸の背景色(ザブトン)を付けただけですが。背景色は見出し文字を白抜きにしたかったので、緑系統から和名「泡萌黄」という色に。カラーコードは #8fc947。

色探しはこちらからお好みで。

コードはこちら。

h3 {
background: #8fc947; /*背景色*/
padding: 0.5em;/*文字周りの余白*/
color: white;/*文字を白に*/
border-radius: 8px;/*角の丸み*/
padding: 10px 10px 10px 20px; /* 枠内の余白(上右下左) */
}

はてなブログの管理画面サイドバーの「デザイン」→「カスタマイズ」とクリックして最下部にある「デザイン CSS」にコピペします(以下のカスタマイズでも同様)。

SEO 対策で大見出しを「h2」に設定している場合は頭の「h3」を「h2」に書き換えてください。背景色、角の丸みや余白の有無・微調整はお好みで。

「サルワカ」さんのこちらの記事を参照させていただきました(「背景色+角丸」です)。

 

「目次」のカスタマイズ

左がカスタマイズ前、右がカスタマイズ後。

はてなブログ・目次・カスタマイズ前
はてなブログ・目次・カスタマイズ後

目次っぽくなりました。こちらもシンプルに薄い色の背景色&角丸にしてリンクの下線を消しています。「もくじ」部分の背景色は見出し色と統一。ワンポイントで目次っぽいブログアイコンを入れました。

コードはこちら。

/*目次のデザイン変更*/
.table-of-contents {
position:relative;
margin-left: 0;
padding: 20px 10px 20px 70px; /* 枠内の余白(上右下左) */
font-size: 100%; /* 文字サイズ */
background:#fffacd; /* 背景 */
border-top:40px solid #8fc947; /* 「もくじ」周りの色 */
line-height: 200%; /* 行間 */
border-radius:8px;/* 数字が大きいほど丸くなる */
}
/*「この記事の目次」の周囲変更*/
.entry-content .table-of-contents::before {
font-family: 'blogicon';
content: "\f039 も く じ";
display: block;
font-size: 120%;
font-weight: bold;
position: absolute;
top: -35px;/*上からの位置調整*/
left: 35px; /*左からの位置調整*/
color: #fff !important;
}
/*リンクの色変更と下線を消す*/
.entry-content .table-of-contents li a{
color:#444; /* 目次リスト部分のテキスト色 */
text-decoration:none; /* リンクの下線をつけたくない場合 */
}

「papico's note」さんのこちらの記事を参照させていただきました。

文字の位置と余白の数値をちょこちょこ微調整してます。

「関連記事」のカスタマイズ

左がカスタマイズ前、右がカスタマイズ後。

はてなブログ・関連記事・カスタマイズ前
はてなブログ・関連記事・カスタマイズ後

これは投稿日付部分に背景色を付けただけですが、これだけで全然「関連記事」っぽくなった。ちょっとした違いだけど、なんとなくで試してみて良かった w

コードです。

/*関連記事の画像まわり余白調整*/

.urllist-with-thumbnails li .urllist-image {    margin: 0 10px 0 0;}/

*関連記事のタイトル*/

a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title {    text-decoration: none;    color: #525252;    font-weight: bold;}/

*関連記事のタイトルホバー*/

a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover {    color: silver;}/

*関連記事の説明*/

.urllist-entry-body.related-entries-entry-body {    color: #8f8f8f;    font-size: 13px;    margin-top: 3px;}/

*関連記事の日付*/

.hatena-urllist .urllist-date-link a {    display: inline-block;    padding: 4px 9px;    margin-bottom: 3px;    background: #8fc947;    color: #fff;    line-height: 1;    border-radius: 10px;    font-size: 12px;    letter-spacing: 1px;    font-style: normal;    text-decoration: none;}

こちらも「サルワカ」さんから。

これは背景色を変更した以外は丸コピだったかな。ありがとうございました。

まとめ 

ちょっとしたカスタマイズでかなり見やすいサイトになったと思います。「目次」は本当は要らないかなと考えていたのですが、やっぱり SEO やユーザビリティー的に必要なのかな〜、と。

中見出しと小見出しは滅多に付けないので、その辺のカスタマイズと、あとはよく見る「目次をたたむ」カスタマイズ等(これも要らないと思うが)検索するといろいろ出てきますので、お好みで 🐤

 

にほんブログ村 ライフスタイルブログ セミリタイア生活へにほんブログ村 ライフスタイルブログ ゆるい暮らしへにほんブログ村 地域生活(街) 東京ブログ 多摩地区情報へ

↓ 読者登録と Twitter その他 SNS のフォローはこちらから(^人^)