iPhoneでの表示が横スクロールが必要な表示に変わった

Simplicityの特徴 フォーラム Simplicityについての質問 iPhoneでの表示が横スクロールが必要な表示に変わった

  • このトピックには7件の返信、2人の参加者があり、最後に陸奥により10年、 9ヶ月前に更新されました。
7件の返信スレッドを表示中
  • 投稿者
    投稿
    • #31616
      陸奥凛
      ゲスト

      最近ふとiPhoneでブログを見てみたら、画面サイズがiPhoneの倍くらいの設定になってるような感じで横スクロールが必要になっていました。
      今までは横スクロールは出来ず、画面ほぼいっぱいにタイルが表示され、縦にスクロールするだけで見ていけました。
      最近プラグインを含めて全てを最新版にアップデートしましたが、その時からかもしれません。
      WPは4.3 simplicityは1.8.0です。
      プラグインは全て使用停止にして確認しましたが変わりませんでした。
      表示が変わったのはスマホ(iPhone)からだけで、PCからは問題なく表示されています。
      URLは次の通りです。 アドバイスよろしくお願い致します。
      http://bishoojyo.com

    • #31618
      Hidekichi
      ゲスト

      ちょろっと見た所(内容的にはじっくり見たい感じですが(笑))、

      bishoojyo.com/wp-content/themes/simplicity-child-thumb-list/responsive.css

      これが読み込みエラーになってました。
      見た所、内容も何も記載されてないのでエラーなのかと思ったりもします。必要なければファイル自体を削除したり(何も書いてないようなので)、必要があればインポートするなりと言う対処になるかと思います。

      エラーさえ出なければ普通に表示されるのではないかと思います。Chromeのデベロッパーツールでも一瞬範囲が広くなってから通常表示に変わるのですが、iphone実機ではそれができないのだろうと思います。

    • #31630
      アバター画像わいひら
      キーマスター

      hidekichiさんの書かれたresponsive.cssは、テーマカスタマイザーの「完全レスポンシブデザインにする」機能がオンのときに必要なファイルです。
      とりあえず、このチェックを外せば、モバイルでも普通に表示されるかと思います。

      ただ、完全レスポンシブにしたい場合は、ファイル構造を修正する必要があるかもしれません。
      子テーマをダウンロードのresponsive.cssして、解凍したフォルダ内のresponsive.cssを利用している子テーマ内にコピペしてください。

    • #31633
      陸奥
      ゲスト

      早々のご回答ありがとうございました。
      ご指摘のbishoojyo.com/wp-content/themes/simplicity-child-thumb-list/をFileZillaで見てみましたが(当方MACです)このディレクトリーにresponsive.cssというファイルはありませんでした。
      隠しファイルではないですよね。
      こちらで見たのはbishoojyo.comのディレクトリーではなくて、レンタルサーバー(sakuraserver上の/home/mutulin/www/wp/wp-content/themes/simplicity-child-thumb-list/ですが、同じですよね。

    • #31636
      陸奥
      ゲスト

      わいひらさん、ご回答ありがとうございます。
      ご指摘の通り「完全レスポンシブデザインにする」機能をオフにするとトップ画像が表示されませんでしたが、記事のタイル表示は元に戻りました。
      ただ完全レスポンシブデザインにしておきたいので、このチェックはオンで使いたいと思っております。
      ご指摘の”子テーマをダウンロードのresponsive.cssして、解凍したフォルダ内のresponsive.cssを利用している子テーマ内にコピペしてください。”の意味が今ひとつ理解できません。
      申し訳ありませんがもう少し具体的にご説明頂けないでしょうか。
      現在小テーマはstyle.cssの中の/* Simplicity子テーマ用のスタイルを書く */に続けて
      #main .entry{
      width:340px;
      height:360px;
      overflow:hidden;
      float:left;
      clear:none;
      margin:10px 10px 0 10px;
      }
      とかカテゴリー欄のフォントサイズの変更等を記述しています。
      お手数をお掛けして申し訳ありませんがよろしくお願いいたします。

    • #31638
      Hidekichi
      ゲスト

      >このディレクトリーにresponsive.cssというファイルはありませんでした。

      linkにあるのに、実物が無いのでエラーが出てるんだと思います。以下の画像参照。

      Firefoxのconsoleではリンクが貼ってあったら、ファイルは「ある」って事になってるんでしょうね。ファイルがなくても中身がないファイルを参照していると言う事なのかもしれません。

      わいひらさんが言われてるのは、完全レスポンシブではresponsive.cssを読み込む設定になってるので、そのファイルがないとダメですと言うことです。なので、その解決策に、子テーマをダウンロードしてresponsive.cssにファイル名を変えたりなどして、ファイルが読み込まれるようにしてみてはどうでしょうかと言う意味かと。
      あわせて、エラーが出ている=ファイルがないのであれば完全レスポンシブをoffにしたら、該当のファイルを読みこまなくなるのでエラーが出ないと言うことになります。
      完全レスポンシブを利用する場合は(現状でそれが無いので)ファイルを作ってくださいと言う意味かと僕は思います。

      responsive.cssは子テーマのstyle.cssとは別物で、画面をレスポンシブにするための記述が書かれてます。

      @media screen and (max-width:zzzzpx){
        //max-widthがzzzzpxの時のセレクタの処理
      }

      こんな感じのです。

      responsive.css自体は親テーマにあるので、現状でもレスポンシブになっていますが、僕が言う所のエラーってのはファイルがない事を含む諸々のエラーと言う感じなので(詳細が出ていないので原因は不明)、ひとまずファイルがないのであれば作る必要があるという感じです。

    • #31639
      アバター画像わいひら
      キーマスター

      すいません。音声入力ソフトで書いているので、入力ミスがあったようです。
      正しくは、以下のような意味です。

      子テーマをダウンロードから子テーマ(無印)をダウンロードして解凍したフォルダ内のresponsive.cssを、利用している子テーマフォルダ内にコピペしてください。

      ダウンロードした子テーマのresponsive.cssファイルを、利用している子テーマのフォルダ内にコピペするということです。

    • #31646
      陸奥
      ゲスト

      hidekichiさん、わいひらさん、ご指導ありがとうございました。
      /home/mutulin/www/wp/wp-content/themes/simplicity-child-thumb-list/にresponsive.cssファイルをコピペしたら、表示が元に戻りました。
      ちょっと私には難しすぎて仕組みがよくわかりません。こんな状態でブログをやってていいのかとも思いますが、なんとか続けたいと思います。
      これからもまたお世話になることも有るかと思います。その節はまたよろしくお願いしたいと思います。
      本当にありがとうございました。

7件の返信スレッドを表示中
  • トピック「iPhoneでの表示が横スクロールが必要な表示に変わった」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)