アニメーション付きのSNSボタンを実装してみた。

ブログやサイトの記事をSNSで共有する為のボタンには、こだわってます。

今回記事タイトルの下に、アニメーション付きのSNS共有ボタンを取り付けました。
モバイルフレンドリーフラットデザインのご時勢、よりシンプルでかつアピール力のあるボタンを設置する必要を感じたからです。

まずは、SNSボタンを設置する。

01_simple share button

WordPressの場合、SNS共有ボタンのプラグインは無数にあります。
今回はその中でもカスタマイズ性に優れた、Simple Share Buttons Adderを使用しました。

プラグインのインストール後は、「インストール済みのプラグイン」一覧のSimple Share Buttons Adderにある「Settings」から各種設定ができます。
設置するSNSの選択や、設置場所は「Core」タブで行います。

02_simple share button
僕がこのプラグインの気に入っている点は

①使用できるアイコンの種類が豊富。
(「Styling」タブのImagesImage setから選択)

03_simple share button

04_simple share button

05_simple share button

さらに、ImagesのImage setから「Custom」を選ぶと、アイコンファイルのアップロードも可能です。

②アイコンの大きさやレイアウトを細かく設定できる

06_simple share button
SNSボタンは表示スペースが限られているので、アイコンの大きさ(Button Size)だけでなく間隔(Padding)を細かく設定出来るのはとても重要。

③表示部のCSSを変更や追加が可能

07_simple share button
詳しくは後述しますが、ここにCSS3からサポートされたアニメーション指定を記述します。

僕の場合記事タイトルの直下に設定したので、下の様にアイコンが2行にまたがってしまうと非常に不細工です。

08_simple share button
よって、スマホでもアイコンが一行に収まるように大きさと間隔を調節しました。

最近はディスプレーの大型化が進んでいます。しかしまだiPhone5を使っている方もちらほら見受けます。よって回線契約が切れたiPhone5sを持ち出し、レイアウトの確認を行いました。

09_simple share button
カウンターなど他にも色々と細かく設定出来るみたいですが、僕がいじったのは上の3箇所です。

次ページより、ポタンにアニメーションを付けて行きます。

Sponsored Links

Add a Comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください