右メニュー部分を囲うボックス領域（rmenu）を追加します。

カテゴリやアーカイブなどはこのrmenuで囲みます。

スタイルシート部分

#rmenu {
	margin: 0px 5px 0px 0px;
	width: 30%;
	float: right;
	overflow: hidden;
	background: #FFF;
}

HTML部分

   <!--/nextpage-->
  </div>
  <div id = "rmenu">

  </div>
</div>

スタイルシート部分

width: 30%

横幅を30%に指定しています。全体幅が100%で、left部分を65%としているので、65+30で95％使用している事になります。

float: right

メニューは右に配置するので、float:rightで右寄せしています。

overflow: hidden

内容がrmenu領域からあふれた場合の処理を指定しています。overflow:hiddenにすると、あふれた部分は表示されなくなります。

HTML部分

右メニュー内容をdiv id = "rmenu"で囲います。rmenu内には「カテゴリ」や「最近のコメント」、「月別アーカイブ」などを入れます。

ゼロから創るテンプレートトップ

1. rmenu-右メニュー部分
2. 見出しとリスト部分のスタイル
3. カテゴリ部分
4. 新着記事部分
5. 月別アーカイブ部分
6. 最近のコメント部分
7. 最近のトラックバック部分
8. プロフィール部分
9. コピーライト部分
10. rmenu(右メニュー部分)ソース

前後の記事

最近の記事