アフィリエイト入門ブログ~それなり

イチから始めるアフィリエイト入門ブログ

スポンサーリンク

スマホでの見え方はアフィリエイトの重要ポイント

 

f:id:sorenari77:20170430173208j:plain

アフィリエイトを始めて、自分のブログのアクセスログなどを真面目に見てみると、改めて実感できるのがスマホからのアクセスの多さです。Webを見るだけなら、わざわざパソコンを出す人は今や少ないですよね。

私がいくつか作ったブログの中でも、自分の体験を活かした「主婦向けのブログ」の場合、スマホからのアクセス率は特に高いようにも思います。

このように重要な“スマホでの見た目”は、ブログでアフィリエイトを成功させるために早めに整えておきたい要素の一つです。今回はこのスマホでの見た目の調節方法について見ていきます。

 

自分のブログがスマホからどう見えているかを把握しよう

f:id:sorenari77:20170430173504j:plain

ブログサービスによって異なりますが、パソコン用とスマホ用のブログの見た目を区別しているサービスも多くあり、本ブログで例にとっている「はてなブログ」もその一つです。

 

パソコン版とスマホ版はこんなに違う

前回、前々回の記事で紹介した「タイトル画像」や「見出し」の変更は、パソコンでブログを見るときの設定なので、そのままではスマホ用の画面に反映されていません。

タイトルと見出しを変更したパソコン版が以下の状態に対し、スマホ版がどのような状態かを見比べてみましょう。

【パソコン版】

f:id:sorenari77:20170429192552j:plain

 スマホ版】

f:id:sorenari77:20170430175202j:plain

 

スマホ版の見た目には、設定が反映されていないことがわかります。はてなブログの初期設定では、スマホからの見た目はこのように非常に地味です。アクセスの多いスマホの見た目をこのままにしておくのは、アフィリエイトにはよくありません。

 

見た目を揃えるのに便利なレスポンシブルデザイン

スマホでのブログの見た目を手っ取り早く整えるのに便利なのが、レスポンシブルデザイン対応のテーマです。

レスポンシブルデザイン対応のテーマとは?

レスポンシブルデザイン対応のテーマとは、パソコン向けのブログのデザインをそのままスマホ向けにも利用できるよう設定されたテーマのことです。スマホで見やすいように自動調節されるので、少ない手間でスマホからのブログの見た目も改善できます。レスポンシブルデザイン対応のテーマを使っている場合は、以下の手順で設定を切り替えましょう。

なお、はてなブログには、レスポンシブルデザイン対応のものと、そうでないものの両方のテーマがあります。「初心者が選ぶべきブログデザインは? 背景は白が断然おすすめ!」の記事で書いたように、これからテーマを選ぶ場合は、レスポンシブルデザイン対応のテーマがおススメです。本ブログの例で利用している「Innocent」もその一つです。

レスポンシブル対応じゃないテーマを使っている場合

レスポンシブルデザイン非対応のテーマを利用している場合は、スマホ向けの設定を個別に行いデザインを改善できます(本記事の一番下参照)。ただし面倒さは否めないので、ブログに詳しくないうちはレスポンシブルデザイン対応のテーマを使うことがやはりおススメです。

どうしても使いたいテーマがある、すでにかなりのカスタマイズをしている(テーマを変えるとカスタマイズは初期化されてしまうので)という場合でなければ、レスポンシブルデザイン対応のテーマに変えてみるのも一つの手だと思います。

 

レスポンシブルテーマをオンにするには

レスポンシブルデザイン対応のテーマを使っている場合、簡単な操作でパソコン用のブログデザインをスマホにも流用できます。

ブログのデザイン設定画面を表示したら、画面左上のスマートフォンのアイコンをクリックしましょう。右側のプレビューを見ると、現時点ではスマホ向けの初期設定の状態なことがわかります。

f:id:sorenari77:20170430180246j:plain

 

一番下の「詳細設定」をクリックして、「レスポンシブルデザイン」にチェックを付けると、プレビューの表示も変わります。「変更を保存する」をクリックして保存しましょう。

f:id:sorenari77:20170430180336j:plain

 

スマホでブログを表示してみると、パソコン用と同じデザインになっています。

f:id:sorenari77:20170430180700j:plain

このように簡単にスマホ版の見た目をアップできるのですが、レスポンシブルデザインがオフになっていることに気が付かない場合も多くあります。しっかりオンにしておきましょう。

 

スマホ用のデザインを別途整えるには

f:id:sorenari77:20170430180810j:plain

レスポンシブルデザインに対応していないテーマの場合、スマホのデザイン設定画面画面で、スマホ用の設定を別途行います。

例えばヘッダのタイトル画像を入れる場合、スマホ用のデザイン設定画面の「ヘッダ」の「タイトル画像」で設定できます。「PCと同じ画像を表示する」の項目もありますが、サイズの違いからずれてしまう場合もあります。そんなときは、「スマートフォン用に画像を設定する」にして、個別にファイルをアップロードしましょう。

f:id:sorenari77:20170430184252j:plain

 

スマホ用のデザインCSSを書き換える

レスポンシブルデザインを使わずに、スマホ用のデザインを変えるには、スマホ用のデザインCSSを書き換える必要があります。

例えば見出しであれば、こちらのサイトの最後にスマホ用の書き換え方が載っています。


はてなブログ スマホ用 カスタマイズ」などをキーワードに検索すると、スマホ用のカスタマイズ情報がヒットしますのでチェックしてみましょう。