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

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

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

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

348閲覧

ワードプレスで作った記事をスマホ表示で記事幅を広くしたい

fufu

総合スコア7

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/05/01 06:42

初心者です。WordPress 4.9.5で記事を作成しています。
スマホ表示では本文の記事幅が中央にまとまってしまっているので
もう少し記事幅を広げたいと思っています。

こちらに質問しても良いのかわかりませんが、様々な方法を試み、
CSSを編集したり、記事幅を広げる為のソースコードをコピペしてみたり
試行錯誤していますが解決にいたらず質問させていただきます。

jetpackでのモバイル有効化やプラグインではWPtouchやWordPress Mobile Pack
などを試しましたがアドセンス広告の表示不可、リダイレクトによる表示不可などで
今は停止しています。

どなたかご教示いただけますと助かります。

http://beauty1201.com

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

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

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

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

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

guest

回答2

0

ベストアンサー

CSS

1.page-content, .entry-content { 2 width: 70%; 3 margin-top: 20px; 4 margin-left: 15%; 5 margin-right: 15%; 6 margin-bottom: 30px; 7}

↑を↓に変更してください。

CSS

1.page-content, .entry-content { 2 margin-top: 20px; 3 margin-bottom: 30px; 4}

PCサイズの時に、現状の記事幅を維持したいなら、上記の変更ではなく、以下を適切なメディアクエリに追加してください。

CSS

1.page-content, .entry-content { 2 width: 100%; 3 margin-left: 0; 4 margin-right: 0; 5}

投稿2018/05/06 03:13

編集2018/05/06 03:14
Lhankor_Mhy

総合スコア35865

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

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

fufu

2018/05/07 01:30

ご教示いただきありがとうございます。 上記の2点をcssに追加してみたところ、記事幅が広がりました! 記事本文の左右に少し余白をいれる場合はどうすれば良いでしょうか? widh:100%→ 90%にしてみましたが右側のみ余白ができてしまいます。 申し訳ありません、宜しくお願いいたします。
Lhankor_Mhy

2018/05/07 05:13

margin-left margin-right がそれぞれ左右の余白です。
fufu

2018/05/07 06:11

margin-right のみ、数値を入れても反映されず、padding-rightに変更したら数値が反映されるようになりました!ありがとうございました。(margin-leftはそのままで大丈夫でした)
Lhankor_Mhy

2018/05/07 07:16

解決したようで何よりです。 width が幅なので、margin-left + width + margin-right が100%になるようにすれば大丈夫でしたが、padding を使っても特段問題はないだろうと思います。
fufu

2018/05/07 07:46

padding を使っても問題ないのですね、良かったです。widthも調整してみました。 中々思うようにいかず試行錯誤していた中、初心者の私にもわかりやすく回答を提示していただいて、助かりました!ありがとうございました。
guest

0

「もう少し」がどれくらいかは質問者さんしか分かりませんが、
おおよそCSSでなんとかなるものと思います。

ブラウザの開発ツールで対象の箇所を確認し、
あてられているCSSを特定して、それに対して装飾していくと良いです。

投稿2018/05/01 06:51

m.ts10806

総合スコア80765

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

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

fufu

2018/05/07 01:37

ご教示いただきありがとうございます。 ”ChromeデベロッパーツールでCSS要素を特定してサイトを簡単カスタマイズ ”を拝見しました。 大変参考になりましたが、初心者の私にはかなり難解でして見方に時間がかかっています。 また、相互フォローをしないとコメントができないようで、返信が遅れてしまい申し訳ありません。 例えば編集したい要所をF12で割り当てて、このような場合→ ”div.theContentWrap-ccc.typesquare_tags” これをスタイルシート等で編集するというこなのでしょうか?
m.ts10806

2018/05/07 01:43 編集

> 相互フォローをしないとコメントができない ???すみません。どういうことでしょうか。コメントはフォロー関係なくできるはずですが・・(回答依頼とか質問一覧のフォローくらいだと思います) > 例えば編集したい要所をF12で割り当てて、このような場合 >→ ”div.theContentWrap-ccc.typesquare_tags” >これをスタイルシート等で編集するというこなのでしょうか? 開発ツール上にcssの指定が表示されると思いますが、開発ツール上で「擬似的に」編集することができます(Chromeなどだとダブルクリックで編集モードになります) 擬似的に編集したものは画面でも変更確認ができます。(あくまでアクセスしている間だけ。自分のブラウザ以外では何もなっていません) style追加などもできますので、そこで擬似的に調整して想定通りの装飾ができたら、実際のcssファイルや指定を修正する流れです。
fufu

2018/05/07 01:59

コメントを入力後、右下青色の”コメントする”をクリックすると、下記に表示されている「回答依頼は相互フォロー…」という表示が出てきて、送信できませんでした。 しかしなぜ今回は送信できたのか?私がmts10806さんをフォローしたからなのか?よくわかりません。 こちらを利用させていただくのが初めてなもので、不慣れで申し訳ありません。 開発ツール上で「擬似的に」ダブルクリックで編集モードにできるのですね。 試してみます。ありがとうございました。
m.ts10806

2018/05/07 02:07

既に書いていますように「回答依頼」はフォローしないとできません。 コメントはフォローしていようがしていまいが、ログインしていれば関係なく可能です。 そのあたりはヘルプを読まれた方がいいですね。 https://teratail.com/help フォローに関しても書いてあります。
fufu

2018/05/07 02:18

回答依頼とコメントは別物なのですね。 ヘルプを参照してみます。助かります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問