CriCri
クリエイティブになりたいクリクリ工房
2010年06月の記事一覧
- « PREV
- | HOME |
- NEXT »
- 2010.06.28 Webstyle #01の新ドロップダウンメニュー
- 2010.06.24 Webstyleシリーズが更新されます
- 2010.06.15 拍手ボタンと拍手回数を並べて表示するCSS
Webstyle #01の新ドロップダウンメニュー
Webstyle #01シリーズの更新版が公開されました。
今回の更新は拍手ボタンへの対応とともに、トップメニューの修正がされています。
更新以前のメニューは、IE8だとマウスをリンクに持っていっても色が変わらないバグがあるのですが、IE8は初期設定で忍者ブログを互換表示するように指定されているので、気がついていない人が結構いるかもしれませんね。しかしバグをそのままにもしておけないので、今回はメニューのスクリプトを完全に入れ替えることにしました。
使用したスクリプトはjQueryのDroppyです。
前のスクリプトではGoogle ChromeとSafariでプレビューが崩れていたのが、jqueryではまともに表示されるようになりました(喜)
やっぱりあの崩れはスクリプトのせいだったんだ・・・
そしてさらに、スクリプト入れ替えとともにメニューの内容も一新しました。
以前のメニューでは、最新記事は記事のタイトルだけしか出ませんでしたが、更新版では日付とカテゴリーも一緒に出ます。また、コメントリストにも記事タイトルと日付、コメント投稿者の名前が出るように変更。これで、だいぶ見やすくなったと思います。
リンクはリンク編集ページで編集されたリンクがリストに表示されます。
管理ページへのリンクをADMINに書き変えると、リストが出たときかっこよく見えますよ。
管理ページの左にある「リンクの編集」から編集ページに入れます。
さて、ここからはカスタマイズの話です。
ここからは非常に長くなるので、追記の中に入れています。
カスタマイズされたい方は、追記をクリックしてください。
注)カスタマイズにはHTMLの知識が必要です。
ある程度勉強された方でないと難しいかもしれません。
今回の更新は拍手ボタンへの対応とともに、トップメニューの修正がされています。
更新以前のメニューは、IE8だとマウスをリンクに持っていっても色が変わらないバグがあるのですが、IE8は初期設定で忍者ブログを互換表示するように指定されているので、気がついていない人が結構いるかもしれませんね。しかしバグをそのままにもしておけないので、今回はメニューのスクリプトを完全に入れ替えることにしました。
使用したスクリプトはjQueryのDroppyです。
前のスクリプトではGoogle ChromeとSafariでプレビューが崩れていたのが、jqueryではまともに表示されるようになりました(喜)
やっぱりあの崩れはスクリプトのせいだったんだ・・・
そしてさらに、スクリプト入れ替えとともにメニューの内容も一新しました。
以前のメニューでは、最新記事は記事のタイトルだけしか出ませんでしたが、更新版では日付とカテゴリーも一緒に出ます。また、コメントリストにも記事タイトルと日付、コメント投稿者の名前が出るように変更。これで、だいぶ見やすくなったと思います。
リンクはリンク編集ページで編集されたリンクがリストに表示されます。
管理ページへのリンクをADMINに書き変えると、リストが出たときかっこよく見えますよ。
管理ページの左にある「リンクの編集」から編集ページに入れます。
さて、ここからはカスタマイズの話です。
ここからは非常に長くなるので、追記の中に入れています。
カスタマイズされたい方は、追記をクリックしてください。
注)カスタマイズにはHTMLの知識が必要です。
ある程度勉強された方でないと難しいかもしれません。
PR
Webstyleシリーズが更新されます
IE8でドロップメニューにバグがでる問題があったWebstyleシリーズですが、今回やっと更新版を作りました。
スクリプトを総入れ替えし、メニューの中のリストもリニューアルして、さらに使いやすくなっています。
2カラムはプラグイン5をタイトルなしにして申請しましたが、以前にタイトルなしで出さないようにとの注意が来たことがあるので、もし申請が通らなかったらタイトルをつけてもう一度申請することになります。
メニューのリニューアルにともなって、2カラムはメニュー幅が変わりました。
その他にも、メニューから出てくるリストが変わっているので新しくカスタマイズ記事を書く予定ですが、更新前のテンプレートを使用している人のために、現在あるカスタマイズはそのまま残しておきます
現在のカスタマイズ記事を見ていただければわかりますが、唖然とするくらいすごく長いので、一気に全部書くのはたぶん無理。
カスタマイズされたい方には申し訳ありませんが、あと数日ほどお待ちください。
スクリプトを総入れ替えし、メニューの中のリストもリニューアルして、さらに使いやすくなっています。
2カラムはプラグイン5をタイトルなしにして申請しましたが、以前にタイトルなしで出さないようにとの注意が来たことがあるので、もし申請が通らなかったらタイトルをつけてもう一度申請することになります。
メニューのリニューアルにともなって、2カラムはメニュー幅が変わりました。
その他にも、メニューから出てくるリストが変わっているので新しくカスタマイズ記事を書く予定ですが、更新前のテンプレートを使用している人のために、現在あるカスタマイズはそのまま残しておきます
現在のカスタマイズ記事を見ていただければわかりますが、唖然とするくらいすごく長いので、一気に全部書くのはたぶん無理。
カスタマイズされたい方には申し訳ありませんが、あと数日ほどお待ちください。
拍手ボタンと拍手回数を並べて表示するCSS
忍者の3月からの新機能、拍手ボタンの横に出てくる拍手回数が下にずれますね。
テンプレート内の画像にCSSで余白が指定されていると、そのずれはさらに大きくなるので、拍手回数を表示するのをやめた人もいるかもしれません。
忍者が初めから拍手ボタンのタグ内にちょちょっと書いておいてくれたら、作者がいちいちテンプレートを修正しなくてもいいのですが、どうやらそこまで頭が回らなかったようですね。
仕方がないので、作者が修正しないテンプレートは自分で修正するか、そのまま使うしかありません。
そこで、すべてのテンプレートで、拍手回数が拍手ボタンの横にきれいに並ぶCSSをご紹介することにします。
私のほうも、なかなかできなかった拍手機能への対応に取り掛かりました。
時期的なことも考えて、順次更新していきます。
今回は4点更新しましたが、なんと申請して30分くらいで公開されました(驚)
Webstyle #01に取り掛からないといけないのですが、これはスクリプトが完全入れ替えになるので、どのくらい時間がかかるか不明です。
先にできる簡単なもので時期に合うものは、先に出していくことになります。
秋や冬物はその時期になってから更新版を出しますので、ご了承ください。
テンプレート内の画像にCSSで余白が指定されていると、そのずれはさらに大きくなるので、拍手回数を表示するのをやめた人もいるかもしれません。
忍者が初めから拍手ボタンのタグ内にちょちょっと書いておいてくれたら、作者がいちいちテンプレートを修正しなくてもいいのですが、どうやらそこまで頭が回らなかったようですね。
仕方がないので、作者が修正しないテンプレートは自分で修正するか、そのまま使うしかありません。
そこで、すべてのテンプレートで、拍手回数が拍手ボタンの横にきれいに並ぶCSSをご紹介することにします。
拍手ボタンと拍手回数を並べるCSS
やり方はとっても簡単。
下のCSSをテンプレート編集ページの右下部分のCSSの中に貼り付けるだけ。
.NinjaClap img { vertical-align: middle; }
これだけで、ほとんどのテンプレートの拍手ボタンがすっきりします。
ただ、これはボタンの横の文字ボタンの文字のラインを合わせるだけなので、ボタンの上や下にもっとスペースをとりたい場合は余白指定を加えてください。
例えば下記のように
.NinjaClap {
margin-top: 20px;
margin-bottom: 20px;
}
私のほうも、なかなかできなかった拍手機能への対応に取り掛かりました。
時期的なことも考えて、順次更新していきます。
今回は4点更新しましたが、なんと申請して30分くらいで公開されました(驚)
Webstyle #01に取り掛からないといけないのですが、これはスクリプトが完全入れ替えになるので、どのくらい時間がかかるか不明です。
先にできる簡単なもので時期に合うものは、先に出していくことになります。
秋や冬物はその時期になってから更新版を出しますので、ご了承ください。







