こんにちわ、はてなブログのカスタマイズを夢見て手が付けられていないコトリです。
今年に入ってからはブログ用にtwitterを開始しはてなブログだけじゃないブロガーやアフィリエイターをフォローしていろんなブログを見てきました。はてな以外だとWordpressを使っている方を多くフォローしているためブログカスタマイズに興味をもつようになったんです。
はてなブログのカスタマイズ事情
そこでここ数日はてなブログのカスタマイズについていろんな記事を見まくったんですが完全に需要に供給が追い付いていないなと感じました。元々カスタマイズ前提のWordpressと違ってはてなはカスタマイズしなくても十分使えますからね。またWordpressにはカスタマイズの巨匠みたいなブロガーがたくさんいるので皆さんその人の作ったCSSを使っているようでした。
ただはてなにも結構ブログを魔改造している人もいます。いくつ記事上がっていたのでここ最近はひたすらブクマしていました。これから自分のブログをカスタマイズしてビフォーアフターで記事を書こうかなと思ったんですがズブの素人の僕が全部試すのは遙か先になってしまいそうなので、先に記事を紹介して出来る人はどんどん先にいってもらおうと。そんな献身的な気分になったのです。テレサと呼んでください。ここでまとめきれなかった記事は僕のブックマークかtwitterを見ていただけると拾えるかと。
ブログ記事は随時追加することになると思います。めざせWordpress！
ブログをカスタマイズする前に考えておきたいこと
カスタマイズに夢中になって記事更新を怠るべからず
私です。以前SEOを勉強している時にも完全に記事更新を怠りました。今回もその気配プンプンです。ブログの主役はあくまで記事。カスタマイズはサポートでしかない。特に僕みたいに記事数少ない奴がカスタマイズに夢中になっていると「見た目だけで全く中身ねーな」とがっかりブログまっしぐらです。猫まっしぐら。
時代はPCじゃねー。モバイルだ
カスタマイズって無数にやれることあるので、闇雲に手を付けるのではなく「インパクト」の大きいとこから手を付けるべきなんですよね。カスタマイズは表現の幅が大きいPCの方がTIPS含めやれること多いんですけどアクセス数はSP＞PCがだと思うんです。だったら手を付けるべきはSPでしょ。今でしょ。
マイナスを0にすることが最優先
【ブログ運営報告】 2015年2月のアクセス/成果報告とYoutube動画をはてなで紹介するときの注意点など - 心に火を、指先にペンを
この記事ではてなブログでYoutubeを貼るとアプリで見た時フレーム読み込みが発生する事象に対する打ち手を書きましたがこういう来てくれた人を不快にさせるようなマイナス要素は早めに対応すべきです。
はてなブログモバイルのカスタマイズで参考になる記事
はてなブログ モバイルで魔改造しているブログ3選
以下スマホで見てください。僕がはてなブログを読み漁って「なんじゃこりゃ」ってなったブログたちです。あ、もちろんPCもカスタマイズされてますよ。
PCも半端無く魔改造されているんですがそれは。トップに入ると書く記事のタイトルが赤地に白文字でかなり見やすいです。どうやってるんだこれは。ソーシャルボタンもカッコイイです。
アドセンス広告がフッターにオーバーレイしてます。どうやってんだ、これ？あとは記事の見出しにロゴをつかっていたりソーシャルボタンをカスタマイズしてますね。スクロールすると右下に「▲PAGE TOP」っていうボタンが出てきます。これやりたい笑。
当然PCもカスタマイズされているようですがスマホはヤバイです。すっごいオシャンティー。スマホという点ではWordpress以上にいけてると思います。トップ面もそうなんですけど記事下のPOPULAR ENTRIESなんて生唾ものですよ。
モバイルカスタマイズのおすすめ記事 4選
はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - Literally
白状しますけど丸パクリしました。この中に書かれている記事中の見出しとトップページの記事一覧のカスタマイズです。僕の下賎な記事がオシャンティーに！ただ、フォントとか色とかもっと弄りたいのですがまだ手を付けられていません。超オススメカスタマイズです。できれば「POPULAR ENTRIES」も知りたい(厚かましい)
はてなブログのスマートフォン表示を外部CSSでオシャレにする - 太陽がまぶしかったから
もうプロい。外部のCSSを使ってカスタマイズしてるみたいです。記事タイトルがおしゃれだなーと思ってたらPCの表示に準拠させているようです。ふむー、すごい。
はてなブログのスマホ版でPVが絶対アップするカスタマイズ方法 - うさもふ
はてなブログの注目のブログSEOの謎を暴いたうさもふさん。この記事はなるほどと思いましたね。記事下にある「はてな」の開発、週刊、トップへの導線を削除するカスタマイズです。ネット広告の世界でも余計な導線を外すのはランディングページの鉄則ですからね。外に出さずにまず自分のブログ内を回遊してもらわないと。
はてなブログのデザインスマホ画面をカスタマイズ【注:ド初心者用】見出し・フォント・日付・サムネイル画像 - Yukihy Life
このスマホのグローバルメニューいいなー。このブログで先にカスタマイズしてくれているのでよく参考にしています。
adsenseによる「スマートフォン横スクロールガクガク問題」に対応する記事3選
PROに契約してadsense貼り付けてる人結構いると思うんですけど、あなたのブログガクガクですからー。私もです。最近気づきました。この問題にはてなブロガーさんの叡智で立ち向かってる記事を見つけました。
はてなブログのスマートフォン表示で、記事上のアドセンスをガタガタさせずに綺麗に設置する - AIUEO Lab2
「GoogleAdsenseレスポンシブ広告」と「iPhone」と「はてなブログ」と「推奨広告」と「私」♪ - iPhoneのこととかいろいろ
はてなブログのスマホ用Googleアドセンスお勧め設定！iPhone6やiPhone6Plusにも最適！ - マネー報道 MoneyReport
アドセンスの通常サイズの横幅が320になっているせいで起こっている問題ですね。ええ、僕もガクガクです。そもそもレスポンシブルフォーマット使ってなかったわ俺。SEOはモバイルフレンドリー必須ですからね。これ最優先で対応しないといけないと思って対応していないやつです。
アドセンスは実はやりたいカスタマイズが見つかっておらず模索中です。誰か最初の見出しの上にアドセンスを設置するカスタマイズについてまとめてください(他力本願)
見出しや関連記事をもっとおしゃれにする記事
僕は今は上で紹介したLiterallyさんの記事のを使っているんですが大見出しを少し弄りたいなーと思って見つけた記事ですね。
見出しをお洒落にする記事3選
【超便利】はてなブログの見出しデザインを神ツールで吹き出しに変更♪ - おもしろCM・おすすめ映画紹介
Wordpressでよく見てたわ吹き出し見出し。色とか変えれるのはいいかも。中見出しでつかいたい。
見出しの色やサイズを変更するカスタマイズ / はてなブログ - 69log
色とサイズ変更。シンプルでいいですね、これも。コピペで使えるコードも書いてあって嬉しい限りです。
はてなブログに実施した、４つのデザインカスタマイズ - Banguardサイト
この大見出しにリボンつけるカスタマイズ素敵ですよね！自分のアイコンでやろうとして失敗しました。ここまで丁寧に書いてあるのに…。自分の無知さが泣ける。
関連記事をお洒落にする記事
【修正済】コピペで簡単！ はてなブログの人気記事を画像付きで表示させる方法。 - #ChiroruLab
これ！画像付き人気記事。これをうまく使えなLITERALLYさんのやつみたいにできるかも！
はてなブログカスタマイズTIPS
まだまだ僕は使いこなせていませんがすなばいじりさんがTIPSをたくさん紹介してくれています。
はてなブログに目次を付けるカスタマイズ
Wordpressのブログを見ると目次だらけですよね。あれ長くなるブログにはいいなと常々思ってて(今回のブログのような)。探したらね、、、見つかったんです(バラ珍風)
はてなブログで本文の上に自動で目次を表示する方法 - はてなブログ脱獄ブログ
すごくいい記事で読者登録やでーって思ったら記事が2つで更新されておらず…無念。自動で目次っていうのがいいですよね！いつかやります爆。
FEEDLYボタンの設置
はてなブログにfeedlyのボタンを設置する - TASK NOTES
まだFEEDLY全然使いこなせていないんですけどちゃんと対応しないとと思っていたとこです。というかはてなのデフォルトに入れてほしい。タンブラーいらないから。
引用をおしゃれにする記事
はてなブログのデザインカスタマイズ方法（簡易版） - TASK NOTES
この記事の中の「引用」をおしゃれにするとこ。オススメです。デフォルトの引用いまいちだったのでこれはやりたい。
パンくず系
SEOふまえてもパンくずは大事そう。カテゴリの整理もしねーと。すなばいじりさんは他にも色々記事あげてくれています。残念ながら僕のスキルがついてきていません。
あとがき
半端無く長くなった。ここまで他人の褌で記事を書くことになるとは。まだまだ僕も試せていないカスタマイズが多いので試したら記事書きます。また、漏れている記事多数だと思われるので見つけ次第追記していきます。
はー、半端ない。 / 他3コメント http://t.co/agI6WjBm5T “はてなブログのカテゴリをGoogleに認識させるやつ 3 (パンくずリスト) - すなばいじり” http://t.co/WcXwJj65cO
— コトリ (@defender_21) 2015, 3月 8
こんな感じでtwitterでも情報出してまする。
このブログ運営関連記事はこちらから
ラブ・ストーリーと2015年1月ブログ運営報告は突然に - 心に火を、指先にペンを
【ブログ運営報告】はてなブログとTwitter連携始めました - 心に火を、指先にペンを