シニアdeアフィリ⑤（はてなブログの見出しとサイドバーのカスタマイズ）

こんにちは
見出しh3~h5のデザインを考える。
1. 「見出し」デザインを変更するときの注意点
  1. CSSをコピペする前にクラスの確認
  2. デザインCSSのコピペだけでうまくいかない場合
サイドバーを見栄えよく、オシャレに
1. CSSでサイドバーの見出しをカスタマイズ
  1. 補足情報
今回のまとめ

こんにちは

「はてなブログ」を始めて1っか月半、アクセスは二桁台を
ウロウロ、アフィリエイト収益は全くありません。

この時点で30記事ほど投稿しています。

世の中そんなに甘くないとわかっていても、寂しい
気持ち。google analyticsを眺めるたびにため息が出ます。

初めのうちは

「アクセスなど気にするな、とりあえず記事を書け！」

と言われますが、やはり気になるもの。

ただ長生きしている分、ブログのネタはまだまだ尽きないので
記事を書くこと自体はさほど苦になりません。このころは、
何も気にせずただ書くだけ状態でしたから、まだブログを
楽しんでました。

そんな状態でも、ブログの装飾には余念がありません。

今回は、「はてなブログ」の見出しとサイドバーについて
お話しします。

見出しh3~h5のデザインを考える。

そもそも「見出し」は、ブログを訪問してくれた方に読みやすいよう
記事の案内をするものですが、検索エンジンにも見つけてもらい
やすいように設定するものです。

検索エンジンに「見出し」として認識されるのは、h2~h3
だそうですので、「見出し」にはh2~h3を指定して使いましょう。
かく言う私も、始めは分からずデザインが気に入って「見出し」に
h4を使ってました。

ですから、できるだけ見やすいようにデザインし、見出し文も
キーワードを意識しながら決定する方がいいでしょう。

と言っても始めの内はデザインばかりに意識が行きがちですけど。

「はてなブログ」の記事本文では「見出し」としてh3~h5まで
使用できます。記事編集画面（見たままモード）の左上
「見出し」ボタンを押すと、

このように「見出し」の選択ができます。

大見出し⇒h3
中見出し⇒h4
小見出し⇒h5

にそれぞれ対応してます。

「はてなブログ」標準で、範囲を選択してそれぞれ指定してみると↓

このように、何とも味気ない太字だけの「見出し」になります。
これをもう少し見栄えよくしようと言う訳です。

CSSでコピペ

「見出し」のデザイン変更もやはりCSSをコピペします。
「ブログ　見出し　デザイン」で検索すれば沢山の見出しデザイン
サンプルが出てきます。お好きなデザインを見つけCSSをコピペ
して利用してください。

「はてなブログ」用「見出し」デザイン↓

【HTML・CSS】コピペで簡単！見出しデザイン記事まとめ | さかぽんブログ-MIYAZAKI LIFE

h1やh2といった見出しを装飾したいときに参考にしているサイト・記事を、”あのデザイン見出しどこにあったっけ？”という備忘録代わりに、精査しながらまとめています。基本、HTML・CSSをコピペで実装できる記事です。ノンデザイナーがWebデザインをすることになった際に、大変助かるありがたいサイトばかりです。 Web制作会...

こちらで探せば、きっとお好みのデザインが見つかると思います。

「見出し」デザインを変更するときの注意点

デザインの変更はCSSのコードを「デザイン」→「カスタマイズ」→
「デザインCSS」に張り付ければいいのですが、ここで注意点が
いくつかあります。

私もうまくいくまで何回もネットで調べまくり、設定しては
やり直しを繰り返しました。

CSSをコピペする前にクラスの確認

「見出し」デザインには下記↓のようなCSSをコピペするんですが、

.entry-content h3 {
    font-size: 140%;
    position: relative;
    padding: 0.2em 0.5em;
    background-color: #d2e7e4;
    box-shadow: 0px 0px 0px 5px #d2e7e4;
    border-top: 1px dashed #fff;
    border-bottom: 1px dashed #fff;
}

この先頭の「.entry-content」の部分をクラス名と言います。
「はてなブログ」は「見出し」のクラス名が「.entry-content」なので
上記のデザインCSSはそのままコピペで使えますが、

見出しデザインサンプルの中には、このクラス名が無かったり
別のクラス名を使用している場合があります。
例

.h3
.article h3
.post h3

のようになっていると、そのままコピペしてもうまくいきません。
使いたい見出しデザインがあればCSSコードのクラス名を確認して、
「.entry-content」と付け足すか、修正してください。

デザインCSSのコピペだけでうまくいかない場合

見出しデザインのCSSコードのコピペだけでは、既存の設定が
残っていてデザインが被ったりしてうまく変更できない場合が
あります。

昭平令

この原因が理解できなくて何度もやり直ししました。

師匠

バカチンがぁ。

そんな時は、テーマに既に指定されているコードを
一旦リセットしてあげるとうまくいくことがあります。

リセットするCSSコードは、

.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
   content: none;
   background: none;
   background-color: none;
   border: none;
   border-radius: 0;
}

順番としては、このリセット用CSSをあらかじめコピペしておいて
その下に、後から見出しデザインのCSSを追加する方が確実だと
思います。

補足ですが、リセット用CSSでもう一つ、

.entry-content h3{
padding: 0;
background: none;
}

というのを付けたらいいという情報もありましたが、
私の場合うまく行きませんでした。何が原因かはおじさんには
分かりませんが。

また「はてなブログ」では、見出しh4を変更するとき
リセット無しでもうまく行きました。はてなの見出しが
簡素すぎるからでしょうか？

たまたまかもしれませんが、念のためリセットしておく方が
無難かな？と思いますよ。

サイドバーを見栄えよく、オシャレに

初めにお断りしておきますが、はてなブログのテーマを
「Silence」にしてからは、サイドバーは変更してません。
サイドバーのデザインが気に入って「Silence」を選んだので。

それ以前は、あれこれいじってました。でもなかなか
「これは。」というサイドバーには出会えませんでした。

その時していた変更作業をご紹介します。

残念はてな標準のサイドバー設定では
「デザイン」⇒「カスタマイズ」⇒「サイドバー」で編集はできますが、
内容の変更くらいしかできません。

CSSでサイドバーの見出しをカスタマイズ

サイドバーの見出し変更の前に既定のCSSをリセットして
おく方が安心です。リセット用CSSは、↓

.hatena-module-title,
.hatena-module-title::before,
.hatena-module-title::after {
  background: none;
  border: none;
}

こちらを「デザインCSS」にあらかじめセットしておきましょう。
はてなのサイドバー見出し部分のクラス名は、「.hatena-module-title」
です。（他のテンプレートを使う際にはこのクラス名を変更してください。）

サイドバーの見出しもやはりデザインCSSにコードをコピペします。
例、

.hatena-module-title{
  position: relative;
  color: white;
  background: #81d0cb;
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 1.8em;
  margin: 0px -10px 20px -10px;
}

（注：上記のリセット用CSSとサイドバーCSSは「MY FIRST CLASS TRIP」
さんのページから引用させていただきました。）

文字の色「color」や背景の色「background」などは好みで
変更してください。

こちら↓の「Minimal Green」さんのページが分かりやすくオシャレなデザイン
を提供してくれます。

ところで、さきの見出しデザインのCSSですが、サイドバーの
見出しデザインにも流用できるみたいです。クラス名の変更と
サイズの調整が必要ですけど。