「CSS」タグアーカイブ

wordpressのキャッシュを制御できるプラグイン「WP Super Cache」の設定項目解説

wordpressのキャッシュ系プラグインは数多ありますが、今回は「WP Super Cache」を導入してみました。設定について調べたい所ですが、探せど探せど詳しい説明が無いので軽くメモっておきます。

キャッシュ系プラグインは便利な反面設定を間違えると思わぬ事故に繋がりますので、「推奨」とついているからと全てをオンにするのは得策ではありません。ましてやそれで「何か不具合が出る」や「購入情報が表示される虚弱性がある」というのはちょっとどうなんでしょう。

簡易、詳細、プリロードだけを書いていくので、それら以外の設定を知りたい人は今回はごめんなさいという事で。

簡易

設定に必要な最初のページです。 キャッシングを使用するかどうか、そして生成されたキャッシュが正しく動作しているかを確認する事ができます。

詳細

動作に関しての細かな設定をここで行います。

キャッシング

ヒットしたページをキャッシュし、素早くアクセスさせる。 (推奨)

ページにアクセスした時点で有効期限が切れている、もしくはキャッシュが無い場合はキャッシュを作成し、利用者に見せます。

このチェックをオフにしていると、一番新しいキャッシュを見せます。有効期限が切れている場合、キャッシュは利用せず通常の出力結果を見せるようになります。

キャッシュファイルの提供に mod_rewrite を利用する。 (推奨)

mod_rewriteはリダイレクト機能ですが、おそらくキャッシュした静的ファイルへとクライアント誘導するのだと思われます。サーバーによっては利用できない場合があります。

キャッシュファイルの提供に PHP を利用する。

キャッシュファイルをphp関数によって出力するようになるようです。

レガシーなページキャッシング。

レガシーというのは一般的なファイルキャッシュという意味でしょうか? この中では一番遅いようです。

その他

ページを圧縮し、訪問者により速くページを供給する。 (推奨)

ファイルを圧縮(gzip)?して送信しているようですね。特に理由も無い限りはONにしたほうが良いでしょう。ソースに「<!– Compression = gzip –>」と出るので間違いないかと思われます。

304 Not Modified ブラウザーキャッシング。最後にリクエストされてから変更がないことを示す。 (推奨)

そのページが更新されていない事を伝えます。キャッシュファイルで、元ファイルは更新されていない事を証明するんですかね?

既知のユーザー向けにはページをキャッシュしない。 (推奨)

wordpressにユーザー登録されている(ログインしている)ユーザーにはキャッシュページを表示しないようにします。

Don’t cache pages with GET parameters. (?x=y at the end of a url)

URLにパラメータを含めてきた人へのキャッシュもするかどうか。普通はオフで良いと思います。パラメータを使ってwordpressサイトを作る人は導入を考えても良いかもしれません。検索などのページもキャッシュするのかな?(未検証)

Make known users anonymous so they’re served supercached static files.

ログインしたユーザーがページを表示するとキャッシュを作成します。

オフの場合「<!– Page not cached by WP Super Cache. Check your settings page. Not caching requests by known users. (See Advanced Settings page) –>」
オンの場合「<!– Cached page generated by WP-Super-Cache on 2014-03-08 00:00:06 –>」

お好みでどうぞ。

キャッシュリビルド。新しいファイルの生成中にこのサイトの登録ユーザー以外のユーザーに supercache のファイルを供給する。 (推奨)

ちょっと意味がよくわからない所ですが、キャッシュを再構築してる間は、supercacheという別途静的ファイルを供給するようにする、という所でしょうか。もしくは通常ページを見せる、かな?推奨とあるのでチェックをつけてた方が良いのかな。謎翻訳すぎて、わざわざ原文を覗いてみましたがわからなかったですぅ。誰か教えて。

追記1:おそらく後述するプリロードしたファイルをユーザに見せ、キャッシュ生成→記事表示ではなく、事前キャッシュ→記事表示&キャッシュ生成とするものだと思われます。

Proudly tell the world your server is Stephen Fry proof! (places a message in your blog’s footer)

フッターに誇らしげなメッセージを表示しちゃうぜ! という事らしいです。感謝の気持ちにどうぞ?

詳細

Enable dynamic caching. Requires PHP or legacy caching. (See FAQ or wp-super-cache/plugins/dynamic-cache-test.php for example code.)

phpもしくはレガシーキャッシュのための動的キャッシュを行うらしいです。FAQもしくはサンプルコードを見ろ、との事のようですね。キャッシュする関数や記述などを細かく設定する事ができるようです。細かなカスタマイズしたい人にはこれは嬉しいですね。

Mobile device support. (External plugin or theme required. See the FAQ for further details.)

携帯デバイスのサポートをするそうです。私のサイトは基本的にレスポンシブデザインで、携帯電話(ガラケー)のサポートは鼻から度外視なので切っています。

Remove UTF8/blog charset support from .htaccess file. Only necessary if you see odd characters or punctuation looks incorrect. Requires rewrite rules update.

.htaccessファイルからUTF8 charsetサポート記述を削除します。

Clear all cache files when a post or page is published or updated.

ページもしくは記事が、公開もしくは更新された場合に全てのキャッシュを開放(削除)します。

追加のホームページチェック。(非常にまれにホームページのキャッシングを止めることがあります) (推奨)

またもや謎翻訳。原文は「Extra homepage checks. (Very occasionally stops homepage caching) (Recommended)」です。余分なホームページチェック・・・という事でしょうか。よくわからないです。推測になるのですが、キャッシュを作成するときに、別ページのキャッシュも作成するのでしょうか。推奨とありますし。

コメントが投稿されたときに該当のページだけリフレッシュする。

これがオフだと、コメントされてもキャッシュが更新されないようです。何故オン推奨じゃないのでしょうか。

 

キャッシュされた最新のページを一覧表示する。

キャッシュファイルを一覧で見る事ができるようです。設定を変更した場合などに動作確認がしやすくていいですね。

・・・しかしもうちょっと情報が欲しいかもw

荒削りなファイルロック。おそらく必要ないですが、使用しているサーバーが非力な場合には役に立つかもしれません。警告 ! まれにですがサーバーを止めてしまうことがあります !

キャッシュファイルをロックするんですかね。非力なサーバーで、同じキャッシュファイルを同時に生成しようとした場合などのエラーを回避できるのだと思います。サーバーを止めてしまうという文章ですが・・・。

遅延 init。WordPress が読み込んだ後にキャッシュされたファイルを表示します。レガシーモードで有益です。

wordpress自体の処理が終わってからキャッシュファイルを読み込むという事ですかね。先のキャッシュカスタマイズと絡めて使うのかもしれません。

キャッシュファイルの保存にオブジェクトキャッシュを使用する。 (実験的) DO NOT CACHE PAGE secret key: hogehoge

ファイルキャッシュではなくオブジェクトキャッシュを利用する設定ですね。キャッシュをしないページにはシークレットキーを表示しろとの事です。

有効時間とガーベージコレクション

Cache Timeout

キャッシュの有効時間を設定します。この時間の間はそのキャッシュを利用し続けます。ページ更新頻度と相談して設定してください。秒設定ですね。一時間=3600 一日=86400 一週間=604800 参考にどうぞ。

Scheduler

キャッシュを削除するタイマーを設定するスケジューラ。キャッシュファイルが有効期限を過ぎると、すぐに削除されるわけではなくこのタイマーによって捨てられます。例えば大規模なサイトだと60秒でキャッシュを設定しつつ、90秒でこのタイマーを設定する必要があるようです。デフォルトでは一週間周期で削除するようですね。サイト規模に合わせて決めて下さい。また、キャッシュファイルを削除しない場合はタイマーを0秒に合わせて下さい、とのことです。

スケジュールの予定時間も表示してくれるのでとっても親切。

受け付けるファイル名と除外する URI

チェックをつけた項目はキャッシュしません。「検索」は大体毎回内容が異なると思いますのでチェックをつけてて良いかと思います。あとは運用しながら「記事を書いても○○ページは更新されないな」といった場合につけていけばいいかなと思います。

フロントページとホームページはちょっと違うので注意が必要です。フロントページとは「hoghog.com/」で表示される場所ですね。ホームページは「hoghog.com/」と「記事一覧」が表示されるページです。大抵の場合は記事一覧とhoghog.com/は同一なので問題ありませんが、固定ページをトップに表示していたりする場合は注意が必要ですよ。

あとはファイルパターンですね。サイトによって細かく設定する場合もあるかもしれません。

上で指定した除外文字列にマッチしてもキャッシュするファイル名をここに追加してください。

地味に重要です。これらをキャッシュしないけれど、この条件に当てはまるこれらはキャッシュを作成する。という場合に設定しますよ。

除外するユーザーエージェント

スマフォ専用のcssなどを用意している場合はこちらでスマフォのユーザーエージェントを設定します。また、googleなどのクローラーがやってきた場合、それらのアクセスでキャッシュを一気に作っては負担が大きいので除外した方が良いでしょう。デフォルトではbot類のユーザーエージェントが入っています。

ロックダウン

いきなり大量がアクセスが来た時のための設定のようですね。有無を言わさず静的ファイルを見せるようです。基本的には無効にしていた方が良いかと思われます。

Lockdown | IT用語辞典 | 大塚商会

ダイレクトキャッシュファイル

特定のアドレスだけを指定キャッシュしてしまう設定・・・かな? 巨大なトラフィックが来た時に~とあるので、おそらくページを丸々静的ファイルに書き出しちゃうのだと思われます。

プリロード

予めキャッシュファイルを用意しておき、botなどにはこのキャッシュを見せるようです。「Super Cache の静的ファイル」とあるので、先の「詳細」で設定したユーザー閲覧で生成されたキャッシュとは別のファイルを作っておき、botなどがやってきてキャッシュが作成されてなかった場合はwordpressによる素の表示ではなくこのファイルを見せるようですね。なるほど。

こちらの時間を「一週間」として、通常キャッシュの有効期限を「一日」とかにするのは良い感じに動作するのではないでしょうか。

当然のことながら、単純計算キャッシュファイルを二倍くらい使うのでは無いかと予想します。

プリロードされたキャッシュファイルは 分毎にリフレッシュされます。(0 にすると無効、最小 30 分)

プリロードする場合はこちらを30分以上に設定しましょう。

プリロードモード (レガシーなキャッシュファイルに対してのみガーベージコレクションを実行。推奨)

古いキャッシュファイルを削除する設定、ですかね。ガーページコレクションで設定したスケジュールで削除してくれると思います。

Preload tags, categories and other taxonomies.

タグやカテゴリーなどのタクソノミーページもプリロードします。

ファイルリフレッシュ時にステータスメールを送信する。

メールで状況を報告してくれます。

.htaccessでのjavascriptキャッシュの有効期限が上手く設定できない時の対処

タイトル長いですね。

色々と高速化に向けてサイトを弄っていたのですが、ついに「.htaccess」に手を出そうと思います。サイトには色々なファイルがあり、それらのキャッシュ有効期限や圧縮設定などを記述できます。

普通ならばFTPでファイルをあげたり編集したりという作業が必要なのですが、wordpressは便利ですね。ブラウザ上から編集する事が出来ます。

私は「Yoast WordPress SEO」を利用して編集しました。SEOに関する細かい設定をする事ができるプラグインですよ。とってもお勧めです。

さて、「.htaccess」の記述についてですが、こちらを参考して設定させて頂きました。→WordPressサイト用の.htaccess例 | dogmap.jp

ほとんど同じ内容なので、早速本題に入りましょう。

ちゃんと設定したのに、javascriptのキャッシュが設定されない!

ご覧のように一秒になってます。なんでじゃ。なんでなんじゃ。1秒といったらほとんど意味無しですね。ファックです。

 

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>

キャッシュ設定はこんな感じです。上記サイトの物をそのまま頂きました。デフォルト設定である「1 seconds」が設定されてて「text/javascript」はスルーされているように見えますね。

解決方法ですが、こちらにありました→ExpiresByType が JavaScript に対して効かない? | Web Design Leaves

探してみる物です。ありがとうございます。なるほど、こういう記述方法でいけるわけですね。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"

ExpiresByType text/js "access plus 216000 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"

ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>

修正したものがこちらです。javascriptの所を改行してあります。

設定できてます!! 良かった良かった。

スコアもかなり良い感じ。

 

「head creaner」と「Yoast WordPress SEO」の併用は気をつけてっ

どちらもwordpressのプラグインです。「head creaner」はページの<head>部分を整理するプラグイン、「Yoast WordPress SEO」がSEOに関するプラグインです。どちらもとても素敵なプラグインなのです。この二つのプラグインについては、あまりに有名で丁寧に解説しているブログが沢山あるのでそちらにお任せしますよ。

設定によっては競合するというお話です。

「Yoast WordPress SEO」の「Force rewrite titles」のチェックは外すようにしてください。head creanerが動作しなくなってしまいます。

チェックをオンにした場合

コメントタグで「Yoast WordPress SEO」が動作している事がわかりますね。

次にオフにしてみます。

head cleanerのキャッシュファイルであるcssへとリンクしているのが分かります。

解決してみればなあんだという感じですが、かなり焦りましたよ・・。

ちなみに、head cleanerを使った場合とそうでない場合のスコアをみてみます。

使うのは→PageSpeed Insights

head cleanerオフ

head cleanerオン

恐ろしい違いですね・・・。

それでは、皆さんも気をつけてくださいねー

css – Text-Shadowによる文字デザインのカスタマイズ記事まとめ part1

CSSカスタマイズによる文字装飾の記事は各所で上がりますが、後々探すのが大変なので自分のためにもよく使わせて貰う記事をまとめます。


Using CSS Text-Shadow to Create Cool Text Effects

Using CSS Text-Shadow to Create Cool Text Effects
he CSS3 text-shadow property has been around for some time now and is commonly used to recreate Phot …


css3のtext-shadowによるテキスト装飾のサンプル集 – かちびと.net

css3のtext-shadowによるテキスト装飾のサンプル集 – かちびと.net
たまに使うので自分用にメモします。 css3のtext-shadow等を使用した テキスト装飾のサンプルコードの 備忘録です。工夫すればいろいろ と作れるんでしょうけど、とりあえず よく使うものをピッ …


自由自在!CSS3のtext-shadowを使ってをロゴ作ってみる|Webpark

自由自在!CSS3のtext-shadowを使ってをロゴ作ってみる|Webpark
CSS3のtext-shadowが面白そうなので個人的に色々ロゴを作ってみました。想像力が膨らみますね。 text-shadowの基本的な使い方はこのようになります。 …


text-shadowサンプル – unpco

[CSS3]text-shadowサンプル – unpco
今回はよく使うCSS3のtext-shadowの小技を紹介しますよ。 気に入ったのをコピペで使ってください。 IEは適応外なので、この内容は他のブラウザで見てください。IE10は採用されるらしいです …


コピペでOK、text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ | コリス

[CSS]コピペでOK、text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ | コリス
画像は無し、数行のスタイルシートを加えるだけでテキストにさまざまなスタイルを与えるデモを紹介します。 …


エレガントからレトロまで、text-shadowを使った美しいエフェクト集 | コリス

[CSS]エレガントからレトロまで、text-shadowを使った美しいエフェクト集 | コリス
text-shadowを使った美しい4種類のエフェクトを紹介します。 エフェクトはCSSのみで、もちろん画像は使っていません。 …

IEの対応なんてハナっからする気なし!「ie-owakon」で楽々と他ブラウザへ誘導

コードをコピペするだけでIE8以下で閲覧したときに警告を表示する『ie-owakon』を作りました | SANOGRAPHIX

IE向けにページを組むのは結構大変です! IE7までCSSがまともに使えない上に未だにIE6がうようよいやがるぜ!!!

とまあ、今ではtwitterですらちょっと前のIEで閲覧すると表示が崩れます。そろそろIEから乗り換えちゃいなよべいべー!! という感じで、IEの対応を最初からする気がないページを私もいくつか作ってきました。

さすがにこのブログではやっておりませんが、aoringo toolsで取り扱っているwebツールではIE8以下で閲覧すると警告が出たりします。

その警告の元が上記サイト様。オワコンちゃんかわいい!! イラストをそのまま載せるのはなんとなくはばかられたので置いてませんが、かわいいんだよね、オワコンちゃん。

デモページは↓

IEはオワコン!

IE以外のブラウザで見るとただの文字列ですが、IEで見ると、

オワコンちゃんが出てきます! かわいい!

ソースはリンク先で配布されていますが、IE10では「 <!–[if IE]>」が仕様変更でただのコメントとして扱われるようになりまともに動作しません。

なのでメタタグに

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

を追加する事によってIE9のシミュレーションをして表示させることができます。

IE10はCSSとかもある程度できるのでIE10までオワコンする必要はないと思うのですけれど、皿まで憎い人はやっぱりいるわけですよね!!

ちなみに私は特に気にせず実装しちゃう畑なんでわりとどうでもいいです!

CSSでサイトの印刷範囲を指定する

後で印刷して自分で読んだりする場合。余計な部分がついてきて無駄に紙を使うのは勿体ないし、そんな不便を万が一見ている人にさせるのは忍びない。

というわけでCSSでささっと掃除します。

今の状況はこんな感じ。

ツイートボタンとかがまあ、邪魔ですが、印刷する分にはこれぐらいどうってことない・・・んですが、ページをめくっていくと。

こうなっているわけですよ。邪魔ですよね。ページ、嵩みますよね。

印刷範囲を指定するcssを以下の通り。

@media print{
  #head{display:none;}
}

印刷する場合のそれぞれのCSS要素をここで指定してあげれば、かなりキレイになります。

すっきりかっちり。

/*印刷範囲指定*/
@media print{
  #zenback_loady{display:none;}
  #zenback{display:none;}
  #comments{display:none;}
  #site-description{display:none;}
  .menu{display:none;}
  .googlead{display:none;}
  #breadcrumb{display:none;}
  #side{display:none;}
  .social4i{display:none;}
  #main{width:100%; float:none;}
}

最終的な形はこういう感じになりました。コメント欄や、広告の表示を消して、メインを全体的に表示できるように。

これで印刷するときも気をつけなくても良くなりましたね。やったぜ!

html – testhtml – demo用などの単発htmlファイルテンプレート

スニペット

<!DOCTYPE html>
<html>
 <head>
 <title>test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="viewport" content="width=620px" />
 <style type="text/css">
 <!--
 #wrap{
 background-color: gray;
 -->
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
 /* jQuery v1.3.2が読み込まれているか確認 */
 $(function(){
 /* 例1 */
 if(jQuery){
 $("#res1").html("<p>jQueryは読込まれています。"+jQuery+"</p>");
 }

/* 例2 */
 if (typeof jQuery!="undefined"){
 $("#res2").html("<p>jQueryは読込まれています。typeof jQuery="+typeof jQuery+"</p>");
 }
 });
 </script>
 </head>
 <body>
 <div id="wrap">
 <div id="res1"></div>
 <div id="res2"></div>
 </div>
 </body>
 </html>

jqueryが動作してるかのチェックも同時に行う。cssもheadに直接ぶちこむ。

TRPGのリプレイに最適なCSSスタイルを考える

タイトル通りです。

CSSってのは、HTMLの見た目をエレガントにカッチョウヨクデザインする事の出来る特別な文法であります。この機会に勉強するのもよいでしょう。

この記事では、CSSはある程度理解しているという前提に立ち考えていこうかと思いますよ。

pre か p か dl か。

まずどのHTMLタグを使用してデザインをするのか、選定をしていかないといけませんね。

テキストをそのまま持って来るという意味で、一番簡単なのが「pre」タグです。

<pre>
改行なんかも気にせずいけるもんね
わーいわーい
</pre>

brタグなんかを利用しなくてもそのままコピペでいけちゃいますね。ただ、問題点もあります。

それは各行のデザインをする事が出来ないということ。無難なテキスト丸出しなのでションボリーにな感じになりがちです。

二つ目、「dl」タグです。これは辞典などの項目に用いられますね。

<dl>
 <dt>PC1</dt>
 <dd>あいうえお</dd>
</dl>

こんな感じです。見出しと内容でこのように分かれてくれるの比較的見やすい形になるし、CSSでスタイリングもしやすいです。

が、htmlタグを見ての通り、それぞれの項目をタグで包む必要があるので面倒くさいという点があります。

そんなわけで、今回私は「p」タグを利用することにしました。

このブログを作るのに利用されている「wordpress」では、普通に文章を打てば、吐き出されるhtmlデータは全て「p」タグで囲われているのです。

これを利用しない手はありません。

実際にデザインしていく

とはいっても特に難しい事は考えません。見やすい文章になるように細かく調整していくだけです。

<div class="replay">
 <p>PC1:テスト</p>

<p>GM :テテスト</p>

<p>
 PC1:テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>

<p>GM :テ、テスト</p>
</div>

利用するテキストはこんな感じ。div.replayに囲まれた物のみに適応される形ですね。

素のままだとこんな感じ。

まず横幅を大体600pxにします。これは、横長になりすぎるとそれだけでストレスになる場合があるからですね。

読みやすい!

しかし折り返された文章が名前と被って読みづらい気もします。

そこで。

「text-indent」と「padding-left」を使用します。

text-indentは文章の一行目だけをインデントします。

p{
 text-indent:1em;
}

これで、

こんな感じになるわけですね。

じゃあこうしてみると?

p{
 text-indent:-3em;
 padding-left:3em;
 }

こんな感じで二行目以降にインデントする事が出来るわけですね。

他にも色々と装飾を乗っけて、見やすいTRPGリプレイを目指してみて下さいね。

軽く修正してみて最終的にはこんな形に。

<style type="text/css">
 body{
 max-width :600px;
 margin :0 auto;
 }

p{
 margin :0;
 text-indent :-4em;
 padding :10px 0 10px 4em;
 border-bottom :1px dotted gray;
 font-size :12px;
 font-family :monospace;
 }
 </style>

今回のデモは↑より。

また、aoringo worksではIRCやどどんとふの利用により生成されたチャットログを見やすくするためのwebツールを開発しています。

aoringo CHAT logger

こちらもご利用下さいな。

php – ua_flag – スマートフォンでの処理を変える

スニペット

$ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($ua, 'iPhone') === false) && (strpos($ua, 'iPod') === false)  && (strpos($ua, 'iPad') === false)&& (strpos($ua, 'Android') === false)) { //スマートフォンではなかった場合
}

ユーザーエージェントを取得し、その内容によってその後の処理を変更する。

cssや画像の大きさなどを差別化する場合によく使う事になる

スマフォでのブログ表示が崩れていたので見ている端末によって表示を変えるようにしました

はじめに

ぴゃああああー!!

実は今まで、このブログの見た目になってから主にappleのスマート端末にて表示が崩れている問題を抱えていました。解決がめんど時間を中々見つけられず今まで放置しておりましたが、今回手を加えることにしました。

閲覧している端末を識別して処理を変える

どうやら問題はスライダーにあるようでした。pcでの閲覧には特に問題ないのですが、スマートフォンなどで閲覧すると、スライダー部分の黒が下まで伸びちゃうんですね。JavaScriptの処理周りで不具合があるようです。

そもそもスライダー自体が画像を多用する関係上、野外で使用するであろうスマートフォンでの閲覧には負荷が高めです。スライダー、無くしちゃいましょ。

ユーザーエージェントによってPCとスマートフォン(iPhone / Android)を振り分ける方法いろいろ(PHP / JavaScript / .htaccess等) | HTML5 – CSS3 mag

こちらのphpでの処理を参考に、「PC閲覧での表示の場合のみスライダーを表示」という形にしてみました。

  <?php
  if (is_front_page()) { //トップぺージだった場合
  $ua = $_SERVER['HTTP_USER_AGENT'];
  if ((strpos($ua, 'iPhone') === false) && (strpos($ua, 'iPod') === false) && (strpos($ua, 'Android') === false)) { //スマートフォンではなかった場合
  ?>

こういう感じです。

iphone、ipad、android、それぞれのユーザーエージェントでは無かった場合、PC用のスライダーを表示します。

お手軽ですね。

しっかりばっちり!!