近ごろ標準仕様からどこまでカスタマイズしたのか、自分でも手管理が難しくなってきました。
これまでのカスタマイズ内容を一覧ベースで公開すると共に、当記事をこれからの公開メモ帳として随時更新致します。
なおブログエンジンは『はてなブログ』ですので、ほとんど全てがはてなブログ独自のカスタマイズです。
目次
ＰＣ表示・スマホ表示共通のカスタマイズ
『はてなブログPro』への移行
【２０１５年１月６日契約】はてな社と契約継続中。
機能や広告を拘束された無料サービスから、より一層の自由を求めて有料サービス『はてなブログPro』へ移行しました。
はてな社の広告ユニットの削除、フッターのカスタマイズ等、はてなブログの各種カスタマイズは、『はてなブログPro』への移行がほぼ必須条件ですので、年間１万円弱の出費を趣味と割り切れるのであれば、移行の価値は十分にあります。
上記は、結局コンテンツ見合いですので、『はてなブログPro』へ移行すれば必ず年間費用をペイできる事を保証するものではありませんので、念の為。
当時は１年で年間契約料を回収できれば良い、と考えていたのですが３ヶ月程度で初期投資費用を回収できました。現在は当時よりもっと収益がありますが、変動的な事と稼ぎ自慢は本望ではありませんので詳しくは触れません。
カスタマイズとは関係有りませんが、ブログは継続して更新を続ける事で成果が出る仕組みのようです。
『はてなブログの構造化』と『パンくずリスト』の導入
【２０１５年１月設置】現在適用中。
はてなブログの場合、デフォルトではGoogleにブログの構造化を理解してもらえないらしく、それを解決するプラグイン。
ざっくり言うと、検索エンジンに自分のブログがどのようなジャンルの記事が得意なのか、認識させるためのものです。
導入後、検索流入が１．５倍程度上昇したため、非常に効果のあるカスタマイズと認識しています。
記事下に関連記事『あわせて読みたい』プラグインの配置
【２０１５年３月〜２０１６年９月】現在は未適用です。
http://bulldra.hatenablog.com/entry/read-together-g
投稿された記事のカテゴリから、同一のカテゴリ等の条件に合致した記事を、エントリーの下部に表示してくれる、訪問者の回遊性を引き上げるプラグインです。
効果は不明ですが、多くのはてなブロガーさんが採用しています。
いちいち記事の最後に、関連する記事を自分で洗い出して載せる必要が無いので、ブログの書き手としても楽ができます。モバイル表示にも対応。
本当は都度手間を惜しまず、自分で関連する記事を洗い出すのが本筋ですけれどね。
２０１６年９月、ブログのデザインを全体的に見直したため、池田仮名さん作成の『あわせて読みたい』プラグインを取り外しました。今でも拝用できますが、「はてなブログっぽさ」を極力排除するための措置です。
Milliardの関連ページプラグイン
【２０１６年９月〜２０１７年４月】PCは現在Googleの関連コンテンツに変更
上記の『あわせて読みたい』プラグインを取り外し、こちらのプラグインに変更を行いました。
標準で表示方法のデザインをいくつか選べる事と、知識があればカスタマイズも可能のようで、汎用性を考えての変更です。
はてなブログProで独自ドメインへの移行
【２０１５年６月６日移行】ドメイン業者と継続契約中。
カスタマイズと呼んでいいものか、ちょっとばかり考えどころですが、２０１５年６月６日、独自ドメインへ移行しました。
ドメインが安定せず、はじめの方は不安定でしたが、その後、安定しました。
なお、これに伴うアクセス状況への変化は、別の記事に致しましたので、別途ご参照ください。
直後に急激なアクセス数の低下があり、２週間後ぐらいから回復して徐々に上昇していく結果となりました。
独自ドメイン取得前（２０１５年５月度）の月間ＰＶ数は５万ＰＶ弱でしたが、直後の２０１５年６月度はアクセス数の激減も含めて同様の月間５万ＰＶ弱、２０１６年７月度については月間７万ＰＶ超へと急成長しました。
独自ドメインが正義かどうかは分かりませんが、私の場合は結果として成功であったと判断しております。
現在（２０１６年９月度以降）に至るまでは、毎月少しずつ増加している状況です。
はてなスターのオミット
【２０１５年６月２８日排除】
標準機能の「はてなスター」をオミット（排除）しました。はてなブログのカスタマイズ画面から簡単に外すことが出来ます。
ブログの読み込みスピードの向上を目的に行った施策で、心なしかアクセス数が増えたような気がします。（ブログ自体の成長と見分けが付かないので、確証は得られません。）
当ブログは検索経由のアクセスが９割超ですので、訪問者様の割合としてはてなユーザは少ないと考えますので、今後も復活させる予定はありません。
シェアボタンのフラット化
【２０１５年１１月適用／２０１６年１０月一部修正】
Twitterのシェアボタンに、ツイート数が含まれなくなる変更が入ったことで、はてなブログ公式のシェアボタンではバランスが崩れた様に見受けられたため、変更いたしました。
iPhoneのアプリボタンもフラット化が浸透してきていますし、シンプルなボタンで、表示速度にもたつき感が無くて気に入っています。
Twitterにおけるシェア数を取得
【２０１６年１０月適用】
Twitterの仕様変更により、取得できなくなったシェア数を取得するように修正。
はてなユーザでなければ、Twitterにおけるシェア数も重要な指数の一つですし、記事の書き手としてもシェア指数はなるべく可視化した方がモチベーションの向上に繋がると判断致しました。
外部サービスの登録が前提となるため、コピペ一発で即反映とはいきません。
フォローボタンのフラット化と増設
【２０１６年１０月適用】
従来、標準のはてなブログ読者登録ボタンと、ＰＣ表示のみFacebookのウィジェットを設置していたのですが、あまり効果が見受けられなかったため、Twitterのアカウントと、FeedlyのフォローボタンをPCとスマホの両者にフラットデザインで追加しました。
私のブログは検索エンジン経由でのアクセスが９割を超えておりますので、固定読者様が付きにくいと考えたための措置です。
ＰＣ版はサイドモジュール、スマホ版は記事下に設置しています。
アフィリエイト紹介ツール『カエレバ』『ヨメレバ』のフラットデザイン変更
【２０１６年１０月適用】
最近では、はてなブログのAmazon商品紹介ツールを利用する事が多いのですが、何となく感覚だけで『カエレバ』『ヨメレバ』を利用することもあります。
標準のデザインがあまり好きではないため、CSSを適用し、フラットなデザインに変更致しました。
見出しデザインのカスタマイズ
【２０１６年１０月一部変更】
http://shiromatakumi.hatenablog.com/entry/2016/02/17/144908
以前ははてなブログのテーマ『FRESH GREEN』のCSSを解析し、テーマに沿った独自のカスタマイズを行なっていましたが、管理が面倒になったため、コピペコードに移行しました。
ブログの読者がメリハリをもって読めるようにする、見出しのカスタマイズ。
見てくれベースでは他のブログとの差別化の難しいはてなブログですが、見出しのカスタマイズは簡単で効果的なので良い感じです。
以前はＰＣ版とスマホ版で見出しのデザインを変えていたのですが、重要チャネルのスマホ版におざなり感があったため、デザインを統一してみました。
記事内における関連記事のデザイン
【２０１７年５月〜】
http://shiromatakumi.hatenablog.com/entry/2017/01/16/205403
ひとつの記事の中で、過去に掲載した記事やその後に追加で書いた記事を紹介する際、一際目立つようにカスタマイズ。
従来はリスト表示か埋め込み表示（:embed）でポツンと配置していたため、何だかひとつの記事が熟練ブロガー風になって気に入っています。
ＰＣ表示限定のカスタマイズ
サイドバーの新着記事のデザインを変更
【２０１５年４月〜２０１６年９月】現在は未適用です。
私の使用している、はてなブログのテーマ『Fresh Geen』のデフォルトのデザインが好きで、ブログ開設以来ずっと使用しているのですが、画像付きの最新記事の表示が好みに合いませんでしたので、標準モジュールから、カスタマイズモジュールに変更しました。
概ね満足していたのですが、記事全体の画像をflickrだけ（外部リンクだけ）で構成すると、どうも思うように表示されない機能制限があるようで、いっそテーマの該当モジュールをカスタマイズしようか悩んでいます。
ちなみに、画像や写真について『はてなフォトライフ』のみを利用する場合を含む、はてなのサービス内で収める場合は、上記の懸念はありません。
なるべくブログの表示をシンプルにするためと、思うように表示されないケースが散見されたため、本カスタマイズは取り外しました。
はてなブログのテーマ『FRESH GREEN』を氷結仕様に
【２０１５年６月６日〜２０１６年９月】現在はテーマを変更
観葉植物が大好きな私としては、緑を基調としたテーマ『Fresh Green』がお気に入りのテーマで、当時『テルのシャングリラ』という観葉植物の品種名称をブログ名としておりました。
しかしその後、ブログ名を変更し、新しいブログ名である『アイスハート』にグリーンはそぐわない、という理由でカラーを寒色基調に変更しました。
イメージは氷なのですが、個人的に違和感のあるところは適宜変更を加えておりました。
テーマで用意されている色をカスタマイズすることは、WEBページのソースコードが、ある程度解析できる人であれば、決して難しい事ではありません。
ただ、全く知識がない場合は、勉強するのも良いのですが、製作者がカスタマイズ方法を公開しているテーマを利用した方が合理的でしょう。
グローバルナビゲーションの自作
【２０１５年６月９日〜２０１６年９月】自作物は取り外しました。
ＰＣ表示のヘッダにグローバルナビゲーションを自作して設置していました。
開発に３日ほどかかり、それなりに苦労しました。しかし、多少の心得のあったHTMLと、まともに勉強したことの無かったCSSを、もう一度基礎から勉強し直したので、苦労に見合った達成感があります。
コピペで設置できるような、安易なモジュール公開は憚られるところですが、勉強すれば私のような WEBデザインの門外漢でも努力次第で作成できした。
今後の保守面を考えると個別のロジックは害と判断し、グローバルナビゲーションが用意されているテーマへの変更に伴い、現在はロジックごと削除しました。
はてなブログのテーマを『Innocent』に変更
【２０１６年９月〜２０１７年３月】
２０１６年１０月現在、はてなブログの中で人気ナンバー・ワンのテーマです。
グローバルナビゲーションが標準で用意されている事と、シンプルなデザイン、そして製作者さんによる親切なカスタマイズガイドラインに惹かれて変更。
グローバルナビゲーションの色を変更するだけでも、シンプルながらも同じテーマを適用しているブログとの差別化が測れるため、おすすめです。
はてなブログのテーマを『ZERO-TEAL』に変更
【２０１７年３月１２日〜４月３０日】
トップページの最新記事一覧がカードで表示される、某Word Pressの有料テーマ風のデザインが気に入って導入。
オリジナルのカラーに不満があったため、グレーアウトのカラーに変更してみました。
はてなブログの中では今までに無いデザインで、大変満足しています。拡張性も高いようなので、これから少しずついじっていくつもりです。
デザイン自体は大変気に入っていたのですが、体感ではありますがトップページの表示速度が遅く感じたため、短期間ではありましたが採用テーマを変更しました。
はてなブログのテーマを『Codomisu Flat』に変更
【２０１７年４月３０日〜】
前回まで採用していたブログテーマ『ZENO-THEAL』が、WordPressライクのデザインで気に入っていたのですが、トップページにおけるアイキャッチ画像の取得に目に見えて負荷がかかっていたからか、ブログ全体のアクセス数が減少傾向にあったため、こちらのテーマに変更しました。
ブログらしい見た目への原点回帰と、よりシンプルかつ高速化を目指しています。
タイトルの横にグローバルメニューが表示できるところがお気に位入りです。
複数のサイドバー表示を１本化
【２０１７年４月３０日〜】
サイドバーの人気記事や最新記事などの表示を１箇所にタブ表示で集約しました。
あまり縦にだらだらと長いのも何だかなぁと思うに至り、なるべくシンプルにしようと導入致しました。
スマホ表示限定のカスタマイズ
はてなブログのスマホ表示をオシャレにカスタマイズ
２０１５年４月対応。
シンプルながらも、どこか他のはてなブログと差別化の計れない、はてなブログのスマホ表示。それを一新させるカスタマイズです。
自分のブログのテーマカラーを簡単に設定する事で、他のブログとのデザイン面での差別化が計れます。
インターネットをパソコンで楽しむ時代は既に古く、現在はモバイルからのアクセスが主流となっています。
そういう意味では、スマホで表示されるデザインの差別化というのは非常に重要な要素です。
スマホ表示の追尾ヘッダーを排除
２０１５年４月対応。
限られたモバイル画面の液晶表示の、上部を専有しながら追尾してくる謎のヘッダの排除対応です。
一般の読者様にとって不要な要素は、可能な限りオミット（＝排除）する事が私のポリシーです。
ヘッダ要素の非表示は、ＳＥＯ的に良くないとか議論はあるようですが、読者に読みやすい表示こそが全てなので、そういう微々たるデメリットなど気にしません。
スマホ表示に不要な要素を排除
２０１５年６月対応。
http://konoyono.hateblo.jp/entry/hateneblog_customize_03
独特な切り口から発せられる、ユニークな記事が魅力的な、後藤光太郎さんの『この世の果てブログ』で公開されている記事が大変参考になりました。これは余談ですが、はてなダイアリーの『世界はあなたのもの』時代からの大ファンです。
先の追尾ヘッダーの他にも、デフォルトのはてなブログのスマホ表示には、不要な要素が非常に多いため、モジュールの多くを当ブログにも導入させて頂きました。
誠に残念ですが、ブログ自体を辞められてしまいました。カスタマイズに限らず、記事のファンでもありましたので本当に残念です。
引用符をよりオシャレにカスタマイズ
２０１５年６月１３日変更。
標準デザインの引用符の色彩や、デザインを変更しました。（ＰＣ＆モバイル）
ＰＣ版はテーマによりけりですが、モバイル表示はなかなか差別化が計れませんので、私のように引用を多用するブログさんにおすすめです。
余白の調整などで引用符自体の大きさも調整できるので、地味ですが大切なカスタマイズです。
スマホ表示のランキング表示をスマートに
２０１５年８月１日変更。
http://www.sho-yamane.me/entry/2015/05/20/142720
＊残念ながら、もとの記事は削除されてしまったようです。
スマホ表示の最下段に表示される、記事のアクセスランキング表示のカスタマイズです。
地味なカスタマイズですが、どこかリスト表示のような味気無さのある標準デザインから、思わずタップしたくなるフラットデザインへグレードアップ。
ほぼコピペだけでカスタマイズできます。
スマホ表示向けグローバルナビゲーション
２０１５年８月５日〜２０１６年１１月１２日。
http://www.sho-yamane.me/entry/2015/06/21/135754
＊残念ながら、もとの記事は削除されてしまったようです。
ぬるりと動く追尾型のスマホ表示向けのグローバルナビゲーションです。
以前はブログタイトルの直下へ簡易的なテキストベースのカテゴリ分けしたリンクを貼っていましたが、スマホアプリライクなグローバルナビゲーションへ変更しました。
追記：追尾ヘッダが邪魔に感じてきたため、２０１６年１１月１２日をもって変更しました。
スマホ表示向けグローバルナビゲーション（その２）
追尾ヘッダを取り払っても、ナビゲーションだけは残したいと思い、上記２つのエントリを参考にカスタマイズしてみました。
著作権の問題もありますので、当ブログでコードの公開は致しませんが、CSSとクラスの知識が多少あれば案外簡単に改造できます。
【総論】カスタマイズするなら、できる事からコツコツと
ブログのカスタマイズは、一度に行うと予期せぬ動作など、記事を書く時間に影響します（書き手としてのリスクがある）ので、まずは自分の対応できそうな範囲からコツコツとやるのが吉だと思います。
私の場合、ちょっとしたカスタマイズの実装さえ、１ヶ月に１度やるかやらないか、という程度です。
結局は、読者がより読みやすい環境を具備する事こそが、カスタマイズの醍醐味だと思います。
様々なカスタマイズの事例を列挙しましたが、結局はブログ全体の内容が充実していなければ何の意味もありませんので、まずは読者が読みたいと思うような記事を書く事こそが、ブログ全体の長期的なメリットになる事は間違いありません。
