1カラムにした時の記事の幅を狭くする方法

###前提・実現したいこと

こんにちは、ワードプレスでサイトを作成して1ヶ月半程の初心者です。
はじめて質問させていただきます。

WordPress （バージョン：4.8）
テーマはストーク（バージョン: 1.1.2）を使用中です。
https://open-cage.com/stork/

固定ページを1カラムに設定してPCで見たときに、記事の横幅がすごく広くなります。
記事の幅をPC版のみ調整したいのですが、どうするのが最適でしょうか？教えてください。
自分なりに色々調べて、子テーマのstyle.cssに下記の様に加筆をしましたが、当然ながらスマホから見た場合も狭くなってしまいます。

スマホから見たときはそのまま(100%)で、PCで見たときだけ狭くする方法を教えてください。
ぜひ、ご教授よろしくお願いします。

###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード
.page-full #main{
max-width: 80%;
}
###試したこと

上記の通りです。

###補足情報(言語/FW/ツール等のバージョンなど)
WordPress （バージョン：4.8）
テーマはストーク（バージョン: 1.1.2）を使用中です。

kei344

2017/07/12 12:21

WordPressテーマはテーマ名だけではなく取得したURLを質問文に追記ください。（URLにはリンクを張ることができます）

rosecolored

2017/07/12 14:30

ご指摘ありがとうございます。取得URLとはテーマの販売ページでしょうか？質問ページに貼らせていただきました。何卒よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

有料テーマなのでデモでしか確認していませんが、下記のようなCSSが記述されているため、カスタマイズなどの際にHTMLの構造を崩してしまったりしてませんか？

CSS
1.page-full #main {
2    width: 798px;
3    max-width: 100%;
4    margin: auto;
5    float: none;
6}

【テンプレート: 先頭固定表示 | STORK】
http://demo-stork.open-cage.com/template-sticky/

CSSの確認／調整はデベロッパーツールを使うとはかどります。

【開発者ツールを使おう！カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

投稿2017/07/12 14:44

kei344

総合スコア69400

rosecolored

2017/07/12 16:00

ご回答ありがとうございます。固定ページのhtmlは特に崩しておらず、この件に関するタグは記入しておりません。あと、style.cssもフォントとtableのことしか今のところ追記はしておりません。スマホ指定と言うのができないのでしょうか？デベロッパーツール、教えてくださりありがとうございます！

kei344

2017/07/12 16:07

もともとのテンプレートで「記事の横幅がすごく広く」ならなかったので編集時に良くあるミスをされているのかと思いましたが･･･。有料のテンプレートなのであれば販売元に問い合わせてみてはいかがでしょうか。 > スマホ指定と言うのができないのでしょうか？ Media Queries は指定しましたか？【CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き】 http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/ 【Media Queriesの指定について - Qiita】 http://qiita.com/knml/items/c94dc493571dd4127d43

rosecolored

2017/07/13 03:53 編集

ご回答ありがとうございます！販売会社に問い合わせようと思ったのですが、記述していただいたMedia Queriesについて参考させていただき、下記のようにstyle.cssに記述すると、求めてるものができました。ありがとうございました。style.cssの記述は問題ないでしょうか？スマホを横向けで見たときは横方向が広くなるので当然適用されないのですが、その際に記事(80%)が左に寄せられ、右が空白(20%)になってしまうので、記事の中央寄せについても加えました。 @media screen and (min-width: 480px)and { .page-full #main{ max-width: 80%; margin: 0 auto; } }

kei344

2017/07/13 04:23

> 問題ないでしょうか？有料テーマのため環境が手元にあるわけではないので、問題があるかの判断はご自身で検証してください。

rosecolored

2017/07/13 06:44

取りあえず、求めてたことが叶いましたので、問題ないと思います。親切にご回答いただきどうもありがとうございました！

行動規範の内容に同意します