あさくまろん

はてなブログの「見出し」をカスタマイズする簡単な方法

f:id:asakumamasaru:20170718231531p:plain

ブログ記事は見出しが命。

メガダンサーのアサクママサルです。

見出しのカスタマイズしてますか?

はてなブログテーマ「ブルックリン」の見出しは吹き出しですが、ちょっとボクのイメージには合わない。

もっと、シンプルな方がユーザビリティ的にいいよね。

とはいいつつ、ブルックリンのカスタマイズ性の高さには、感心させられっぱなし。ありがたやありがたや。


はてなブログの「見出し」をカスタマイズする

「つばさ (id:tsubasa123)」先生の記事に飛んで、「はてなブログテーマの見出しのCSSを修正するためのCSS」をコピペします。

そして、あなたの気に入った見出しデザインのCSSコードをコピぺしてね。

貼り付け場所は、デザイン→カスタマイズ→デザインCSSだよ。

はい、終わり。

簡単すぎるので言うこともないかなあ。

あえて言及するなら、「はてなブログテーマの見出しのCSSを修正するためのCSS」のマージンとパディングは、ゼロ指定しなくても、問題なかったってことですね。

この辺は、CSSをご自身でいじって調整してみてください。


はてなブログの「サイドバー見出し」もついでにカスタマイズする

はてなブログテーマの見出しのCSSを修正するためのCSS」を応用してボクが作ったコードがこちら。

/*サイドバーのカスタマイズ吹き出し削除*/
.hatena-module-title,
.hatena-module-title::before,
.hatena-module-title::after {
border: none;
border-radius: 0;
} 

CSSコードの貼り付け場所は、デザイン→カスタマイズ→デザインCSSだよ。

あとは、「つばさ (id:tsubasa123)」先生の記事に飛んで、あなたの気に入った見出しデザインのCSSコードをコピぺしてね。

ただし、見出しデザインCSSのエントリーコンテントを、はてなモジュールタイトルに変えることを忘れずに。

/*サイドバーのカスタマイズ*/
.hatena-module-title {
    text-align:
    padding: 
    color: 
    border-bottom: 
    border-color: 
}

上記コードのように「CSS」内のエントリーコンテントをはてなモジュールタイトルに変えるってことですよ。

ボクは、はてなブログテーマ「ブルックリン」でこのコードを実践してるので、ソノ点はご理解ください。


まとめ

見出しがスッキリすると、記事全体の見栄えも良くなった気がする。

やっぱり、見出しはブログ記事の命。


トップへ戻る