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

最終更新日 2017年6月7日

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

現在サイトは閉鎖いたしましたので「はてなブログ」でのカスタマイズとなります。

使用したテーマははてなブログテーマで一番人気がある「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;
}

/* 見出しのリセット */

.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: '';
}

.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 へ変更しました。

現在 @Style_21_D_INFP ‏さんのサイトは閉鎖されているようです。

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;　 /*サイドバーのタイトル(リンク有)の文字色変更２*/
}