メインページの見た目を改善してみる。
要件：
本文を見やすくする。
修正内容：
「スタイルシート」を修正する。
・・・
修正後の画面
・・・
※１．
メインページは、<div class="content"> で囲まれている。
ゆえに、修正箇所は以下となる。
---- 修正前・ここから ----
.content {
padding: 15px 15px 5px 15px;
background-color: #FFFFFF;
color: #666666;
font-family: Georgia, 'Times New Roman', serif;
font-size: small;
}
---- 修正前・ここまで ----
↓
---- 修正後・ここから ----
.content {
padding: 15px 15px 5px 15px;
background-color: #FFFFFF;
color: Navy;
font-family: Georgia, 'Times New Roman', serif;
font-size: small;
}
---- 修正後・ここまで ----
・・・
※２．
エントリの先頭部分のデート表示は、<h2>タグで作られている。
ゆえに、修正箇所は以下となる。
---- 修正前・ここから ----
.content h2 {
color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: small;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
}
---- 修正前・ここまで ----
↓
---- 修正後・ここから ----
.content h2 {
color: Orange;
font-family: Helvetica, Arial, sans-serif;
font-size: small;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
}
---- 修正後・ここまで ----
ただし、この<h2>タグは以下のように他の場所でも使用されているので、その事を認識しておく。
・・・
※３．
本文は、<p>タグで作られている。
ゆえに、修正箇所は以下となる。
---- 修正前・ここから ----
.content p {
color: #000000;
font-family: Georgia, 'Times New Roman', serif;
font-size: small;
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
}
---- 修正前・ここまで ----
↓
---- 修正後・ここから ----
.content p {
color: #666666;
font-family: Georgia, 'Times New Roman', serif;
font-size: small;
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
}
---- 修正後・ここまで ----
コメントする