Webstyle #02のドロップダウンメニュー

今回はWebstule #02の「blue light」「a tree」「カスタマイズ」「butterfly」に実装されているドロップダウンメニューです。
使用したのはMultilebel Droppdown Menu です。
このメニューのスクリプトは、上のサイトからダウンロードするといいです。
説明も書いてありますが、英語なのであしからず。

「Webstyle #1」シリーズに使用されているドロップダウンメニューのdroppyとよく似ていますが、ちょっと違うのはマウスをメニューの上に持ってきたときのリストの出方です。
droppyはピロンと下にでてくるけど、こちらのメニューは左上から右下へ向かって出てきます。
この出方が気に入って、「Webstyle #1」シリーズで使おうかと思ったけど、あれにはリストの出方が合わない。しかし今回のテンプレではしっくり馴染んでます。

HTMLの構成はどのメニューも同じです。
HTMLもCSSも「Webstyle #01」シリーズと基本は同じなのですが、向こうは幅指定のためのクラスがついていてややこしいので、あらためてこちらのテンプレート用にもう一度書きます。

例によってカスタマイズは長くなるので、メニューのカスタマイズをされたい方は追記からどうぞ。
注）HTMLやCSSはコピーして使えますが、説明のために色文字になっているので、念のために一度メモ帳にコピーしたものをもう一度コピーして貼り付けてください。

Webstyle #02 blue light、a tree、カスタマイズ

2010年09月21日　配布
2011年06月08日　jqueryを最新版にした他、IE9に対応しました


擬似1カラムです。
       背景画像の邪魔にならないように、普段はプラグインが見えないようになっています。
       トップメニューの「Other Menus」をクリックすると、横にプラグインが現れます。
       もう一度「Other Menu」をクリックすると、プラグインはまた消えてなくなります。

プラグイン4とプラグイン5をそれぞれ記事の上と下に設置しました。
プラグイン4：トップページとそれに続く記事一覧ページで、記事の上に表示されます。
                  広告用に、タイトルはデフォルテで非表示になっています。
                  タイトルを表示させたい場合は、カスタマイズを参照してください。
プラグイン5：詳細記事ページで、記事とコメントフォームの間に表示されます。
                  広告用でタイトルは無しです。

「blue light」と「monochrome」はSEO用ではありませんが、HTMLのタイトル箇所に見出し用のタグをつけることでSEO向けになります。カスタマイズは追記に書いてあります。

テンプレート編集用エディターに大部分対応していますが、部分的にCSSで直接変更しなければならないところがあります。プラグインの左右変更はCSSで変更してください。カスタマイズは追記に書いてあります。


表示確認データはこちらを参照してください。
Web風仕様です。自分でサイトを作る手間が省けます。
ドロップダウンメニューを実装しています。忍者独自構文が直接書かれていますので、プラグインを設置しなくても自動的に情報を表示します。
カテゴリーとアーカイブ、キーワード検索表示ページでは、記事上部に該当記事のリストが表示されます。
プラグイン2は折りたたみ式です。
「a tree」と「monochrome」のプラグインは半透明で、不透明度が87％です。背景が少し透けて見えて、なおかつプラグインがはっきり見えるようになっています（更新版）
記事の下にランキング用バナー等を設置する箇所があります。バナーや広告を貼り付けたい方はこちらを参照してください。
「a tree」はSEO用です。ブログ管理ページ左側の「便利ツール」にある「検索エンジン登録」をするとSEOの確率が上がります。
コメント投稿者のメールアドレスは表示されません。コメント一覧ページの投稿者名にアドレスのリンクが付きますので、そちらで確認してください。
画像は差し替え自由です。この場合、ページ最下部の画像著作権者のリンクも変更してください。
テンプレートご使用の際には利用規約を一読ください。「a tree」はCrambon様から、「blue light」はThe Heart of Eternity様から素材をお借りしています。素材の再加工、および他での使用は厳禁です。素材は各作者様のサイトからダウンロードしてください。
ブログパーツおよび広告は、プラグイン4は490px以下のものを、プラグイン5は510px以下のものを、他のプラグインは170px以下のものを使用してください。

画像をクリックするとプレビューが見られます

blue light


a tree


monochrome -- カスタマイズ --

新作のお知らせ

大量のテンプレ修正のために遅くなっていましたが、やっとこさ新作を申請しました。
許可されるかどうかはまだわからないので、例によって配布されてから詳細記事を書きます。

新作は、大きな背景画像がよく見えるように、記事ブロックは左右寄せになっています。
一見1カラムですが、実は2カラム。
トップメニューの「Other Menus」をクリックすると、横にプラグインが現れます。
プラグインに邪魔されずに大きなイラストや写真を背景に入れられて、必要なときはプラグインを表示できるっていうのが、このテンプレの利点です。

今回はシリーズで3点出しましたが、全部カスタマイズを視野に入れています。
リンクの色指定がしやすいようにひとまとめにしたので、あちこちスクロールしなくてもよくなってます。
また、CSSがよく分かるように説明もいれたので、作業が楽になっています。
主要なブロックは忍者のclass名を使用していて、テンプレート編集エディターで編集できるので、背景画像も楽に入れられると思います。

フォームは去年の「桔梗」からテーブルタグを廃止して、今主流の定義リストになっていますが、テーブルと同じ外見に仕上げているのでそれが定義リストだとは誰にも分からない。
で今回は、指定の簡単な普通の定義リストフォームにしました。
単に、定義リストを使ってると分かってもらいたいだけなんですけどね（＾＾；）
フォームは定義リストですが、フォームブロックは変更していないので、編集エディターで背景を入れることができます。

今回は3点の内、1点だけがSEO向けです。
カスタマイズ用とブラック系はSEO向けではありませんが、HTMLの見出しのタグを入れるだけでSEO向けに変更できるようになっています。

そして今回も入れたドロップダウンメニューですが、下のリストの出方が前に使用したDroppyとは違います。
どこが違うのか、よく見てみてください。
この出方、結構気に入ってるんですよ。

さて、上記のほかにもプラグインの左右の変更など、カスタマイズ記事を書かないといけないのですが、テンプレートが配布されてからになります。
ドロップダウンメニューも以前とは少し違うので、また説明記事を書く予定です。
ドロップダウンは特に長くなると思うので、数日お時間を頂きますようお願いいたします。

あと、需要の多い2カラムをカスタマイズ版で作ろうと思っています。
でも、今は疲れたので、一休み（笑）

お詫び

先日忍者がフッターを変更したのに合わせて、19件のテンプレートを修正しましたが、今日IEのバグがあるのに気がつきました。
このバグが見えるのは、WindowsのIE6とIE7をご使用の方だけです。

IE6かIE7でプレビューを見ると分かりますが、画像に文章を回り込む指定をすると、上から文章が表示されずに真ん中に一行だけ表示されます。
実はある作者さんの画像指定をまねしたのですが、この作者さんも気がついてないわけですね（＾＾；）
修正時にIE6とIE7での確認をサボったツケですが、こういうバグがあるとは知らなかった・・・（大汗）

問題のあるテンプレートをすでにダウンロードされた方にはご迷惑をおかけしますが、8月30日以降に修正したテンプレートを週末に全部修正して申請し直しますので、問題のテンプレートをご使用の方は、申し訳ありませんが来週初めに更新されるものを再度ダウンロードしなおしてくださいますようにお願いいたします。
なお、IE8ではこのバグは修正されているので、他のモダンブラウザと同じように正常に表示されます。

修正箇所自体はわずかなので、自分でできるという方は、下に修正箇所を書きますので、テンプレート編集ページから修正をお願いいたします。

問題箇所：CSSの上部にある画像指定部分

/* 画像 */
img, a img {
    margin: 2px;
    border: 0;
    vertical-align: middle;
}

まず、赤字の部分を削除してください。
次にCSSをスクロールして記事ブロックの下のほうを探します。

/*************************************************
  記事ブロック
*************************************************/

/* 拍手
------------------------------------------------*/
.NinjaClap img { vertical-align: middle; }

拍手の部分の指定に、上のオレンジ色の指定を付け加えてください。
たったこれだけですので、すでに問題が起きて困っておられる方は、この方法で修正をお願いいたします。

またぞろぞろとテンプレート検索ページトップを占めることになってしまい、新作を出された作者さんには申し訳ないです。すんません。

IE6とIE7の画像回り込みバグ

大抵の有名なIEのバグは勉強したつもりだったのに、知らないバグにぶち当たったのでメモしておくことにしました。
今回は、自分で失敗したバグのメモです。

画像の回り込みバグ（IE6とIE7)

画像にalign属性で
<img align="left" />　や　<img align="right" />
と指定すると、文字を画像の横に回り込ませることができます。
ところがIE6とIE7では、画像のCSSにvertical-alignが指定されていると、回り込みが無効になってしまいます。値はtopでもmiddleでもbottomでも同じで、画像横に上から表示されるはずの文章が、真ん中に一行だけしか表示されません。

IE8を含む他のモダンブラウザでは問題なく正常に表示されるし、ブログで画像の回り込み機能を使う人は少ないようなのでバグに気がつかないことが多いですが、IE6とIE7使用の読者から画像の回り込みがおかしく見えると報告があった場合は、使用しているテンプレートのCSS指定が原因である可能性が大です。

バグの回避

画像の基本指定に下記のような指定がないかどうか調べます。
この指定は、よくCSSの上部にあります。

img { vertical-align: middle; }　または
img { vertical-align: baseline; }　など

この指定を削除すると、画像の横に回りこむ文章は正常に表示されるようになります。
もしこの処理でテンプレートに使用されている画像や記事内の画像（たとえば拍手とか）がずれる場合は、その部分にだけvertical-align の指定をする必要があります。