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

最終更新日2020年11月27日 by samurai

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

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

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

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

WordPress侍

役に立つ！はてなブログのカスタマイズ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侍

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

https://wordpress-samurai.com/marker_line_draw

最近、投稿記事内の強調したい文章や文節に蛍光ペンでラインマーカーを使用しているサイトが特に目立ちます。パッと見た目のインパクトはありますし、何を強調しているのかわかりやすいですよね。ではもう少し強調して、今この文節のように、読む直前に蛍光マーカーでラインを引いていけばより目立つのではないでしょうか？はてなブログのカスタマイズで蛍光マーカー風ラインを下線を引くように動かしていく方法をご紹介いたします。 「役に立つ！はてなブログのカスタマイズ20選」をまとめてみました。はてなブログをやるなら、制限が...