記事内に広告が含まれています

シェアボタンをオリジナルにしてみた

WordPress
この記事は約11分で読めます。
 各SNSのシェアボタンを、オリジナルにしてみた(笑)。

 といっても、「流行りに乗れ!WordPressにバイラルメディア風のSNSボタンを設置する方法 – 副業ハックこちらのページを参考に、ちょこっと変更しただけなんですけどね(笑)。

 個別記事の下の方に表示されてます。

 で、表示させてるのは、PCでFacebook、Twitter、mixi、Google+の4つ。

 Media Queriesをつかって、モバイル環境では上記の4つにLINEも表示させてます。
 というより、ノーマル(PC)では非表示で、モバイル環境で表示させてると言った方がいいのかな?

 上に記載してる参考ページに、ソースがあるのですが、念の為に僕が改変したソースを記載して置きます。

 ちなみに、テンプレートファイル[social-button.php]を作成し、個別記事用テンプレートファイル[single.php]の好きな所にテンプレートファイル[social-button.php]を呼び出す事で、表示させてます。
[php title=”social-button.php”] <!– ▼▼▼Facebook シェアボタン▼▼▼–> <a class="facebook-iine" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&amp;t=<?php the_title(); ?>" onClick="window.open(encodeURI(decodeURI(this.href)), ‘sharewindow’, ‘width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!’ ); return false;"><span class="lsf-icon" title="facebook"></span> Facebookでシェア</a> <!– ▼▼▼Twitterボタン▼▼▼–> <a class="twitter-tweet" href="http://twitter.com/intent/tweet?text=【<?php the_title(); ?> | <?php bloginfo(‘name’); ?>】 | <?php the_permalink(); ?>" onClick="window.open(encodeURI(decodeURI(this.href)), ‘tweetwindow’, ‘width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!’ ); return false;"><span class="lsf-icon" title="twitter"></span> twitterでツイート</a> <!– ▼▼▼Google+ +1ボタン▼▼▼–> <a class="gplusbtn" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="window.open(this.href, ‘Gwindow’, ‘width=650, height=450, menubar=no, toolbar=no, scrollbars=yes’); return false;"><span class="lsf-icon" title="google"></span> Google+でシェア</a> <!– ▼▼▼mixi「チェック」ボタン▼▼▼–> <a class="mixibtn" href="javascript:void(0);" onclick="window.open(‘http://mixi.jp/share.pl?u=<?php the_permalink(); ?>&k=4a9d3296b02cb58738a182c61efe0292c131fa5c’,’share’,[‘width=632′,’height=456′,’location=yes’,’resizable=yes’,’toolbar=no’,’menubar=no’,’scrollbars=no’,’status=no’].join(‘,’));"><span class="lsf-icon" title="mixi"></span> mixiでチェック</a> <!– ▼▼▼LINEで送るボタン▼▼▼–> <a class="linebtn" href="line://msg/text/%e3%80%90<?php the_title(); ?>%20%7c%20<?php bloginfo(‘name’); ?>%e3%80%91%0D%0A<?php the_permalink(); ?>"><span class="lsf-icon" title="line"></span> LINEで送る</a> [/php]  そして、呼び出すコードが…
[php title=”single.phpのお好みの場所へ”] <?php get_template_part(‘social-button’); ?> [/php]  てなかんじで、あとはCSSで見た目をいじります。
 そして、これは長いので、閉じてます。
[css titele=”CSS” collapse=”true”] /*  SNSボタン ———————————————– */ #sns-single{ margin-top: 2em; margin-bottom: 2em; } a.facebook-iine{ width:48%; padding:20px 0; color:#fff; text-align:center; background-color:#3b5998; height:20px; display:block; text-decoration:none; font-size:20px; float:left; margin-left: 1%; margin-right: 1%; margin-bottom:10px; /*border-radius*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } a.facebook-iine:hover{ background-color:#6277a1; } a.twitter-tweet{ width:48%; padding:20px 0; color:#fff; text-align:center; background-color:#00acee; height:20px; display:block; text-decoration:none; font-size:20px; float:left; margin-left: 1%; margin-right: 1%; margin-bottom:10px; /*border-radius*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } a.twitter-tweet:hover{ background-color:#6aafca; } a.gplusbtn{ width:48%; padding:20px 0; color:#fff; text-align:center; background-color:#DD4B39; height:20px; display:block; text-decoration:none; font-size:20px; float:left; margin-left: 1%; margin-right: 1%; margin-bottom:10px; /*border-radius*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } a.gplusbtn:hover{ background-color:#E05D4C; } a.linebtn{ width:48%; padding:20px 0; color:#fff; text-align:center; background-color:#5ae628; height:20px; display:block; text-decoration:none; font-size:20px; float:left; margin-left: 1%; margin-right: 1%; margin-bottom:10px; /*border-radius*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; display:none; } a.linebtn:hover{ background-color:#B2F39A; } a.mixibtn{ width:48%; padding:20px 0; color:#fff; text-align:center; background-color:#d1ad59; height:20px; display:block; text-decoration:none; font-size:20px; float:left; margin-left: 1%; margin-right: 1%; margin-bottom:10px; /*border-radius*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } a.mixibtn:hover{ background-color:#E5D1A3; } [/css] これを、style.css等にコピペ。
 class名とかは、各自の環境に合わせて変更しちゃってください。

 あ、あとWebフォントでアイコンを追加してます。
 ですので、上記のCSSをそのままコピペしても、同じ表示にはなりません。

 WebフォントはLigature kudakurage Symbolsを使っています。

[css titele=”WebフォントのCSS”] /* LigatureSymbols */ @font-face { font-family: ‘LigatureSymbols’; src: url(‘WordPressのテーマディレクトリ/LigatureSymbols-2.11.eot’); src: url(‘WordPressのテーマディレクトリ/LigatureSymbols-2.11.eot?#iefix’) format(‘embedded-opentype’), url(‘WordPressのテーマディレクトリ/LigatureSymbols-2.11.woff’) format(‘woff’), url(‘WordPressのテーマディレクトリ/LigatureSymbols-2.11.ttf’) format(‘truetype’), url(‘WordPressのテーマディレクトリ/LigatureSymbols-2.11.svg#LigatureSymbols’) format(‘svg’); font-weight: normal; font-style: normal; } [/css] これを、style.css等にコピペ。
 Webフォントは各自のサーバにアップロードしてから、お使いください。
 ”WordPressのテーマディレクトリ”は、Webフォントをアップロードした所のパスに変更してください。

 こんな感じで、下のような、シェアボタンが出来上がりです。

【参考】
流行りに乗れ!WordPressにバイラルメディア風のSNSボタンを設置する方法 – 副業ハック
Ligature kudakurage Symbols

コメント

  1. […] シェアボタンをオリジナルにしてみた 70.1 at 2014-09-07 12:34 […]
タイトルとURLをコピーしました