今回は当サイトで実践しているスマホカスタマイズについてお伝えします。
※はてなブログ限定です
2016年10月18日現在
- ブログテーマ
- ヘッダ画像
- 冒頭紹介文
- Twitter読者とはてなブログ読者数の表示
- 話題の記事
- 記事の装飾等
- 自己紹介など
- ツイート埋め込み
- シェアボタン
- 読者になるボタン
- ☆サポートお問合せ先
- おわりに
ブログテーマ
はてなブログの超便利なデザインテーマ「Brooklyn」を作りました - NO TITLE
当サイトのブログテーマはBrooklynを使用しています。シックでシンプルなデザインであり、大変人気です。
ヘッダ画像
ダッシュボード→スマートフォン→ヘッダ→画像をアップロード
に、３５０×２００ピクセルの画像を挿入しました。
ブログのプロフィールやヘッダ画像をプロに依頼して本当に良かった
なお、画像はプロに依頼。
「スマホのヘッダ画像を依頼したいのですが、３５０×２００ピクセルでお願いします」と依頼すると良いでしょう。
解説
オリジナルのヘッダ画像は、訪問者にサイトの特色を伝える訴求力を発揮します。フリー素材でも結構ですし、自分で撮影した画像でも問題ありませんが、プロに依頼して世界に一つだけのヘッダを作るのも有効なカスタマイズです。
冒頭紹介文
ダッシュボード→スマートフォン→ヘッダ→タイトル下
【保存版】2ヵ月必死にはてなブログのデザインをカスタマイズしてきたのでまとめて紹介するぞぉぉぉ！！！【初心者向け】 - TureTiru Times
こちらにHTMLコードが公開されています。
当サイトでは挨拶→メインコンテンツ→次点のおすすめコンテンツへの動線を整備しています。
解説
ファーストビューで広告が表示されるよりも、訪問したサイトがどのようなコンセプトであるのか、メインコンテンツは何なのかを記載したほうが印象は良くなります。アンカーリンクを設置することによってサイト内記事への動線整備にもなります。
Twitter読者とはてなブログ読者数の表示
ダッシュボード→スマートフォン→ヘッダ→タイトル下
フォローボタンに数字を表示させる場合は
Twitterの公式フォローボタンでフォロワー数を表示する方法｜ferret [フェレット]
こちらのサイトを参考に。
はてなブログの読者数を表示したボタンは
ダッシュボード→設定→詳細設定→最下部のコードをコピペ
でいけます。
解説
ある程度の読者数を要すれば、それを表示することでサイトの人気度を示すことができます。また、ボタンから定期購読者を増やすことにもつながります。
スポンサーリンク
話題の記事
ダッシュボード→スマートフォン→ヘッダ→タイトル下
【保存版】2ヵ月必死にはてなブログのデザインをカスタマイズしてきたのでまとめて紹介するぞぉぉぉ！！！【初心者向け】 - TureTiru Times
見出し付きの枠線はこちらで公開されているHTMLを参考に。
解説
現在売り出し中の記事を、全てのサイト訪問者にアピールすることが可能です。流入先に関わらずすべてのユーザーにリンクを示すことができるので、とっておきの記事へのリンクを設置すると良いでしょう。
記事の装飾等
コピぺでOK！CSSのみで記事タイトルのデザインをおしゃれにする方法15【はてなブログカスタマイズ】 - North-Geek
記事タイトルのカスタマイズはこちらを参照に。
はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - Literally
記事枠の装飾については、こちらに書いてあることを実践してください。
はてなブログのスマートフォン表示から不要な要素を削除する方法 - またろぐ
スマホではデフォルトで不必要な項目がたくさんありますので、それを削除するために参考となる記事はこちら。
解説
地味なカスタマイズですが、これをするのとしないのでは雲泥の差があります。新たなサイトを立ち上げて未装飾の場合と見比べれば一目瞭然。見た目も大事です。
自己紹介など
ダッシュボード→スマートフォン→ページャ下
【保存版】2ヵ月必死にはてなブログのデザインをカスタマイズしてきたのでまとめて紹介するぞぉぉぉ！！！【初心者向け】 - TureTiru Times
見出し付き枠線のHTMLはこちらのサイトを参考に。
お問合せフォームを設置したら企業や個人から連絡が来るようになった - ポジ熊の人生記
お問合せフォームの作り方はこちらを参考に。
解説
プロフィールやお問い合わせフォームへの動線は必須です。そのサイトの管理者はどんな人なのか、また、何かあったときに連絡を受ける体制を整えているかどうかは、サイトの信用にも関わります。
ツイート埋め込み
ダッシュボード→スマートフォン→フッダ
【初心者向け】簡単 twitter（ツイッター）のタイムラインをはてなブログに埋め込む方法 - ゆるりまあるく
埋め込み手順はこちらのサイト様を参考にされると良いでしょう。
解説
一番末に埋め込んでいます。最後までスクロールしてくれる熱心な読者のためのコンテンツですね。これはそこまで重要視していませんが、これ以降に何もコンテンツがない場合は設置しておくのも良いのではないでしょうか。
シェアボタン
コピペで簡単！はてなブログのシェアボタンをカスタマイズ - NO TITLE
こちらのサイト様を参考に。
解説
シェアボタンの有無は非常に重要な要素です。他のサイトを訪問した時に「この記事、面白いから拡散しよう。・・・あれ、シェアボタンはないの？(;´･ω･)」ってこと、ありませんか？わざわざURLをコピペして拡散する手間をかけるなら、別にしなくてもいいや！ってなっちゃう人も少なからずいるはずです。拡散のされやすさは、シェアボタン一つで変わってくるのです！
読者になるボタン
コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life
こちらのサイト様を参考に。
解説
これもシェアボタンと一緒で、「定期的にこのブログを購読したいな！」というインセンティブが起きたユーザーをその場ですぐに取り込めるかどうかで重要な要素です。記事の頭と終わりには必ず設置しておきましょう！
☆サポートお問合せ先
・Twitterでは
https://twitter.com/poji_higuma
こちら！
※相互フォロー後のDMがスムーズです
・メールでは
こちら！
・記事末のコメント欄で！
この記事で紹介しているはてなブログカスタマイズに関するサポートをさせていただきます。
自分でトライしてみたけど、いまいちやり方がわからない...
そんな方は気軽にお問い合わせください。ただし、僕はCSSやHTMLの知識が豊富ではないので、わかる範囲でのサポートになりますのでご了承を(;^ω^)
おわりに
スマホで訪問するユーザーは増加の一途を辿っています。また、Googleもスマホページを検索結果に反映する上で独自の評価基準を導入する予定のようです。今後、スマホページの重要性は増していくばかりでしょう。
スマホカスタマイズに注力する理由はここにあります。PCサイトもおざなりにはできませんが、まずこだわるべくはスマホページ！
当サイトもより良い環境を目指して、スマホページのカスタマイズについては常に改善を繰り返す意気込みでサイトを運営していこうと考えています。
↑はてなブログ作成～設定～SNS連携までを詳細にガイドしてくれる良書をお求めの方はこちらがおすすめ。
↑人気ブログの作り方を丁寧に教えてくれる良書をお求めの方はこちらがおすすめ。
あなたにおすすめの記事
はてなブログＳＥＯ対策～記事タイトル・目次・見出し・内部リンクなど【保存版】