【Twenty Ten】コンテンツの位置(レイアウト)とデザイン変更

記事があるコンテンツ部分とサイドバーがあるメイン部分とヘッダー下メニューの間が開いてるので位置をstyle.cssを使い変更します。

【変更前】

#main {
  clear: both;
  overflow: hidden;
  padding: 40px 0 0 0;
}

【変更後】

#main {
  clear: both;
  overflow: hidden;
  padding: 0;
}

コンテンツの記事タイトルの文字の大きさの変更とボーダーを追加するので、style.cssにある/* =Content内にある#content .entry-titleのスタイルを変更します。
【変更前】

#content .entry-title {
  color: #000;
  font-size: 21px;
  font-weight: bold;
  line-height: 1.3em;
  margin-bottom: 0;
}

【変更後】

#content .entry-title {
  color: #000;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3em;
  margin-bottom: 0;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #999;
  background-image: url(images/t1.gif);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 10px;
}

ついでに記事にある画像にボーダーが表示されるようにしたいので、以下のスタイルを追加します。

.entry-content img {
  border: 1px solid #666;
}

さらにTwentyTenの初期設定されているフォントだと、数字などが文字と同じ位置で表示されないので、style.cssにある/* =Fontsの項目で、サイトのフォントを変更します。
ここは、好きなフォントをfont-familyで設定してください。
【変更前のスタイル】

body,
input,
textarea,
.page-title span,
.pingback a.url {
  font-family: Georgia, "Bitstream Charter", serif;
}
h3#comments-title,
h3#reply-title,
#access .menu,
#access div.menu ul,
#cancel-comment-reply-link,
.form-allowed-tags,
#site-info,
#site-title,
#wp-calendar,
.comment-meta,
.comment-body tr th,
.comment-body thead th,
.entry-content label,
.entry-content tr th,
.entry-content thead th,
.entry-meta,
.entry-title,
.entry-utility,
#respond label,
.navigation,
.page-title,
.pingback p,
.reply,
.widget-title,
.wp-caption-text {
  font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です