amedia-online

自由が丘のカメラ好きな美容師 雨宮(amemiya)の情報発信media

SNSシェアボタンを簡単に自作する

calendar

reload

SNSシェアボタンを簡単に自作する

自由が丘美容師の雨宮です。本日はワードプレスネタです。ブログやHPを運営しているとSNSにシェアボタンをつけたくなりますよね。シェアをしてもらうには必須アイテムです。

ワードプレスでプラグインは沢山出ているのですがお気に入りのシェアボタンにならずに悩んでいる人も多いのではないかと思います。

たとえばこんな感じ。僕のブログもこんな感じのを使っていますが。色分けされていてたへんわかりやすいのですが。お洒落なHPとかだとうるさくて主張しすぎ感がありますよね。

なので今回はプラグインを使わずに自作という事になりました。

スポンサーリンク

モノクロのお洒落なシェアボタンを使いたいのよ

ということで僕はこんなアイコンをチョイスしました。

SNSシェアボタンをHTMLで作ってみる

さて僕はワードプレス素人なので何も見ないでHTMLとか書けないし。さて困ったもんだと思いながら、ネットをウロウロ。
参考記事
http://www.furimuke.com/2014/03/social-link.html

こちらの記事にたどり着きました。おっこのくらいならなんとかなりそう。言っている事もわかる。w(普通にどシロートなので皆さん笑ってください。)

それがこちら

 <a href="http://twitter.com/home?status=----URL---">ツイッター</a>
<a href="http://www.facebook.com/share.php?u=----URL---">フェイスブック</a>
<a href="https://plus.google.com/share?url=----URL---">グーグルプラス</a>
<a href="http://b.hatena.ne.jp/append?----URL---">はてなぶ</a>
<a href="http://www.tumblr.com/share?----URL---">タンブラー</a>

こんな感じになりまして。ビジュアルだと下の感じになります。

ツイッター
フェイスブック
グーグルプラス
はてなぶ
タンブラー

これも困りますよね。普通のシェアボタンは横並びなので、これを横並びににしてSNSアイコンも付けたいですよね。

  • URLには自分のHPのアドレスを入れて
  • 右側の文字には画像をはめ込めます

 

シェアボタンを横並びにする

これってこないだ自分で書いた記事のHTML使えるんじゃね???となり色々試行錯誤したわけです。

http://amemiya-hair.tokyo/2017/06/post-377/

上のにこれを組み合わせれば絶対にできるはず。そう思ったのです。(もっと簡単なやり方はあると思います。個人的な試行錯誤の結果ですのでw)

 <div style="float: left; margin: 1px;"><a href="http://twitter.com/home?status=------URL--------"><ツイッターアイコン画像/></a></div>
 <div style="float: left; margin: 1px;"><a href="http://www.facebook.com/share.php?u=------URL-------- "><フェイスブックアイコン画像/></a></div> 
 <div style="float: left; margin: 1px;"><a href="https://plus.google.com/share?url=------URL-------- "><グーグルアイコン画像/></a></div> 
 <div style="float: left; margin: 1px;"><a href="http://www.tumblr.com/share?------URL-------- "><タンブラーアイコン画像/></a></div> 

※margin1pxで隙間を1px空けるように書いていますが、好みでここの数字をいじっても大丈夫です。

二つですけどこんな感じに「amedia-online」のシェアボタンが出来ました。試行錯誤色々やってみてください♪そのまま縦に表示されてしまった場合は横に画像をもってくるとすんなり入ります♪マージンで間をあけているので、くっつかいないと思います♪

 自作のSNSシェアボタンを作る事で、他の人と違う感じも出せる。

こうやって自作で設置することができると、画像はもはやなんでも大丈夫なので、手書きのシェアボタンや、少し変わったシェアボタンにすることもできるなと。思います。

 

自作シェアボタンの注意点

この方法でのシェアボタンの設置は、URLを直接記入するので、記事ごとにシェアをするというのはできません。HP全体を知らせるためのシェアボタンとしては有効な方法かと思います。

ブログ形式にはプラグインを使うか他の自作シェアボタンの記事を参考にするのが得策かなと思います。

新規のお客様にはエクリュではクーポンをご用意しています。下の予約ボタンからご予約できます。

 

 

 


Instagram
IDはこちらから
amemiya_ecru

Instagram aemiya_bonn

【エクリュ店舗情報】
〒152-0035
目黒区自由が丘2-16-16 2F
【TEL 】
03-3718-7896(予約優先)
【営業時間】
平日 11:00~19:00
日祝 10:00~18:00
【定休日】
火曜日 隔週水曜日

エクリュHP

ecru-salon.com
1FはMARGARET HOWELLさんです。

 

 

 

 

 

instagramでも繋がってみませんか? followme.
@amemiya_ecru

ブログをメールで購読

SNSをやっていない方はこちらからブログの新着を受け取ることができます。

198人の購読者に加わりましょう

この記事をシェアする

コメント

コメントはありません。

down コメントを残す




CAPTCHA


自己紹介

Amemiya Ryuichi

Amemiya Ryuichi

自由が丘の美容室エクリュでスタイリストをしています。趣味はカメラとブログと家庭菜園他にも色々多趣味で変な美容師。趣味を生かしてWEBの制作依頼から、写真の撮影依頼もこなしています。 もちろん本業が第一です。メンズカットが得意でマニアックな会話から理系男子率高めw [詳細]