Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

プルダウンメニュー

 適当なテンプレートを複製して、テンプレート一覧から複製したテンプレートの[編集]をクリックして、再読み込み。その後、pado-mildのメニュープルダウンよりHTMLとスタイルシートをコピーして、貼り付けます。

 検索ワード「」は、Ctrlキー+Fキー(command+Fキー)で変更場所を探すためのキーワードです。「タイトル」となっていれば検索ウィンドウに「タイトル」と入力してください

変更場所 ▼ スタイルシートの編集-検索ワード「幅変更」

 「幅変更」の #menuNavi li の widthを 増減させます。増やしすぎると、リンクが二段になるので注意します。

#menuNavi li {
 width: 169px; /* menu width */
}
#menuNavi ul ul.c-menu {
 top: 0; left: 169px; /* menu width */
}

 全体幅にあわせる場合は、#menuNavi li.home の width を増減させて調整します。最初のHOMEリンクのみ横幅が変わります。

#menuNavi li.home
 width: 172px; /* menu width */
}

変更場所 ▼ HTML編集 - 検索ワード「class="home"」

<ul class="menuList">
<li class="home"><a href="./">Home</a></li>
 
←入れ替え部分
 
</ul>

 メニューリンクの幅は個数に合わせて調整します。必要なものを以下より選び、入れ替えてください。

 プルダウン幅は menu- の箇所を変更。s(通常リンク幅)、m(ワイド)、l(ワイド2)
 カテゴリ以外の幅変更はプルダウンの幅を変えるを参考にしてください。

1記事リンク

 プロフィールページなど1つの記事にリンク。Aboutにあたります。

<li><a href="記事URL">リンク名</a></li>

複数記事プルダウンリンク

 人気のあるページなど複数の記事にリンク。(<li>)を増やして追加します。

<li class="menuh"><a href="#pagetop">人気記事</a>
 <ul class="menu-m">
  <li><a href="URL1">リンク1</a></li>
  <li><a href="URL2">リンク2</a></li>
  <li><a href="URL3">リンク3</a></li>

  </ul>
</li>

親子カテゴリ

 カテゴリの幅変更は親子カテゴリの幅を変更
 複数列化はカテゴリを複数列並べるを参考にしてください。

<!-- Categories Start -->
<li class="menuh"><a href="#pagetop">Categories</a>
 <ul class="menu-s" id="pdcat">
<!--category-->
<!--category_nosub-->  <li><!--/category_nosub-->
<!--category_parent-->  <li class="menuh"><!--/category_parent-->
<!--category_sub_begin-->
   <ul class="c-menu">
<!--/category_sub_begin-->
<!--category_sub_hasnext-->    <li><!--/category_sub_hasnext-->
<!--category_sub_end-->    <li><!--/category_sub_end-->
<a href="blog-category-<%category_no>.html"><%category_name><!--category_sub_hasnext--><span> (<%category_count>)</span><!--/category_sub_hasnext--><!--category_sub_end--><span> (<%category_count>)</span><!--/category_sub_end--></a><!--category_nosub--></li>
<!--/category_nosub-->
<!--category_sub_hasnext--></li>
<!--/category_sub_hasnext-->
<!--category_sub_end--></li>
   </ul>
  </li>
<!--/category_sub_end--><!--/category-->
 </ul>
</li>
<!-- //Categories End -->

新着記事

<!-- RecentEntries Start -->
<li class="menuh"><a href="#pagetop">Recent Entries</a>
 <ul class="menu-m">
<!--recent-->
  <li class="rnew"><a href="<%recent_link>"><span><%recent_year>-<%recent_month>-<%recent_day></span><%recent_title></a></li>
<!--/recent-->
 </ul>
</li>
<!-- //RecentEntries End -->

コメント

<!-- Comments Start -->
<li class="menuh"><a href="#pagetop">Comments</a>
 <ul class="menu-m">
<!--rcomment-->
  <li class="rcom"><a href="<%rcomment_link>#comment<%rcomment_no>"><span class="stxt"><%rcomment_year>-<%rcomment_month>-<%rcomment_day> </span> <%rcomment_name>
   <span class="etitle"><%rcomment_etitle></span></a></li>
<!--/rcomment-->
 </ul>
</li>
<!-- //Comments End -->

トラックバック

<!-- Trackback Start -->
<li class="menuh"><a href="#pagetop">Trackback</a>
 <ul class="menu-m">
<!--rtrackback-->
  <li class="rcom"><a href="<%rtrackback_link>#trackback<%rtrackback_no>"><span class="stxt"><%rtrackback_year>-<%rtrackback_month>-<%rtrackback_day> </span> <%rtrackback_blog_name>
   <span class="etitle"><%rtrackback_title></span></a></li>
<!--/rtrackback-->
 </ul>
</li>
<!-- //Trackback End -->

リンク

<!-- Links Start -->
<li class="menuh"><a href="#pagetop">Links</a>
 <ul class="menu-m">
<!--link-->
  <li><a href="<%link_url>" target="_blank"><%link_name></a></li>
<!--/link-->
 </ul>
</li>
<!-- //Links End -->

ユーザータグ

<!-- Tag Start -->
<li class="menuh"><a href="#pagetop">Tags</a>
 <ul class="menu-m" id="urtag">
<!--ctag-->
  <li><a href="<%ctag_url>" title="<%ctag_count>"><%ctag_name></a></li>
<!--/ctag-->
 </ul>
</li>
<!-- //Tag End -->

 記事に付けられた順に並べる場合

<!-- Tag Start -->
<li class="menuh"><a href="#pagetop">Tag</a>
 <ul class="menu-m" id="urtag">
<!--rtag-->
  <li><a href="<%rtag_url>" title="<%rtag_count>"><%rtag_name></a></li>
<!--/rtag-->
 </ul>
</li>
<!-- //Tag End -->

変更場所 ▼ スタイルシートの編集

 ユーザータグのスタイルを追加します。
 全体幅が大きい場合は位置を left: -50px; などとして調整します。
 border[2]・background[2]にはメニューに合わせた色を指定します。

#menuNavi #urtag{
 width: 250px; /* tag width */
 margin: 0; padding: 5px 5px 6px; left: 0px;
 border-top: 1px #4a433a solid; /* border[2] */
}
#menuNavi #urtag {
 background: #433930; /* background[2] */
}
#menuNavi #urtag li {
 display: inline; float: none; width: auto;
 margin: 0 5px 0 0; line-height: 1.4;
}
#menuNavi #urtag li a {
 display: inline; position: static; padding: 0;
 border: 0; vertical-align: middle; line-height: 1.4;
}

 class="menu-○" でプルダウンの幅を指定します。

 menu-s(リンク幅と同じ)、menu-m(ワイド)、menu-l(ワイド2)
 カテゴリのプルダウン幅は親子カテゴリの幅を変更を参考にしてください。

新着記事・コメントなどのプルダウン幅をメニューリンクと同じ幅に

変更場所 ▼ HTMLの編集

 リンク幅と同じにするには「m」を小文字のエス「s」に書き換えます。

<a href="#">Recent Entries</a>
<ul class="menu-s">

新着記事・コメントなどのプルダウン幅を任意に変更

変更場所 ▼ HTMLの編集

<a href="#">Recent Entries</a>
<ul class="menu-m">

変更場所 ▼ スタイルシートの編集 - 「ul.menu-m」

#menuNavi ul.menu-m {width: 200px;} /* child m */

新着記事・コメントなどのプルダウン幅を任意に変更2

変更場所 ▼ HTMLの編集

<a href="#">Recent Entries</a>
<ul class="menu-l">

変更場所 ▼ スタイルシートの編集 - 「ul.menu-m」

#menuNavi ul.menu-l {width: 270px;} /* child l */

 プルダウンの開始位置を調整します。

変更場所 ▼ スタイルシートの編集

 プルダウンの位置を変更したい class="menu-○" の設定を追加します。

body #menuNavi ul.menu-m {
 left: -30px;
}

 『left』に負の値を入れると左にずれます。「m」を小文字のエル「l」に変えると class="menu-l" のプルダウンの位置が変わります。

 親子カテゴリを使用している場合は、子カテゴリが最も多いものを最初(1番上)にもってきた方が視覚的にいいかもしれません。並びの位置は、[環境設定]-[カテゴリの編集]-[カテゴリ一覧]の項目で変更できます。

 ブラウザによってどうしても文字サイズの大きさの違いは生じます。カテゴリの名前がメニューリンク幅ぎりぎりの場合は、親子カテゴリの幅を変更カテゴリを複数列並べるで、広めの幅を確保してください。特に複数並べる場合は、2行になるとずれが生じるので注意が必要です。

 カテゴリの領域を拡大して、2列3列並びにします。

 カテゴリの名前が必ず1行で表示されるように幅を調整してください。
 HTMLは使用状況にあわせて、[A][B]どちらかを選択してください。

変更場所 ▼ HTMLの編集-「リンク変更」-Categories

[A]親子カテゴリを使用していない場合

<!-- Categories Start -->
<li class="menuh"><a href="#pagetop">Categories</a>
<ul class="menu-c" id="pdcat">
<!--category-->
<li><a href="<%category_link>"><%category_name><span> (<%category_count>)</span></a></li>
<!--/category-->
</ul>
</li>
<!-- //Categories End -->

[B]親子カテゴリを作成している場合

 「子カテゴリのないカテゴリ」と「子カテゴリ」のみ表示するようにします。「子カテゴリをもつ(親)カテゴリ」の記事がある場合は、該当記事を「子カテゴリ」に設定するか、親から外す(「子カテゴリのないカテゴリ」に変更する)設定を行ってください。

変更場所 ▼ HTMLの編集-「リンク変更」-Categories

<!-- Categories Start -->
<li class="menuh"><a href="#pagetop">Categories</a>
<ul class="menu-c" id="pdcat">
<!--category-->
<!--category_nosub-->
<li><a href="<%category_link>"><%category_name><span> (<%category_count>)</span></a></li>
<!--/category_nosub-->
<!--category_sub_hasnext-->
<li><a href="<%category_link>"><%category_name><span> (<%category_count>)</span></a></li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li><a href="<%category_link>"><%category_name><span> (<%category_count>)</span></a></li>
<!--/category_sub_end-->
<!--/category-->
</ul>
</li>
<!-- //Categories End -->


[A][B]共通 ▼ スタイルシートの編集

 以下をスタイルシートに追加します

#menunavi ul.menu-c {
  width: 338px;  /* メニューリンクの倍の幅 */
}
#menunavi ul ul.menu-c li {
  width: 169px;  /* メニューリンクと同じ幅 */
  float: left;
}

 倍の幅の箇所を3倍(507px)にすれば、3列になります。
 メニューリンクの幅によって数値は異なります(ここでは初期値の169pxとする)
 カテゴリの名前が2行になってしまうときは以下のようにして幅を広げてください。

メニューリンクとは違う大きさにする
[例]160pxを2列

#menunavi ul.menu-c {
  width: 320px;  /* カテゴリ幅の倍 */
}
#menunavi ul ul.menu-c li {
  width: 160px;  /* カテゴリ幅 */
  float: left;
}

変更場所 ▼ スタイルシートの編集-「#pdcat li」

left → center に変更

#menuNavi #pdcat li{ text-align: center; } /* カテゴリテキスト */

変更場所 ▼ スタイルシートの編集

 以下をスタイルシートに追加します。160pxの部分で幅が増減します。
※複数列はカテゴリを複数列並べるで変更

#menuNavi #pdcat {
  width: 169px;/* カテゴリ幅 */
}

 下記部分をカテゴリ幅と同じ値にします。

#menuNavi li {
  width: 169px;  /* menu width */
}
#menuNavi ul ul.c-menu {
  top: 0px;left: 169px;  /* menu width */
}

変更場所 ▼ HTMLの編集-「Categories」

 テンプレート上にある以下の箇所を削除します。初期状態では2つあります。

<span> (<%category_count>)</span>

 スタイルシートとプラグインのHTMLに以下の変更を加えます。

変更場所 ▼ スタイルシートの編集

以下をスタイルシートに追加します

.catepカテゴリ番号{
 display: none;
}

 カテゴリ番号は「blog-category-0.html」の「0」の部分です。プラグインで表示したくないカテゴリの番号を入れます。複数選択する場合は後ろに「,.cateカテゴリ番号」を追記します。

.catep0,.catep1,.catep5{
 display: none;
}

 とすると、番号「0」「1」「5」のカテゴリが非表示になります。

変更場所 ▼ HTMLの編集-「Categories」

 赤字部分を追記します。

 追記するのは「nosub」「sub_hasnext」「sub_end」の行です。

<!--category_nosub--> <li class="catep<%category_no>"><!--/category_nosub-->
<!--category_sub_hasnext--> <li class="catep<%category_no>"><!--/category_sub_hasnext-->
<!--category_sub_end--> <li class="catep<%category_no>"><!--/category_sub_end-->

 カテゴリを複数列並べる変更をしている場合は以下の箇所に赤字部分を加えます。
 親子カテゴリを使用していない:1箇所
 親子カテゴリを作成している:3箇所

<li class="catep<%category_no>"><a href="<%category_link>"><%category_name><span> (<%category_count>)</span></a></li>

関連記事