質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

1回答

3554閲覧

特定ページのみレスポンシブにせずPC版レイアウトで表示したい

san3san

総合スコア44

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

0クリップ

投稿2020/03/19 06:49

前提・実現したいこと

WordPressで作成したサイト(レスポンシブ非対応、PC版レイアウトのみ)を
レスポンシブ対応に変更することになりました。
メディアクエリで切り替えます。(既に作業進行中)

ただし、特定のページのみレスポンシブの対象外として
PC版レイアウトで表示したいのです。

●特定のページは
・30ページほどで今後も増えていく(WordPress固定ページ)
・特定ディレクトリ下(特定の固定ページの子ページ)
・現状<head>部分は基本的にサイト共通(対象外ページのみ<meta>タグ等の変更は可能)
・共通のtaxonomy使用
・bodyタグに共通class指定
・コンテンツ部分にはページごとにふってあるID指定があり正規表現で絞り込み指定は可能

●cssファイルは
・すべて1ファイルで作成し
・WordPress関係なく外部ファイルとして読み込み

以上の条件で、どういう方法が可能かお教え願います。

発生している問題

現状、ヘッダー、フッター、サイドナビ等、すべて全ページで共通のため
対象外にしたい特定のページ群も
スマホ版レイアウトで表示されてしまいます。

プラグインで対応する方法

スマホで一部のページだけをPC表示させたい場合に使うプラグイン
MultiDeviceSwitcher
https://bge.jp/multideviceswitcher-page-pcview/

というのが見つかりましたが
このプラグインでは、PC用とスマホ用のthemeを2種類作成するのが前提なので
メンテナンス性を考慮するとあまり使いたくありません。

検討している方法

①共通レイアウト情報用 PC版css
②共通レイアウト情報用 スマホ版css
③コンテンツ用css

にcssファイルを切り分けて

・レスポンシブページ→  ①②③読み込み
・非レスポンシブページ→ ①③読み込み

とする方法を考えています。

もっとシンプルに、WordPressのテンプレートをあまり複雑にせずに
(WordPressに依存しなくても可能な方法があれば理想です)
対処する方法があればお教えください。


以上
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ヘッダでviewportを出力しなければPC互換表示になりませんか?

【条件分岐タグ - WordPress Codex 日本語版】
https://wpdocs.osdn.jp/%E6%9D%A1%E4%BB%B6%E5%88%86%E5%B2%90%E3%82%BF%E3%82%B0#.E5.80.8B.E5.88.A5.E6.8A.95.E7.A8.BF.E3.83.9A.E3.83.BC.E3.82.B8

投稿2020/03/19 06:56

kei344

総合スコア69407

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

san3san

2020/03/19 07:41

ありがとうございます。 解決しました。 viewport設定について勘違いをしておりました。。 単純にviewport設定の部分を削除すると右サイドに不思議な余白ができてしまいましたが <meta name="viewport" content="width=1100, user-scalable=yes"> とPC表示の最小幅を指定することで余白も消えました。 静的htmlでテストしてみただけの段階ですが metaタグは条件分岐でできると思います。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問