高卒君の前を向くブログ

学歴が無いと裕福にはなれない、そんな常識を覆すべく、最底辺高卒君が様々な副業へトライするブログ


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

 

 

張り付け場所

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

 

例えば

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

f:id:dkanbe0715:20190124100957p:plain

 

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

 

f:id:dkanbe0715:20190124101347p:plain

 


出来た

 

f:id:dkanbe0715:20190124101811p:plain

高卒君の前を向くブログ

 

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

個人的には大満足です。

 

 

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

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

 

 

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

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