はてなブログをレスポンシブデザインからスマホデザインに変更することでアクセス数が急激に伸びました。読者の多くはスマホからのアクセスです。スマホデザインをしっかりカスタマイズすることは重要です。そんな僕がPV数を伸ばしたスマホデザインのカスタマイズをすべて公開します。
スマホデザインに変更でPV数が増加
スマホデザインに変更しようと思うきっかけを与えてくれたのが以下の記事でした。
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 – ひつじの雑記帳
この記事をきっかけにスマホのレイアウトを見直すべきと考えるようになりました。レスポンシブデザインのままではいけないと思い、カスタマイズすることにしました。
ヘッダー
ヘッダー部分です。「スマートフォン」→「ヘッダー」にコピペコードを使用してください。
コードはこちら
13行目で背景色、16行目でタイトルの文字色を変更できます。
メニューバー
メニューバーはヘッダーの上部にあります。下にスクロールすると固定でついてくるように設定しています。アドセンスと重なると違反になりますので少し薄くしています。メニューボタンをクリックすると左側に一覧表示できます。
コードはこちら
３〜10行目をメニューで表示したい「カテゴリーURL」と「タイトル」に置き換えてください。
記事上
記事上のカスタマイズです。「スマートフォン」→「記事上」にコピペコードをコピーする。
スライドショー
注目記事をスライドショーを使って記事上で表示しています。読者の目を引くこと間違いなし。こちらはコードを以下の記事で公開していますので、気になる人は参考にしてください。
文章や文字の設定
画像を丸くしたり、余白の設定やフォントを変更しています。
コードはこちら
必要のないコードは削除して貼り付けてください。
記事下
記事下カスタマイズです。「スマートフォン」→「記事下」に以下のコードをコピーして貼り付けてください。
snsシェアボタンとフォローボタン
シェアボタンは記事上、記事下の両方に貼り付けています。フラットタイプは個人的に好きでおすすめしています。フォローボタンはブログタイトルとインスタグラムを入れるのを目標に作っています。
しかし、すでに自分の気に入ったものがある人はわざわざ変更する必要もないかもしれません。あくまでも補足的なものとして。
フッター
初期設定では不要なものが多いので非表示します。「スマートフォン」→「ページャー下」に以下のコードをコピーして使ってください。
コードはこちら
これでスッキリしました。
profile
プロフィールの設定をします。
以下記事を参考にコピペコードを貼り付けてください。
注目記事をカスタマイズ
フッターにある注目記事を少しスッキリさせ、目立てさせます。「フッター」→「ページャー下」に以下のコードをコピーして使ってください。
これでサムネイルの表示もスッキリしました。
おわりに
レスポンシブデザインからスマホデザインに変更してアクセス数が本当に伸びたのは事実です。以下の記事でもその詳細について書いています。
アクセスを稼ぐためにいろいろと工夫はしていますが、スマホデザインに変更したのが、PV数を伸ばすきっかけとなったのは間違いです。あなたも今回のこのカスタマイズを参考にPV数を稼いでください。
