昨日、日記を書いている作業中に突然はてなリングロゴが巨大化してびっくりしました。
はてなダイアリー日記を見に行ったら「はてなリングのロゴサイズの選択ができるようになりました - はてなダイアリー日記」とのことで、ロゴの設置タグが少し変わったみたいです。
とりあえずサムネイルサイズを選択して再設置した後、日記のHTMLソースからはてなリングのJavascriptソースのURLを探し出して見に行ったら、今までは画像をdiv要素の中で表示していたのが、span要素に変わっていました。ですので、スタイルシートを修正する必要があります。
そこで、もしもはてなリングロゴ表示のために、スタイルシートを指定している方のために書いておくと、はてなリングのロゴの指定要素名は、今度からこうなっています。
span#hatena-ring-2084 img{指定する事柄}2084は私のはてなリングSIDで、これは設置タグの中に書いてある何桁かの数字です。人によって異なるみたいですので、他の方が書く時はその数値を使ってください。
さて、コトのついでに、はてなリングロゴを小さくして横に並べてみました。左のサイドバーにある「投げ銭OK」バナーの下、Appleマークとその右の黒の中に緑がある変な物をご覧いただくとお分かり頂けるかと思いますが。
この指定は人それぞれの指定をしなくてはいけないようです。
まず、日記の管理画面の「デザイン」で「詳細デザイン設定」を表示し、フッタなどはてなリングを設置した部分の記入欄を見ます。はてなリングロゴを設置した部分を探します。このようになっているはずです。
<hatena name="ring" rid="リングの名前" sid="各自のsid番号" mode="thumbnail" template="hatena-module">
このような表示が、自分が所属していて表示したいリングの数だけ並んでいると思います。
そのはてなリングの一群のタグの次（下）に来ている表示物を、divタグで囲みます。
具体的に、私のページで説明しますと、はてなリングの次には個人的に設置している「web拍手」の設置タグが来ているのですね。そのweb拍手の一連のタグをすべて自分で名前を決めたdiv要素ouenと指定しました。少し長いですがご覧下さい。
<hatena name="ring" rid="macintosh" sid="2084" mode="thumbnail" template="hatena-module"> <hatena name="ring" rid="yuny" sid="2084" mode="thumbnail" template="hatena-module"> <div id="ouen"> <a href="http://d.hatena.ne.jp/Yuny/searchdiary?of=0&word=*%5B%E7%AE%A1%E7%90%86%5D%E3%80%8EWeb%E6%8B%8D%E6%89%8B%E3%80%8F%E8%A8%AD%E7%BD%AE" target="_self">↓応援と連絡は↓</a> <form action="http://webclap.simplecgi.com/clap.php?id=yuny" method="post" target="_blank"> <input type="submit" value="web拍手ボタン"> </form> </div>
つまり、簡略化すると
<hatena name="ring" rid="リングの名前1" sid="各自のsid番号" mode="thumbnail" template="hatena-module"> <hatena name="ring" rid="リングの名前2" sid="各自のsid番号" mode="thumbnail" template="hatena-module"> <hatena name="ring" rid="リングの名前3" sid="各自のsid番号" mode="thumbnail" template="hatena-module"> <div id="何か分かりやすいid名を半角英数で"> 次にくる表示物のタグ </div>
このような感じですね。
次はスタイルシートの指定です。まずははてなリングロゴのサイズ指定をし、さらに横に並べる指定を書きます。それから、次の表示物である「web拍手」も横に並んでしまっては困るので、「web拍手」の部分は横並びを解除します。具体的にはこのようになりました。
/*はてなリングロゴサイズ*/
span#hatena-ring-2084 img{width:20px; float:left;}
div#ouen {clear:left;}2084は各個人のSID番号に、widthの数値は表示したいサイズを、div#ouenのouenは各個人の先ほど決めたリングロゴの次に来るもののdiv要素名を指定してください。floatが横並び、clearが横並び解除、という意味になります。
ちなみに、冒頭に来ているのはコメントで、目印の為に何を書いても大丈夫な部分です。
/*なにか*/
というように、/* */この記号で挟んだ部分は、スタイルシートの中では単なる目印といった意味になります。もちろんうるさいのであれば書かなくてもいいですよ。
ということで、関連質問http://www.hatena.ne.jp/1133220417にトラックバックしておきます。
追記
調べ直してみたら
http://hatena.g.hatena.ne.jp/hatenaring/20051226/1135586473
の記述でtemplate="hatena-module"にしなければ横に並べられるみたいです。
span要素ですものねえ……。まあでも、サイズ変更とかは上記の方法で出来るってことで。
昨日の突如ロゴ巨大化の原因もはっきりしてスッキリです。
