[stinger]ブログに、オリジナルのシェアボタンを設置してみました。
2013年12月15日
ブログのデザイン、面倒でなかなか手が出ないしゅんぼー(@shun_kashiwa)です。
当ブログは「Stinger3」というテーマを使っています。SEOにも強く、なにかと使ってる人が多いので真似できるからです。
今まではテーマに含まれていたシェアボタンを使っていたのですが、ふと思い立って自作してみました。今回はその方法をご紹介します。
デフォルトのを書き換えちゃおう!
1 |
wp-content/themes/stinger3/sns.php |
このファイルが、シェアボタンになります。
これを、書き換えてみました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div id="snsbox03"> <div class="sns03"> <h4>よろしければシェアお願いしますm(__)m</h4> <div class="sns03_box"> <div> <a href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=< ?php the_title(); ?> i-skyd"> <img src="http://itopia.teambog.net/wp-content/uploads/sites/4/2013/12/tweet.png"/> </a> </div> <div> <a href="https://www.facebook.com/sharer/sharer.php? u=<?php the_permalink(); ?>&t=< ?php the_title(); ?>"> <img src="http://itopia.teambog.net/wp-content/uploads/sites/4/2013/12/facebook.png"/> </a> </div> <div> <a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img src="http://itopia.teambog.net/wp-content/uploads/sites/4/2013/12/b76a370a2f1a0a5017b053a36ed8d591.png"/></a> </div> <div> <a href="line://msg/text/<?php the_permalink(); ?>"> <img src="http://itopia.teambog.net/wp-content/uploads/sites/4/2013/12/line.png"/> </a> </div> </div> </div> </div> |
これがHTMLです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.sns03_box { width: auto; margin-left: auto; margin-right: auto; -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; margin-bottom: 20px; } .sns03_box img { width: 100%; } |
これがCSSです。JetPackのカスタムCSSを使って最後に読み込むことで、Stinger本体のCSSは弄っていません。
僕はこんな感じに書いてみました。
解説
まず、フォトショで簡単に画像を作りました。
HTMLでこれを表示し、リンクにシェアするためのURLを張っているだけです。
URLの設定は、こちらを参考にしました。
WordPressの場合
1 |
< ! ?php the_permalink(); ?>; |
これでパーマリンクを
1 |
< ! ?php the_title(); ?>; |
これで記事のタイトルを取得できます。これを組み合わせただけです。
さいごに
自分で作ると、自分好みのものができるので、やってよかったと思っています。
Feedlyの登録ボタンが消えてしまっているので、近日中に復活させようと思います。