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

心に火を、指先にペンを

愛と平和のラビリンス

【厳選版】はてなブログのカスタマイズに超参考になる記事まとめ

ブログ ブログ-はてなブログカスタマイズ

ブログのアクセスアップ、マネタイズについては「ブログで稼ぐ方法 | 30万PV・10万円稼ぐまでにやってきたアクセスアップとマネタイズの方法を全部書く」にまとめてますのでぜひご覧ください。

こんにちわ、はてなブログのカスタマイズを夢見て手が付けられていないコトリです。

 

今年に入ってからはブログ用にtwitterを開始しはてなブログだけじゃないブロガーやアフィリエイターをフォローしていろんなブログを見てきました。はてな以外だとWordpressを使っている方を多くフォローしているためブログカスタマイズに興味をもつようになったんです。

 

はてなブログのカスタマイズ事情

そこでここ数日はてなブログのカスタマイズについていろんな記事を見まくったんですが完全に需要に供給が追い付いていないなと感じました。元々カスタマイズ前提のWordpressと違ってはてなはカスタマイズしなくても十分使えますからね。またWordpressにはカスタマイズの巨匠みたいなブロガーがたくさんいるので皆さんその人の作ったCSSを使っているようでした。

 

ただはてなにも結構ブログを魔改造している人もいます。いくつ記事上がっていたのでここ最近はひたすらブクマしていました。これから自分のブログをカスタマイズしてビフォーアフターで記事を書こうかなと思ったんですがズブの素人の僕が全部試すのは遙か先になってしまいそうなので、先に記事を紹介して出来る人はどんどん先にいってもらおうと。そんな献身的な気分になったのです。テレサと呼んでください。ここでまとめきれなかった記事は僕のブックマークかtwitterを見ていただけると拾えるかと。

 

ブログ記事は随時追加することになると思います。めざせWordpress!

 

ブログをカスタマイズする前に考えておきたいこと

カスタマイズに夢中になって記事更新を怠るべからず

私です。以前SEOを勉強している時にも完全に記事更新を怠りました。今回もその気配プンプンです。ブログの主役はあくまで記事。カスタマイズはサポートでしかない。特に僕みたいに記事数少ない奴がカスタマイズに夢中になっていると「見た目だけで全く中身ねーな」とがっかりブログまっしぐらです。猫まっしぐら。

 

時代はPCじゃねー。モバイルだ

カスタマイズって無数にやれることあるので、闇雲に手を付けるのではなく「インパクト」の大きいとこから手を付けるべきなんですよね。カスタマイズは表現の幅が大きいPCの方がTIPS含めやれること多いんですけどアクセス数はSP>PCがだと思うんです。だったら手を付けるべきはSPでしょ。今でしょ。

 

はてなブログ モバイルを魔改造しているブログ

以下スマホで見てください。僕がはてなブログを読み漁って「なんじゃこりゃ」ってなったブログたちです。あ、もちろんPCもカスタマイズされてますよ。

太陽がまぶしかったから

bulldra.hatenablog.com

PCも半端無く魔改造されているんですがそれは。トップに入ると書く記事のタイトルが赤地に白文字でかなり見やすいです。どうやってるんだこれは。ソーシャルボタンもカッコイイです。

 

iPhoneのこととかいろいろ

www.kototoka.com

アドセンス広告がフッターにオーバーレイしてます。どうやってんだ、これ?あとは記事の見出しにロゴをつかっていたりソーシャルボタンをカスタマイズしてますね。スクロールすると右下に「▲PAGE TOP」っていうボタンが出てきます。これやりたい笑。

 

Literally

tsukuruiroiro.hatenablog.com

当然PCもカスタマイズされているようですがスマホはヤバイです。すっごいオシャンティー。スマホという点ではWordpress以上にいけてると思います。トップ面もそうなんですけど記事下のPOPULAR ENTRIESなんて生唾ものですよ。

 

モバイルカスタマイズのおすすめ記事 4選

トップ面、見出しをお洒落にするカスタマイズ

tsukuruiroiro.hatenablog.com

白状しますけど丸パクリしました。この中に書かれている記事中の見出しとトップページの記事一覧のカスタマイズです。僕の下賎な記事がオシャンティーに!ただ、フォントとか色とかもっと弄りたいのですがまだ手を付けられていません。超オススメカスタマイズです。できれば「POPULAR ENTRIES」も知りたい(厚かましい)

 

bulldra.hatenablog.com

もうプロい。外部のCSSを使ってカスタマイズしてるみたいです。記事タイトルがおしゃれだなーと思ってたらPCの表示に準拠させているようです。ふむー、すごい。

 

余計な導線を削除するカスタマイズ

www.usamofu.com

はてなブログの注目のブログSEOの謎を暴いたうさもふさん。この記事はなるほどと思いましたね。記事下にある「はてな」の開発、週刊、トップへの導線を削除するカスタマイズです。ネット広告の世界でも余計な導線を外すのはランディングページの鉄則ですからね。外に出さずにまず自分のブログ内を回遊してもらわないと。

 

グローバルメニューを取り付けるカスタマイズ

yukihy.hatenadiary.com

ほぼ同期のYukihyさんの記事。このスマホのグローバルメニューいいなー。このブログで先にカスタマイズしてくれているのでよく参考にしています。

 

Google Adsenseのカスタマイズ

adsenseによる「スマートフォン横スクロール問題」に対応する記事

PROに契約してadsense貼り付けてる人結構いると思うんですけど、あなたのブログガクガクですからー。私もです。最近気づきました。この問題にはてなブロガーさんの叡智で立ち向かってる記事を見つけました。

akiueo.hatenablog.com

www.kototoka.com

moneyreport.hatenablog.com

アドセンスの通常サイズの横幅が320になっているせいで起こっている問題ですね。ええ、僕もガクガクです。そもそもレスポンシブルフォーマット使ってなかったわ俺。SEOはモバイルフレンドリー必須ですからね。これ最優先で対応しないといけないと思って対応していないやつです。

 

Adsenseの掲載位置を見出し上に設置するカスタマイズ

アドセンスは実はやりたいカスタマイズが見つかっておらず模索中です。誰か最初の見出しの上にアドセンスを設置するカスタマイズについてまとめてください(他力本願)

以前はこのようにやりたくてもできていなかったのですがこの記事に書いてありました。

appism.hateblo.jp

この方法であっさりリード文後の見出しの直前にアドセンスを設定できるようになりました。

uxlayman.hatenablog.com

この記事が出典とのこと。参考になるなる。

 

見出しや関連記事をもっとおしゃれにする記事

僕は今は上で紹介したLiterallyさんの記事のを使っているんですが大見出しを少し弄りたいなーと思って見つけた記事ですね。

 

見出しの色とサイズを変更

blog.rokuzeudon.com

色とサイズ変更。シンプルでいいですね、これも。コピペで使えるコードも書いてあって嬉しい限りです。

 

大見出しにアイコンを付けるカスタマイズ

banguard.hatenablog.com

この大見出しにリボンつけるカスタマイズ素敵ですよね!自分のアイコンでやろうとして失敗しました。ここまで丁寧に書いてあるのに…。自分の無知さが泣ける。

 

関連記事をお洒落にする記事

chiroru.hatenablog.com

これ!画像付き人気記事。これをうまく使えなLITERALLYさんのやつみたいにできるかも!

 

はてなブログカスタマイズTIPS

まだまだ僕は使いこなせていませんがすなばいじりさんがTIPSをたくさん紹介してくれています。

psn.hatenablog.jp

 

FEEDLYボタンの設置

www.task-notes.com

まだFEEDLY全然使いこなせていないんですけどちゃんと対応しないとと思っていたとこです。というかはてなのデフォルトに入れてほしい。タンブラーいらないから。

 

引用をおしゃれにする記事

www.task-notes.com

この記事の中の「引用」をおしゃれにするとこ。オススメです。デフォルトの引用いまいちだったのでこれは設定しました。

 

パンくず系

psn.hatenablog.jp

SEOふまえてもパンくずは大事そう。カテゴリの整理もしねーと。すなばいじりさんは他にも色々記事あげてくれています。残念ながら僕のスキルがついてきていません。

 

まとめ系

wepli-dot2.hatenablog.com

wpli.2さんの記事でも色々まとめてあるのを発見しました。PCをかなりいじくっておられるようです。いいですねー。

 

独自ドメインならお名前.com

 

あとがき

最近ははてなでもカスタマイズ事例増えてきていますね。公式のアップデートも多いので情報は追って行きたいものです。

 

Copyright© 心に火を、指先にペンを All Rights Reserved.