rmenu-右メニュー部分

右メニュー部分を囲うボックス領域(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(右メニュー部分)ソース

前後の記事

最近の記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。