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

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

ただいまの
回答率

90.33%

  • CSS

    6225questions

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

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 262

fufu

score 1

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

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

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

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

http://beauty1201.com

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

.page-content, .entry-content {
    width: 70%;
    margin-top: 20px;
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 30px;
}


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

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


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

.page-content, .entry-content {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/07 10:30

    ご教示いただきありがとうございます。

    上記の2点をcssに追加してみたところ、記事幅が広がりました!
    記事本文の左右に少し余白をいれる場合はどうすれば良いでしょうか?

    widh:100%→ 90%にしてみましたが右側のみ余白ができてしまいます。

    申し訳ありません、宜しくお願いいたします。

    キャンセル

  • 2018/05/07 14:13

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

    キャンセル

  • 2018/05/07 15:11

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

    キャンセル

  • 2018/05/07 16:16

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

    キャンセル

  • 2018/05/07 16:46

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

    キャンセル

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/07 10:37

    ご教示いただきありがとうございます。

    ”ChromeデベロッパーツールでCSS要素を特定してサイトを簡単カスタマイズ ”を拝見しました。
    大変参考になりましたが、初心者の私にはかなり難解でして見方に時間がかかっています。

    また、相互フォローをしないとコメントができないようで、返信が遅れてしまい申し訳ありません。

    例えば編集したい要所をF12で割り当てて、このような場合→ ”div.theContentWrap-ccc.typesquare_tags”
    これをスタイルシート等で編集するというこなのでしょうか?

    キャンセル

  • 2018/05/07 10:42 編集

    > 相互フォローをしないとコメントができない
    ???すみません。どういうことでしょうか。コメントはフォロー関係なくできるはずですが・・(回答依頼とか質問一覧のフォローくらいだと思います)

    > 例えば編集したい要所をF12で割り当てて、このような場合 >→ ”div.theContentWrap-ccc.typesquare_tags”
    >これをスタイルシート等で編集するというこなのでしょうか?

    開発ツール上にcssの指定が表示されると思いますが、開発ツール上で「擬似的に」編集することができます(Chromeなどだとダブルクリックで編集モードになります)
    擬似的に編集したものは画面でも変更確認ができます。(あくまでアクセスしている間だけ。自分のブラウザ以外では何もなっていません)
    style追加などもできますので、そこで擬似的に調整して想定通りの装飾ができたら、実際のcssファイルや指定を修正する流れです。

    キャンセル

  • 2018/05/07 10:59

    コメントを入力後、右下青色の”コメントする”をクリックすると、下記に表示されている「回答依頼は相互フォロー…」という表示が出てきて、送信できませんでした。
    しかしなぜ今回は送信できたのか?私がmts10806さんをフォローしたからなのか?よくわかりません。
    こちらを利用させていただくのが初めてなもので、不慣れで申し訳ありません。

    開発ツール上で「擬似的に」ダブルクリックで編集モードにできるのですね。
    試してみます。ありがとうございました。

    キャンセル

  • 2018/05/07 11:07

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

    キャンセル

  • 2018/05/07 11:18

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

    キャンセル

同じタグがついた質問を見る

  • CSS

    6225questions

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