読者です 読者をやめる 読者になる 読者になる

ポジ熊の人生記

雑記ブログの育て方をメインコンテンツに、時事オピニオンや書評などを日々更新中です。

はてなブログスマホカスタマイズで実践していること【2016】

blog blog-hatenablog


スポンサーリンク

 

はてなブログスマホカスタマイズ実践

今回は当サイトで実践しているスマホカスタマイズについてお伝えします。

※はてなブログPro(有料コース)でなければスマホカスタマイズを自由に行えません、ご留意を。

2016年10月18日現在

ブログテーマ

 

当サイトのブログテーマはBrooklynを使用しています。シックでシンプルなデザインであり、大変人気です。

文字サイズを16pxへ

スマホの文字をより見やすくするため、16pxに変更しました。

カスタマイズはリンク先記事を参照してください。

これ以上の大きさになると逆に見づらくなるのかな、というのが体感です。好みの問題もありますので、実際に文字サイズを変更して確認してみると良いです。

ヘッダ画像

f:id:pojihiguma:20161019062342p:plain

ダッシュボード→スマートフォン→ヘッダ→画像をアップロード

に、350×200ピクセルの画像を挿入しました。

なお、画像はプロに依頼。

「スマホのヘッダ画像を依頼したいのですが、350×200ピクセルでお願いします」と依頼すると良いでしょう。

 

解説

オリジナルのヘッダ画像は、訪問者にサイトの特色を伝える訴求力を発揮します。フリー素材でも結構ですし、自分で撮影した画像でも問題ありませんが、プロに依頼して世界に一つだけのヘッダを作るのも有効なカスタマイズです。

冒頭紹介文

f:id:pojihiguma:20161018212613p:plain

ダッシュボード→スマートフォン→ヘッダ→タイトル下

f:id:pojihiguma:20161018212836p:plain

こちらにHTMLコードが公開されています。

当サイトでは挨拶→メインコンテンツ→次点のおすすめコンテンツへの動線を整備しています。

 

解説

ファーストビューで広告が表示されるよりも、訪問したサイトがどのようなコンセプトであるのか、メインコンテンツは何なのかを記載したほうが印象は良くなります。アンカーリンクを設置することによってサイト内記事への動線整備にもなります。

Twitter読者とはてなブログ読者数の表示

f:id:pojihiguma:20161018213101p:plain

ダッシュボード→スマートフォン→ヘッダ→タイトル下

f:id:pojihiguma:20161018213247p:plain

 

フォローボタンに数字を表示させる場合は

こちらのサイトを参考に。

 

はてなブログの読者数を表示したボタンは

ダッシュボード→設定→詳細設定→最下部のコードをコピペ

でいけます。

 

解説

ある程度の読者数を要すれば、それを表示することでサイトの人気度を示すことができます。また、ボタンから定期購読者を増やすことにもつながります。 

話題の記事

f:id:pojihiguma:20161018213639p:plain

ダッシュボード→スマートフォン→ヘッダ→タイトル下

f:id:pojihiguma:20161018213800p:plain

見出し付きの枠線はこちらで公開されているHTMLを参考に。

 

解説

現在売り出し中の記事を、全てのサイト訪問者にアピールすることが可能です。流入先に関わらずすべてのユーザーにリンクを示すことができるので、とっておきの記事へのリンクを設置すると良いでしょう。 

記事の装飾等

f:id:pojihiguma:20161018213921p:plain

記事タイトルのカスタマイズはこちらを参照に。

 

記事枠の装飾については、こちらに書いてあることを実践してください。

 

スマホではデフォルトで不必要な項目がたくさんありますので、それを削除するために参考となる記事はこちら。

 

解説

地味なカスタマイズですが、これをするのとしないのでは雲泥の差があります。新たなサイトを立ち上げて未装飾の場合と見比べれば一目瞭然。見た目も大事です。 

自己紹介など

f:id:pojihiguma:20161018214416p:plain

ダッシュボード→スマートフォン→ページャ下

f:id:pojihiguma:20161018214634p:plain

 

見出し付き枠線のHTMLはこちらのサイトを参考に。

 

お問合せフォームの作り方はこちらを参考に。

 

解説

プロフィールやお問い合わせフォームへの動線は必須です。そのサイトの管理者はどんな人なのか、また、何かあったときに連絡を受ける体制を整えているかどうかは、サイトの信用にも関わります。

ツイート埋め込み

f:id:pojihiguma:20161018214905p:plain

ダッシュボード→スマートフォン→フッダ

f:id:pojihiguma:20161018215056p:plain

埋め込み手順はこちらのサイト様を参考にされると良いでしょう。

 

解説

一番末に埋め込んでいます。最後までスクロールしてくれる熱心な読者のためのコンテンツですね。これはそこまで重要視していませんが、これ以降に何もコンテンツがない場合は設置しておくのも良いのではないでしょうか。

シェアボタン

f:id:pojihiguma:20161018215914p:plain

こちらのサイト様を参考に。

 

解説

シェアボタンの有無は非常に重要な要素です。他のサイトを訪問した時に「この記事、面白いから拡散しよう。・・・あれ、シェアボタンはないの?(;´・ω・)」ってこと、ありませんか?わざわざURLをコピペして拡散する手間をかけるなら、別にしなくてもいいや!ってなっちゃう人も少なからずいるはずです。拡散のされやすさは、シェアボタン一つで変わってくるのです!

読者になるボタン

f:id:pojihiguma:20161018220051p:plain

こちらのサイト様を参考に。

 

解説

これもシェアボタンと一緒で、「定期的にこのブログを購読したいな!」というインセンティブが起きたユーザーをその場ですぐに取り込めるかどうかで重要な要素です。記事の頭と終わりには必ず設置しておきましょう!

 

☆サポートお問合せ先

・Twitterでは

https://twitter.com/poji_higuma

こちら!

※相互フォロー後のDMがスムーズです

・メールでは

お問合せフォーム

こちら!

・記事末のコメント欄で!

 

この記事で紹介しているはてなブログカスタマイズに関するサポートをさせていただきます。

 

自分でトライしてみたけど、いまいちやり方がわからない...

 

そんな方は気軽にお問い合わせください。ただし、僕はCSSやHTMLの知識が豊富ではないので、わかる範囲でのサポートになりますのでご了承を(;^ω^) 

 

おわりに

スマホで訪問するユーザーは増加の一途を辿っています。また、Googleもスマホページを検索結果に反映する上で独自の評価基準を導入する予定のようです。今後、スマホページの重要性は増していくばかりでしょう。

 

スマホカスタマイズに注力する理由はここにあります。PCサイトもおざなりにはできませんが、まずこだわるべくはスマホページ!

 

当サイトもより良い環境を目指して、スマホページのカスタマイズについては常に改善を繰り返す意気込みでサイトを運営していこうと考えています。