はてなブログカスタマイズ 人気テーマBrooklynの吹き出しを削除

このブログを開設した時に行ったカスタマイズを紹介いたします。

使用したテーマははてなブログテーマで一番人気がある「Brooklyn」ですが，見出しやサイドバーの吹き出しがあまり好きではなく，これを削除しました。

その時の対応を備忘録を兼ねて記事にしました。

「役に立つ！はてなブログのカスタマイズ20選」をまとめてみました。

WordPress侍

2020.11.21

役に立つ！はてなブログのカスタマイズ20選

https://wordpress-samurai.com/hatenablog_customize_20/

併設していた「はてなブログPro」を解約し、サイトを閉鎖いたしました。しかし、はてなブログのカスタマイズ記事を多数掲載していたので、そのまま無くすというのも勿体ないと思い、WordPressサイトではありますが、カスタマイズ記事だけをこちらのサイトに移設いた...

はてなブログをやるなら、制限が少ないはてなブログProがオススメ！

見出しの吹き出しを消したい

デフォルトでは各見出し(h2,h3,h4)に吹き出しがついていて，左に縦線が入っているデザインです。

これはこれで良いのですが，吹き出しはどうも馴染めなくて苦手です。

自分好みに見出しのCSSを変更したいのですが「Brooklyn」のデザインが重なってしまいます。

そこで、見出しのリセットを行う必要があります。

私はh2,h3,h4ともに変更したいので各々でリセットを行いました。

その後に自分好みにカスタマイズした見出しCSSを追加すれば問題ありません。

/* 見出しのリセット */
.entry-content h2,
.entry-content h2::before,
.entry-content h2::after {
 background: none;
 border: none;
 border-radius: 0;
}
/* 見出しのリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}

/* 見出しのリセット */
.entry-content h4,
.entry-content h4::before,
.entry-content h4::after {
background: none;
border: none;
border-radius: 0;
}

リセット後に各見出しのCSSを追加

.entry-content h2 {
 padding: 4px 10px;
 padding-bottom: .5em;
 color: #111;
 border-top: 2px solid #B01C1C;
 border-bottom: 2px solid #B01C1C;
}

.entry-content h3 {
 padding-bottom: .5em;
 border-top: 1px solid #B01C1C;
 border-bottom: 1px solid #B01C1C;
 background-color: #fce9e9;

}

.entry-content h4 {
 position: relative;
 color: #111;
 border-bottom: 4px solid #ccc;
 padding: 8px 10px;
}
.entry-content h4::before {
 position: absolute;
 top: 100%;
 left: 0;
 width: 20%;
 height: 4px;
 background-color: #B01C1C;
 z-index: 2;
 content: '';
}

と、こういった感じに変更しました。(画像に差し替えています。)

サイドバーの吹き出し削除

同じくサイドバーも吹き出しになっており、ここも吹き出しは不要なので削除します。

削除後、サイドバータイトルの文字・囲い・背景の色変更を行いました。

これは@Style_21_D_INFP ‏さんのサイトを参考に、自分のサイトのイメージカラー #B01C1C へ変更しました。

hatena-module-title {
 color: #111; /*サイドバーのタイトルの文字色変更１*/
 border: 1px solid #B01C1C; /*サイドバーのタイトル囲いの色変更１*/
}
.hatena-module-title:before{
 border-top-color: #B01C1C; /*サイドバーのタイトル囲いの色変更２*/
}
.hatena-module-title after{
 border-top-color: #fff; /*サイドバーのタイトル囲いの色変更３*/
}
.hatena-module-title a {
 color: #B01C1C;　 /*サイドバーのタイトル(リンク有)の文字色変更２*/
}

まとめてみます

Brooklynは非常にデザインが良いテーマで、さすがに人気があるテーマだとは思います。

しかしデフォルトで使用すると、見出し吹き出しがどうしても重なってしまい自分のイメージと違うものになります。

リセットのCSSを追加せずに見出しのカスタマイズが出来ればいいのですが、そこはお借りしている身なので文句は言えません。

リセットを行うCSSを追加すれば良いということです。

サイドバーもしかりで、削除して自分好みにカスタマイズすれば良いということですね。

※上記ように文節にマーカーがスゥーっと引けるようなカスタマイズは下記 ⇓

WordPress侍

2019.03.09

はてなブログに蛍光マーカー風ラインを引くようなアニメーションを実装

https://wordpress-samurai.com/marker_line_draw/

最近、投稿記事内の強調したい文章や文節に蛍光ペンでラインマーカーを使用しているサイトが特に目立ちます。パッと見た目のインパクトはありますし、何を強調しているのかわかりやすいですよね。ではもう少し強調して、今この文節のように、読む直前に蛍光マーカー...