Iskydblog 0025 12 15 at 14 40 02

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

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

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

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

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

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

これがHTMLです。

これがCSSです。JetPackのカスタムCSSを使って最後に読み込むことで、Stinger本体のCSSは弄っていません。

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

解説

sns button.zip

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

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

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

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

WordPressの場合

これでパーマリンクを

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

さいごに

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

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