Naked!にはてなブログテーマを変更してからやったカスタマイズまとめ

スポンサーリンク

はてなブログテーマを「Naked」に変えてみました。

「Naked」は、現在大学5年生のゆきひー (id:ftmaccho) さん作の超オシャレ・レスポンシブテーマ。

今回は、ガッツリカスタマイズというよりかは「テーマをNakedに変えて、ちょっと自分好み修正したよ」という感じ。
CSSはこれまでのものを流用して少し手を加えたぐらいです。カスタマイズしやすいのもこのテーマの魅力の一つ。

それでも初心者の僕にとっては全てが大変だった……。
一時的にあらゆるリンクに飛べなくなるし、スマホで見るとヘッダーがガタガタで見れたものじゃないし、変な隙間ができちゃったりもするし。

とりあえずなんとか形にはなったので今後のためにまとめを。
あ、ちなみに僕の場合カスタマイズ期間はいつもアクセス数が減ります。たぶん呪われてます。

大したことはやってないので、目次から気になるところだけ覗いていってくださいー。

これまでにやったブログカスタマイズは、『はてなブログを始めて4ヶ月を過ぎたので開設当初からのまとめ』とか『【カスタマイズ記事】はてなブログのデザインテーマをレスポンシブ対応の「Brooklyn」に変えてみた』からどうぞ。

超オシャレ。はてなブログテーマ「Naked」について

何よりシンプル。そして、カスタマイズもしやすいテーマ。
レスポンシブデザインに対応しているところも魅力ですね。

インストールは『Naked – テーマ ストア』からどうぞ。僕の二の舞にならないように、CSSの内容は必ずバックアップをとっておきましょう。

関連:オシャレ・レスポンシブ・カスタム可能なはてなブログテーマ「Naked」リリース!

最近やったブログカスタマイズ6つ

1.サイドバーモジュールをタブメニューに変更

f:id:afrokanchan:20160829081109p:plain

今まで、サイドバーモジュールは「人気記事」「新着記事」など別々に表示していました。
が、その分スペースも必要となり、少し見にくくもあったので、タブメニューで切り替えることができるようにカスタマイズ。

f:id:afrokanchan:20160829081337p:plain

こっちの方が断然見やすいし、使いやすそうです。
カスタマイズ方法はこちらも同じくゆきひーさんの記事から。ブログ開設からめちゃくちゃお世話になってます。

www.yukihy.com

2.サイドバーの順番を変更

かなり細かい場所ですが、完璧主義の僕はこんなところも気になる。

f:id:afrokanchan:20160829082649j:plain

まず、検索バーを一番上に。
これは、自分でも使いやすくするためです。あと、『自分が好きなブログがそうだった』。
過去記事を修正するときとか、「確か以前ブログで書いてたような?」というときに検索検索ぅ!最近になってようやく、この検索バーが便利なことに気が付きました。

そして、カテゴリーは一番下に。
ヘッダーにグローバルメニューがあるので、カテゴリーはそれほど必要性は高くないのかな、と。

3.サイドバーにおすすめ本とFacebookページ追加

f:id:afrokanchan:20160829083307p:plain

おすすめ本のコーナー。これは収益目的というよりかは「自己表現の場」として考えてます。
試験的に導入。それにしても、一番上に乙一さんのGOTHってどうなんだろう。

リンク方法は以下の記事を参考にさせていただきました。

関連:はてなブログのサイドバーにオススメ記事を表示して直帰率改善。

f:id:afrokanchan:20160829083625p:plain

あとは、サイドバー最下にFacebookページへのバナーリンクを設置。
最近、わずかながらFacebookページ活用の兆しが現れ始めたのでちょっとつついてみたいです。

4.Facebookシェアボタンのコード修正

これはつい先日知ったばかり。全然Facebookのシェア数が増えないままなので変だとは思っていたんですよね。いつも記事を書いた後にはFacebooに自分でシェアしてますから。

関連:ぴえええええ!Facebookのシェアボタンのコードを修正して下さい(はてなブログ向け)!!

関連:【修正のお願い】Facebookシェアボタンのシェア数がカウントされない問題への対処法

Facebookのシェアボタンのぐるぐるが長いのも仕様変更の影響だそうで。気になりますよね、あれ。

5.自動挿入アドセンスコードを改良版に修正

これまで使わせていただいていたアドセンスコードに問題が発見された模様。

関連:はてなブログで「文中にアドセンス広告を入れる」を自動化する方法

詳しいことは『記事中のアドセンス挿入でアクティブビュー視認可能率が低下する? – お金をふやそう』や『「記事中広告は単価が下がる」という伝説の真実 – とまじぃさんち』にまとめてあるようです。とても分かりやすい。

つまり、記事の上下を移動するスクリプトを使うと、アクティブビュー視認可能率が下がったり広告単価が下がってしまう、ということらしいです。
広告が2重、もしくは多重にカウントされている、また、”みんなが見ない場所に貼られた広告だと判断されて”いることが原因なのだとか。

で、早速改良版のスクリプトを書いてくださった神様がいらっしゃいます。今までの自動挿入スクリプトでも大変お世話になっていた方。

関連:【改良版】コピペで簡単!はてなブログで「文中にアドセンス広告を入れる」を自動化する方法

仕事が早すぎる。

このブログにも使わせていただきます。超感謝。

6.記事下におすすめ記事を突っ込む

f:id:afrokanchan:20160830234320p:plain

こちらもお試しで。Amazon商品がよく売れている記事をフィーリングで選び、記事下に「おすすめ記事」として囲ってみました。
効果があるかはよく分からない。クリック率もよく分からない。これからじっくりと様子を見ていきたいと思います。

CSSは『CSSで作るおしゃれなボックス(囲み枠)のデザインサンプル13パターン』を参考にさせていただきました。

とりあえず記事は3つぐらいでいいかな。

まとめ

とまぁ、ざっくりとまとめてみましたが、あんまり「Naked」関係なかったかな……。

関連記事

スポンサーリンク