スポンサード リンク
Friday 2011/11/18

Seesaaブログのカテゴリーを上部横並びに表示するカスタマイズ


このブログのカテゴリーは、上部横並びに表示されているんですが、HTMLとCSSを使ったカスタマイズを紹介してみたいと思います。失敗したときに備えて、必ずメモ帳などのソフトにバックアップしながら作業してください。

手順はまず、カテゴリーをヘッダー(上部)に持ってきます。位置を固定するために画面下の「設定を反映する」をクリックします。

カテゴリーをクリック→「コンテンツHTML編集」をクリックして以下の内容を記述します。
(※元の内容は必ずバックアップ)

<ul class="top-menu">
<% 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(http://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(http://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を理解していないと失敗しますので初心者の方にはあまり向かないかもしれません。バックアップは必ず取りながら作業をしてください。

スポンサード リンク
| posted by nao at 2011/11/18 | Comment(2) | TrackBack(0) | seesaa カスタマイズ|
この記事へのコメント
どうやってるのか気になってました。
スタイルシートの勉強して試して見ます
Posted by 名無し at 2011年11月24日 00:15
当方HTMLは素人中の素人なのですが、このサイトのおかげでなんとかメニューを設置できました。ありがとうございます。そのまま引用してしまった形になりますが、不都合な点とうありましたら変更いたします。
Posted by らいら at 2014年01月21日 02:13
▽ コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。