Twenty Thirteenの段落のマージンを調整

「Twenty Thirteen」では、見出しと段落の開始位置が同じであるため、見にくいと感じることがあります。段落および「Preformatted Text」のマージンを調整して、段落の開始位置を見出しより内側になるように調整します。

はじめに

「Twenty Thirteen」の段落と「Preformatted Text」のマージンを調整して文章を読みやすくします。
・段落のマージンを調整
・「Preformatted Text」のマージンを調整

段落のマージンを調整

スタイルシート「style.css」の「p」タグの「margin」の指定で、段落のマージンを調整します。以下の例では、下部の余白を狭くしています。。

<変更前>

p {
	margin: 0 0 24px;
}

<変更後>

p {
	margin: 0 0 14px;
}

「Preformatted Text」のマージンを調整

スタイルシート「style.css」の「pre」タグの「margin」と「padding」の指定で、「Preformatted Text」のマージンを調整します。「margin」の指定で、エリアの開始位置を見出しよりも若干右にずらし、「padding」の指定でエリア内の文字の位置を調整します。

<変更前>

pre {
	background: #f5f5f5;
	color: #666;
	font-family: monospace;
	font-size: 14px;
	margin: 20px 0;
	overflow: auto;
	padding: 20px;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

<変更後>

pre {
	background: #bde0a0;
	color: #505050;
	font-family: Osaka-mono, "MS Gothic", monospace;
	font-size: 14px;
	margin: -7px 6px 12px;
	overflow: auto;
	padding: 7px;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

<表示例>

Preformatted Text

おわりに

文章が読みやすくなるように、「Twenty Thirteen」の段落と「Preformatted Text」のマージンを調整しました。

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

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

関連記事(目次)

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

コメントを残す

メールアドレスが公開されることはありません。

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