このブログのカテゴリーは、上部横並びに表示されているんですが、HTMLとCSSを使ったカスタマイズを紹介してみたいと思います。失敗したときに備えて、必ずメモ帳などのソフトにバックアップしながら作業してください。
手順はまず、カテゴリーをヘッダー（上部）に持ってきます。位置を固定するために画面下の「設定を反映する」をクリックします。
カテゴリーをクリック→「コンテンツHTML編集」をクリックして以下の内容を記述します。
（※元の内容は必ずバックアップ）
<% content.header -%>
<% loop:list_category -%>
<li><a href="<% category.page_url %>" title="<% category.name | tag_break %>"><% category.name | tag_break %>(<% category.article_count | __or__ | echo("0") %>)</a></li>
<% /loop -%>
<% content.footer -%>
</ul>
記述したら、その下にある「保存」ボタンをクリック→【 このウィンドウを閉じる 】をクリック。
続いてCSSの編集です。
「デザイン」→「デザイン一覧」→適応にチェックが入っているCSSをクリックして以下を記述します。
（※元の内容は必ずバックアップ）
.top-menu{
width: 900px;
float: left;
color: ffffff;
font-size: 12px;
font-weight: bolder;
margin : 0;
padding: 0;
background-color: #222222;
}
.top-menu li{
width: 180px;
display: inline;
text-align: center;
margin : 0;
padding: 0;
}
.top-menu li a{
width: 180px;
float: left;
display: inline;
color: #f1f1f1;
font-size: 12px;
text-decoration: none;
text-align: center;
padding: 5px 0;
background-color: #000000;
background: transparent url(https://blog-parts-navi.up.seesaa.net/image/active2.gif) bottom center repeat-x;
}
.top-menu li a:visited{
color: #f2f2f2;
}
.top-menu li a:hover{
color: #f1f1f1;
text-decoration: underline;
background: transparent url(https://blog-parts-navi.up.seesaa.net/image/hover2.gif) bottom center repeat-x;
}
記述したら「スタイルシート」を変更するをクリック。
主な作業は以上です。
あとはCSSの「width: 900px;」と「width: 180px;」の数字部分をブログを見ながら何度も調整していく作業になります。それから文字色、背景色の変更も必要となります。
もしカテゴリーの下の文字がカテゴリーに回り込んでしまったり、IEとFirefoxで微妙なズレが生じる際は、HTMLの</ul>と書かれている直後に<br clear="left" />を書き足してみてください。
このカスタマイズはCSSを理解していないと失敗しますので初心者の方にはあまり向かないかもしれません。バックアップは必ず取りながら作業をしてください。
スタイルシートの勉強して試して見ます