忍者ブログ

CriCri

クリエイティブになりたいクリクリ工房

   

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

デモランキングバナー

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

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

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

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

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

.NinjaClap img { vertical-align: middle; }

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

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

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

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

拍手[14回]

デモランキングバナー
  

COMMENT

NAME
TITLE
MAIL (非公開)
URL
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
PASS (コメント編集に必須です)
SECRET
管理人のみ閲覧できます
 

TRACKBACK

TrackbackURL

カレンダー

11 2017/12 01
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

AD

PR

ブログ内検索

素材サイト様

White Board様
White Board Banner
妙の宴様
妙の宴 Banner
もずねこ様
Mozneko Banner
押し花とアイコン様
押し花 バナー
petit sozai emi様
petit sozai emi
幕末維新新選組様
幕末維新新選組
The Heart of Eternity 様
thoe バナー
Crambon様
Crambon バナー
DragonArtz Design 様

プロフィール

メール de コンタクト

このブログへのリンク

Firefoxを支援しています

管理人はFirefoxの愛好者です。Internet Explorer は大嫌い。IEよりはるかに優れたFirefoxをお試しあれ。ダウンロードは下のバナーから無料でできます。
Firefox ブラウザ無料ダウンロード

現在の閲覧者

Copyright ©  -- CriCri --  All Rights Reserved

Design by CriCri / material by DragonArtz Desighns / powered by NINJA TOOLS / 忍者ブログ / [PR]