ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - ボタンなしのプルダウンをつくりたい!

ボタンなしのプルダウンをつくりたい!

プルダウンがどんな物なのかわからない人もいると思うので、見本をつくってみました。今回はボタンのないタイプなので、中にある項目を選ぶとそのページに移動する仕組みになっています。(これは見本なので移動しません)




プルダウンをつくりたい!共通編

【参考記事】 「はじめてのFC2ブログカスタマイズ」様:月別・カテゴリ別アーカイブのドロップダウンリスト化  

今回は">カテゴリー・月別アーカイブ・最近のコメント・最近のエントリー・最近のトラックバック・リンクをプルダウンする方法を紹介します。まずどれをプルダウンするにも、必要な作業をします。

最初にテンプレートの設定からHTMLの編集を開きます。そして上の方にある</head>を探します。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。

このブログの場合は・・・

title="<%nextentry_title>" /><!--/nextentry-->
</head>
<body>

この様になっていました。見つかったらこの</head>のすぐ上に下記のものをコピーして張りつけます。

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



このブログを例にすると、

title="<%nextentry_title>" /><!--/nextentry-->
<script type="text/javascript">
<!--
~~~~~~
//-->
</script>

</head>
<body>

この様に張りつけます。
ここまでが共通する作業です。できましたら更新をおして保存して下さい。

プルダウンをつくりたい!カテゴリー編

共通編の作業が終わってからこの作業をして下さい。

プラグインの設定からカテゴリーの設定の変更を選んで下さい。そして上の方にあるHTMLを編集するを選択します。
そして開くとタグが書いてあると思いますが、それを全部削除して下記のものをコピーして張りつけてください。

<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>


書き換えたら変更を押して保存をします。これでカテゴリーがプルダウンになっていますので、自分のブログを見て確認して下さい。

プルダウンをつくりたい!月別アーカイブ編

共通編の作業が終わってからこの作業をして下さい。

プラグインの設定から月別アーカイブの設定の変更を選んで下さい。そして上の方にあるHTMLを編集するを選択します。
そして開くとタグが書いてあると思いますが、それを全部削除して下記のものをコピーして張りつけてください。

<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>


書き換えたら変更を押して保存をします。これで月別アーカイブがプルダウンになっていますので、自分のブログを見て確認して下さい。

プルダウンをつくりたい!最近のコメント編

共通編の作業が終わってからこの作業をして下さい。

プラグインの設定から最近のコメントの設定の変更を選んで下さい。そして上の方にあるHTMLを編集するを選択します。
そして開くとタグが書いてあると思いますが、それを全部削除して下記のものをコピーして張りつけてください。

<form id="rcomment" name="rcomment" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)">
<option value="<%url>" selected="selected">■コメント別</option>
<!--rcomment-->
<option value="<%rcomment_link>#comment<%rcomment_no>">■<%rcomment_name> - <%rcomment_month>/<%rcomment_day></option>
<!--/rcomment-->
</select>
</form>


書き換えたら変更を押して保存をします。これで最近のコメントがプルダウンになっていますので、自分のブログを見て確認して下さい。

プルダウンをつくりたい!最近のエントリー編

共通編の作業が終わってからこの作業をして下さい。

プラグインの設定から最新の記事の設定の変更を選んで下さい。そして上の方にあるHTMLを編集するを選択します。
そして開くとタグが書いてあると思いますが、それを全部削除して下記のものをコピーして張りつけてください。

<form id="recent" name="recent" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)">
<option value="<%url>" selected="selected">■エントリー別</option>
<!--recent-->
<option value="<%recent_link>">■<%recent_title> - <%recent_month>/<%recent_day></option>
<!--/recent-->
</select>
</form>


書き換えたら変更を押して保存をします。これで最新の記事がプルダウンになっていますので、自分のブログを見て確認して下さい。
※記事のタイトルが長すぎると、プルダウンも長くなってしまうので、そんな時はonchange="jumpmenu('parent',this,0)">の)"と>の間にstyle="width:150px;"と入れてみてください。(数字は自分の好きな大きさに変えて下さい)

プルダウンをつくりたい!最近のトラックバック編

共通編の作業が終わってからこの作業をして下さい。

プラグインの設定から最近のトラックバックの設定の変更を選んで下さい。そして上の方にあるHTMLを編集するを選択します。
そして開くとタグが書いてあると思いますが、それを全部削除して下記のものをコピーして張りつけてください。

<form id="rtrackback" name="rtrackback" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)">
<option value="<%url>" selected="selected">■トラックバック別</option>
<!--rtrackback-->
<option value="<%rtrackback_link>#trackback<%rtrackback_no>">■<%rtrackback_blog_name> - <%rtrackback_month>/<%rtrackback_day></option>
<!--/rtrackback-->
</select>
</form>


書き換えたら変更を押して保存をします。これで最近のトラックバックがプルダウンになっていますので、自分のブログを見て確認して下さい。

プルダウンをつくりたい!リンク編

共通編の作業が終わってからこの作業をして下さい。

プラグインの設定からリンクの設定の変更を選んで下さい。そして上の方にあるHTMLを編集するを選択します。
そして開くとタグが書いてあると思いますが、それを全部削除して下記のものをコピーして張りつけてください。

<form id="link" name="link" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)">
<option value="<%url>" selected="selected">■リンク</option>
<!--link-->
<option value="<%link_url>">■<%link_name></option>
<!--/link-->
</select>
</form>


書き換えたら変更を押して保存をします。これでリンクがプルダウンになっていますので、自分のブログを見て確認して下さい。
※リンクを新しい窓で開きたい人は、onchange="jumpmenu('parent',this,0)">の部分をonchange="window.open(this.options[selectedIndex].value)">と書き換えて下さい。

プルダウンの長さを変えるには、onchange="jumpmenu('parent',this,0)">の"と>の間にstyle="width:150px;"と入れてみてください。(数字は自分の好きな大きさに変えて下さい)


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/309-c6a9d58b   

Template Designed by DW99