ボタンレイアウトを見直しました | ソーシャルボタンを縦に並べて配置するときに大切なこと

最終更新日:
How to customize button layout1

おはよじ!おはよじ!!@knk_nです。

今回もブログ改造ネタです。急いで作ったせいで細かなところが汚くてネタに困らないぜ。

ブログを見てるとTwitterなどのソーシャルボタンを縦に並べている方って案外多いですよね。
私も今回縦に並べてみたのですが、ボタンレイアウトっていろいろ難しいですね。

縦に並べる方向けに私がやってるカスタムをシェアしようと思います。そんなに難しくないので気軽にお試しくださいね。

実はソーシャルボタンカスタマイズの記事は二回目だったりする。

WordPressプラグイン「WP Social Bookmarking Light」を外すことにしました | けんけん.com
一回目はこちら

縦に並べるとボタンがギザギザしやすい

縦に並べるとギザギザしやすいとはどういうことか。
これをご覧いただこう。

How to customize button layout2

こちらはiPhoneのテーマで使っている横並びのソーシャルボタン。

How to customize button layout3

こちらは最近までのPCテーマで使われていた縦並びのソーシャルボタン。ボタンの横幅がギザギザしてるのがわかるだろうか。
上のほうもギザギザしてはいるけど下ほどは目立っていない気がする。

ボタン同士の横幅がけっこう異なるために縦に並べるのは見た目を考えるとかなり難しい。私も最近までこの問題を放置していたのだが、ようやくキレイに並べることができた。

ボタンの横幅を揃える方法

キレイに並べるにはボタンの横幅を揃えるしかない。調べた中でTwitter、Facebook、Evernoteクリッパーは横幅の変更ができるようなのでやってみた。

※ ソースコードはWordPress向けなので他ブログサービスの場合、記事URL<?php the_permalink(); ?>などを変更する必要があります。

Twitterのツイートボタン

How to customize button layout4
横幅、縦幅自由自在!オリジナルデザインのTwitterツイートボタンの作り方。 | 和洋風◎

ツイートボタンのカスタマイズといえば彼が有名だろうか。
私も最初この方法でやろうかなと思っていたのだが、公式のツイートボタンもサイズ変更できると知って試したらできた!

新しくなった公式Twitterボタン(ツイートボタン)のデザインを修正する: 小粋空間

こちらのページに詳しく書かれています。

style.cssにこれを書いただけ。

iframe.twitter-share-button.twitter-count-vertical {
    width: 54px !important;
}

このあたりが横幅の限界かな。たぶん。

Facebookのいいね!ボタン

How to customize button layout5

いいね!ボタンは英語表記にすると幅をグッと抑えることができます。iframeタイプのボタンだと言語の変更が簡単にできます。

<iframe class="facebook-like-button" src="//www.facebook.com/plugins/like.php?locale=en_US&amp;href=<?php the_permalink(); ?>&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;width=55&amp;height=65&amp;appId=249666728412848" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:55px; height:65px;" allowTransparency="true"></iframe>

?locale=en_USの部分で英語表記になります。
width=とかもいじれるけどそんなに見た目に反映されなかった。他の部分はお好みで。

参考: Like Button – Facebook開発者

Evernoteサイトメモリー

How to customize button layout6

Evernoteのサイトメモリーは使われているPNG画像を他のボタンに合わせてサイズ変更しただけです。

<!-- Evernote -->
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>

ヘッダにはこれを。

<a href="#" onclick="Evernote.doClip({}); return false;">
     <img src="<?php bloginfo('template_directory');?>/images/article-clipper-vert.png" width="45" alt="Clip to Evernote" />
</a>

ボタンを配置したい部分にこれを。

おわりに

How to customize button layout7

微々たるカスタマイズでしたが、少しは見栄え良くなったんじゃないかな。自分のページのソーシャルボタンギザギザしててやだなーって方はぜひお試しを。

Categories:
記事が気に入ったらシェアお願いします!