記事の横幅を広げる方法。

  • doraemon416

    (@doraemon416)


    8年、 11ヶ月前

    twenty twelve を使用しています。
    スマホとpcの記事の横幅を広げたいです。
    cssのsite{}部分で指定することは知っています。
    ただ、記事の横幅を広げるには具体的に何をすればいいですか？

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • モデレーター けい (Kei Nomura)

    (@mypacecreator)

    8年、 11ヶ月前

    この場でCSSの書き方を逐一解説はできないのでヒントにとどめますが、style.cssの1784行目にある

    
	.site {
		margin: 0 auto;
		max-width: 960px; /* 古い環境向けの記述 */
		max-width: 68.571428571rem; /* 新しい環境向けの記述 */
		overflow: hidden;
	}

    この部分で、記事・サイドバーを含めたコンテンツ全体の幅（白背景の部分）の最大値を指定しています。
    なのでmax-widthの数値を大きくすれば幅は広がります。

    ※なおTwenty Twelveテーマは、見ている画面幅に応じてレイアウトが変わる「レスポンシブウェブデザイン」を採用していますので、必要に応じてあと何箇所か編集の必要があるかもしれませんが、上記要領でwidthやwax-widthを指定しているところの数値を編集してやれば変わるはずです。

    ※CSSの行が多すぎてどこを編集してよいかわからない場合は、以下のサイトなどを参考に、ブラウザのデベロッパーツールを使うのがおすすめです。

    ・CSSを弄るなら、Chromeの「デベロッパーツール」は絶対使えたほうが良い
    http://cthuwebdice.session.jp/htmlcss/developertools/

    ・要素の検証の使い方！初心者がカスタマイズできる方法！HTMLとCSS入門編 | ビバ★りずむ
    https://bibabosi-rizumu.com/beginner-element/

1件の返信を表示中 - 1 - 1件目 (全1件中)

トピック「記事の横幅を広げる方法。」には新たに返信することはできません。