読者です 読者をやめる 読者になる 読者になる

おきがるみがる

お気軽&身軽に生活・仕事・趣味を楽しむ雑記ブログです。

はてなブログテーマをInnocentに変更してSEO的な設定を見直した

今日のアイキャッチボツ写真は木屋町通のスナップ写真です。

平凡もいいところな写真でございますね。ストリートを撮る時は通行人が入ってなければ化けませんね〜。


さて、これまではてなブログのテーマはSimple Grayを設定していました。

Simple Gray - テーマ ストア

見出しのデザインが好きだったから使っておりましたが、全体的なデザインがちょっと惜しいと思ってたんですよね。

そこで気分を一新してInnocentという別のテーマに変更しました。

Innocent - テーマ ストア

人気のテーマで個性を出せているかと言われれば微妙ですが、シンプルで良いデザインですよね!

そこで今回は、以前から設定していたものもありますが、SEO的な設定を見直しましたのでここに書き留めておきます。

Innocentで用意されている設定

ナビゲーションバー

moonnote.hateblo.jp

ナビゲーションバー(あるいはグローバルメニューとも)とは、ブログタイトル下に設置するカテゴリーなどのメニューです。

カテゴリーはすなわち、そのブログが取り上げている話題を要約したものです。それをブログ上部に明記しておくことで検索エンジンの評価に繋がりやすいという理屈です。

はてなブログ公式では用意されておらず、各自で設定する必要があります。でもInnocentであればコピペするだけでかっこいいナビゲーションバーを表示することができます!

おすすめ記事リスト

moonnote.hateblo.jp

Innocentの公式サイトでは「おすすめ記事リスト」と表記されていますが、ブログの上部に人気記事を表示するものです。

よくまとめブログなんかで見るようなデザインですね。ブログの1番目立つ部分に売れ筋の記事を載せることで直帰率を下げる効果が期待できます。

Innocentではコピペのみで表示させることができ、さらにCSSに手を加えれば見せ方も変更できます。僕は以下のコードをCSSに追加して上下のパディングを2pxだけ設定しました。

#recommend-entries {
    padding: 2px;
}

そのままだと空白部分が大きくてスペースを大幅に取りますし、かと言ってナビゲーションバーにぴったりくっつけちゃうとメリハリが弱いと感じたので。

地味なこだわりですがねw

記事下に関連記事を設定する

記事下に関連記事を表示することで、記事を読み終わった人に別の記事へ誘導することができます。

はてなブログでは外部サービスではありますが、Zenbackを使って記事下に関連記事を掲載できるようにしています。

zenback.jp

ただ、Zenbackはシェアボタンが重複したり、余計な情報も表示されちゃいます。そして読み込みが結構遅い!

www.bokukoko.info

そこで、こちらの記事で紹介されている方法を採用しました。

はてなブログにも関連記事ウィジェットがデフォルトで用意されているのですが、サイドバーにしか表示できないんですよ。

それを記事下に置換するというのをJavaScriptでやってしまおうというテクニックです。

実は似たような手法をこれまでも使っていましたが、上記の記事で紹介されている方法の方がより簡単で綺麗に見えますね。これもコピペ一発で完了です。

記事直下にアドセンス広告を貼る

これはSEO的な話ではないのですがついでに紹介しましょう。

僕はこれまで記事下のアドセンス広告は、レクタングル(大)を縦に2個並べていました。横に2個よりもこちらの方が収益率が高いというのをどこかで読んだので。

ただ、縦に並べるとそのさらに下にあるコンテンツに目が届かなくなるんですよね。せっかく関連記事を表示しているのに大きくスクロールしないと見えません。

そこで横1列にしようと改行コードを取り除くも縦に並んでしまいます。「あれ? テーブルタグ使わなダメなのかな?」と思いググったところ……

kumoaozora.hatenablog.com

こんな記事を発見。やっぱりテーブルタグ使わないといけないのか〜と納得するのと同時に、記事直下、すなわちSNSシェアボタンの上に表示する方法が書かれていました。

これなら広告の位置も効率的でしょうし、記事を読み終わったらすぐに関連記事が出てきてくれて良いですね!

レクタングル(大)を並べたかったところですが、横幅が足りませんでしたのでレクタングル(横幅300px)を新しく作って貼りました。

CSSをいじって記事の横幅を大きくすればいいのでしょうが、全体のデザインを考えて設定しないといけないのでここは様子見。

広告位置をサイドバー上部に変更

ついでに、これまで記事タイトル下にレスポンシブ広告を貼っていましたが明らかに邪魔でしたね。

あまり記事の中にベタベタと広告を貼るのはよくありませんな。そういうわけで外して代わりにサイドバー上部にレクタングル(大)を貼りました。

サイドバー上部に貼るのは一時期のスタンダードでしたが最近はあまり意味がないというのを目にしたことがあります。

でも、サイドバー上部に広告があると何だか安定感が生まれますね。よくわかりませんがw

サイドバー固定……していたけど解除しました

www.no-overtime-day.com

ページを下にスクロールしても、サイドバーの1番下にあるウィジェットが固定されるようにしておりました。固定というよりもスクロールについて来ると言った方がいいですかね?

これでいくらスクロールしても常に表示することができます。ここにアドセンス広告を貼るとNG行為になっちゃうので、僕は人気記事を貼ってアピールしていました。

ただ、ウィンドウ幅を小さくしてレスポンシブ効果でサイドバーが見えなくなると、その固定していたサイドバーのウィジェットが記事に被ってまで表示されちゃうみたいです。

これについさっき気付いて外すことにしました。うーむ、うまくやる方法があるんでしょうがね。レスポンシブデザインでサイドバー非表示になったら固定を外すという条件を付けるとか。

おわりに

こんなところでしょうか。今回はテーマを変更したというのが主な話題だったのですが、以前からブログカスタマイズについて書き留めておきたかったのでまとめちゃいました。

テーマが変わると気分が一新しますね! あまりコロコロ変えるわけにはいきませんが、いろいろ気付くこともあるので有益です。

Innocentが人気の理由は何となくわかりますね。とても見やすくかっこいいデザインです!

あとは見出しのデザインをちょっと自分好みにしたいです。見出し2〜4の区別が付きにくいので装飾を加えたいと思います。

まぁ、それはまた日を改めてゆっくりすることにしましょう。