どうしたらいいのNAVI

どうしたらいいの?にお答えするサイト

【W3 Total Cache】レスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法

      2015/11/07


W3 Total Cacheを入れてWordpressのブログを高速表示させようとしている人も居る事でしょう。
W3 Total Cacheはサーバ側やブラウザ側のキャッシュを制御する事で、ブログの表示を高速にするプラグインとして有名です。

 
ブログをレスポンシブテーマで運用している人は、パソコンとスマホの表示で広告の位置を変更したりしている人も居る事でしょう。
しかし、W3 Total Cacheを導入したら「パソコンとスマホで一緒の表示になっとるやないか!」なんて事態に陥ってしまう事もあるのです。

 
W3 Total CacheのレスポンシブテーマでPCとスマホの広告位置が一緒になってしまう原因と対処方法について簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 
【W3 Total Cache】レスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法
 

 

W3 Total CacheでレスポンシブテーマでPCとスマホの広告位置が一緒になってしまう原因と対処方法について

W3 Total CacheでレスポンシブテーマでPCとスマホの広告位置が一緒になってしまう原因と対処方法について
W3 Total Cacheを導入する事でレスポンシブテーマのパソコンとスマホの広告位置が一緒になってしまう原因と対処方法では、Word Pressのブログの内、Stinger5等のレスポンシブテーマで広告の位置をスマートフォンとパソコンで別々の位置表示にしているにも関わらず、W3 Total Cacheを入れる事でパソコンとスマートフォンで同じ位置に広告が表示されてしまう現象の原因と対処方法について紹介します。

 
パソコンとスマートフォンで広告の位置を変更している人はスマートフォンと、パソコンの違いならではの広告位置の違いで収益性が変わると考えている人も多いと思いますので、W3 Total Cacheによって広告位置が一緒になってしまうと困ってしまいますよね。

 
また、Google Adsenseの場合であれば、スマートフォンでの広告を2つ同じ画面に並べてはいけないという規約があるので、パソコン表示で2連表示している場合、スマートフォンでも2連表示の広告となる可能性があり、意識せずとも規約違反となってしまいます。

 
他にもスマートフォンの時だけ表示する内容、パソコンの表示の時だけ表示する内容などユーザーエージェントごとに表示内容を切り替えて利用している人もスマホとパソコン表示がどっちつかずな表示になってしまう事もあります。

 
W3 Total Cacheでレスポンシブテーマでパソコンとスマートフォンの広告位置が一緒になってしまう原因と対処方法を使ってこのような現象を打開していきましょう。

 

 

 

 

レスポンシブテーマでPCとスマホの広告位置が一緒になってしまう原因

レスポンシブテーマでPCとスマホの広告位置が一緒になってしまう原因
W3 Total Cacheを導入する事でパソコンとスマートフォンの広告の位置が一緒になってしまう原因は、スマートフォンとパソコンで同じキャッシュファイルを参照してしまっている事です。

 
本来、レスポンシブテーマでスマートフォンとパソコンで表示される内容をサーバ側で変更してコンテンツとして配信するのであれば、スマートフォン用のキャッシュファイル、パソコン用のキャッシュファイルを作って、スマホからアクセスがあった場合はスマホ用、パソコンからアクセスがあった場合はパソコン用のキャッシュファイルを参照するべきです。

 
しかし、デフォルトのW3 Total Cacheの状態だと、スマートフォンとパソコンが一緒のキャッシュファイルを参照してしまう事で広告の位置がスマートフォンでアクセスしてもパソコン用の広告位置になったり、パソコンでアクセスしてもスマートフォンの広告位置になってしまうのです。

 
Stinger5等のレスポンシブテーマは広告による収益性を上げる目的で、モバイルからのアクセスか、パソコンからのアクセスかを判断し、Wordpressのサーバ上で広告の位置をHTMLレベルで修正し表示しています。

 
W3 Total Cacheではブログにアクセスがあった場合に、ページキャッシュやオブジェクトキャッシュ等の機能により、ブログに対してアクセスがあった場合にキャッシュファイルを作成するのですが、この時、スマートフォンからアクセスがあった場合にはスマートフォンでアクセスしたときのHTMLのキャッシュファイルが、パソコンでアクセスされた場合はパソコンでアクセスしたときにテーマによって作成されるHTMLのキャッシュファイルが作成される事となります。

 
次回、ブログにアクセスがあった場合に、スマートフォンやパソコンどちらを表示したとしても先に作成されたキャッシュファイルを見てしまう事によってブログの表示がスマートフォンとパソコンで表示した場合にどっちつかずな表示となってしまうのです。

 

 

 

 

レスポンシブテーマでPCとスマホの広告位置が一緒になってしまう対処方法

レスポンシブテーマでPCとスマホの広告位置が一緒になってしまう対処方法
W3 Total Cacheを導入する事でレスポンシブテーマでパソコンとスマホの広告位置が一緒になってしまう事への対処の方法についてみていきましょう。

 
W3 Total Cacheを導入してレスポンシブテーマでパソコンとスマホの広告位置が一緒になってしまうのは、スマートフォンとパソコンで同じキャッシュファイルを作成し、参照してしまう事にあるのでW3 Total Cacheの設定を変更する事で対処する事が出来ます。

 
W3 Total Cacheによって制御、作成されるキャッシュファイルは「ユーザーエージェントグループ」毎に作成され、次回ブログのアクセスがあった場合にグループごとにキャッシュファイルを参照する事が出来るようになるので「User Agent Groups」でパソコンユーザーグループとモバイルユーザーグループを別々に登録する事で、モバイル用のキャッシュファイルとパソコン用のキャッシュファイルを、それぞれ別々に作成し、参照するように設定します。

 
レスポンシブテーマでパソコンとスマホの広告位置が一緒になってしまう対処方法については次の手順で対処しましょう。

  • 「User Agent Groups」の設定画面を開く
  • モバイル端末のグループの作成・有効化をするく

 
パソコンとスマホの広告位置が一緒になってしまうのは、「User Agent Groups」の設定で「モバイルのユーザーエージェントグループ」と「パソコンのユーザーエージェントグループ」が設定されていない、もしくはグループが一つも登録されていない事でW3 Total Cacheでモバイルもパソコンも同じグループのアクセスと判断されてしまう事でしょう。

 
ここでは、モバイル端末のグループを作成しておく事によって、「スマートフォン用のキャッシュファイル」と「その他のモバイルのキャッシュファイル」をユーザーエージェントグループごとに設定できるようにします。

 
「パソコン用のユーザーエージェントグループについては設定しなくていいの?」という疑問も湧くと思いますが、ここで設定・有効化されていないユーザーエージェントは「その他のグループ」として認識され、その他のグループのキャッシュファイルを参照するのでパソコンでブログを参照した場合はその他のグループのキャッシュファイルを参照する事になります。

 
つまり、スマートフォン・その他のモバイル(ガラケーなど)・パソコン(その他のグループ)の3種類のキャッシュファイルをそれぞれの端末毎に作成し、参照する事が出来るようになるのです。

 
では、具体的に手順を見ていきましょう。

 

 

 

「User Agent Groups」の設定画面を開く

User Agent Groupsを開くには、Wordpressの管理画面から「Preformance」->「User Agent Groups」を選択しましょう。

 
W3 Total Cacheのユーザーエージェントグループ(User Agent Groups)の設定画面を開くと次の画像のようなイメージになるはずです。
レスポンシブテーマでPCとスマホの広告位置が一緒になってしまう対処方法-1

 

 

 

モバイル端末のグループの作成・有効化をする

次にUser Agent Grooupsの設定画面で、モバイル端末のグループの作成・有効化をしましょう。
モバイル端末のグループでは「Iphone等のスマートフォン」のグループと「ガラケーなどのその他のグループ」を設定するようにしましょう。

W3 Total Cacheでは実はすでにモバイル端末用のグループが作成されていて、スマートフォンとガラケーのグループが無効化された状態で登録されています。
それぞれのグループを「Enabled」で有効化するだけでスマートフォンと、ガラケーのキャッシュを作成・参照してくれるユーザーエージェントグループを作成する事が出来ます。

  • high(スマートフォンなどハイエンド端末)
  • low(ガラケー等の携帯端末)

 
それぞれのグループについてもう少し掘り下げてみていきましょう。

 

 

high(スマートフォンなどハイエンド端末)

high(スマートフォンなどハイエンド端末)
W3 Total CacheのUser Agent Groupsの「high」グループには、スマートフォン等のハイエンド端末のユーザーエージェントがグループ化されています。

 
ハイエンド端末のユーザーエージェントグループを作成・有効化する事によって、スマートフォン等のハイエンド端末独自のキャッシュファイルを作成し、ブログにハイエンド端末からの再アクセスがあった場合にハイエンド端末専用のキャッシュファイルを参照するようになります。

 
デフォルトでは無効化されている状態なので、スマートフォンのアクセスがあった場合にHTMLやCSS、JS等の表示をサーバー側で切り替える制御がある場合は有効化しておきましょう。

 
もし、何かしらの作業によって削除してしまっていた場合でも、新たにハイエンド端末用のユーザーエージェントグループを作成する事で対処する事が出来ます。
highに登録されているユーザーエージェントは次の通りです。

  • acer s100
  • android
  • archos5
  • bada
  • bb10
  • blackberry9500
  • blackberry9530
  • blackberry9550
  • blackberry 9800
  • cupcake
  • docomo ht-03a
  • dream
  • froyo
  • googlebot-mobile
  • htc hero
  • htc magic
  • htc_dream
  • htc_magic
  • iemobile/7.0
  • incognito
  • ipad
  • iphone
  • ipod
  • kindle
  • lg-gw620
  • liquid build
  • maemo
  • mot-mb200
  • mot-mb300
  • nexus 7
  • nexus one
  • opera mini
  • s8000
  • samsung-s8000
  • series60.*webkit
  • series60/5.0
  • sonyericssone10
  • sonyericssonu20
  • sonyericssonx10
  • t-mobile mytouch 3g
  • t-mobile opal
  • tattoo
  • touch
  • webmate
  • webos

 

 

low(ガラケー等の携帯端末)

low(ガラケー等の携帯端末)
W3 Total CacheのUser Agent Groupsの「low」グループには、ガラケー等の携帯端末のユーザーエージェントがグループ化されています。

 
携帯端末のユーザーエージェントグループを作成・有効化する事によって、ガラケー等の携帯端末独自のキャッシュファイルを作成し、ブログに携帯端末からの再アクセスがあった場合に携帯端末専用のキャッシュファイルを参照するようになります。

 
デフォルトでは無効化されている状態なので、ガラケーのアクセスがあった場合にHTMLやCSS、JS等の表示をサーバー側で切り替える制御がある場合は有効化しておきましょう。

 
もし、何かしらの作業によって削除してしまっていた場合でも、新たにガラケー等の携帯端末用のユーザーエージェントグループを作成する事で対処する事が出来ます。
lowに登録されているユーザーエージェントは次の通りです。

  • 240×320
  • 2.0 mmp
  • bppcb
  • alcatel
  • amoi
  • asus
  • au-mic
  • audiovox
  • avantgo
  • benq
  • bird
  • blackberry
  • blazer
  • cdm
  • cellphone
  • danger
  • ddipocket
  • docomo
  • dopod
  • elaine/3.0
  • ericsson
  • eudoraweb
  • fly
  • haier
  • hiptop
  • hp.ipaq
  • htc
  • huawei
  • i-mobile
  • iemobile
  • iemobile/7
  • iemobile/9
  • j-phone
  • kddi
  • konka
  • kwc
  • kyocera/wx310k
  • lenovo
  • lg
  • lg/u990
  • lge vx
  • midp
  • midp-2.0
  • mmef20
  • mmp
  • mobilephone
  • mot-v
  • motorola
  • msie 10.0
  • netfront
  • newgen
  • newt
  • nintendo ds
  • nintendo wii
  • nitro
  • nokia
  • novarra
  • o2
  • openweb
  • opera mobi
  • opera.mobi
  • p160u
  • palm
  • panasonic
  • pantech
  • pdxgw
  • pg
  • philips
  • phone
  • playbook
  • playstation portable
  • portalmmm
  • proxinet
  • psp
  • qtek
  • sagem
  • samsung
  • sanyo
  • sch
  • sch-i800
  • sec
  • sendo
  • sgh
  • sharp
  • sharp-tq-gx10
  • small
  • smartphone
  • softbank
  • sonyericsson
  • sph
  • symbian
  • symbian os
  • symbianos
  • toshiba
  • treo
  • ts21i-10
  • up.browser
  • up.link
  • uts
  • vertu
  • vodafone
  • wap
  • willcome
  • windows ce
  • windows.ce
  • winwap
  • xda
  • xoom
  • zte

 

 

 

 

W3 Total CacheでレスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法を読むうえで知っておきたい知識

W3 Total CacheでレスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法を読む上で知っておきたい事について紹介します。
何かに困った時に他の方法を思いついたり、用語がわからなくて読みづらいと感じた場合は、これから紹介する事を参考にしてみてください。

 

 

 

W3 Total Cacheについて

【Wordpress】キャッシュを使ってブログを高速化しよう! W3 Total Cache
W3 Total CacheはWordpressのプラグインで、コンテンツのキャッシュを作ってくれるプラグインです。
W3 Total Cacheは英語での表記ですが、キャッシュ系の細かな設定を行う事が出来るため、非常に便利なプラグインの一つなのです。

 
W3 TotalCacheには有償版と無償版がありますが、無償版でも十分に使えます。

 
W3 Total CacheをWordpressにインストールする
W3 Total CacheはWordpressのプラグインなので、新規のプラグイン追加の手順でWordpressにインストールすることが出来ます。
インストールした後はプラグインの有効化をする事を忘れないようにしましょう。

 
W3 Total Cacheのインストールは次の手順が主流です。

  • Wordpressのプラグインの「プラグインを追加」の画面で「W3 Total Cache」と検索する
  • 検索で表示された「W3 Total Cache」を「いますぐインストール」ボタンを押してインストール

 

W3 Total Cacheの設定方法と使い方とは
W3 Total Cacheはブログ高速化の上で必要なサーバ側、ブラウザ側のキャッシュに関する設定を行う事が出来ます。

 
サーバー側ではアクセスがあった際にページを表示する上で必要なページやデータベースの検索結果、ページを構成するオブジェクトなどを作成する事でいちから記事を作成するのではなく、あらかじめ用意しておいた部品(キャッシュ)を利用する事でブログの表示速度を向上させます。

 
ブラウザ側での設定ではブログに訪問したブラウザに対してHTMLやCSS、JSファイル等をキャッシュして保持するよう促し、再訪問の際にキャッシュを利用する事でページ閲覧時の高速化を測る事が出来ます。また、ブラウザ側でキャッシュしたファイルをユーザーが閲覧する事でWordpressのサーバー側では負荷が軽減される事でもブログの表示速度を向上させる効果があります。

 
サーバやブラウザだけでなくCDNに関する設定を行う事が出来、W3 Total CacheをCDNと連携して色々なファイルを連携する事で、場所的に閲覧ユーザーから近いサーバーからコンテンツを提供する事でブログの表示速度を向上させる設定もあります。

 
W3 Total Cacheで設定できる項目は次の通りです。

  • 全体設定
  • ページキャッシュの設定
  • ソースの最適化設定
  • データベースキャッシュの設定
  • オブジェクトキャッシュの設定
  • ブラウザーキャッシュの設定
  • ユーザーエージェントグループの設定
  • リファラーグループの設定
  • CDNの設定
  • モニタリング設定
  • その他の設定

 

W3 Total Cacheで起こりやすい不具合
W3 Total Cache等のキャッシュプラグインを導入し、利用すると、動的コンテンツを配信するサイトやブログなどではキャッシュの制御が適正に行われていないと古い情報が画面上に残ってしまったり、JavaScriptが動作しなくなってしまったりなどの不具合を起こす事があります。

 
多くはツールによって起こる不具合ではなく、ブログ運営のスタイルに合っていない設定であったり、キャッシュファイルの削除期限であったり、キャッシュファイルの参照グループの設定が行えていなかったりする事が原因でブログで不具合を起こす事が多いです。

 
W3 Total Cacheでブログ上でよく起こる不具合としては次のようなものがあります。

 

  • レスポンシブデザインでモバイルとパソコンで同じ広告位置表示になってしまう

 
キャッシュを使ってブログを高速化するW3 Total Cacheについては「【W3 Total Cache】W3 Total Cacheの設定方法と使い方」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

W3 Total Cacheの設定と使い方について

W3 Total Cacheの設定方法と使い方とは
W3 Total Cacheはブログ高速化の上で必要なサーバ側、ブラウザ側のキャッシュに関する設定を行う事が出来ます。

 
サーバー側ではアクセスがあった際にページを表示する上で必要なページやデータベースの検索結果、ページを構成するオブジェクトなどを作成する事でいちから記事を作成するのではなく、あらかじめ用意しておいた部品(キャッシュ)を利用する事でブログの表示速度を向上させます。

 
ブラウザ側での設定ではブログに訪問したブラウザに対してHTMLやCSS、JSファイル等をキャッシュして保持するよう促し、再訪問の際にキャッシュを利用する事でページ閲覧時の高速化を測る事が出来ます。また、ブラウザ側でキャッシュしたファイルをユーザーが閲覧する事でWordpressのサーバー側では負荷が軽減される事でもブログの表示速度を向上させる効果があります。

 
サーバやブラウザだけでなくCDNに関する設定を行う事が出来、W3 Total CacheをCDNと連携して色々なファイルを連携する事で、場所的に閲覧ユーザーから近いサーバーからコンテンツを提供する事でブログの表示速度を向上させる設定もあります。

 
W3 Total Cacheで設定できる項目は次の通りです。

  • 全体設定
  • ページキャッシュの設定
  • ソースの最適化設定
  • データベースキャッシュの設定
  • オブジェクトキャッシュの設定
  • ブラウザーキャッシュの設定
  • ユーザーエージェントグループの設定
  • リファラーグループの設定
  • CDNの設定
  • モニタリング設定
  • その他の設定

 

全体設定は、W3 Total Cache全体に関する設定を行う項目です。
Wordpressの管理画面の「Performance」→「General Settings」と進んだ先が全体設定を行うページです。
設定が終わったら必ず「Save all Settings」ボタンを押して設定を保存しましょう。

 
W3 Total Cacheの全体設定として行う事が出来る事は次の通りです。

  • 開発者の推奨設定を使用するかどうか
  • ページキャッシュを行うかどうか
  • ページキャッシュするサーバーを選択する
  • ソースの最適化設定を行うかどうか
  • ソースの最適化の全体設定
  • データベースキャッシュを行うかどうか
  • データベースキャッシュの保存先
  • オブジェクトキャッシュを行うかどうか
  • オブジェクトキャッシュの保存先
  • ブラウザーキャッシュを行うかどうか
  • CDNを使うかどうか
  • 利用しているCDNの選択
  • リバースプロキシを使用するかどうか
  • バニッシュサーバーの設定
  • モニタリングを利用するかどうか
  • モニタリングAPIの設定
  • ライセンスキーの設定
  • その他の設定

 

ページキャッシュの設定(Page Cache)は、W3 Total Cacheのページキャッシュに関する詳細設定を行います。

 
Wordpressの管理画面の「Performance」→「Page Cache」と進んだ先がページキャッシュの設定を行うページです。

 
W3tcでページキャッシュとして設定できる項目としては次の通りです。

  • ページキャッシュの全体設定(General)
  • ページキャッシュの自動生成に関する設定(Cache Preload)
  • ページキャッシュ更新の契機に関する設定(Purge Policy: Page Cache)
  • 高度な設定(Advanced)

 

データベースキャッシュの設定(Database Cache)は、W3 Total Cacheのデータベースキャッシュに関する詳細設定を行います。

 
Wordpressの管理画面の「Performance」→「Database Cache」と進んだ先がページキャッシュの設定を行うページです。
設定が終わったら必ず「Save all Settings」ボタンを押して設定を保存しましょう。

 
W3tcでページキャッシュとして設定できる項目としては次の通りです。

  • 全体設定
  • 高度な設定

 

オブジェクトキャッシュの設定(Object Cache)は、W3 Total Cacheのオブジェクトキャッシュに関する詳細設定を行います。
オブジェクトキャッシュの設定は、W3tc上ではそもそも高度な設定として扱われています。

 
Wordpressの管理画面の「Performance」→「Object Cache」と進んだ先がページキャッシュの設定を行うページです。
設定が終わったら必ず「Save all Settings」ボタンを押して設定を保存しましょう。

 
W3tcでオブジェクトキャッシュとして設定できる高度な設定項目は次の通りです。

  • キャッシュオブジェクトのデフォルトの有効期間
  • ガベージコレクションのインターバル時間
  • グローバルグループの設定
  • 非永続グループの設定

 

ブラウザーキャッシュの設定(Browser Cache)では、W3 Total Cacheのブラウザーキャッシュに関する詳細設定を行います。

 
Wordpressの管理画面の「Performance」→「Browser Cache」と進んだ先がブラウザーキャッシュの設定を行うページです。
設定が終わったら必ず「Save all Settings」ボタンを押して設定を保存しましょう。

 
W3tcでブラウザーキャッシュとして設定できる項目としては次の通りです。

  • 全体設定
  • CSSとJSに関する設定
  • HTMLとXMLに関する設定
  • メディアやその他のファイルに関する設定

 
ユーザーエージェントグループの設定
ユーザーエージェントグループの設定では、WWW(ワールドワイドウェブ)から情報を取得するHTTPユーザーエージェントのグループを作成する事が出来ます。

 
ユーザーエージェントグループとしてまとめられたエージェントからアクセスがあった場合、W3 Total Cacheはグループごとのキャッシュを作成し、グループ内の同じユーザーエージェント、もしくは別のユーザーエージェントからアクセスがあった場合にキャッシュファイルをグループ内で利用できるようにします。

 
ユーザーエージェントグループの設定は「Performance」->「User Agent Groups」で設定画面を開く事が出来ます。

 
ユーザエージェントグループの設定では次の設定を行う事が出来ます。

  • ユーザエージェントグループの有効化
  • ユーザーエージェントグループを利用するテーマ
  • ユーザーエージェントグループに含まれるエージェントでアクセスがあった場合のエージェントリダイレクトの設定
  • グループを構成するエージェントの設定

 
リファラーグループの設定
リファラーグループの設定では、ブログの照会人・照会元であるリファラーのグループを作成する事が出来ます。

 
リファラーグループとしてまとめられたリファラーからアクセスがあった場合、W3 Total Cacheはグループごとのキャッシュを作成し、同じリファラーや、同じグループ内の別のリファラーからアクセスがあった場合にキャッシュファイルをグループ内で利用できるようにします。

 
リファラーグループの設定は「Performance」->「Referrer Groups」で設定画面を開く事が出来ます。
リファラーグループの設定では次の設定を行う事が出来ます。

  • リファラーグループの有効化
  • リファラーグループを利用するテーマ
  • リファラーグループに含まれるリファラーでアクセスがあった場合のリファラーリダイレクトの設定
  • グループを構成するリファラーの設定

 
モニタリング設定
モニタリングの設定は、W3 Total Cacheで推奨されているモニタリングツールである「New Relic」についての設定を行う事が出来ます。
New Relicによるモニタリングの設定については、申し訳ありませんが当ブログでは取り扱いませんのでご了承ください。

 
その他の設定
その他の設定では、W3 Total Cache上で利用する事が出来る各種オプションの設定を行う事が出来ます。
各種オプションは有効化する事によってW3 Total Cache上で利用する事が出来ます。

 
その他の設定でW3 Total Cacheとして利用する事が出来るオプションは次の通りです。

  • CloudFlare
  • FeedBurner

 
W3 Total Cacheの設定方法と使い方については「【W3 Total Cache】W3 Total Cacheの設定方法と使い方」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

W3 Total Cacheでよく起こる不具合について

W3 Total Cacheで起こりやすい不具合
W3 Total Cache等のキャッシュプラグインを導入し、利用すると、動的コンテンツを配信するサイトやブログなどではキャッシュの制御が適正に行われていないと古い情報が画面上に残ってしまったり、JavaScriptが動作しなくなってしまったりなどの不具合を起こす事があります。

 
多くはツールによって起こる不具合ではなく、ブログ運営のスタイルに合っていない設定であったり、キャッシュファイルの削除期限であったり、キャッシュファイルの参照グループの設定が行えていなかったりする事が原因でブログで不具合を起こす事が多いです。

 
W3 Total Cacheでブログ上でよく起こる不具合としては次のようなものがあります。

 

  • レスポンシブデザインでモバイルとパソコンで同じ広告位置表示になってしまう

 

【W3 Total Cache】レスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法
W3 Total Cacheを導入する事でレスポンシブテーマのパソコンとスマホの広告位置が一緒になってしまう原因と対処方法では、Word Pressのブログの内、Stinger5等のレスポンシブテーマで広告の位置をスマートフォンとパソコンで別々の位置表示にしているにも関わらず、W3 Total Cacheを入れる事でパソコンとスマートフォンで同じ位置に広告が表示されてしまう現象の原因と対処方法について紹介します。

 
W3 Total Cacheを導入する事でパソコンとスマートフォンの広告の位置が一緒になってしまう原因は、スマートフォンとパソコンで同じキャッシュファイルを参照してしまっている事です。

 
本来、レスポンシブテーマでスマートフォンとパソコンで表示される内容をサーバ側で変更してコンテンツとして配信するのであれば、スマートフォン用のキャッシュファイル、パソコン用のキャッシュファイルを作って、スマホからアクセスがあった場合はスマホ用、パソコンからアクセスがあった場合はパソコン用のキャッシュファイルを参照するべきです。

 
しかし、デフォルトのW3 Total Cacheの状態だと、スマートフォンとパソコンが一緒のキャッシュファイルを参照してしまう事で広告の位置がスマートフォンでアクセスしてもパソコン用の広告位置になったり、パソコンでアクセスしてもスマートフォンの広告位置になってしまうのです。

 
W3 Total Cacheで起こりやすい不具合については「【W3 Total Cache】W3 Total Cacheで起こりやすい不具合 え?マジデ?!を解消しよう」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。


 

 

 

スポンサーリンク


W3 Total CacheでレスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法 あとがき

W3 Total CacheでレスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法 あとがき
W3 Total Cacheでレスポンシブテーマでパソコンとスマホの広告位置が一緒になってしまった場合の原因と対処方法について紹介しました。

 
「設定簡単なんだからもっと早く対処法教えてくれよ!」と記事構成についてツッコミを頂きそうなものですが、W3 Total Cacheのレスポンシブテーマのエージェントについて理解した方が良いかな?という筆者のエゴの元、いろいろな事をツラツラと書かせていただきました。

 
対処方法そのものは設定一発で終了するような内容なので簡単なのですが、実はこの現象は奥が深くてブラウザ毎のエージェントやらW3 Total Cache特有の挙動やらデフォルトの設定値やらブログの運営スタイルやらが関わってくるので、少しでも皆様が今後、同じような現象に悩んでもすぐ対処できるように紹介しました。

 
レスポンシブテーマでPCとスマホの広告位置が一緒になってしまうのはブログ運営において「やべっ!!!」という瞬間でもあるので焦るのもわかりますが、対処もしつつ少しずつキャッシュについての理解やキャッシュを制御する事について学ぶのも良いかもしれません。

 
でないと「スマートフォンをキャッシュさせる例外に設定したり」や「キャッシュそのものを使わないようにする」等、本来であれば高い攻撃力を発揮できるはずの伝説の武器みたいなツールでも、木の棒くらいの攻撃力しか出さないなんて事にもなりかねません。少なくとも私はそうでした(遠い目)

 
ともあれ、レスポンシブテーマでパソコンとスマホの広告位置が一緒になるのはやはり収益性を考えても由々しき事態なので早急に対処して自分のお財布を守ってください!

 
W3 Total Caceでレスポンシブテーマでパソコンとスマホの広告が一緒になる原因と対処方法を使って、適正なブログ運営をしていってください。

 

 

 

 

W3 Total CacheでレスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法 まとめ

W3 Total CacheでレスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法 まとめ
W3 Total Cacheを導入する事でレスポンシブテーマのパソコンとスマホの広告位置が一緒になってしまう原因と対処方法では、Word Pressのブログの内、Stinger5等のレスポンシブテーマで広告の位置をスマートフォンとパソコンで別々の位置表示にしているにも関わらず、W3 Total Cacheを入れる事でパソコンとスマートフォンで同じ位置に広告が表示されてしまう現象の原因と対処方法について紹介します。

 
W3 Total Cacheを導入する事でパソコンとスマートフォンの広告の位置が一緒になってしまう原因は、スマートフォンとパソコンで同じキャッシュファイルを参照してしまっている事です。

 
本来、レスポンシブテーマでスマートフォンとパソコンで表示される内容をサーバ側で変更してコンテンツとして配信するのであれば、スマートフォン用のキャッシュファイル、パソコン用のキャッシュファイルを作って、スマホからアクセスがあった場合はスマホ用、パソコンからアクセスがあった場合はパソコン用のキャッシュファイルを参照するべきです。

 
しかし、デフォルトのW3 Total Cacheの状態だと、スマートフォンとパソコンが一緒のキャッシュファイルを参照してしまう事で広告の位置がスマートフォンでアクセスしてもパソコン用の広告位置になったり、パソコンでアクセスしてもスマートフォンの広告位置になってしまうのです。

 
W3 Total Cacheを導入する事でレスポンシブテーマでパソコンとスマホの広告位置が一緒になってしまう事への対処の方法についてみていきましょう。

 
W3 Total Cacheを導入してレスポンシブテーマでパソコンとスマホの広告位置が一緒になってしまうのは、スマートフォンとパソコンで同じキャッシュファイルを作成し、参照してしまう事にあるのでW3 Total Cacheの設定を変更する事で対処する事が出来ます。

 
W3 Total Cacheによって制御、作成されるキャッシュファイルは「ユーザーエージェントグループ」毎に作成され、次回ブログのアクセスがあった場合にグループごとにキャッシュファイルを参照する事が出来るようになるので「User Agent Groups」でパソコンユーザーグループとモバイルユーザーグループを別々に登録する事で、モバイル用のキャッシュファイルとパソコン用のキャッシュファイルを、それぞれ別々に作成し、参照するように設定します。

 
レスポンシブテーマでパソコンとスマホの広告位置が一緒になってしまう対処方法については次の手順で対処しましょう。

  • 「User Agent Groups」の設定画面を開く
  • モバイル端末のグループの作成・有効化をするく

 
User Agent Groupsを開くには、Wordpressの管理画面から「Preformance」->「User Agent Groups」を選択しましょう。

 
W3 Total Cacheのユーザーエージェントグループ(User Agent Groups)の設定画面を開くと次の画像のようなイメージになるはずです。
レスポンシブテーマでPCとスマホの広告位置が一緒になってしまう対処方法-1

 
次にUser Agent Grooupsの設定画面で、モバイル端末のグループの作成・有効化をしましょう。
モバイル端末のグループでは「Iphone等のスマートフォン」のグループと「ガラケーなどのその他のグループ」を設定するようにしましょう。

 
W3 Total Cacheでは実はすでにモバイル端末用のグループが作成されていて、スマートフォンとガラケーのグループが無効化された状態で登録されています。
それぞれのグループを「Enabled」で有効化するだけでスマートフォンと、ガラケーのキャッシュを作成・参照してくれるユーザーエージェントグループを作成する事が出来ます。

  • high(スマートフォンなどハイエンド端末)
  • low(ガラケー等の携帯端末)

 
high(スマートフォンなどハイエンド端末)
W3 Total CacheのUser Agent Groupsの「high」グループには、スマートフォン等のハイエンド端末のユーザーエージェントがグループ化されています。

 
ハイエンド端末のユーザーエージェントグループを作成・有効化する事によって、スマートフォン等のハイエンド端末独自のキャッシュファイルを作成し、ブログにハイエンド端末からの再アクセスがあった場合にハイエンド端末専用のキャッシュファイルを参照するようになります。

 
デフォルトでは無効化されている状態なので、スマートフォンのアクセスがあった場合にHTMLやCSS、JS等の表示をサーバー側で切り替える制御がある場合は有効化しておきましょう。

 
low(ガラケー等の携帯端末)
W3 Total CacheのUser Agent Groupsの「low」グループには、ガラケー等の携帯端末のユーザーエージェントがグループ化されています。

 
携帯端末のユーザーエージェントグループを作成・有効化する事によって、ガラケー等の携帯端末独自のキャッシュファイルを作成し、ブログに携帯端末からの再アクセスがあった場合に携帯端末専用のキャッシュファイルを参照するようになります。

 
デフォルトでは無効化されている状態なので、ガラケーのアクセスがあった場合にHTMLやCSS、JS等の表示をサーバー側で切り替える制御がある場合は有効化しておきましょう。

 

 
最後までお読みいただきありがとうございました。

スポンサーリンク





 - Wordpress , , ,

Message

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

  関連記事

【Stinger5】PCで記事下に2つ横並びの広告を表示する方法
【Stinger5】PCで記事下に2つ横並びの広告を表示する方法

WordPressでブログを運営していて、Stinger5のテーマを利用している …

【Wordpress】ブログの定型文を簡単挿入! TinyMCE Templates
【WordPress】ブログの定型文を簡単挿入! TinyMCE Templates

WordPressでブログ記事を投稿していると、いつも使っている言い回しや、定型 …

【Wordpressプラグイン自作】自作プラグインをWordpressに登録し認識させる方法
【WordPressプラグイン自作】WordPressに自作プラグインを登録し認識させる方法

WordPressを使っていて、自作プラグインを作成したいと考えている人も多い事 …

【Wordpress】Head Cleanerが原因でSearch Consoleが使えない?!
【WordPress】Head Cleanerが原因でSearch Consoleが使えない?!

WordPressを使ってブログを運営している人で「Head Cleaner」を …

【Wordpress】記事作成や作業を効率化するおすすめのプラグイン
【WordPress】記事作成や作業を効率化するおすすめのプラグイン

ブログをWordpressで運営している人は多いですよね。 ブログをWordpr …

【Wordpressプラグイン自作】フックに登録する関数を他プラグインの関数と衝突させない方法
【WordPressプラグイン自作】フックに登録する関数を他プラグインの関数と衝突させない方法

WordPressのプラグインを自作する上で気を付けなければいけないのが自作した …

【Autoptimize】CSSを縮小化するAutoptimizeの高度な設定
【Autoptimize】CSSを縮小化するAutoptimizeの高度な設定

AutoptimizeはWordpressのプラグインで、CSSを縮小化する機能 …

【Autoptimize】HTMLを縮小化するAutoptimizeの基本設定 初心者でも簡単!
【Autoptimize】HTMLを縮小化するAutoptimizeの基本設定 初心者でも簡単!

AutoptimizeはWordpressのプラグインで、HTMLを縮小化する機 …

【Wordpressプラグイン自作】プラグインの処理をWordpressに実行させる「フック」
【WordPressプラグイン自作】プラグインの処理をWordPressに実行させる「フック」

WordPressでプラグインを自作で開発する人にとって絶対に避けて通る事が出来 …

【W3 Total Cache】ブラウザキャッシュのメディアファイルとその他のファイルの設定
【W3 Total Cache】ブラウザキャッシュのメディアファイルとその他のファイルの設定

W3 Total Cacheのブラウザキャッシュでは、画像や動画、音声ファイルと …