Recommended!2020年オススメする有料WordPressテーマ7選 Read More
はてなブログカスタマイズ

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

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

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

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

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

はてなブログをやるなら、制限が少ないはてなブログ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 へ変更しました。

現在 @Style_21_D_INFP ‏さんのサイトは閉鎖されているようです。
hatena-module-title {
 color: #111; /*サイドバーのタイトルの文字色変更1*/
 border: 1px solid #B01C1C; /*サイドバーのタイトル囲いの色変更1*/
}
.hatena-module-title:before{
 border-top-color: #B01C1C; /*サイドバーのタイトル囲いの色変更2*/
}
.hatena-module-title after{
 border-top-color: #fff; /*サイドバーのタイトル囲いの色変更3*/
}
.hatena-module-title a {
 color: #B01C1C;  /*サイドバーのタイトル(リンク有)の文字色変更2*/
}

まとめてみます

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

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

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

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

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

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

はてなブログを運営していましたが、訳あって閉鎖しました。

そちらのサイトから「はてなブログのカスタマイズ」だけをピックアップし、コチラに移行しました。

フォントの変更や文字色の変更など、WordPressに合わせてモデファイしておりますが、文章的におかしいところもあります。
これは、なるべく「はてなブログユーザー」が理解しやすくするため
です。

2020年11月

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

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

併設していた「はてなブログPro」を解約し、サイトを閉鎖いたしました。…
はてなブログカスタマイズ

はてなブログ グローバルメニューの文字をホバーしたら他の文字が半透明表示になるCSS

はてなブログはWordPressみたいにカスタマイズできるというもので…
はてなブログカスタマイズ

はてなブログのカスタマイズ!シンタックスハイライトを挿入する

はてなブログのカスタマイズを紹介する際、CSSやHTMLのシンタックス…
WordPressテーマをテストしているサブサイトはこちらからどうぞ ↓

テストサイトに各WordPressテーマを実際にインストールしてみました。
各テーマ毎に少しカスタマイズしたところもありますが、基本的に同じ画像、同じ記事で構成していますので、参考になるかと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です