こんにちは
「はてなブログ」を始めて1っか月半、アクセスは二桁台を
ウロウロ、アフィリエイト収益は全くありません。
この時点で30記事ほど投稿しています。
世の中そんなに甘くないとわかっていても、寂しい
気持ち。google analyticsを眺めるたびにため息が出ます。
初めのうちは
「アクセスなど気にするな、とりあえず記事を書け!」
と言われますが、やはり気になるもの。
ただ長生きしている分、ブログのネタはまだまだ尽きないので
記事を書くこと自体はさほど苦になりません。このころは、
何も気にせずただ書くだけ状態でしたから、まだブログを
楽しんでました。
そんな状態でも、ブログの装飾には余念がありません。
今回は、「はてなブログ」の見出しとサイドバーについて
お話しします。
見出しh3~h5のデザインを考える。
そもそも「見出し」は、ブログを訪問してくれた方に読みやすいよう
記事の案内をするものですが、検索エンジンにも見つけてもらい
やすいように設定するものです。
検索エンジンに「見出し」として認識されるのは、h2~h3
だそうですので、「見出し」にはh2~h3を指定して使いましょう。
かく言う私も、始めは分からずデザインが気に入って「見出し」に
h4を使ってました。
ですから、できるだけ見やすいようにデザインし、見出し文も
キーワードを意識しながら決定する方がいいでしょう。
と言っても始めの内はデザインばかりに意識が行きがちですけど。
「はてなブログ」の記事本文では「見出し」としてh3~h5まで
使用できます。記事編集画面(見たままモード)の左上
「見出し」ボタンを押すと、
このように「見出し」の選択ができます。
中見出し⇒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を試しながらプレビューできる便利なものはないか?
と探していたら、ありました。「Code pen」↓というウェブプログラム
(使用するにはsign inして、左サイドバーの「Start Coding」をクリック、
もちろん無料です。)
いろんなデザインのCSSをいきなりブログに設定する前に
これを使ってプレビューしながら試してみると安全です。
結構面白くてハマるかも。

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

バカチンが。
CSSをいじり始めると、覚えることもたくさん増えてきます。
有料テンプレートなどでデザインはサクッと済ませれば
楽なのですが、これもいつかは役立つ日が来る、自信の
スキルアップのためと考えてトライしていきましょう。
今回のまとめ
やり始めたらキリがないブログのデザイン編集。
ほどほどで妥協しないと終わりが見えません。

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

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

し、師匠。ありがとう。
凝りすぎて自己満足だけで終わってしまわないように、
大切なのは、あくまでブログを訪れてくれる人に
気持ちよく閲覧してもらえることです。
そのことを念頭に置きながら。デザインしてください。そうすれば
必然的にSEOにも適したブログになるのではないかと思います。
あいや~、「はてなブログ」のメリット、デメリットについて
書いてない。それはまた次回ということで。
それでは。
コメント