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

Webstyle #01シリーズの更新版が公開されました。
今回の更新は拍手ボタンへの対応とともに、トップメニューの修正がされています。

更新以前のメニューは、IE8だとマウスをリンクに持っていっても色が変わらないバグがあるのですが、IE8は初期設定で忍者ブログを互換表示するように指定されているので、気がついていない人が結構いるかもしれませんね。しかしバグをそのままにもしておけないので、今回はメニューのスクリプトを完全に入れ替えることにしました。

使用したスクリプトはjQueryのDroppyです。
前のスクリプトではGoogle ChromeとSafariでプレビューが崩れていたのが、jqueryではまともに表示されるようになりました（喜）
やっぱりあの崩れはスクリプトのせいだったんだ・・・

そしてさらに、スクリプト入れ替えとともにメニューの内容も一新しました。
以前のメニューでは、最新記事は記事のタイトルだけしか出ませんでしたが、更新版では日付とカテゴリーも一緒に出ます。また、コメントリストにも記事タイトルと日付、コメント投稿者の名前が出るように変更。これで、だいぶ見やすくなったと思います。

リンクはリンク編集ページで編集されたリンクがリストに表示されます。
管理ページへのリンクをADMINに書き変えると、リストが出たときかっこよく見えますよ。
管理ページの左にある「リンクの編集」から編集ページに入れます。


さて、ここからはカスタマイズの話です。
ここからは非常に長くなるので、追記の中に入れています。
カスタマイズされたい方は、追記をクリックしてください。

注）カスタマイズにはHTMLの知識が必要です。
      ある程度勉強された方でないと難しいかもしれません。

Webstyleシリーズが更新されます

IE8でドロップメニューにバグがでる問題があったWebstyleシリーズですが、今回やっと更新版を作りました。
スクリプトを総入れ替えし、メニューの中のリストもリニューアルして、さらに使いやすくなっています。
2カラムはプラグイン5をタイトルなしにして申請しましたが、以前にタイトルなしで出さないようにとの注意が来たことがあるので、もし申請が通らなかったらタイトルをつけてもう一度申請することになります。

メニューのリニューアルにともなって、2カラムはメニュー幅が変わりました。
その他にも、メニューから出てくるリストが変わっているので新しくカスタマイズ記事を書く予定ですが、更新前のテンプレートを使用している人のために、現在あるカスタマイズはそのまま残しておきます

現在のカスタマイズ記事を見ていただければわかりますが、唖然とするくらいすごく長いので、一気に全部書くのはたぶん無理。
カスタマイズされたい方には申し訳ありませんが、あと数日ほどお待ちください。

拍手ボタンと拍手回数を並べて表示するCSS

忍者の3月からの新機能、拍手ボタンの横に出てくる拍手回数が下にずれますね。
テンプレート内の画像にCSSで余白が指定されていると、そのずれはさらに大きくなるので、拍手回数を表示するのをやめた人もいるかもしれません。

忍者が初めから拍手ボタンのタグ内にちょちょっと書いておいてくれたら、作者がいちいちテンプレートを修正しなくてもいいのですが、どうやらそこまで頭が回らなかったようですね。
仕方がないので、作者が修正しないテンプレートは自分で修正するか、そのまま使うしかありません。
そこで、すべてのテンプレートで、拍手回数が拍手ボタンの横にきれいに並ぶCSSをご紹介することにします。

拍手ボタンと拍手回数を並べるCSS

やり方はとっても簡単。
下のCSSをテンプレート編集ページの右下部分のCSSの中に貼り付けるだけ。

.NinjaClap img { vertical-align: middle; }

これだけで、ほとんどのテンプレートの拍手ボタンがすっきりします。
ただ、これはボタンの横の文字ボタンの文字のラインを合わせるだけなので、ボタンの上や下にもっとスペースをとりたい場合は余白指定を加えてください。
例えば下記のように

.NinjaClap {
    margin-top: 20px;
    margin-bottom: 20px;
}


私のほうも、なかなかできなかった拍手機能への対応に取り掛かりました。
時期的なことも考えて、順次更新していきます。
今回は4点更新しましたが、なんと申請して30分くらいで公開されました（驚）

Webstyle #01に取り掛からないといけないのですが、これはスクリプトが完全入れ替えになるので、どのくらい時間がかかるか不明です。
先にできる簡単なもので時期に合うものは、先に出していくことになります。
秋や冬物はその時期になってから更新版を出しますので、ご了承ください。

Webデザイナーが苦労してること

ご無沙汰してます。
忍者が公式テンプレを作り始めましたね。
昔は忍者のスタッフのテンプレが出ても公式にはしてなかったのに、サイト一新プロジェクトで少しづつリニューアルを続けるようですねえ。
そのうち各ツールの管理画面がすべて変わるんでしょう。

ここのテンプレ制作のほうは止まっております。
５月に入ったらまたテンプレにいそしむ予定ですが、今はまだ忙しくて無理。
このままほっとくと広告が出ちゃうので、ちょっとらばQネタを持ってきました。

Webデザイナーにしかわからない身内ネタなので恐縮ですが、これを見るとデザイナーが何に一番苦労してるのかが一目瞭然です（笑）

今時のWebデザインについての分析

この表を見て爆笑しました。
難しいJavaScriptは拝借してくるからパスするとしても、私の表とよく似てる（笑）

くそったれIEを手なずける方法はだいぶできるようになりましたが、黄色い部分の3分の1はGoogle Chrome やSafariに回ってます。特に、忍者のプレビューでSafariが言うことを聞かなかったりするので・・・
実際に使うとなんともないのにプレビューで崩れるんだから、プレビューのスクリプトか何かが原因だと思うんですけどね（ため息）
テンプレのスクリプトと合わないときもあるようで、100％ではない。

ところで、表の中では罵る時間が多いでしょう？
私も思いっきり罵ってます（笑）
ブラウザ規格が全部同じに統一される日は、来るんだろうか？
問題が増えていくばかりで、罵る時間が増えるなら、新しいブラウザなんかいらない！


テンプレをご利用の皆さん、Webデザインで作者がどんなに苦労しているかご理解いただけました？
この苦労、まずはIE6がなくなると黄色い部分が半分まで小さくなるので、ぜひブラウザの更新を頻繁にしてください。
Webデザイナーの悲願（IE6以下のIEがなくなること）が達成されれば、罵る時間も少なくなるというものです。

携帯用は・・・残念ながら無理です

以前にもあったのですが、コメントにも携帯用テンプレのご要望がありましたので、ここで返答させていただくことにします。

簡単に言うと、携帯用テンプレは作りたくても作れない状態です。
私は実はヨーロッパ在住でして、そのために日本の携帯が使用できません。
初期に携帯用を二つ作っていますが、この時は日本の友人が協力してくれました。しかし表示確認が頻繁なので何度も頼みにくいし、自分の目で確認することもできないので、結局携帯用テンプレは制作を断念しました。

PCと携帯でお揃いのテンプレートがあるといいな、と思う時もありますが、こういうわけですのでご理解いただけますようお願いいたします。


それから、「Red Rose」を微調整しました。
実はカテゴリー検索ページの記事リストに余計なものがひっついていたのに気が付きまして、問題の箇所を修正しました。昨日までにダウンロードされた方は、再ダウンロードされれば正常になります。機能自体には問題はありませんので、おかしなものがくっついているのを笑ってやってください（＾＾；）