ゆうきのにっき2

ブログを趣味にすべく再度、奮闘中。主にゴルフ、トイプードル「りんご」の記録簿。

「zenback」で過去記事をフィードバック

この1年なんとかブログを書くことに慣れてきて、ようやく見れる形になってきたし、趣味といえるレベルになってきたような気がします。過去の記事一覧を見ていると、こういうこと書いてたんだぁ〜。自分でも忘れ去られていた記事がちらほらありましたね。ブログパーツをつけるのは表示も遅くなるし、シンプルな方が好きなので、いままで設置するのを避けていました。だけどこの「zenback」は過去の関連記事をフィードバックできて便利だし、ソーシャルボタンもつくのでそれらしくなるかぁと思って今回設置してみました。


zenbackのHPでコードを取得するのは、誰でも出来ると思うので省略しまして、それ以降のレイアウト方法を紹介と言うとおこがましいですが、CSS初心者の僕でも何とかレイアウトできたので記しときたいと思います。
このブログのように記事本文の真下に設置する場合です。デザイン編集の「ページのフッタ」の下記に示す部分にzenbackのHPで取得したコードを貼り付けます。

(この部分にコードを貼り付けます。)
</div>
<div class="sidebar">
   <hatena name="profile" template="hatena-module">
   <hatena name="calendar2" template="hatena-module">
   - - -


この状態で記事の真下に設置できるのですが、僕が使用している「Hatena2-lightblue」というブログテーマだとサイドバーの所まではみ出して表示されてしまいました。そこでスタイルシートでレイアウトをしてみることにしましたよ。単純にwidthで表示する幅を指定しても良かったのですが、IEの場合、記事の部分の幅が固定されません。max-widthが適応されてないのが原因かと思われます。僕は普段Firefoxを使用していますが、このブログを見てもらっている方の環境は約1/3がIEですので、「スタイルシート」を下記のように設定してレイアウトしてみました。

.zenback {
margin-left:20px; 
margin-right:250px; 
}


Firefoxで表示した場合


IE7で表示した場合、記事の部分の幅が固定されてないので、両サイドのスペースを指定することにしました。


僕のブログ場合、FirefoxとIEで確認すればいいんですけど、他のブラウザ・PC環境ではどういう風にみえているのかなぁと思っていろいろツールを探してみたところ、いいものを見つけましたよ。「Adobe BrowserLab」というwebサービスです。確認したいURLを指定するといろんなブラウザのスクリーンショットを表示してくれます。Adobe IDを登録すれば無料なので試してみました。

Safari5.0 OS XとFirefox3.6 Windowsのスクリーンショットです。こう比べてみると全然見た目の印象って変わるんですね。Macで見るとこんなに見やすいんだぁ〜、ますますMacがほしくなってきました。退職金・失業手当も入りますし、うーん悩みます。


今回設置したブログパーツはどんな風に表示されるんだろうか?見てみたのですが表示される前にスクリーンショットが生成されてしまいました。右上にある遅延ボックスでスクリーンショットを生成する時間を遅延することが出来るのですが、この設定の最大値10にしてもだめでしたね。残念。