サポート » 使い方全般 » webサイト作成時、スマホでの表示

  • wordpressでwebサイトを作成しています。
    初心者です。

    既出でしたらすみません。
    基本的な事かもしれませんが、検索しても答えが得られなかったのでご回答願います。

    wordpressでwebサイトを作成しています。
    pc上の表示と同じように、そのままスマートフォンでも表示させたいのですがうまくいきません。
    pc上でのレイアウトや表示は問題なくされています。
    ですが、スマートフォンでプレビューすると、レイアウトがずれてしまいます。
    どうずれるかといいますと、背景画像が拡大されたまま・body内のimgやテキストも拡大されていて(比率は合っている)横にスクロールしないと見れない 状態です。

    htmlでサイト制作をした場合、スマートフォンやタブレット端末のブラウザは通常、ページ幅が固定されている場合、固定されたページ幅にフィットするよう画面を縮小して表示するように動作すると思いますが、wordpressを使用して作成したページは違うのでしょうか。
    今まで作成したサイトでwordpressで作成したページだけ、スマホ表示だとずれていました。

    違う場合何か特別な設定が必要でしょうか。
    やはり専用のプラグインが必要なのでしょうか?

    宜しくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • htmlでサイト制作をした場合、スマートフォンやタブレット端末のブラウザは通常、ページ幅が固定されている場合、固定されたページ幅にフィットするよう画面を縮小して表示するように動作すると思いますが、wordpressを使用して作成したページは違うのでしょうか。

    WordPressを使ったから、スマートフォンでの表示がおかしくなるという事は、特にないと思います。

    最終的にWordPressが出力しているHTMLとCSSの設定によって、崩れていると思います。

    サイトのURLを書き込んでいただけると、より具体的な解決方法が見つかるかもしれません。

    初めまして。

    現在お使いの環境がわからないため、一般的な回答になります。
    おそらく現在お使いのテーマが使用目的(pc上の表示と同じように、そのままスマートフォンでも表示させたい)にあっていないためと思います。
    WordPressのテーマには様々なものがあるため、スタイルシートの指定が絶対サイズ・相対サイズのものが混在しています。
    使用目的に合ったテーマやプラグインを選択・自作、またはスタイルシートを修正することで解決すると思います。

    htmlでサイト制作をした場合、スマートフォンやタブレット端末のブラウザは通常、ページ幅が固定されている場合、固定されたページ幅にフィットするよう画面を縮小して表示するように動作すると思います

    縮小表示を行っているのはスタイルシートの設定によるもので、htmlで制作を行ってもスタイルシートでのコンテンツの幅・高さの定義が絶対値指定の場合は縮小表示を行いません。
    (端末によってはハード・ソフト縮小を行うものもありますが…)

    閲覧する機器、ブラウザによって一度に表示可能な最大の幅・高さが異なります。
    そのため、画像やフォントを絶対サイズで指定していると表示可能な幅や高さを超えた場合にスクロールして閲覧することになります。
    PCと同じ表示を表示サイズの小さな端末で行いたい場合は、画像やフォントを縮小する必要があるため、相対サイズで指定しなければなりません。

    トピック投稿者 ime113

    (@ime113)

    nobitaさん、shirakobatoさん
    回答ありがとうございます。

    wordpressだから。ということは特にないのですね…。

    残念なことに、URLからソースを見て頂きたいのですが私個人のサイトでないため挙げることができないのです。
    再度、スタイルシートをリキッドレイアウトに直してみたのですが結果は変わらず、分かったことは以下です。↓

    以下2種類をスマホで見た場合
    ・htmlのみで構築したサイト→ブラウザサイズにサイト横幅がフィットしている=縦スクロールが必要だが、サイト全体を見れる
    ・wordpressで作成したサイト→ブラウザサイズに縦幅がフィットしている=サイトが画面からはみ出ている状態で横スクロールが必要

    ちなみに中身(html/css)は同じソースで、後者はwordpressなのでphpファイルである ということが大きな違いでしょうか。

    もう少しスタイルシートを検証してみます。
    もしくはユーザビリティの面からプラグインのなどの使用を考えた方が良いでしょうか?

    お時間あればご回答願います。

    差異から、問題点を捉えるのは困難です。

    比較しているhtmlが、ワードプレスで再現できるかどうか、確認するといいと思います。

    testというホルダを作って、
    ハンドメイドのhtmlのソースを、index.phpに貼り付けてください

    スタイルシートのリンクを追加してください。

    <link rel="stylesheet" href="http://サイトのアドレス/wp-content/themes/test/style.css" media="all">

    style.cssにハンドメイドのcssを貼り付けてください。

    style.cssの先頭にコメントを以下のようにして貼り付けてくださいください

    /*
    Theme Name: test
    Author: ime113
    Version: 0.1
    */

    アップロードすれば、testというテーマが使えるので、まずは、同じ表示になるかどうか、チェックをすることからはじめると、ワードプレスの影響かどうかがはっきりすると思います。

    同一性が確認できるようであれば、wp_head()を追加して、レイアウトが崩れるかどうか、崩れるならば、ソースをコピーして、貼り付けて、なにが影響しているかを、確かめるといった手順がいいのではないかと思います。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「webサイト作成時、スマホでの表示」には新たに返信することはできません。