英語とappleとDIYと

apple製品、英語関連、DIYについて

はてなブログスマホデザインに変えてPV数が上がったカスタマイズ紹介「コピペコード付き」

Check!!!▼

スポンサーリンク

f:id:buchibuchi4647:20170603214513j:plain

はてなブログをレスポンシブデザインからスマホデザインに変更することでアクセス数が急激に伸びました。読者の多くはスマホからのアクセスです。スマホデザインをしっかりカスタマイズすることは重要です。そんな僕がPV数を伸ばしたスマホデザインのカスタマイズをすべて公開します。

 スマホデザインに変更でPV数が増加

スマホデザインに変更しようと思うきっかけを与えてくれたのが以下の記事でした。

 

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

この記事をきっかけにスマホのレイアウトを見直すべきと考えるようになりました。レスポンシブデザインのままではいけないと思い、カスタマイズすることにしました。

ヘッダー

ヘッダー部分です。「スマートフォン」→「ヘッダー」にコピペコードを使用してください。

f:id:buchibuchi4647:20170611130324p:plain

コードはこちら

13行目で背景色、16行目でタイトルの文字色を変更できます。

メニューバー

f:id:buchibuchi4647:20170611131537p:plain

メニューバーはヘッダーの上部にあります。下にスクロールすると固定でついてくるように設定しています。アドセンスと重なると違反になりますので少し薄くしています。メニューボタンをクリックすると左側に一覧表示できます。

コードはこちら

3〜10行目をメニューで表示したい「カテゴリーURL」と「タイトル」に置き換えてください。

記事上

記事上のカスタマイズです。「スマートフォン」→「記事上」にコピペコードをコピーする。

スライドショー

f:id:buchibuchi4647:20170611132151p:plain

注目記事をスライドショーを使って記事上で表示しています。読者の目を引くこと間違いなし。こちらはコードを以下の記事で公開していますので、気になる人は参考にしてください。

 

english-apple-diy.hatenablog.com

 文章や文字の設定

f:id:buchibuchi4647:20170611132714p:plain

画像を丸くしたり、余白の設定やフォントを変更しています。

コードはこちら

必要のないコードは削除して貼り付けてください。

記事下

記事下カスタマイズです。「スマートフォン」→「記事下」に以下のコードをコピーして貼り付けてください。

snsシェアボタンとフォローボタン

f:id:buchibuchi4647:20170611133937p:plain

f:id:buchibuchi4647:20170611134026p:plain

シェアボタンは記事上、記事下の両方に貼り付けています。フラットタイプは個人的に好きでおすすめしています。フォローボタンはブログタイトルとインスタグラムを入れるのを目標に作っています。

 

english-apple-diy.hatenablog.com

 しかし、すでに自分の気に入ったものがある人はわざわざ変更する必要もないかもしれません。あくまでも補足的なものとして。

フッター

初期設定では不要なものが多いので非表示します。「スマートフォン」→「ページャー下」に以下のコードをコピーして使ってください。

コードはこちら

これでスッキリしました。

profile

プロフィールの設定をします。

以下記事を参考にコピペコードを貼り付けてください。

 

english-apple-diy.hatenablog.com

 注目記事をカスタマイズ

フッターにある注目記事を少しスッキリさせ、目立てさせます。「フッター」→「ページャー下」に以下のコードをコピーして使ってください。

これでサムネイルの表示もスッキリしました。

おわりに

レスポンシブデザインからスマホデザインに変更してアクセス数が本当に伸びたのは事実です。以下の記事でもその詳細について書いています。

 

english-apple-diy.hatenablog.com

 アクセスを稼ぐためにいろいろと工夫はしていますが、スマホデザインに変更したのが、PV数を伸ばすきっかけとなったのは間違いです。あなたも今回のこのカスタマイズを参考にPV数を稼いでください。