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

はてなブログ編
スポンサーリンク

こんにちは

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

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

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

初めのうちは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSSでコピペ

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

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

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

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

デザインの変更は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ですが、サイドバーの
見出しデザインにも流用できるみたいです。クラス名の変更と
サイズの調整が必要ですけど。

補足情報

CSSを試しながらプレビューできる便利なものはないか?
と探していたら、ありました。「Code pen」↓というウェブプログラム

(使用するにはsign inして、左サイドバーの「Start Coding」をクリック、
もちろん無料です。)

いろんなデザインのCSSをいきなりブログに設定する前に
これを使ってプレビューしながら試してみると安全です。
結構面白くてハマるかも。

昭平令
昭平令

私も時間を忘れて「CodePen」で遊んでしまいました。

師匠
師匠

バカチンが。

CSSをいじり始めると、覚えることもたくさん増えてきます。
有料テンプレートなどでデザインはサクッと済ませれば
楽なのですが、これもいつかは役立つ日が来る、自信の
スキルアップのためと考えてトライしていきましょう。

今回のまとめ

やり始めたらキリがないブログのデザイン編集。
ほどほどで妥協しないと終わりが見えません。

冷静な嫁
冷静な嫁

あんたもデザインに時間とられすぎだ。

師匠
師匠

仕方がない、始めは分からないことだらけだ。許してやれ。

昭平令
昭平令

し、師匠。ありがとう。

凝りすぎて自己満足だけで終わってしまわないように、
大切なのは、あくまでブログを訪れてくれる人に
気持ちよく閲覧してもらえることです。

そのことを念頭に置きながら。デザインしてください。そうすれば
必然的にSEOにも適したブログになるのではないかと思います。

あいや~、「はてなブログ」のメリット、デメリットについて
書いてない。それはまた次回ということで。

それでは。

コメント

タイトルとURLをコピーしました