今回は2016に当サイトで実践したカスタマイズ（主にスマホ）についてお伝えします。
※はてなブログPro（有料コース）でなければカスタマイズを自由に行えません、ご留意を。
- ブログテーマ
- 文字サイズを16pxへ
- ヘッダ画像
- 冒頭自己紹介リンク・関連記事
- メインコンテンツのブログカード挿入
- Twitter読者とはてなブログ読者数の表示
- おすすめの記事
- 記事の装飾等
- 記事末カテゴリ
- お問い合わせフォーム
- ツイート埋め込み
- シェアボタン
- 読者になるボタン
- TOPへ戻る
- 目次のカスタマイズ
- 約何分で読めるか自動表示
- （余談）当サイトの顧問プログラマ
- ☆サポートお問合せ先
- おわりに
ブログテーマ
当サイトのブログテーマはBrooklynを使用しています。
シックでシンプルなデザインであり、大変人気です。
文字サイズを16pxへ
スマホの文字をより見やすくするため、16pxに変更しました。
カスタマイズはリンク先記事を参照してください。
これ以上の大きさになると逆に見づらくなるのかな、というのが体感です。好みの問題もありますので、実際に文字サイズを変更して確認してみると良いです。
ヘッダ画像
ダッシュボード→スマートフォン→ヘッダ→画像をアップロード
に、３５０×２００ピクセルの画像を挿入しました。
なお、画像はプロに依頼。
「スマホのヘッダ画像を依頼したいのですが、３５０×２００ピクセルでお願いします」と依頼すると良いでしょう。
はてなブログカスタマイズまとめ（スマホメイン）【2016】 - ポジ熊の人生記
大変参考になります。ただスマホのヘッダ画像は350ピクセルだと、ピクセル密度の問題でボケてしまうので、横幅750ピクセルはあったほうが良いと思います。
2016/12/20 09:20
情報を頂きましたので
【ブログカスタマイズ】はてなブログのヘッダー画像の余白を非表示にする方法 - 月無ことのは日記
サイズ等の調整はこちらのサイトを参照してください。
すんごい詳しいです（笑）
解説
オリジナルのヘッダ画像は、訪問者にサイトの特色を伝える訴求力を発揮します。フリー素材でも結構ですし、自分で撮影した画像でも問題ありませんが、プロに依頼して世界に一つだけのヘッダを作るのも有効なカスタマイズです。
冒頭自己紹介リンク・関連記事
【はてなブログ】スマホ用のページにカテゴリ一覧を設置してみた - チップの日常
こちらにHTMLコードが公開されています。
設定場所はダッシュボード→スマートフォン→ヘッダ→タイトル下です。
こんな感じ。
「ポジ熊の人生記って何？」モジュールも同じサイトの関連記事表示コードを応用しました。
解説
ファーストビューで広告が表示されるよりも、訪問したサイトがどのようなコンセプトであるのか、メインコンテンツは何なのかを選択できるモジュールを配置したほうが印象は良くなります。
メインコンテンツのブログカード挿入
スマホ：ダッシュボード-スマートフォン-ヘッダ-タイトル下（一例）
PC：ダッシュボード-サイドバー-モジュールを追加-HTML
目的の記事を、いったんエディターにはりつけてブログカード化させます。その後にHTML編集で記載されたコードをコピペするだけです！
解説
ブログカードはテキストリンクよりクリック率が低いそうですが、ブックマーク数やスター、さらにメタディスクリプション設定で記事の説明までできてしまうので今回のような使い方は有効です。当サイトではスマホでさきほどの画像の記事のほかにブログ無料相談、PCで同2枚と自己紹介記事のカードを貼り付けています！
Twitter読者とはてなブログ読者数の表示
ダッシュボード→スマートフォン→ヘッダ→タイトル下
フォローボタンに数字を表示させる場合は
こちらのサイトを参考に。
はてなブログの読者数を表示したボタンは
ダッシュボード→設定→詳細設定→最下部のコードをコピペ
でいけます。
12/20現在は見出し付き枠線内で表示させています。
解説
ある程度の読者数を要すれば、それを表示することでサイトの人気度を示すことができます。また、ボタンから定期購読者を増やすことにもつながります。
おすすめの記事
ダッシュボード→スマートフォン→ヘッダ→タイトル下
見出し付きの枠線はこちらで公開されているHTMLを参考に。
解説
現在売り出し中の記事を、全てのサイト訪問者にアピールすることが可能です。流入先に関わらずリンクを示すことができるので、とっておきの記事へのリンクを設置すると良いでしょう。
記事の装飾等
記事タイトルのカスタマイズはこちらを参照に。
記事枠の装飾については、こちらに書いてあることを実践してください。
スマホではデフォルトで不必要な項目がたくさんありますので、それを削除するために参考となる記事はこちら。
解説
地味なカスタマイズですが、これをするのとしないのでは雲泥の差があります。新たなサイトを立ち上げて未装飾の場合と見比べれば一目瞭然。見た目も大事です。
記事末カテゴリ
ダッシュボード-スマートフォン-フッダ-ページャ下
【はてなブログ】スマホ用のページにカテゴリ一覧を設置してみた - チップの日常
こちらをもとに作りました、イメージ画像付きです。
解説
冒頭ではコンパクトな選択型でしたが、記事末では開かなくてもカテゴリを表示させる方式にしています。記事を見終わったあとに手間をかけさせることなく興味を持ってもらうためです。なお、挿入画像は50*50ピクセルが理想ですので、アップロードする際はサイズを修正しましょう。
お問い合わせフォーム
ダッシュボード-スマートフォン-フッダ-ページャ下
お問合せフォームの作り方はこちらを参考に。
枠線は先ほど紹介したサイトを参照してください。
解説
プロフィールやお問い合わせフォームへの動線は必須です。そのサイトの管理者はどんな人なのか、また、何かあったときに連絡を受ける体制を整えているかどうかは、サイトの信用にも関わります。
ツイート埋め込み
ダッシュボード→スマートフォン→フッダ
埋め込み手順はこちらのサイト様を参考にされると良いでしょう。
解説
一番末に埋め込んでいます。最後までスクロールしてくれる熱心な読者のためのコンテンツですね。これはそこまで重要視していませんが、これ以降に何もコンテンツがない場合は設置しておくのも良いのではないでしょうか。
シェアボタン
こちらのサイト様を参考に。
解説
シェアボタンの有無は非常に重要な要素です。他のサイトを訪問した時に「この記事、面白いから拡散しよう。・・・あれ、シェアボタンはないの？(;´･ω･)」ってこと、ありませんか？わざわざURLをコピペして拡散する手間をかけるなら、別にしなくてもいいや！ってなっちゃう人も少なからずいるはずです。拡散のされやすさは、シェアボタン一つで変わってくるのです！
読者になるボタン
こちらのサイト様を参考に。
解説
これもシェアボタンと一緒で、「定期的にこのブログを購読したいな！」というインセンティブが起きたユーザーをその場ですぐに取り込めるかどうかで重要な要素です。記事の頭と終わりには必ず設置しておきましょう！
TOPへ戻る
僕はコードをいじくって目次に戻るようにしてますが、基本的にTOPへ戻るボタンが右下にずっと表示されるやつです。
はてなブログにページトップへ戻るボタンをつけよう！ - No Hack No Life
こちらのサイトを参考に。
解説
長い記事になればなるほど、このボタンの受容は高まると思われます。訪問者的には間違いなくメリットでしょうね。右下下端の視界を遮ることについては、大きくしすぎなければそこまでストレスではないはずです。アンカー広告がくっついてくるよりはずっとマシですね（笑）
目次のカスタマイズ
こんな感じです。
スマホサイト対応完了！はてなブログ公式目次のデザインカスタマイズ - ばさのーと
こちらのサイトを参照してください。
解説
ここで紹介した目次は長文を書きがちなはてなブロガーにはうってつけといえましょう。大見出しをまずは表示させてそれ以下の階層は「＋」をクリックして表示させるようにできます。こうすることで目次がズラリと表示されて縦長冗長になることを防いでくれるのです。画期的。
約何分で読めるか自動表示
記事内の文字数等を勘案して記事ごとに「約〇分で読めます」自動表示。
滞在時間は本当に上がるの？読了までの所要時間を予測して表示するカスタマイズ - ばさのーと
こちらのサイトを参考にどうぞ。
解説
管理者としては「約〇分」モジュールを表示させることで「短いから読もう」もしくは「長いから読まないorブクマ」などのレスポンスを予想します。メリットデメリットはありそうですね。しかし、訪問者にとってみればすぐに読めると思っていた記事が意外に長かった場合などは「初めから長いことを知りたかった」となるのが心情じゃないかと。つまり訪問者目線ではこれを設置することはメリットになると言えるのでは？
（余談）当サイトの顧問プログラマ
「顧問プログラマ」というのは僕が勝手に付したものです（笑）
氏ははてなブログに降り立って1か月少々ですでにはてなブロガーにとって有益なカスタマイズ記事を多数上梓しており、僕は氏のカスタマイズ運動を強く応援しています。何故ならば無料でお役立ち情報を、初心者目線で公開するブロガーは宝だからです！
最近はProへ移行したこともあり、はてなブログのカスタマイズに関して精力的に研究をされているようです。
公開日と更新日を自動で表示するものは僕のサイトに試験導入されていますが、これも最適化されて皆様のもとに届く日が近いと思われます。
ってなわけで
こちらのサイトは今後とも要注目なのであります。
特に初心者は必見！
みなさん、是非とも読者になってみてください。
☆サポートお問合せ先
・Twitterでは
https://twitter.com/poji_higuma
こちら！
※相互フォロー後のDMがスムーズです
・メールでは
こちら！
・記事末のコメント欄で！
この記事で紹介しているはてなブログカスタマイズに関するサポートをさせていただきます。
自分でトライしてみたけど、いまいちやり方がわからない...
そんな方は気軽にお問い合わせください。ただし、僕はCSSやHTMLの知識が豊富ではないので、わかる範囲でのサポートになりますのでご了承を(;^ω^)
おわりに
スマホで訪問するユーザーは増加の一途を辿っています。また、Googleもスマホページを検索結果に反映する上で独自の評価基準を導入する予定のようです。今後、スマホページの重要性は増していくばかりでしょう。
スマホカスタマイズに注力する理由はここにあります。PCサイトもおざなりにはできませんが、まずこだわるべくはスマホページ！
当サイトもより良い環境を目指して、スマホページのカスタマイズについては常に改善を繰り返す意気込みでサイトを運営していこうと考えています。