Twenty Thirteenの画面の幅を調整

「Twenty Thirteen」は、デフォルトの画面の幅が狭く感じます。画面の幅を広げて記事の表示スペースを広くします。

はじめに

「Twenty Thirteen」の画面の幅を「100px」広げて記事の表示スペースを広くします。
・表示の最大幅を変更
・記事の最大幅を変更
・記事のサイドバー分の余白を変更

表示の最大幅を変更

表示の最大幅を「1040px」を「1140px」に広げます。スタイルシート「style.css」で、「max-width: 1040px;」をすべて「max-width: 1140px;」に置換します。

<変更前>

	max-width: 1040px;

<変更後>

	max-width: 1140px;

<戻し>※サイドバーの位置調整が必要で、以下は「1040px」に戻します。

.site-main .sidebar-inner {
	margin: 0 auto;
	max-width: 1040px;
}

記事の最大幅を変更

表示の最大幅を「604px」を「704px」に広げます。スタイルシート「style.css」で、「604px」をすべて「704px」に置換します。

記事のサイドバー分の余白を変更

記事のサイドバー分の余白を「376px」を「426px」に広げます。スタイルシート「style.css」で、「376px」をすべて「426px」に置換します。

おわりに

「Twenty Thirteen」の画面の幅を広げて、記事の表示スペースを広くしました。全体に影響がでるので、難しい調整になりました。まだ、十分ではない気がしています。

関連記事(Twenty Thirteenのサイト全体の表示をカスタマイズ)

  1. Twenty Thirteenをメニューからカスタマイズ
  2. Twenty Thirteenの画面の幅を調整
  3. Twenty Thirteenのフォントを等幅フォントに変更
  4. Twenty Thirteenのフォントサイズを変更
  5. Twenty Thirteenの背景色と文字色を変更
  6. Twenty Thirteenの段落のマージンを調整

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

コメント記入欄

※メールアドレス(任意入力)は非公開です。コメントはお気軽にどうぞ!

内容を確認して、「コメント送信」ボタンを押してください。

post date*

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)