はてなブログの関連記事を表示する『合わせて読みたいG』の見出し部分がずれるので修正してみた

太陽が眩しかったから様作成のはてなブログ記事下に関連記事を表示するスクリプト「合わせて読みたいG」凄くいいんです。

bulldra.hatenablog.com

ブログの周遊率を上げるのにもってこいのスクリプトなんですよね。

何でかわからないけれどはてなブログには関連記事を表示するウィジェットが無いためこれにはとても助かっています。

さらに機能面で見てもただカテゴリー別で関連記事を表示するだけでなく、多少の不規則性をもって表示してくれるところもグッドなのです。

 ただ少し問題が。

 配布されたままのをコピペして使うと左右で微妙にずれが生じるんです。

私の環境だけかもしれませんけど。

というわけで簡単に修正してみました。

修正方法

ややこしいこと抜きに下記のコードをデザイン＞カスタマイズ＞デザインCSSの最後の部分にコピペして打ち込めば修正できます。

※こんな感じになります。（色とかはつかないけど）

.hatena-module-foot span{
    font-size:12px;
}
.hatena-module-foot h3{
    font-size:18px;
}

一応色とかもおんなじにしたい！　という殆どいないであろう人向けのコードも書いときます。 

.hatena-module-foot span{
    font-size:12px;
}
.hatena-module-foot h3{
    font-size: 18px;
    color: rgb(59, 66, 126);
    background: rgb(243, 242, 252);
    padding: 10px 10px;
    border-left: 9px solid rgb(97, 101, 134);
}

ちなみにこのデザインは

tsukuruiroiro.hatenablog.com

こちらのブログの大見出しを丸パクリしています。デザインセンスのある方は羨ましいです。

こちらのコードも同じくデザインCSSの一番最後にコピペして下さい。

多分大丈夫だと思いますけど不具合が発生しましたらコメントへお願いします。対応できれば対応します。

修正すべきポイント

ここからは自分で修正したい人向け。

文字サイズとか上記のサイズじゃ嫌な人もいるかもしれないですから一応。

ただ思うのはこれ読んで修正できる人は自分で修正できる気がする……。

あの見出し部分はh3で作られています。

はてなで言うところの大見出しですね。

なので文中に使われている大見出しのカスタマイズを継承しています。

ここまではいいんですが、問題は右側。

これもh3のカスタマイズを継承しています。

すなわち同じ文字サイズになっているのですが、そうするとbox形態になってる分左側の文字より大きくなってしまい、結果ズレが生じてしまっているわけです。

ですので一番最初に書いた

.hatena-module-foot span{
    font-size:12px;
}
.hatena-module-foot h3{
    font-size:18px;
}

このpx部分をプレビューしながら調整すると簡単に修正できます。

簡単な事なので使っていてズレが気になっているという方はぜひお試しあれ☆