この記事には広告を含む場合があります。
記事内で紹介する商品の購入やアプリをダウンロードすることで、当サイトに売り上げの一部が還元されることがあります。
こんにちわ、はてなブログのカスタマイズを夢見て手が付けられていないコトリです。
今年に入ってからはブログ用にtwitterを開始しはてなブログだけじゃないブロガーやアフィリエイターをフォローしていろんなブログを見てきました。はてな以外だとWordpressを使っている方を多くフォローしているためブログカスタマイズに興味をもつようになったんです。
ブログのアクセスアップ、マネタイズについては「ブログで稼ぐ方法 | 30万PV・10万円稼ぐまでにやってきたアクセスアップとマネタイズの方法を全部書く」にまとめてますのでぜひご覧ください。
はてなブログのカスタマイズ事情
そこでここ数日はてなブログのカスタマイズについていろんな記事を見まくったんですが完全に需要に供給が追い付いていないなと感じました。元々カスタマイズ前提のWordpressと違ってはてなはカスタマイズしなくても十分使えますからね。またWordpressにはカスタマイズの巨匠みたいなブロガーがたくさんいるので皆さんその人の作ったCSSを使っているようでした。
ただはてなにも結構ブログを魔改造している人もいます。いくつ記事上がっていたのでここ最近はひたすらブクマしていました。これから自分のブログをカスタマイズしてビフォーアフターで記事を書こうかなと思ったんですがズブの素人の僕が全部試すのは遙か先になってしまいそうなので、先に記事を紹介して出来る人はどんどん先にいってもらおうと。そんな献身的な気分になったのです。テレサと呼んでください。ここでまとめきれなかった記事は僕のブックマークかtwitterを見ていただけると拾えるかと。
ブログ記事は随時追加することになると思います。めざせWordpress！
ブログをカスタマイズする前に考えておきたいこと
カスタマイズに夢中になって記事更新を怠るべからず
私です。以前SEOを勉強している時にも完全に記事更新を怠りました。今回もその気配プンプンです。ブログの主役はあくまで記事。カスタマイズはサポートでしかない。特に僕みたいに記事数少ない奴がカスタマイズに夢中になっていると「見た目だけで全く中身ねーな」とがっかりブログまっしぐらです。猫まっしぐら。
時代はPCじゃねー。モバイルだ
カスタマイズって無数にやれることあるので、闇雲に手を付けるのではなく「インパクト」の大きいとこから手を付けるべきなんですよね。カスタマイズは表現の幅が大きいPCの方がTIPS含めやれること多いんですけどアクセス数はSP＞PCがだと思うんです。だったら手を付けるべきはSPでしょ。今でしょ。
はてなブログ モバイルを魔改造しているブログ
以下スマホで見てください。僕がはてなブログを読み漁って「なんじゃこりゃ」ってなったブログたちです。あ、もちろんPCもカスタマイズされてますよ。
太陽がまぶしかったから
太陽がまぶしかったから
PCも半端無く魔改造されているんですがそれは。トップに入ると書く記事のタイトルが赤地に白文字でかなり見やすいです。どうやってるんだこれは。ソーシャルボタンもカッコイイです。
iPhoneのこととかいろいろ
iPhoneのこととかいろいろ
アドセンス広告がフッターにオーバーレイしてます。どうやってんだ、これ？あとは記事の見出しにロゴをつかっていたりソーシャルボタンをカスタマイズしてますね。スクロールすると右下に「▲PAGE TOP」っていうボタンが出てきます。これやりたい笑。
Literally
LITERALLY
当然PCもカスタマイズされているようですがスマホはヤバイです。すっごいオシャンティー。スマホという点ではWordpress以上にいけてると思います。トップ面もそうなんですけど記事下のPOPULAR ENTRIESなんて生唾ものですよ。
モバイルカスタマイズのおすすめ記事 4選
トップ面、見出しをお洒落にするカスタマイズ
はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 – LITERALLY
白状しますけど丸パクリしました。この中に書かれている記事中の見出しとトップページの記事一覧のカスタマイズです。僕の下賎な記事がオシャンティーに！ただ、フォントとか色とかもっと弄りたいのですがまだ手を付けられていません。超オススメカスタマイズです。できれば「POPULAR ENTRIES」も知りたい(厚かましい)
はてなブログのスマートフォン表示を外部CSSでオシャレにする – 太陽がまぶしかったから
もうプロい。外部のCSSを使ってカスタマイズしてるみたいです。記事タイトルがおしゃれだなーと思ってたらPCの表示に準拠させているようです。ふむー、すごい。
余計な導線を削除するカスタマイズ
はてなブログカスタマイズスマホ版でPVが絶対アップするおすすめ
はてなブログの注目のブログSEOの謎を暴いたうさもふさん。この記事はなるほどと思いましたね。記事下にある「はてな」の開発、週刊、トップへの導線を削除するカスタマイズです。ネット広告の世界でも余計な導線を外すのはランディングページの鉄則ですからね。外に出さずにまず自分のブログ内を回遊してもらわないと。
グローバルメニューを取り付けるカスタマイズ
はてなブログ「カテゴリ」の3つのカスタマイズで「ページ/セッション」と「PV」アップを狙うっちゃ！ – Yukihy Life
ほぼ同期のYukihyさんの記事。このスマホのグローバルメニューいいなー。このブログで先にカスタマイズしてくれているのでよく参考にしています。
Google Adsenseのカスタマイズ
adsenseによる「スマートフォン横スクロール問題」に対応する記事
PROに契約してadsense貼り付けてる人結構いると思うんですけど、あなたのブログガクガクですからー。私もです。最近気づきました。この問題にはてなブロガーさんの叡智で立ち向かってる記事を見つけました。
はてなブログのスマートフォン表示で、記事上のアドセンスをガタガタさせずに綺麗に設置する – AIUEO Lab2
「GoogleAdsenseレスポンシブ広告」と「iPhone」と「はてなブログ」と「推奨広告」と「私」♪ – iPhoneのこととかいろいろ
はてなブログのスマホ用Googleアドセンスお勧め設定！iPhone6やiPhone6Plusにも最適！ – マネー報道 MoneyReport
アドセンスの通常サイズの横幅が320になっているせいで起こっている問題ですね。ええ、僕もガクガクです。そもそもレスポンシブルフォーマット使ってなかったわ俺。SEOはモバイルフレンドリー必須ですからね。これ最優先で対応しないといけないと思って対応していないやつです。
Adsenseの掲載位置を見出し上に設置するカスタマイズ
アドセンスは実はやりたいカスタマイズが見つかっておらず模索中です。誰か最初の見出しの上にアドセンスを設置するカスタマイズについてまとめてください(他力本願)
以前はこのようにやりたくてもできていなかったのですがこの記事に書いてありました。
はてなブログの広告配置に悩む方へ！コピペで記事のリード文の後ろに広告を設置する方法 – Appism
この方法であっさりリード文後の見出しの直前にアドセンスを設定できるようになりました。
はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 – UXエンジニアになりたい人のブログ
この記事が出典とのこと。参考になるなる。
見出しや関連記事をもっとおしゃれにする記事
僕は今は上で紹介したLiterallyさんの記事のを使っているんですが大見出しを少し弄りたいなーと思って見つけた記事ですね。
見出しの色とサイズを変更
見出しの色やサイズを変更するカスタマイズ / はてなブログ – LOGzeudon
色とサイズ変更。シンプルでいいですね、これも。コピペで使えるコードも書いてあって嬉しい限りです。
大見出しにアイコンを付けるカスタマイズ
はてなブログに実施した、４つのデザインカスタマイズ – Banguardサイト
この大見出しにリボンつけるカスタマイズ素敵ですよね！自分のアイコンでやろうとして失敗しました。ここまで丁寧に書いてあるのに…。自分の無知さが泣ける。
関連記事をお洒落にする記事
【修正済】コピペで簡単！ はてなブログの人気記事を画像付きで表示させる方法。 – #ChiroruLab
#ChiroruLabこれ！画像付き人気記事。これをうまく使えなLITERALLYさんのやつみたいにできるかも！
はてなブログカスタマイズTIPS
まだまだ僕は使いこなせていませんがすなばいじりさんがTIPSをたくさん紹介してくれています。
すなばいじり
FEEDLYボタンの設置
はてなブログにfeedlyのボタンを設置する – TASK NOTES
まだFEEDLY全然使いこなせていないんですけどちゃんと対応しないとと思っていたとこです。というかはてなのデフォルトに入れてほしい。タンブラーいらないから。
引用をおしゃれにする記事
はてなブログのデザインカスタマイズ方法（簡易版） – TASK NOTES
この記事の中の「引用」をおしゃれにするとこ。オススメです。デフォルトの引用いまいちだったのでこれは設定しました。
パンくず系
パンくずリストの考え方を整理する – すなばいじり
SEOふまえてもパンくずは大事そう。カテゴリの整理もしねーと。すなばいじりさんは他にも色々記事あげてくれています。残念ながら僕のスキルがついてきていません。
あとがき
最近ははてなでもカスタマイズ事例増えてきていますね。公式のアップデートも多いので情報は追って行きたいものです。
