[stinger]ブログに、オリジナルのシェアボタンを設置してみました。

2013年12月15日

ブログのデザイン、面倒でなかなか手が出ないしゅんぼー(@shun_kashiwa)です。

当ブログは「Stinger3」というテーマを使っています。SEOにも強く、なにかと使ってる人が多いので真似できるからです。

今まではテーマに含まれていたシェアボタンを使っていたのですが、ふと思い立って自作してみました。今回はその方法をご紹介します。

デフォルトのを書き換えちゃおう！

wp-content/themes/stinger3/sns.php

1	wp-content/themes/stinger3/sns.php

このファイルが、シェアボタンになります。

これを、書き換えてみました。

<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>

<h4>よろしければシェアお願いしますm(__)m</h4>

<div>

</a>

</div>

<div>

<a href="https://www.facebook.com/sharer/sharer.php?

u=<?php the_permalink(); ?>&t=< ?php the_title(); ?>">

</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>

</div>

これがHTMLです。

 .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%;
}

.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は弄っていません。

僕はこんな感じに書いてみました。

解説

sns button.zip

まず、フォトショで簡単に画像を作りました。

HTMLでこれを表示し、リンクにシェアするためのURLを張っているだけです。

各種シェアリンク実装まとめ – ゆーすけべー日記

URLの設定は、こちらを参考にしました。

WordPressの場合

< ! ?php the_permalink(); ?>;

1	< ! ?php the_permalink(); ?>;

これでパーマリンクを

< ! ?php the_title(); ?>;

1	< ! ?php the_title(); ?>;

これで記事のタイトルを取得できます。これを組み合わせただけです。

さいごに

自分で作ると、自分好みのものができるので、やってよかったと思っています。

Feedlyの登録ボタンが消えてしまっているので、近日中に復活させようと思います。

Please Share !

Twitter Facebook Google+ LINE Hatebu