comments trackbacks you may also like

スマートフォンでFC2ブログ閲覧中に突然Webページが表示されなくなる原因は⁈

2020年01月19日
#FCブログ #FC2ブログカスタマイズ #FC2ブログ表示されない #ブログ日記 #Swiperの使い方 #Swiper #スライダー不具合 #ブログカスタマイズ失敗談 #ブログ運営 #Webデザイン

スマートフォンでFC2ブログ閲覧中に突然Webページが表示されなくなる原因は⁈ FC2ブログカスタマイズ日記 ゆうらりHappySmile


こんにちは! FC2ブロガーM@yulari_happy )です。いつも当ブログにお越しいただきありがとうございます。


ブログデザインカスタマイズが好きな僕にとって、ブロガーさんのブログに施したさまざまな工夫を見るのは楽しみのひとつになっています。


しかし、カスタマイズと言っても、上手くいって満足したと思ったら、ずっと不具合が発生していたのを気付かずそのままにしていたなんてことがあるものです。


そこで今回は、通常のエラーチェックだと気付きにくいブログカスタマイズの失敗談を。ブログをスマートフォンで見ていたら、思わぬアクションがきっかけで不具合を発見した、という話しを書きたいと思います。

スマホでブログを閲覧していたら突然、何も表示されなくなった!

横になりながら、スマートフォンで自分のFC2ブログを見ていた時のこと。 スマホって、画面表示を縦向きにロックしておかないと、ちょっと向きが傾くだけで画面表示が縦向きから横向きに切り替わったりしますよね。の画像

横になりながら、スマートフォンで自分のFC2ブログを見ていた時のこと。


スマホって、画面表示を縦向きにロックしておかないと、ちょっと向きが傾くだけで画面表示が縦向きから横向きに切り替わったりしますよね。


さらに、ブログを下にスクロールしようとスワイプしたつもりが、拡大表示されてしまうこともあります。


そんな時のことでした。画面が拡大表示されたあと、「問題が起きたため、このWebページを再度読み込みました」というメッセージが出てページに何も表示されなくなったのは(汗)


アレ?」と思いつつ、気になった僕は、何度も同じことを繰り返してみました。すると、スマホ画面ピンチアウト(指2本で画面をタッチし、指幅を広げる動作のこと)してブログを拡大表示させたら、何度やってもエラーが起きて何も表示されたくなる不具合に気付いたのです。

iPhoneのSafariで「問題が起きたため、このWebページを再度読み込みました」のエラーメッセージが出た原因は⁈

ちなみに、僕のスマートフォンはiPhone。Webを閲覧する時は主にSafariを使用しています。自分のブログを見ている時に「問題が起きたため、このWebページを再度読み込みました」のようなメッセージが出て、ページに何も表示されなくなる場合の原因。最初は、iOSデバイスをアップデートしたせいか?と思いました。しかし、そうではないらしい。なぜなら、他のサイトを見ても、このようなエラーメッセージは表示されないからです。そこで、いろいろと調べてみたところ、自ブログのレスポンシブデザインに何らかの不具合が発生しているのだと判明しました。エラーメッセージの正体は、少し前に設置したCUBE状の3Dスライダーが原因だったのです。の画像

ちなみに、僕のスマートフォンはiPhoneWebを閲覧する時は主にSafariを使用しています。


自分のブログを見ている時に「問題が起きたため、このWebページを再度読み込みました」のようなメッセージが出て、ページに何も表示されなくなる場合の原因。最初は、iOSデバイスをアップデートしたせいか?と思いました。


しかし、そうではないらしい。なぜなら、他のサイトを見ても、このようなエラーメッセージは表示されないからです。


そこで、いろいろと調べてみたところ、自ブログのレスポンシブデザインに何らかの不具合が発生しているのだと判明しました。


エラーメッセージの正体は、少し前に設置したCUBE状の3Dスライダーが原因だったのです。

【FC2ブログカスタマイズ 2019】締め括りにCUBE状の3Dスライダーを設置!

こんにちは! FC2ブロガーのMです。昨日は突然、ブログに異変が起きました!僕は、FC2ブログのトップページに カルーセル スライダー を設置しています。ところが、記事を1つ更新した直後から、まったく動作しなくなったんです( ̄O ̄;)何かテンプレートをいじくった訳でもないのに、ナゼ?!いろいろと調べてみたところ、どうやらhtmlに記述したJavaScriptが動作してないようです(汗)しかし、何もいじってないのですから、原因は...


スポンサードリンク

Swiperの不具合がレスポンシブデザインに悪影響

FC2ブログに設置したSwiperのキューブ状の「3Dスライダー」が原因で、スマートフォンで突然Webページ閲覧中に何も表示されなくなった!の画像


この、jQueryも不要で簡単にスライダーが設置できるという、僕のブログに設置したスライダーは、「Swiper」というWebサイトのオンラインツールを使いました。


Swiperの使い方流れとしては以下の通り。


  1. Swiper.jsのファイルをCDN経由で読み込む。
  2. スライダーのhtmlを記述する。
  3. CSSを指定する(最低限必要な設定はwidthheightだけなので非常に便利です)。
  4. スライダーを生成するJavaScriptを記述する。

CSSは、必要最低限で済むのがSwiperを使うことのメリットなので、僕自身もそれに任せていました。


ところが、Swiperも万能というわけではないようです。さまざまな端末の画面サイズにはレスポンシブ対応しているようですが、スマホ画面をピンチアウトして、Webを拡大表示させた時までのことは想定してないんですね(汗)

W3CチェックでもわからないWeb技術の不具合は起こり得る

ブログを閲覧中に、Web画面を指で拡大表示する人がどれくらいいるのかは分かりません。しかし、もしそれをやったらWebページが何も表示されなくなるのは問題ですよね。たまたま、スマホでWebページを閲覧していた時の誤操作をきっかけにして見つけた不具合。W3Cのエラーチェックでも警告が出ないため、ヘタをすれば不具合に一生気付かない恐れもありました(汗)とりあえず応急処置として、不具合の生じない初期バージョンのスライダーに戻しました。ブログの不具合って、W3Cなどのエラーチェックだけでは気付かないような問題も起こりうるんですね。何かブログにカスタマイズを施した時は、スマートフォンでWebページを拡大表示させたりしてチェックする必要もありそうです。の画像


ブログを閲覧中に、Web画面を指で拡大表示する人がどれくらいいるのかは分かりません。しかし、もしそれをやったらWebページが何も表示されなくなるのは問題ですよね。


たまたま、スマホでWebページを閲覧していた時の誤操作をきっかけにして見つけた不具合。W3Cエラーチェックでも警告が出ないため、ヘタをすれば不具合に一生気付かない恐れもありました(汗)


とりあえず応急処置として、不具合の生じない初期バージョンのスライダーに戻しました。


ブログの不具合って、W3Cなどのエラーチェックだけでは気付かないような問題も起こりうるんですね。


何かブログにカスタマイズを施した時は、スマートフォンでWebページを拡大表示させたりしてチェックする必要もありそうです。

この記事、おもしろかったわ。
気に入ったらどしどしシェアしてね♪
\Thanks/

【ランキングに挑戦中】

いつも応援クリック↓
ありがとうございます

にほんブログ村

関連記事
M
この記事を書いた人: M
ブロガー/FC2公式おすすめブログ認定/企業家/投資家/Fashion研究家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/人生なんて気持ち次第‼︎きっと何くるないさ〜(´ー`)
FC2ブログオフィシャルおすすめブログ認定バナー日本ブログ村 プロフィール
iconiconiconicon

この記事が気に入ったら
いいねとシェアしよう!

data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事はコチラ!
未分類 (0)
シン・胃がん闘病記 (45)
┣  AVANT:癌の余命宣告~共存 (32)
┗  セントラルドグマ:父親の胃癌 (13)
胃がん闘病記録まとめ (85)
┣  ステージ3B-多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (27)
胃がん-Stomach_cancer (5949)
┣  胃がんブログ (285)
┣  よりぬき胃がんブログ (16)
┣  胃がん闘病記-日記 (5586)
┣  酒場放浪記 (10)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (36)
┗  がん治療のクラウドファンディング (10)
がんのこと-ガン情報全般-cancer (560)
┣  がんブログ (325)
┗  がんニュース (235)
胃がん障害年金ブログ (71)
┣  障害年金-準備編 (23)
┣  障害年金-審査から年金受給まで (12)
┣  障害年金-審査請求-不服申立 (26)
┗  障害年金-再審査請求 (10)
Amazon (157)
┣  Amazonセール (3)
┗  Kindleセール (153)
おもしろグッズ (11)
今日のエッセイ (141)
ニュース-芸能-話題 (859)
┗  転職-キャリアアップ (21)
占い-心理テスト (6)
恋愛-人間関係 (30)
終活ブログ (12)
グルメ (111)
┣  低糖質レシピ (31)
┗  お酒の飲み方 (2)
胃切除後の食事レシピ (672)
┣  ご飯-おかゆ-和食 (174)
┣  おかず (140)
┣  味噌汁-スープ (75)
┣  カレー関係 (66)
┣  パン-洋食 (63)
┣  麺類 (112)
┗  その他-簡単レシピなど (39)
ブログ (258)
┣  FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など (188)
┣  FC2ブログ日記-カスタマイズの所感など (23)
┣  GoogleAdsense-アドセンス (8)
┣  趣味や将棋のこと (31)
┗  ファッション (8)
iPhoneの使い方-アプリなど (34)
司法書士 (1)
┣  仕事-実務や登記のこと (1)
┗  事件ファイル (0)
COLLECTION (28)
┣  家電 (11)
┣  ホーム&キッチン (5)
┣  ビューティー&ヘルスケア (5)
┣  QOL改善&ヘルスケア (2)
┗  お酒 (5)