モバイル表示の不具合と画像拡大に対処する
モバイル表示でアドレスなどが改行されない
最近、運営サイトをモバイル（スマホ）で見ると横にスライドすることが判明しました。これまで気がつかなかったが、ずーとそうだったようです。
その後、特定のページでのみ問題が発生しているのが判りました。しかし、どこに原因があるのか、それがまったく見当がつかなかった。
いくつか該当しそうな件名で検索すると、urlアドレスの表記がモバイルでは、改行されずに突き抜けていることが原因と判りました。
PCでは問題なく改行されていたので気がつきませんでした。
＜urlエンコードされた長いタイトルを改行する＞
モバイルでurlエンコードされた長いアドレスなどを改行するには、以下の様なコードをCSS（スタイルシート）に追加する必要があるようです。
#the-content p {
word-wrap: break-word;
}
上記プロパティを適応したところ、モバイルでもちゃんと改行されるようになりました。ちなみに、CSSのbodyの部分に追加記述しました。
＜当サイトの参考例＞
※このようにモバイルでもurlアドレスの表記が改行されるようになりました。これでモバイルで横にスライドすることはなくなりました。
参考：本文投稿で、全角数字だけ入力すると改行せずに枠を突き抜けて行く
ワードプレスの拡大画像、スライド
当方は、これまで拡大画像は利用していませんでした。最近、引用でない画像（自主または利用許諾の画像）が多くなったので、拡大画像、およびスライドなどを活用してみようと思いました。
画像拡大、スライドを実装するプラグイン「baguetteBox.js」
ワードプレスには、便利なプラグインという機能があり、さっそく画像拡大のプラグイン「baguetteBox.js」を導入してみました。ちなみにこのプラグインは、スマホにも適応していると解説にありました。
しかし、導入後の当初はうまく機能しませんでした。画像拡大はするが、閉じるのボタンが表示されない、またスライドにもなりませんでした。
その後、他のプラグインが原因と判明し、プラグインをひとつずつ停止して確認したところ、当方の環境では「WP deferred javaScript」という表示速度を早くするプラグインが干渉していたようです。
このプラグインを停止したところ、画像拡大の閉じるボタンもスライドも表示できるようになりました。
上記プラグインを停止したあと、表示速度が遅くなったのかどうかは、判断しにくいです。元々、現在使用しているテーマ「Simplicity」は遅いということです。したがって、表示速度は気にしないことにしました。
ちなみに速度を早くするなら、サーバーを変えるのが手っ取り早いそうです。
とにかく、なにかの機能を追加して不具合があった場合、キャッシュの削除か、プラグインの干渉を確かめてみるのがいいそうです。
＜参考例／以下の画像のどれでもクリックすれば拡大、スライドになります＞
※「baguetteBox.js」設置方法は、以下の記事を参照ください。
※なお、テーマ「Simplicity」を利用する場合は、すでに実装されています。
参考：スワイプ対応の画像ポップアップを実装できるJavaScriptプラグイン「baguetteBox.js」。WordPressでの使い方。
モバイル表示のヘッダー画像下の空白を修正する
モバイル表示時に、ヘッダー画像下にわずかにグレーの部分がありました。PCではなかったのですが、なぜかモバイルでは表示されていました。
あまり気にもしなかったのですが、その原因が判明したので修正しました。
どうやらbody（記事投稿の部分）とヘッダーのマージン（余白）をモバイルでは調整する必要があったようです。以下の様な記述をCSSに追加（bodyの部分）したところ、余分なグレーの表示はなくなりました。
@media (max-width: 30em) {
#body {
margin-top: 0;
}
}
＜当サイトの参考例＞
※ヘッダー画像の下にあったグレーの部分は表示されなくなりました。
ブロックされたリソースの解除
最近、姉妹サイト「パスワードは一万年愛す」のサーチコンソール（旧ウェブマスターツール）で、「ブロックされたリソース（要素）」というものが、700ページ以上あるのが判明しました。
サーチコンソールの詳細を、あまり見ていなかったので気がつきませんでした。ダッシュボードに表示されるクロールのエラーには、robots.txtの取得エラーはありませんでした。どうもそれとは違う種類の内容らしい。
「ブロックされたリソース（要素）」とは、検索用にページをレンダリングするGooglebotが、ブロックされたことをいうようです。
そのブロックを解除するには、robots.txtのファイルに特定の記述を追加すればいいと、あるサイト（以下リンク先）に書かれていました。
さっそく、あるサイトに書かれていた記述を追加したrobots.txtのファイルをFTPにアップしました。あとは、クロールされるのを待つばかりです。これで修正されるのか、疑心暗鬼ではありますが、とにかく待つしかありません。
ちなみに、robots.txtのファイルを作成していない場合は、それを新規作成し、FTPに設置（アップロード）する必要があります。当方は、以前に作成しすでに設置済みでした。（それを忘れていましたが…）
新たに記述した内容は、以下の通りとなります。
＜新規robots.txtのファイル＞
User-agent: *
Disallow: /wp-includes/
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php
Allow: *****************/*.js$
Allow: *****************/*.css$Sitemap: サイトURL/sitemap.xml
上記の意味は以下のとおりです。
User-agent: *
Disallow: /wp-includes/→事故を起こすような脆弱性が発見！アクセスを制限しまーす！
Disallow: /wp-admin/→管理画面には入っちゃダメ！
Allow: /wp-admin/admin-ajax.php→でもadmin-ajax.phpはプラグインで使っている物があるからアクセス制限しないでね
Allow: *****************/*.js$→JavaScriptはOK！
Allow: *****************/*.css$→CSSもOK！
（空白）
Sitemap: サイトURL/sitemap.xml→サイトマップもよろしく！
「ブロックされたリソース（要素）」は、グーグルの検索順位に影響があるようなので、気になる方は「robots.txtファイル」を修正した方がいいかもしれません。
なお、ほっといてもいいという意見もネットにはちらほらありました。
上記内容は、あくまで経験の浅い人に向けての情報です。運営経験の豊富な人には、あまり意味がないと思います。
どこかで、当方とおなじ問題に遭遇している人がいるかもしれない。そのように感じて対処の仕方を公開しています。なお、使用しているテーマによっては、効果がない場合も考えられます。ご了承ください。
冒頭画像：ワードプレス・ロゴ
引用：http://farm5.static.flickr.com/4099/4919659112_70f8836dfa.jpg
コメント