Paroday

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

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

menue-p

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

pado-menue-ip
■1カラム
paeo-menue-p / paeo-menue-ip
■2カラム
pazo-menue-p / pazo-menue-ip
■3カラム
pado-menue-p / pado-menue-ip

履歴

変更は3箇所です。変更が済めば、【入替え】色々なプラグインをメニューに入れるから必要なものを選んでHTMLに組み込んでください。

(1)変更場所 ▼ スタイルシートの編集-「幅変更 ---」

#menunavi li{ width: ○○○px; }  /* メニューリンク */
/* 可変のときは { } 内に width: ○○○px; を入れる
サイズは (メニューリンク幅 * リンクの数) = □□□px
固定幅に戻すときは空っぽに */
#menunavi ul{  }

上記(#menunavi li から #menunavi ul{  } まで)を下記に変更。

#menunavi li{ width: ○○○px; }  /* メニューリンク */
#menunavi ul ul.c-menu {
  top: 0px;left: ○○○px;  /* 上記と同じ値 */
}
/* メニューリンクの合計値:  リンク幅 * リンク数 = □□□px */
#menunavi ul{ width: □□□px; }

menue,menue-i,カラム数などで数値は異なりますが、変更の範囲は同じです。
○○○には現在使っている幅を入れ、□□□には、リンク幅(○○○)px×リンク数の値を入れます。
#menunavi ul{  } のwidthは必須になります。
[例] 145pxで5個なら、145*5=725px

#menunavi li{ width: 145px; }  /* メニューリンク */
#menunavi ul ul.c-menu {
  top: 0px;left: 145px;  /* 上記と同じ値 */
}
/* メニューリンクの合計値:  リンク幅 * リンク数 = □□□px */
#menunavi ul{ width: 725px; }

(2)変更場所 ▼ スタイルシートの編集-「メニューリンク色 ---」

「メニューリンク色 --- */」の項目をすべて以下に入替えます。幅変更の少し下にあります。
(ダウンロード時期によっては「メニュー --- */」と表記)

/* ------------------------------------------- メニューリンク色 --- */

/* ----------------------------------------- サイドバーリンク色 --- */

最下部の[A][B]は該当する方を残して、もう一つは削除。HTMLの最下部付近に id="copyright" があれば[B]、address があれば[A]を残します。よくわからない場合は両方残しても構いません。

(3)変更場所 ▼ スタイルシートの編集-「menu ---」

英字「menu --- */」の項目をすべて以下に入替えます。下の方にあります。
通常版の『menue』は[ア]を。『menue-i』は[イ]に入替えます。

【ア】menueを使用 ※1,2,3カラム共通
ただし、3カラムは2行目を margin: 0 6px; に変更。

/* ----------------------------------------------------- menu --- */

/* ------------------------------------------------------------- */

【イ】menue-iを使用 ※1,2,3カラム共通

/* ----------------------------------------------------- menu --- */

/* ------------------------------------------------------------- */

最下部の[A][B]は該当する方を残して、もう一つは削除。HTMLの最下部付近に id="copyright" があれば[B]、address があれば[A]を残します。よくわからない場合は両方残しても構いません。

変更場所 ▼ HTMLの編集-検索ワード「リンク変更」

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

メニューリンクの幅や個数に合わせて調整してください。
プルダウンリンクは <!--[if !IE]>--> から </ul></li> までが一つの塊です。長いのでコピーミスに注意してください。
必要なものを以下より選び、入替えてください

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

■1記事リンク

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

<li><a href="記事URL">タイトル</a></li>

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

人気のあるページなど複数の記事にリンク。赤字部分(li~/li)を増やして追加します。

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Bookmarks</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>

■親子カテゴリ

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

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Categories</a>
<ul class="menu-s" id="pdcat">
<!--category-->
<!--category_sub_begin--><ul class="c-menu"><!--/category_sub_begin-->
<!--category_nosub--><li><!--/category_nosub-->
<!--category_parent-->
<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<!--/category_parent-->
<!--category_sub_hasnext--><li><!--/category_sub_hasnext-->
<!--category_sub_end--><li><!--/category_sub_end-->
<a href="<%category_link>"><%category_name></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>

■新着記事

投稿日時削除/日付を最初から表示

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Recent Entries</a>
<ul class="menu-m">
<!--recent--><li class="rnew"><a href="<%recent_link>"><%recent_title>
<span><%recent_month>.<%recent_day>&nbsp;<%recent_youbi>&nbsp;<%recent_hour>:<%recent_minute></span></a></li><!--/recent-->
</ul>
</li>

■コメント

タイトルを最初から表示

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Comments</a>
<ul class="menu-m">
<!--rcomment--><li class="rcom"><a href="<%rcomment_link>#comment<%rcomment_no>"><span class="stxt"><%rcomment_month>.<%rcomment_day>&nbsp;<%rcomment_youbi></span>&nbsp;&nbsp;<%rcomment_name>
<span class="etitle"><%rcomment_etitle></span></a></li><!--/rcomment-->
</ul>
</li>

■トラックバック

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Trackbacks</a>
<ul class="menu-m">
<!--rtrackback--><li class="rcom"><a href="<%rtrackback_link>#trackback<%rtrackback_no>"><span class="stxt"><%rtrackback_month>.<%rtrackback_day></span>&nbsp;&nbsp;<%rtrackback_blog_name>
<span class="etitle"><%rtrackback_title></span></a></li><!--/rtrackback-->
</ul>
</li>

直接トラックバック先にリンクする場合(認証設定推奨)

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Trackbacks</a>
<ul class="menu-m">
<!--rtrackback--><li class="rcom"><a href="<%rtrackback_url>" target="_blank"><span class="stxt"><%rtrackback_month>.<%rtrackback_day></span>&nbsp;&nbsp;<%rtrackback_blog_name>
<span class="etitle"><%rtrackback_title></span></a></li><!--/rtrackback-->
</ul>
</li>

■リンク

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Links</a>
<ul class="menu-s">
<!--link--><li><a href="<%link_url>" target="_blank"><%link_name></a></li><!--/link-->
</ul>
</li>

■ユーザータグ

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Tag</a>
<ul class="menu-m" id="urtag">
<!--ctag--><li><a href="<%ctag_url>" title="<%ctag_count>"><%ctag_name></a></li><!--/ctag-->
</ul>
</li>

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

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->
<a href="#header">Tag</a>
<ul class="menu-m" id="urtag">
<!--rtag--><li><a href="<%rtag_url>" title="<%rtag_count>"><%rtag_name></a></li><!--/rtag-->
</ul>
</li>

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

ユーザータグ用のスタイルを追加します。
全体幅が大きすぎる場合は位置を left: -50px; などとして調整します。
リンク上線色2・リンク背景色2には「メニュー --- */」と同じ値を入れます。

#menunavi #urtag{
  width: 250px;  /* 全体幅 */
  padding: 3px 5px 4px;
  margin: 0;
  border-top: 1px #4091b1 solid;  /* リンク上線色2 */
  left: 0px;  /* 位置 */
}
#menunavi #urtag {
  background: #3989a9;  /* リンク背景色2 */
}
#menunavi #urtag li {
  display: inline;
  float: none;
  width: auto;
  margin: 0 5px 0 0;  /* 右余白5px */
  line-height: 1.7;  /* 高さ */
}
#menunavi #urtag li a {
  display: inline;
  position: static;
  padding: 0;
  letter-spacing: 0;
  border: 0;
  vertical-align: middle;
  line-height: 1.7;  /* 高さ */
}
#menunavi #urtag li > a {
  filter: alpha(opacity=100);
}

変更場所 ▼ HTMLの編集-検索ワード「recent_hour」

下記を削除します。

&nbsp;<%recent_hour>:<%recent_minute>

リンク名の下にある class="menu-○" でプルダウンの幅を指定します。
menu-s(リンク幅と同じ)、menu-m(ワイド)、menu-l(ワイド2)
カテゴリのプルダウン幅は親子カテゴリの幅を変更を参考にしてください。

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

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

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

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

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

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

ワイド幅は小文字のエム「m」

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

ワイドの数値を増減させることでプルダウンの幅が変わります。
もう少し幅が必要な場合は 210px に変更するなどして調整してください。あまり長いと全体をはみ出してしまうので、リンクの位置(幅の広いリンクは左側に置く)や個数に注意してください。

#menunavi ul.menu-m {
  width: 210px;  /* ワイド */
}

特定のプルダウン幅を任意に変更

※ここでは新着記事の幅を変更します

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

「m」を小文字のエル「l」に書き換えます。

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

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

幅の調整は以下の箇所を変更。

#menunavi ul.menu-l {
  width: 270px;  /* ワイド2 */
}

新着記事だけでなく、他のリンクでも class="menu-l" にすれば、そのプルダウンもワイド2の幅になります。

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

変更場所 ▼ スタイルシートの編集-「メニュー --- */」「位置 */」

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

} /* 位置 */
#menunavi ul.menu-m {
  left: -30px;
}

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

動作がスムーズに

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

以下のスタイルシートを追記します。

#menunavi li.rcom a span.etitle,
#menunavi li.rnew a span {
  display: block;
}

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

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

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

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

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

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

<ul class="menu-s" id="pdcat">
<!--category-->
(略)
<!--/category-->

上記部分を以下に変更します(かなり短くなります)

<ul class="menu-c" id="pdcat">
<!--category-->
<li><a href="<%category_link>"><%category_name></a></li>
<!--/category-->

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

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

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

<ul class="menu-s" id="pdcat">
<!--category-->
(略)
<!--/category-->

上記部分を以下に変更します

<ul class="menu-c" id="pdcat">
<!--category-->
<!--category_nosub-->
<li><a href="<%category_link>"><%category_name></a></li>
<!--/category_nosub-->
<!--category_sub_hasnext-->
<li><a href="<%category_link>"><%category_name></a></li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li><a href="<%category_link>"><%category_name></a></li>
<!--/category_sub_end-->

<!--/category-->

共通 ▼ スタイルシートの編集

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

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

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

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

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

変更場所 ▼ スタイルシートの編集-「メニュー --- */」「カテゴリテキスト」

left → center に変更

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

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

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

#menunavi #pdcat {
  width: 160px;/* カテゴリ幅 */
}

「幅変更 ---」の下記部分をカテゴリ幅と同じ値にします。
コメントの /* 上記と同じ値 */ は無視してください。

#menunavi li{ width: 142px; }  /* メニューリンク幅 */
#menunavi ul ul.c-menu {
  top: 0px;left: 160px;  /* 上記と同じ値 */
}

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

すべての <%category_name> の後ろに赤字部分を追加します。
※初期状態では1箇所のみ。複数列[B]は3箇所。

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

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

以下をスタイルシートに追加します。
100%にするとカテゴリの名前と同じサイズになります。

span.ccount{
  font-size: 84.1%; /* 文字サイズ */
  padding-left: 3px; /* 余白 */
}

累計数を2行目に表示

カテゴリ複数列2行

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

上記で追加したスタイルシートを変更します。
テキスト左寄せの場合は、上下余白の行を 3px 5px 3px としてください。

span.ccount{
  font-size: 80%; /* 文字サイズ */
  padding-left: 0px; /* 余白 */
  display: block;
}
#menunavi ul ul.menu-c li a {
  padding: 3px 0px 3px; /* 上下余白3px */
}

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

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

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

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

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

.cate0,.cate1,.cate5{
 display: none;
}

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

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

赤字部分を追記します。

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

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

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

<li class="cate<%category_no>"><a href="<%category_link>"><%category_name></a></li>

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

<!--[if !IE]>--><li class="menuh"><!--<![endif]-->
<!--[if gte IE 7.0]><li class="menuh"><![endif]-->
<!--[if lte IE 6.0]><li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';"><![endif]-->

上記箇所をすべて下記に書き換えるとJavascriptが優先されます。プルダウンできない場合はこちらに切り替えてください。初期状態では、Categoriesに2箇所、Recent EntriesとCommentsに1箇所ずつの計4箇所あります。その他プラグインを追加した場合も該当箇所を書き換えます。

<li class="menuh" onmouseover="javascript:this.className='menuon';" onmouseout="javascript:this.className='menuh';">

私のPC環境(CPU1.2GHz、メモリ512MB-VRAM共有)において、『Opera9』『IE7』のJavascriptマウスオーバー時のカーソル動作が遅くなったので、振り分けにしました。恐らく低スペックなPC環境によるものではないかと思います。

IE6がちょうどいいPC環境(CPU1.2GHz、メモリ512MB-VRAM共有)では、透過するとカーソル動作が少し遅くなるので、IE6以下は除外しています。IE6でも透過する場合は以下の変更をしてください。
(全然動かせないくらい遅くなるわけではありません)

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

「li」と「a」のあいだにある「>」を削除します。

#menunavi li li a,li #urtag {
  min-height: 1px;
  filter: alpha(opacity=90);
}

ユーザータグを使っている場合は以下も削除。

#menunavi #urtag li a {
  filter:alpha(opacity=100);
}

関連記事