Maximal Life

渋谷で働く営業本部長のブログ

はてなブログ:おしゃれな SNS ボタンを記事上下に貼りつける方法

f:id:ss17935:20190128213739j:plain

 

 

標準の SNSシェアボタンだと、形がまちまち、ガタガタで格好悪いですよね。

 

Before:

f:id:ss17935:20190128224408p:plain

 

 

SNS シェアボタンをおしゃれなボタンに変更したいと思って調べてみました。

もちろんコピペだけでできる方法です。

今回も Google 先生に調べてもらうと、見つかりましたので備忘録。

 

 

 

Webフォントのインポート

SNS のアイコンを読み込むために Font Awesome から Web フォントをインポートする必要があります。

「ダッシュボード」⇒「設定」⇒「詳細設定」⇒「headに要素を追加」に移動して、以下のコードをコピペして下さい。

 

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

 

ヘッダ/タイトル下への貼り付け

「ダッシュボード」→「デザイン」→「スパナアイコン」→「ヘッダ」→「タイトル下」に以下のコードを貼り付けて下さい。

 

<style type="text/css">
/* 回り込み解除のためのクラス */
.clearfix{
    zoom:1;
}
.clearfix:after{
    content:"";
    display: block;
    clear: both;
    height: 0;
    visibility:hidden;
}

/* サークルのスタイル */
.sns_circle{
    position:relative;
    width: 50px;
    height: 50px;
    margin:0 3px 0 3px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #999;
    float:left;
    list-style: none;
}

/* Webフォントに関する指定 */
.sns_circle span{
    position:absolute;
    font-size:35px;
    color:#FFF;
}

/* Webフォントに関する指定(はてぶ) */
.sns_circle.hatebu.sns_circle span{
    position:absolute;
    padding:8px 0 0 8px;
    color:#FFF;
    font-size: 30px;
}

/* Webフォントに関する指定(Twitter) */
.sns_circle.twitter.sns_circle span{
    position:absolute;
    padding:8px 0 0 8px;
    color:#FFF;
}

/* Webフォントに関する指定(Facebook) */
.sns_circle.facebook.sns_circle span{
    position:absolute;
    padding:8px 0 0 18px;
    color:#FFF;
}

/* Webフォントに関する指定(Google+) */
.sns_circle.googleplus.sns_circle span{
    position:absolute;
    padding:10px 0 0 14px;
    color:#FFF;
    font-size: 30px;
}

/* Webフォントに関する指定(Pocket) */
.sns_circle.pocket.sns_circle span{
    position:absolute;
    padding:12px 0 0 12px;
    font-size: 28px;
    color:#FFF;
}

/* リンク領域をブロック全体に */
.sns_circle a{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-indent:-999px;
    color:#FFF;
}

/* マウスオーバー時のスタイル */
.sns_circle a:hover{
    background-color:#FFF;
    opacity: 0.5;
}

/* シェアボタンエリア */
ul.circle_group{
    width: 280px;
    margin:auto;
    list-style: none;
    padding:0;
}

/* Font Awesome hatena bookmark(手作り) */
.fa-hatena:before {
    content: "B!";
    font-family: Verdana;
    font-weight: bold;
}

/* アイコン毎の配色と配置 */
.sns_circle.hatebu{
    background-color: #006fbb;
}
.sns_circle.twitter{
    background-color: #00acec;
}
.sns_circle.facebook{
    background-color: #265a96;
}
.sns_circle.googleplus{
    background-color: #dd4b39;
}
.sns_circle.pocket{
    background-color: #EE4256;
}
</style>

 

記事上下への貼り付け

「ダッシュボード」→「デザイン」→「スパナアイコン」→「記事」→「記事上 & 記事下」に以下のコードを貼り付けてください。

「記事上 & 記事下」と書きましたが、どちらか一方でよければ、コピペした方にのみアイコンが表示されるはずです。

 

<ul class="circle_group clearfix">
    <li class="sns_circle hatebu"><span><i class="fa fa-hatena"></i></span><a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple"></a></li>
    <li class="sns_circle twitter"><span><i class="fa fa-twitter"></i></span><a href="http://twitter.com/intent/tweet?text={Title} - {BlogTitle} {URLEncodedPermalink}"></a></li>
    <li class="sns_circle facebook"><span><i class="fa fa-facebook"></i></span><a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}"></a></li>
    <li class="sns_circle googleplus"><span><i class="fa fa-google-plus"></i></span><a href="https://plus.google.com/share?url={URLEncodedPermalink}"></a></li>
    <li class="sns_circle pocket"><span><i class="fa fa-get-pocket"></i></span><a href="http://getpocket.com/edit?url={URLEncodedPermalink}"></a></li>
</ul>

 

After:

f:id:ss17935:20190128225034p:plain

 

このように記事下に丸型の SNSフォローアイコンが表示されました。

ちなみに、このカスタマイズの際にはてなブログ標準の SNS フォローボタンの表示はキャンセルしました。

 

「ダッシュボード」→「デザイン」→「スパナアイコン」→「記事」→「ソーシャルパーツ」のチェックをはずして下さい。

それだけで、デフォルトの SNS ボタンを非表示にできます。

 

今回お世話になったのはこちらのブログ。↓

おしゃれなシェアボタンをCSS&Webフォントで作ってみた【はてなブログのPC&スマホ用】 - 技術を磨くだいぱんまん 

ありがとうございました。m(__)m

 

↓ ランキングに参加しています。よろしければポチッとして下さい。

にほんブログ村 ブログブログ ブログノウハウへ