ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

ヨメレバブックマークレットのCSSを変更して、文章の位置を調整する方法

スポンサーリンク

書籍を紹介するときに書籍紹介ブログパーツ ヨメレバを利用しています。
書籍紹介ブログパーツ ヨメレバ

便利なんですが、はてなブログにおいてはてな記法で記事を作成している場合、ブログパーツを貼り付けた後に文章を書くと気になるところがあります。
気になる点は、改行なしで下側に文章を書いても、改行なしで上側になる位置に文章を書いた場合に比べて、随分間が開いてしまうところです。

改行なしで上側に文章を書いています。

改行なしで下側に文章を書いています。

CSSを変更してみる

CSSを変更すれば下側の文章が上になるだろうと探してみたら、簡単な2か所を変更したら、随分変わりました。

1か所目は、

<div class="booklink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">

<div class="booklink-box" style="text-align:left;padding-bottom:0;font-size:small;/zoom: 1;overflow: hidden;">

に変更しています。
変更したのは、

padding-bottom:20px;

padding-bottom:0;

です。

2か所目は、

<div class="booklink-image" style="float:left;margin:0 15px 10px 0;">

<div class="booklink-image" style="float:left;margin:0 15px 0 0;">

に変更しています。
変更したのは、

margin:0 15px 10px 0;

margin:0 15px 0 0;

です。

変更した結果は、以下のとおりです。

改行なしで上側に文章を書いています。

改行なしで下側に文章を書いています。

これくらいの間であれば適切に見えるので、これからはこうなるように修正していきます。