はじめてのFC2ブログカスタマイズ

FC2ブログにはあらかじめ多くのデザインテンプレートが用意されています。気に入ったデザインを選択するだけで簡単に見た目を変更する事が出来ますが、慣れてくると自分好みにカスタマイズしたいと思う方も大勢いると思います。FC2ブログは自由にHTMLとCSSを編集出来ますので知識さえあれば思い通りにアレンジする事が可能です。

カスタマイズ出来るファイルは大きく分けてHTMLとCSSの2種類あります。HTMLはブログの内容が記述されている構造を記述、CSSは見栄えを定義しているファイルです。例えば表示する内容を変更する場合はHTMLを、文字の大きさや背景色を変えるなどはCSSを変更する事で実現出来ます。

共有テンプレートおよびカスタマイズをした公式テンプレートはサポート対象外になります。
共有テンプレートの場合は作者の方に直接お問い合わせ下さい。

このマニュアルは公式テンプレートの「sample」をベースにしております。

管理画面ログイン後＞テンプレートの設定＞公式テンプレートの追加＞テンプレート名「sample」[sample_2]を選択してください。

＊他のテンプレートでは記述が異なる場合もあります。

テンプレート編集方法
文字の大きさを変更
文字の色を変更
背景の変更
リンク色の変更
画像に枠を付ける - 基本
画像に枠を付ける - 応用
サイトのセンタリング
２カラムレイアウトの作成
３カラムレイアウトの作成
カウンターの設置
アクセス解析の設置
月別・カテゴリ別アーカイブのドロップダウンリスト化

テンプレート編集方法

管理画面より管理設定「テンプレートの設定」を選択して下さい。

テンプレートの設定

変更したいテンプレート名の編集を選択して下さい。

テンプレートの編集

各編集フォームにて編集を行い、編集後に更新ボタンを押すと更新内容が保存・適用されます。

テンプレートの更新

[ ▲トップに戻る ]

文字の大きさを変更

文字の大きさを変更したい場合もスタイルシートなら簡単に修正出来ます。例としてタイトルの大きさを変更してみましょう。

HTMLの編集でタイトル部分を記述している部分を探して下さい。以下の部分がタイトル部分を記述しているタグです。


<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>

タイトル部分がh1要素で囲われていますので、スタイルの設定においてもh1要素に対してフォントサイズを設定する事で文字の大きさを変更出来ます。


h1 {
  font-size : 120%;
}

値には実数値＋単位・％値・キーワードなどを指定します。

実数値＋単位
数値に単位を付けてフォントサイズを指定します。負の値は指定出来ません。
単位にはpx・em・ex・in・cm・mm・pt・pcなどがあります。

％値
フォントサイズを親要素のフォントサイズに対する割合で指定します。

smaller | larger
親要素のフォントサイズに対して、それぞれ一段階小さい文字サイズ、大きい文字サイズを指定します。

ブラウザの種類や設定によってはフォントサイズの指定にptやpxなどの単位を使うとユーザー側で文字の大きさを変更出来なくなる場合があります。そのような指定をする事はユーザーから「必要に応じて文字の大きさを変更する」機能を奪ってしまう事になります。フォントサイズの指定を行う場合は出来るだけemや％などの相対的な単位を使用し、必要に応じて文字のサイズを変更出来るようにするのが望ましいです。

[ ▲トップに戻る ]

文字の色を変更

文字の色を変更したい場合は対象となる要素にcolorプロパティを設定する事により実現出来ます。例としてサイト全体の文字色の変更と本文のみの変更を行ってみましょう。

サイト全体の変更を行う場合は最上位要素html（body）に対してスタイルを適用して下さい。

HTMLの要素と親子関係


<html>
  <head>
    <meta>
    <title></title>
  </head>
  <body>
    <h1></h1>
    <p></p>
    <address></address>
  </body>
</html>


body {
  color : #000; /* 前景色を黒色に設定 */
}

これでサイト全体の変更が出来たわけですが、本文は黒色、記事のタイトルは赤色で表示したいなど使い分けるにはどうすればいいでしょうか？それを解決するにはセレクタを使用します。

基本となるセレクタ

要素名
指定した要素名の要素に対してスタイルを適用させます。


h1 { ... }

＊（アスタリスク）
全ての要素に対してスタイルを適用させます。


*.MyClass { ... }
*#MyID { ... }

要素名#名前
その要素の中で指定したid属性の識別子を持つものに対してスタイルを適用させます。


p#MyID { ... }

要素名.名前
その要素の中で指定したclass属性の識別子を持つものに対してスタイルを適用させます。


p.MyID { ... }

例として記事本文の文字色を変更してみましょう。該当箇所をピックアップすると下記のようになります。


<div class="section" id="a<%topentry_no>">
  <h2 class="entry-header"><a href="<%topentry_link>" title="「<%topentry_title>」の永続的URI"><%topentry_title></a></h2>
  <div class="entry-body">
    <%topentry_body>
    <!--more_link-->
    <p class="entry-more"><a href="<%topentry_link>" title="「<%topentry_title>」の続きを読む">続きを読む »</a></p>
    <!--/more_link-->
    <!--more-->
    <%topentry_more>
    <!--/more-->
  </div>
  <ul class="entry-footer">
    <li class="date">| <%topentry_year>-<%topentry_month>-<%topentry_day> | </li>
    <li class="category"><a href="<%topentry_category_link>" title="カテゴリ「<%topentry_category>」の記事一覧"><%topentry_category></a> | </li>
    <li class="com">
      <!--allow_comment-->
      <a href="<%topentry_link>#comment-top" title="「<%topentry_title>」のコメント">コメント : <%topentry_comment_num></a>
      <!--/allow_comment-->
      <!--deny_comment-->－<!--/deny_comment--> | 
    </li>
    <li class="trk">
      <!--allow_tb-->
      <a href="<%topentry_link>#trackback-top" title="「<%topentry_title>」のトラックバック">トラックバック : <%topentry_tb_num></a>
      <!--/allow_tb-->
      <!--deny_tb-->－<!--/deny_tb--> |
    </li>
  </ul>
</div>

記事本文が展開されるFC2ブログの独自タグは<%topentry_body>です。このタグを囲っている親要素は<div class="entry-body">だという事が分かります。つまり記事本文に対してスタイルを適用する場合は下記の通りになります。


div.entry-body {
  color : #000; /* 記事本文前景色を黒色に設定 */
}

同様に記事タイトル部分が展開される独自タグは<%topentry_title>です。この要素を囲っている親要素は<h2 class="entry-header">です。書式は下記の通りです。


h2.entry-header {
  color : #f00; /* 記事タイトル前景色を赤色に設定 */
}

このようにセレクタを使用することにより、適用する条件を絞り込む事が出来ます。思い通りに変更出来たでしょうか？

[ ▲トップに戻る ]

背景の色を変更

背景の色や背景画像の変更もスタイルシートであれば簡単に変更が出来ます。該当する要素にbackgroundプロパティを適用して下さい。全体の変更や部分的な変更は前述のセレクタの説明をご覧になって下さい。

背景色の設定にはbackground-colorプロパティを使用します。値にはCSSの書式に従った任意の色を指定します。


body {
  background-color : #fff; /* 背景色を白色に設定 */
}

カスタマイズ掲示板でも質問の多いサイトタイトル部分の背景色変更も同様に設定出来ます。


h1 {
  background-color : #fff; /* サイトタイトル背景色を白色に設定 */
}

背景画像の設定にはbackground-imageプロパティを使用します。画像の並べ方や表示位置などはbackground-repeatプロパティ・background-positionで設定する事が出来ます。


body {
  background-image : url("画像のパス"); /* 背景画像の設定 */
  background-repeat : repeat;           /* 背景画像を横縦タイル状に並べる */
  background-position : left top;       /* 開始位置を画面左上に設定 */
  background-attachment : fixed;        /* 背景画像の位置を固定 */
}

画像の並べ方

repeat
背景画像は縦横タイル状に並べられます。

repeat-x
背景画像は横方向のみに繰り返して並べられます。

repeat-y
背景画像は縦方向のみに繰り返して並べられます。

no-repeat
背景画像は繰り返されずにひとつだけ表示されます。

画像の表示位置

実数値＋単位
横方向と縦方向の開始位置を順にスペースで区切って数値で指定します。
単位にはpx・em・ex・in・cm・mm・pt・pcなどがあります。

％値
横方向と縦方向の開始位置を順にスペースで区切って割合で指定します。

left | center | right
top | center | bottom
横方向と縦方向の開始位置を順にスペースで区切ってキーワードで指定します。指定する順序は問いません。

画像の固定配置

fixed
背景画像の位置を固定します。

scroll
背景画像を他の内容と共にスクロールします。

[ ▲トップに戻る ]

リンク色の変更

リンク色の設定は疑似クラスを使用して設定する事が出来ます。:hover疑似クラスを設定する際には必ず宣言順序（link→visited→hover→active）に注意して下さい。誤った順序で宣言すると正しい表示結果が得られない場合があります。

要素名:link
リンクする要素のうち、未閲覧（キャッシュされていない）要素に対してスタイルを適用します。

要素名:visited
リンクする要素のうち、閲覧済（キャッシュされている）要素に対してスタイルを適用します。

要素名:hover
ユーザーがカーソルをその要素の上に置いているが、まだアクティブ状態にしていない時にスタイルを適用します。

要素名:active
その要素がユーザーによってアクティブ状態にされた時にスタイルを適用します。


/* ページ全体のリンクを設定する場合 */

a:link {
  color : #f60; /* 未閲覧のリンク色をオレンジ色に設定 */
}
a:visited {
  color : #00f; /* 閲覧済のリンク色を青色に設定 */
}
a:hover {
  color : #f00; /* マウスオーバー時のリンク色を赤色に設定 */
}
a:active {
  color : #f00; /* アクティブ時のリンク色を赤色に設定 */
}

/* 特定のクラスが指定されているリンクを設定する場合 */

a.MyClass:link {
  color : #f60; /* 未閲覧のリンク色をオレンジ色に設定 */
}
a.MyClass:visited {
  color : #00f; /* 閲覧済のリンク色を青色に設定 */
}
a.MyClass:hover {
  color : #f00; /* マウスオーバー時のリンク色を赤色に設定 */
}
a.MyClass:active {
  color : #f00; /* アクティブ時のリンク色を赤色に設定 */
}

/* 特定のクラスが指定された要素に含まれるリンクを設定する場合 */

.MyClass a:link {
  color : #f60; /* 未閲覧のリンク色をオレンジ色に設定 */
}
.MyClass a:visited {
  color : #00f; /* 閲覧済のリンク色を青色に設定 */
}
.MyClass a:hover {
  color : #f00; /* マウスオーバー時のリンク色を赤色に設定 */
}
.MyClass a:active {
  color : #f00; /* アクティブ時のリンク色を赤色に設定 */
}

[ ▲トップに戻る ]

画像に枠を付ける - 基本

投稿した記事中に使用する画像に枠を付けてみましょう。本文中の画像に対してスタイルを適用するだけで枠線を付ける事が出来ます。

本文を展開する独自タグを囲っている親要素は<div class="entry-body">です。画像に対して枠線を付けるには下記の通りに設定します。このままでは本文中にある画像全てに枠が付きますので、必要に応じてクラスを追加、セレクタで指定して下さい。


div.entry-body img {
  border : 2px solid #000; /* 枠線を黒色で太さ2pxの直線を設定 */
}

スタイルを適用するとこのようになります。

[ ▲トップに戻る ]

画像に枠を付ける - 応用

応用編として画像にポラロイド写真のような装飾を付けてみましょう。

画像を使って記事のエントリーを行うと自動的に画像挿入タグが埋め込まれます。


<a href="画像のリンク先" target="_blank"><img src="画像のパス" alt="画像が表示されない場合の代替テキスト" border="0"></a><br clear="all">

このままでは普通に画像が表示されてしまいますので、下記のスタイルを追加して下さい。


p span img {
  padding : 5px;           /* 写真の余白を5pxに設定 */
  background-color : #fff; /* 写真余白部分の色を白色に設定 */
  border : 1px solid #000; /* 写真枠部分の色を黒色に設定 */
}

記事のエントリー時に自動挿入されるタグを書き換えて下さい。


<p><span><img src="画像のパス" width="画像の幅" height="画像の高さ" alt="画像が表示されない場合の代替テキスト"></span></p>

スタイルを適用するとこのようになります。

[ ▲トップに戻る ]

サイトのセンタリング

カスタマイズの要望が多かったサイト全体のセンタリングです。テンプレートによっては最初からセンタリングされたものもありますが、代表的な手法を使って説明します。

センタリング説明図

よく使われる手法としてコンテンツ全体をブロックレベル要素にて囲い、マージンを自動設定にする事によりブラウザの画像サイズから値を算出し、結果的に左右のマージンが等しくなりセンタリングされるという方法です。


div#container {
  width : 740px;       /* コンテンツ幅を740pxに設定 */
  margin-left : auto;  /* 左側のマージンを自動算出 */
  margin-right : auto; /* 右側のマージンを自動算出 */
}


<body>
  <div id="container">
    記事やメニューなどのコンテンツ部分を記述する
  </div>
</body>

しかし古いバージョンのブラウザやWindows版Internet Explorerの互換モードではマージンの値にAUTOを指定してもセンタリングしてくれません。そこでInternet Explorerのバグを利用します。

通常はテーブルやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。text-alignプロパティはインライン要素の位置揃えを指定するためのものだからです。しかしWindows版のInternet Explorerはバグによりtext-alignでブロックレベル要素もセンタリングしてしまいます。


body {
  text-align : center; /* バグを利用してブロックレベル要素をセンタリング */
}
div#container {
  width : 740px;       /* コンテンツ幅を740pxに設定 */
  margin-left : auto;  /* 左側のマージンを自動算出 */
  margin-right : auto; /* 右側のマージンを自動算出 */
  text-align : left;   /* body要素で指定したセンタリングを戻す */
}

前述の設定をこの様に変更する事で古いブラウザやInternet Explorerでもセンタリングを行う事が出来ます。

[ ▲トップに戻る ]

２カラムレイアウトの作成

公式テンプレートでもお馴染みの２カラムレイアウトの作成方法を説明します。手法は複数ありますが、今回は比較的安易であるコンテンツの回り込みを利用したカラムレイアウトを紹介します。

２カラムレイアウト説明図

スタイルシート部分は以下のようになっています。


body {
  text-align : center; /* バグを利用してブロックレベル要素をセンタリング */
}
div#container {
  width : 740px;       /* コンテンツ幅を740pxに設定 */
  margin-left : auto;  /* 左側のマージンを自動算出 */
  margin-right : auto; /* 右側のマージンを自動算出 */
  text-align : left;   /* body要素で指定したセンタリングを戻す */
}
div#primary-column {
  float : left;        /* プライマリーカラム（記事等）を左側に回り込ませる */
  width : 500px;       /* 幅を500pxに設定 */
}
div#secondary-column {
  float : right;       /* セカンダリーカラム（メニュー等）を右側に回り込ませる */
  width : 200px;       /* 幅を200pxに設定 */
}
div#siteinfo-legal {
  clear : both;        /* 全ての回り込みの解除 */
}

HTML部分は下記のようになっています。


<body>
  <div id="container">
    <div id="branding">ヘッダー部の内容</div>
    <div id="primary-column">記事等の内容</div>
    <div id="secondary-column">メニュー等の内容</div>
    <div id="siteinfo-legal">フッター部の内容</div>
  </div>
</body>

Internet Explorerの適用範囲にご注意を！

Windows版のInternet Explorer 4.0～5.5と6.0の互換モードではWidthプロパティとheightプロパティの適用される範囲が標準的な仕様とは異なっています。本来はボックスの内容領域の幅や高さを設定するプロパティですが、これらInternet Explorerではボーダーとパディングの値を含んだ領域の幅や高さとして解釈されます。特にきっちりとしたデザインでボーダーやパディングを設定するとレイアウトの崩れを起こす原因となりますのでご注意下さい。

ボックスモデル解説図

解決策としては誤差を許容できるレイアウトで設計する事やブラウザのバグを利用したボックスモデルハックと呼ばれるテクニックを利用することで誤差を修正する事が出来ます。ここでは詳しく書きませんが、手法が数種類ありますので興味がある方はGoogleなどの検索エンジンでボックスモデルハックで検索して自分の使いやすい方法を見つけて下さい。

その他、大枠であるcontainer部分に幅を指定し忘れるとprimary-columnとsecondary-columnが正しく回り込みを行う事が出来ません。忘れずに幅を指定して下さい。

フッター部分であるsiteinfo-legalで回り込みの解除を行って下さい。

[ ▲トップに戻る ]

３カラムレイアウトの作成

色々とカスタマイズを行い情報量が増えてくると３カラムレイアウトが便利です。前述の２カラムレイアウトのアレンジで実現出来ます。

３カラムレイアウト説明図

スタイルシート部分は以下のようになっています。


body {
  text-align : center; /* バグを利用してブロックレベル要素をセンタリング */
}
div#container {
  width : 740px;       /* コンテンツ幅を740pxに設定 */
  margin-left : auto;  /* 左側のマージンを自動算出 */
  margin-right : auto; /* 右側のマージンを自動算出 */
  text-align : left;   /* body要素で指定したセンタリングを戻す */
}
div#wrapper {
  float : left;        /* ラッパー（プライマリーカラム＋セカンダリーカラム）を左側に回り込ませる */
  width : 540px;       /* 幅を540px（340px＋200px）に設定 */
}
div#primary-column {
  float : right;       /* プライマリーカラム（記事等）を右側に回り込ませる */
  width : 340px;       /* 幅を340pxに設定 */
}
div#secondary-column {
  float : left;        /* セカンダリーカラム（メニュー等）を左側に回り込ませる */
  width : 200px;       /* 幅を200pxに設定 */
}
div#extra-column {
  float : right;       /* エクストラカラム（掲示板等）を右側に回り込ませる */
  width : 200px;       /* 幅を200pxに設定 */
}
div#siteinfo-legal {
  clear : both;        /* 全ての回り込みの解除 */
}

HTML部分は下記のようになっています。


<body>
  <div id="container">
    <div id="branding">ヘッダー部の内容</div>
    <div id="wrapper">
      <div id="primary-column">記事等の内容</div>
      <div id="secondary-column">メニュー等の内容</div>
    </div>
    <div id="extra-column">掲示板等の内容</div>
    <div id="siteinfo-legal">フッター部の内容</div>
  </div>
</body>

HTMLにはwrapper→primary-column→secondary-column→extra-columnの順で記述し、レイアウト位置をスタイルで設定する事でCSS未対応のブラウザや音声ブラウザなどでも一番読んで欲しい記事部分を一番最初に表示する事が出来ます。

３カラムレイアウトも２カラムレイアウト同様、ボーダーやパディングを与える場合にはボックスモデルハックを施す必要がありますので注意して下さい。

[ ▲トップに戻る ]

カウンターの設置

自分のサイトが出来ると毎日どれくらいの人が訪れているか知りたくなると思います。FC2では無料カウンターサービスを行っていますので来訪者カウンターを設置してみましょう。利用するには無料のユーザー登録が必要です。

スゴいカウンター

スゴいカウンターの申し込みサイト

ユーザー登録

画面左側にある「ユーザー登録」をクリックして下さい。

ユーザー登録フォーム

ユーザー情報入力フォームが表示されますので各項目を入力後、新規ユーザー登録ボタンを押して下さい。正常に登録されるとアカウント名とパスワードが登録したメールアドレス宛に発行されますので誤って削除しないように保存しておいて下さい。

ログイン

発行されたアカウント名とパスワードを入力してログインすると管理者画面に入れますのでメニューの一覧から「サイト情報」を選択して下さい。HTMLコードが生成されますので希望のカウンターのHTMLコードをコピーして自分のサイトの任意の場所に貼り付けて下さい。

[ ▲トップに戻る ]

アクセス解析の設置

アクセス解析を設置すると時間別のアクセス統計やどの国の人がどのブラウザを使ってアクセスしているかなど知ることが出来ます。閲覧者の画面サイズなども知ることが出来ますので、自分でテンプレートを作成する際にどの解像度をターゲットにするかの目安にするといいでしょう。

FC2では高機能なアクセス解析のサービスを提供していますので、アクセス解析を設置してみましょう。利用には無料のユーザー登録が必要です。

FC2アクセス解析

FC2アクセス解析の申し込みサイト

登録はコチラから

画面左側にある「ユーザー登録」をクリックして下さい。

ユーザー登録フォーム

ユーザー情報入力フォームが表示されますので各項目を入力後、登録ボタンを押して下さい。正常に登録されるとアカウント名とパスワードが登録したメールアドレス宛に発行されますので誤って削除しないように保存しておいて下さい。

発行されたアカウント名とパスワードを入力してログインすると管理者画面に入れますのでメニューの一覧から「HTMLタグ取得」を選択して下さい。HTMLコードが生成されますのでフレームを使用しない場合のHTMLコードをコピーして下さい。


<!--アクセス解析タグ　ここから-->
<script language="JavaScript" src="http://analyzer.fc2.com/analyzer.js?uid=nnnnnn"></script>
<noscript><div align="right"><a href="http://analyzer.fc2.com/" target="_blank">アクセス解析</a><a href="http://flowerfan.com/" target="_blank">花</a>
<a href="http://fc2.com/">無料</a><a href="http://fc2web.com/">ホームページ</a> <a href="http://blog.fc2.com/">ブログ</a> <a href="http://blog.fc2.com/">blog</a>
</div></noscript>
<!--アクセス解析タグ　ここまで-->

実際にはuid=nnnnnnの部分に貴方のユーザーIDが表示されていますが、このようなアクセス解析を実行するためのJavascriptが生成されます。

テンプレートの設定でHTMLの編集を行います。タグは必ずbodyタグの直下に挿入して下さい。他のところに貼り付けると正常に表示されなかったり、正常に解析出来ない場合があります。


<html>
  <head>
    <-- バナーの種類や位置を変更する際はこの部分にmeta要素を挿入して下さい -->
  </head>
  <body>
    <!-- この部分にアクセス解析用のコードを挿入して下さい -->
    <div id="container">
      <div id="branding">ヘッダー部の内容</div>
      <div id="primary-column">記事等の内容</div>
      <div id="secondary-column">メニュー等の内容</div>
      <div id="siteinfo-legal">フッター部の内容</div>
    </div>
  </body>
</html>

正しく挿入されていればサイトにアクセスした際に解析用のバナーが表示されているはずです。バナーは約8秒で自動的に非表示になります。表示するバナーの種類や位置は<head>から</head>の間にmeta要素を追加する事により変更出来ます。詳しくはヘルプをご覧下さい。

[ ▲トップに戻る ]

月別・カテゴリ別アーカイブのドロップダウンリスト化

月別・カテゴリ別アーカイブなどが増えてくるとどうしてもサイトが縦長になってしまいます。コンパクトにまとめたいという方はドロップダウンリスト化してみましょう。ドロップリスト化にはJavaScriptの追加とHTML部分の修正が必要です。JavaScriptは<head>から</head>の間に挿入して下さい。


<script type="text/javascript">
<!--
function jumpmenu(targ,selObj,restore) {
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>

月別アーカイブを展開している部分は以下の部分です。


<h2 class="monthly-archives">MONTHLY</h2>
<!--archive-->
<ul>
  <li><a href="<%archive_link>" title="「<%archive_year>年<%archive_month>月」の記事一覧"><%archive_year>-<%archive_month> : <%archive_count></a></li>
</ul>
<!--/archive-->

上記の部分をこのように書き換えて下さい。


<h2 class="monthly-archives">MONTHLY</h2>
<form id="monthly_archives" name="monthly_archives" action="">
  <select name="menu" onchange="jumpmenu('parent',this,0)">
    <option value="<%url>" selected="selected">■月別</option>
    <!--archive-->
    <option value="<%archive_link>">■<%archive_year>-<%archive_month> : <%archive_count></option>
    <!--/archive-->
  </select>
</form>

カテゴリ別アーカイブを展開している部分は以下の部分です。


<h2 class="categories-archives">CATEGORIES</h2>
<!--category-->
<ul>
  <li><a href="<%category_link>" title="カテゴリ「<%category_name>」の記事一覧"><%category_name> : <%category_count></a></li>
</ul>
<!--/category-->

上記の部分をこのように書き換えて下さい。


<h2 class="categories-archives">CATEGORIES</h2>
<form id="categories_archives" name="categories_archives" action="">
  <select name="menu" onchange="jumpmenu('parent',this,0)">
    <option value="<%url>" selected="selected">■カテゴリ別</option>
    <!--category-->
    <option value="<%category_link>">■<%category_name> : <%category_count></option>
    <!--/category-->
  </select>
</form>

正しくスクリプトの挿入と該当部分の修正が出来ていればドロップリスト化されているはずです。最新のエントリー部分も同様に修正すればドロップリスト化出来ますので頑張って修正してみて下さい。

[ ▲トップに戻る ]