WordPress:ポップアップウィンドウで表示するフラットなオリジナルSNSボタンの作り方



  • flatsnsbutton



flatsnsbutton

ポップアップウィンドウで表示するフラットデザインのSNSシェアボタンを作ってみたので作り方を紹介していきたいと思います。なお、完成形をコピペしても良いのですが、HTML/CSS/JavaScriptの知識がある方がCSSやJavaScriptを書き換えるだけで自由にカスタマイズできる様に基本的な柱となるソースコードも用意したのでゼロから作るという方にも参考になれば嬉しいです。

では、作っていきます。

  • 完成したフラットボタンはこうなるよ!

    WordPress popupflatbutton

    とりあえず作ってみる

    とりあえず上記の様なTwitter/はてブ/Facebook/Google+/Pocketボタンのソースコードを紹介して行きたいと思います。HTMLやCSSに詳しくない方はコピペして使って頂いても問題ありません。

     HTML

     ポイント : WordPressでは<?php the_permalink(); ?>でパーマリンクを取得する事ができます。各SNSボタンに記事URLを取得させる為にhrefのURL位置に<?php the_permalink(); ?>を使いましょう。

     ポイント2 : WordPressでは<?php the_title(); ?>で記事タイトルを取得する事ができます。取得が必要なSNSボタンには<?php the_title(); ?>を使い記事タイトルを取得しましょう。

     ポイント3 : onclick=”javascript:window.openでポップアップウィンドウで表示するようにしています。ポップアップウィンドウのサイズを変更したい方はwidth=・height=を変更してください。

     CSS

     ポイント : マウスホーバー時にボタンがポチッとされるようにborderを上下に使用しました。borderのtopのカラーを変更すると埋め込まれる様な動きにならないのでtopのカラーは#FFFのままで、どうしてもカラーを変更したい方は:hoverのbackgroundcolor・border-bottomのカラーを変更してください。また、マウスホーバー前のカラーを変更したい方は:hover指定の無いbackground-colorのカラーを変更してください。border-bottomも同様です。

    カスタマイズ用!

    HTMLは上記と同じで問題ありません。デザインを変えたい方向けに柱となるカスタマイズ用のソースコードを用意しました。デザインを変えたい方はこちらを参考にしてみてください。

     CSS

    最後に

    コピペでも問題ありません。参考にしてもらえたら嬉しいです。記事は以上


    コメントしてね!