SNSのボタンを一発でお洒落にカスタマズする方法【はてなブログ】

ブログ運営関連
スポンサーリンク

f:id:dkanbe0715:20190124093410p:plain

 

こんにちは、コウソツ君です。

今回ははてなブログのデザインの一つ、アイコンの変更をやってみました。

ソーシャルリンクのアイコンは、はてなブログでも表示させることが出来ますが

↓こんなん。

はてなオリジナル

なんだか残念な感じ。

なのでこれを少しカッコよくしようと思いました。

現在こんな感じにしています。

 

このデザインがいいかはわかりません。

私、よく言われるので。

センス悪いって。

 

それはさておいて、参考にさせてもらったのはvintonさんのマテリアルデザイン風のソーシャルボタン設置というやつです。

ありがとうございます。

 

おかげで自己満足できましたw

webgaku.hateblo.jp

コードの貼り付け

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

スポンサーリンク
スポンサーリンク
    1. コードの貼り付け
    2. <div class=“sns-header”>
    3. <ul class=“sns-area“>
    4. <li>
    5. <a class=“sns-twitter sns-link” href=“https://twitter.com/intent/tweet?url={URLEncodedPermalink}&text={Title}&via=webgaku”target=“_blank”>
    6. <i class=“blogicon-twitter lg” >
    7. </i>
    8. <span class=“sns-txt”>Twitter</span></a> </li>
    9. <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>
    10. <span class=“sns-txt”>Facebook</span></a> </li>
    11. <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>
    12. <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>
    13. <span class=“sns-txt”>Pocket</span></a> </li> </ul> </div>
  1. 張り付け場所
      1. ・デザイン→カスタマイズ→記事→記事上、記事下
      2. ・デザイン→カスタマイズ→ヘッダ→タイトル下
  2. これでSNSボタンが完成

張り付け場所

上のコードは表示したい場所に張り付ければいいので

例えば

・デザイン→カスタマイズ→記事→記事上、記事下

f:id:dkanbe0715:20190124100957p:plain

・デザイン→カスタマイズ→ヘッダ→タイトル下

f:id:dkanbe0715:20190124101347p:plain

スポンサーリンク

これでSNSボタンが完成

f:id:dkanbe0715:20190124101811p:plain

 

こんな感じで簡単に設置できました。

個人的には大満足です。

また他にも応用できそうなので、これでまたブログが楽しめます。

アクセスは相変わらず一日20pVですがww

面白かったら応援してね!


30代サラリーマンランキング

コメント