稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

副業で稼ぐ仕組みの作り方

スマホでアクセスした時だけ違う内容を表示させる方法

投稿日:2015年6月13日 更新日:

スマホとパソコンだと広告サイズが違うのでそれぞれ違う物を表示させたい時のテクニックをご紹介いたします。

はじめに

検索エンジンのアルゴリズム変更からスマホデザインも合わせて考えなければいけなくなりました。ただ、同じサイズの広告だとスマホだと正常に表示されないので、それぞれで違うサイズの広告を表示させる方法をご紹介いたします。

注意事項

サーバーによってはphpが利用出来ないものもあるので利用しているサーバーのプランを確認して下さい。

phpだけでスマホとパソコンの分岐をしたい

稼げる副業をしている人の中にはブログだけでなくホームページを持っている人もいらっしゃるでしょう。

まずはそんな方の為にphpだけでパソコンとスマホの分岐させる方法をご紹介いたします。


<?php $ua = $_SERVER['HTTP_USER_AGENT']; ?>
<?php if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) : ?>
スマホの場合はここの項目を表示させる
<?php else : ?>
スマホ以外の場合はここの項目を表示させる
<?php endif; ?>

たったこれだけでスマホとそれ以外からのアクセス時のデザインを変更する事が出来ます。実際にテスト用で作成してみました。

スマホとパソコンの分岐のテスト

パソコンで見た場合

pcacc

 

パソコンで見た場合はこのように赤文字で表示させる事が出来ます。

スマートフォンで見た場合

IMG_1165

スマートフォンで見た時はこのように青文字で表示させる事が出来ます。

結構簡単でした。

タブレットも分岐出来ます

ちなみにパソコンやスマートフォンだけでなくタブレットでアクセスした際に表示させる事が出来ます。


<?php $ua = $_SERVER['HTTP_USER_AGENT']; ?>
<?php
if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) : ?>

スマホの場合はここの項目を表示させる

<?php elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) : ?>

タブレットの場合はここの項目を表示させる

<?php else : ?>

上記以外の場合はここの項目を表示させる

<?php endif; ?>

こんな感じでタブレットの条件を追加する事でスマホ、パソコン、タブレットでそれぞれアクセスした際にそれぞれのサイズにあった広告や内容を表示させる事が出来ます。

以上でスマホでアクセスした時だけ違う内容を表示させる方法の説明を終了致します。

さいごに

広告サイズで収入に影響します

スマホでアクセスした際の情報切り替えはしっかりと行わなければいけません。

スマホで画面から広告がはみ出していたり、するとクリック率も下がりますし、何よりも見栄えがわるいですしね笑

今では若い人はパソコンを持たずにスマートフォンしか持っていない人も増えてきているので、よりスマホからのアクセスが増えると思います。

そう考えると稼げる副業をする場合はよりスマホデザインにこだわらなければいけないでしょう。

広告をアドセンスにするのではなく企業の広告を載せる場合はcssだけで何とか出来る場合もありますが、出来ればこのやり方を覚えておく方が良いでしょう。

-副業で稼ぐ仕組みの作り方

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

ECキューブの管理画面で商品画像がグレー

登録している商品を調べようとしたら商品画像が全てグレーの塗りつぶしになっていたので解決方法をご紹介いたします。 関連記事: 【EC-CUBE】管理画面に色々な箇所のファイルを呼び出す方法 ネスタリゾー …

アップロード済み画像を簡単にリサイズする方法WordPress

この画像リサイズしたいけど再アップロードもめんどくせぇな・・・ はじめに 数年前から書いているブログの画像を出来れば全部リサイズしたいな・・・でも、枚数が数百枚単位だからぶっちゃけ面倒すぎるって人にお …

新しいユーザー権限が作れるUser Role Editor

ワードプレスで新しい権限を作れるって知っていましたか? 関連記事: 投稿のビジュアルにcssを反映させる シーサーブログにメニューを作る方法 ワードプレスのメンテナンスモード ワードプレスで簡単にステ …

ECCUBE2系から4系で商品一覧ページのリダイレクト

ECCUBEの商品一覧ページのリダイレクト方法 関連記事: 【WordPress】htaccessでhttpsにリダイレクト カスタムフィールドで画像を出力する時のヒント【ワードプレス】 ECCUBE …

ECCUBE4をXサーバーにインストールしてみた

ECCUBE4系へバージョンアップできるかどうか実験中 関連記事: カスタムフィールドで画像を出力する時のヒント【ワードプレス】 ワードプレスの分岐topページのみやその他表示 【EC-CUBE】管理 …