ソーシャルボタンのデザイン崩れを整える

MTOSの場合、管理画面からモジュールを作成し、そのモジュールにまとめてソーシャルボタンのタグを記載して置くと便利です。

ちなみに、このとき、DIV属性で囲んでデザインを整えておくと綺麗に配置されます。

僕のサイトの場合、スタイルシートに

.social-button iframe,
.social-button script,
.social-butoon img,
.social-button div {
vertical-align: top !important;
}

と記載し、モジュールには

<div class="social-button">
<$MTGooglePlusButton$>
<&$MTEvernoteButton$>
<$MTTweetButton$>
<$MTHatenaBookmarkButton$>
<$MTFaceBookLike$>
</div>

こんな感じのモジュールを作っています。

OpenGraphLikeプラグインで入れられるボタンだけでなく、PocketボタンやFeedlyボタンもモジュール内で管理すれば、サイトの編集も楽になりますので、ぜひ活用してみてください。