Movable Type プラグインOpenGraphLikeの小Tumblrボタンの領域を調整

「MTにソーシャルボタンを表示するプラグイン OpenGraphLike 」で Tumblrボタン を追加したのだが、スマホで見ると幅がはみ出てボタン群が改行されてしまっていた。

このせいで Google AdSense のスコアカードでマルチスクリーンが減点された…悔しい。

そこで、ボタン群の幅を狭くするために Tumblrボタン を小にしてみたのだけど、なぜか右に大きく余白ができ、大ボタンと幅が変わらない。

しかもその余白にも Tumblrボタン のリンクの領域がはみ出ていて、カーソルを重ねるとTumblrのtitleが表示される。

CSSで position:relative; left:81px;というように右へずらして調整してみたのだけど、この領域が隣に重なる。Hatena Bookmarkの上にカーソルがあるのに、Tumblrのリンクになってしまっている。

仕方ないので、OpenGraphLike 自体をいじってみる。

mt\plugins\OpenGraphLike\lib\OpenGraphLike.pm をテキストエディタで開き、150行目にある幅の設定 81px を、小ボタンの横幅 20px に変更した。

    if ( index($params{'config'}{'og_tmblr_size'},"_1")) { $width = "81px";}

↓

    if ( index($params{'config'}{'og_tmblr_size'},"_1")) { $width = "20px";}

これで、Tumblr小ボタン の領域幅がピッタリに。隣のHatena Bookmarkの上にカーソルを置くと、しっかりHatena Bookmarkのtitleが表示された。

しかしなぜ、小ボタンの横幅を81px取ってあるのだろう。区別せず、大ボタンと同じのを使いまわしてるのかな？

参照
MTに、Facebook, Tweet, Google+, はてブなどの色々なボタンを追加するプラグイン (GoodPic.com)

関連記事
Movable Type プラグインOpenGraphLikeのTumblrボタンに文字が重なる
Movable Typeにソーシャルボタンを追加するプラグイン
Movable Type SNSボタンの設置

　

　

　

コメント(0)