SNSのボタンを一発でお洒落にカスタマズする方法【はてなブログ】
こんにちは、コウソツ君です。
今回ははてなブログのデザインの一つ、アイコンの変更をやってみました。
ソーシャルリンクのアイコンは、はてなブログでも表示させることが出来ますが
↓こんなん。
なんだか残念な感じ。
なのでこれを少しカッコよくしようと思いました。
現在こんな感じにしています。
このデザインがいいかはわかりません。
私、よく言われるので。
センス悪いって。
それはさておいて、参考にさせてもらったのは
vintonさんのマテリアルデザイン風のソーシャルボタン設置というやつです。
ありがとうございます。
おかげで自己満足できましたw
コードの貼り付け
<div class="sns-header">
<ul class="sns-area">
<li>
<a class="sns-twitter sns-link" href="https://twitter.com/intent/tweet?url={URLEncodedPermalink}&text={Title}&via=webgaku"target="_blank">
<i class="blogicon-twitter lg" >
</i>
<span class="sns-txt">Twitter</span></a> </li>
<li> <a class="sns-facebook sns-link" href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank"> <i class="blogicon-facebook lg" ></i>
<span class="sns-txt">Facebook</span></a> </li>
<li> <a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button sns-bookmark sns-link" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"> <i class="blogicon-bookmark lg"></i><span class="sns-txt">Hatena</span></a> </li>
<li> <a class="sns-pocket sns-link" href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" onclick="window.open(this.href, 'pocket_window', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;" > <i class="blogicon-chevron-down"></i>
<span class="sns-txt">Pocket</span></a> </li> </ul> </div>
※ただ、注意。この六行目下線にした所 「via=webgaku」
ここだけツイッターで使用している自分の「ユーザー名」を入力してください。
href="https://twitter.com/intent/tweet?url={URLEncodedPermalink}&text={Title}&via=webgaku" target="_blank">
張り付け場所
上のコードは表示したい場所に張り付ければいいので
例えば
・デザイン→カスタマイズ→記事→記事上、記事下
・デザイン→カスタマイズ→ヘッダ→タイトル下
出来た
こんな感じで簡単に設置できました。
個人的には大満足です。
また他にも応用できそうなので、これでまたブログが楽しめます。
アクセスは相変わらず一日20pVですがww
面白かったら応援してね!