はてなブログ「Brooklyn」導入とhtml/CSSカスタマイズ

/* ===============目次カスタマイズ============== */
.table-of-contents {
border: 1.5px solid #191970;
padding: 20px 10px 20px 40px;
list-style-type: decimal;
border-radius: 5px;
font-size: 17px;
}
.table-of-contents:before{
content: "目次";
font-size: 20px;
}
.table-of-contents{
background: #efefef;/*背景色はここから変更*/
}

原型を覚えてないので、使用される際はバックアップ&自己責任でお願いします。

見出しh3

「Brooklyn」には初期状態から見出しの装飾がされてあります。
そのため、カスタマイズする場合は見出しの装飾をリセットしてから新たに装飾する必要があります。

例

/* 見出しのリセット */
.entry-content h2,
.entry-content h2::before,
.entry-content h2::after {
background: none;
border: none;
border-radius: 0;
}
.entry-content h2 {
background: #1e90ff; /*背景色*/
padding: 0.5em;/*文字周りの余白*/
color: white;/*文字を白に*/
border-radius: 0.5em;/*角の丸み*/
}

見出しは青をベースにだんだん色が薄くなり、ラインも少なくなるように設定しました。

見出しh4

ちなみに八百屋は見出しボタンは使わずに(h2が無いから)手打ちしています。

本文

記事タイトルは25px
本文の文字は16px
本文の文字色：#333333
など軽く変更し、少しでも読みやすくなるようにしました。

上に戻る

www.travelbanana.net

確かにあると便利な上へ戻るボタン。

Feedlyボタンの追加

marke-life.hatenablog.com
使っている人向けです。
私は使っていません。

カエレバ

商品紹介ブログパーツカエレバ

mbdb.jp

一括でAmazon・楽天・Yahoo!ショッピングを表示できるツール。
導入している方も多いですのでこちらもカスタマイズ記事が多いです。
商品紹介が多い人は使ってみては？

吹き出しで会話

shiromatakumi.hatenablog.com

使うと意外と楽しいです。
一度設定してしまえば、使用も楽ちんです。

サイドバー

サイドバーは色を少し変えた程度です。
ちょっとカスタマイズ使用かなと思っていますが・・・。

カスタマイズまとめ

カスタマイズって楽しいから時間の過ぎるのが早いんですよね・・。
八百屋としては、ちょこちょこ変えるのではなく、変えたい所を決めて「こうしたい！」という意識をもってカスタマイズするのがおすすめです。
カスタマイズしながらレイアウトを決めていると、ああでもない、こうでもないと時間がもったいないです。
また飽きてそのうち変えたくなることもありますので、のめりこみすぎずほどほどにカスタマイズしましょう！

※カスタマイズしたら追記するかもです。

八百屋でした。