読者です 読者をやめる 読者になる 読者になる

くうねるだす

信州大学4回生の自然派ブロガー。 おいしいものがすき。おさけも少々。

はてなブログをコピペでカスタマイズ!おしゃれなシェアボタンのつけ方

ブログ ブログ-カスタマイズ
シェアする!
【スポンサーリンク】

ブログのカスタマイズで「おしゃれなSNSシェアボタンをつけたい」ってずーっと思っていて、先日やっと思い通りのデザインにできたので備忘録もかねて。

blog-design-custamize

カスタマイズの参考にした記事

daipanman.hatenablog.com

PCがいじれるわけでもなく、イチから勉強する気概もないぼくは「コピペでできるカスタマイズ」依存症なわけですが、今回はこちらの記事を参考にしました。だいぱんまん(donchan922)さん、ありがとうございます。 

 

コピペに少し手を加えてカスタマイズ完了。

 

 SNSシェアボタンのカスタマイズ実装図

実装図がこちらの、赤く囲った部分。

PC

 

 

f:id:kuunerudasu:20151211131513j:plain

 

 

スマホ

*スマホのカスタマイズははてなブログproに加入していることが前提条件になります。

f:id:kuunerudasu:20151211130836j:plain

 

スマホにはLINEが加わってます。

 

■カラフルで目立つ

■アイコンが分かりやすくオシャレ

■それぞれが四角形で、つながって帯状に表示される

■読み込みが速い

特徴はこんな感じですね。この4つを満たすのを探し回っていたんですが、全然みつからなかった。

だいぱんまんさんのだと可愛らしい感じなのですが、ぼくのブログは特に写真も四角く表示してカクカクしたデザインになってるので、それに合うようにいじってます。

 

以下やり方です。

はてなブログのデフォルトのシェアボタンを消す

まずははてなブログのデフォルトのシェアボタンを消しちゃいましょう。

ダッシュボード>デザイン>カスタマイズ>記事>ソーシャルパーツの部分のチェックを外せばOK!

f:id:kuunerudasu:20160119114751p:plain

 

そうすれば、写真右下の赤枠のボタンたちを消せるよ。

 

webフォントのインポート

おしゃれなアイコンデザインはfont awesomeというwebフォントからひっぱってくるので、フォントをインポートするわけです。

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

このコードを、ダッシュボード>設定>詳細設定>headに要素を追加にコピペして、変更をクリック。

 

この時点では何も変化がないですが、そういうものだから大丈夫! 

 

CSSのカスタマイズ

お次はCSS。CSSは、ウェブのデザインを「ここはこういう色で、大きさはこれくらい」みたいな感じで命令する文章だよ!

 

ちなみに、CSSのコピペが終わった時点でもまだ変化はないはずなので大丈夫!

PC

コピペして、ダッシュボード>デザイン>カスタマイズ>デザインCSSへ。

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

/* サークルのスタイル */
.sns_circle{
position:relative;
width:20%;
height: 50px;
margin:0px 0px;
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 40px;
color:#FFF;
font-size: 30px;
}

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

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

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

 

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

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

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

/* シェアボタンエリア */
ul.circle_group{
width: 100%;
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;
}

スマホ(proのみ)

ダッシュボード>デザイン>スマートフォン>ヘッダ>タイトル下へ。

<style type="text/css">

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

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

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

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

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

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

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

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

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

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

/* シェアボタンエリア */
ul.circle_group{
width: 100%;
margin:auto;
list-style: none;
padding:7px 0 7px 0;
overflow-y:hidden;
}

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

/* Font Awesome LINE(手作り) */
.fa-line:before {
content: "LINE";
font-family: 'Meiryo',sans-serif;
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;
}
.sns_circle.line{
background-color: #2cbf13;
}

</style>

 

HTMLのカスタマイズ

最後にHTML。HTMLは「こういうモンを表示してね」ってパソコンに命令をする文章みたいなもん。

PC

ダッシュボード>デザイン>記事>記事下or記事上へ。

<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/{Permalink}"></a></li>
<li class="sns_circle twitter"><span><i class="fa fa-twitter"></i></span><a href="https://twitter.com/share?url={Permalink}&amp;text={Title}"></a></li>
<li class="sns_circle facebook"><span><i class="fa fa-facebook"></i></span><a href="http://www.facebook.com/share.php?u={Permalink}"></a></li>
<li class="sns_circle googleplus"><span><i class="fa fa-google-plus"></i></span><a href="https://plus.google.com/share?hl=ja&url={Permalink}"></a></li>
<li class="sns_circle pocket"><span><i class="fa fa-get-pocket"></i></span><a href="http://getpocket.com/edit?url={Permalink}&amp;title={Title}"></a></li>
</ul>

 

スマホ

ダッシュボード>デザイン>スマートフォン>記事>記事上or記事下へ。

<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/{Permalink}"></a></li>
<li class="sns_circle twitter"><span><i class="fa fa-twitter"></i></span><a href="https://twitter.com/share?url={Permalink}&amp;text={Title}"></a></li>
<li class="sns_circle facebook"><span><i class="fa fa-facebook"></i></span><a href="http://www.facebook.com/share.php?u={Permalink}"></a></li>
<li class="sns_circle googleplus"><span><i class="fa fa-google-plus"></i></span><a href="https://plus.google.com/share?hl=ja&url={Permalink}"></a></li>
<li class="sns_circle pocket"><span><i class="fa fa-get-pocket"></i></span><a href="http://getpocket.com/edit?url={Permalink}&amp;title={Title}"></a></li>
<li class="sns_circle line"><span><i class="fa fa-line"></i></span><a href="http://line.me/R/msg/text/?{Permalink}%0d%0a{Title}"></a></li>
</ul>

 

以上で完成です!

下の写真のように、記事上もしくは記事下など、指定した場所にこんな感じのが出てきてればOK!

 

スマホはPCでのプレビューとスマホでの表示が若干違うので、スマホ本体で確認することをおすすめします!

f:id:kuunerudasu:20151210171101p:plain

 

カスタマイズ微調整

コピペで自分のイメージそのもの!ってなかなかないんですよね。似てるけどちょっと変えたい…ってときの参考になれば嬉しいです。

 

アイコンの位置を変えたい

中のアイコンがズレる時、もしくはズラしたい時があるかと思います。

そんな時はCSSのwebフォントに関する指定のpadding値を調整。

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

SNSボタンの背景色を変えたい 

CSSの以下の赤字部分を変更する。

/* アイコン毎の配色と配置 */
.sns_circle.facebook{
background-color: #265a96;
}

この、#なんとかっていうのはPC上で使われる色を表してます。カラーコードと呼ばれるもので、以下のようなサイトで一発で分かります。

html-color-codes.info

 

例えば、facebookアイコンの位置と、背景色をいじってみるとこんな風になったり。

f:id:kuunerudasu:20151210185130p:plain

SNSのボタン数を減らしたい

例えばfacebookは要らない!って方は、HTMLとCSSからfacebookに関する部分を削除。

<li class="sns_circle facebook"><span><i class="fa fa-facebook"></i></span><a href="http://www.facebook.com/share.php?u={Permalink}"></a></li>

これ(HTML)と

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

/* アイコン毎の配色と配置 */

.sns_circle.facebook{
background-color: #265a96;
}

これ(CSS)を消す。

 

さらに、CSSのwidth値を変更する。

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

赤くなっている部分の20%を「100÷表示したいアイコン数(facebookを消すなら残りは4なので100÷4=25%)の数値」%に変更。

 

現在この値は、PCではアイコン5つなので100÷5=20%、スマホではLINEが加わるので100÷6=16.6%(ほんとは16.666…)になってます!

 

まとめ

こんなもんでしょうか。本当は「SNSボタンを増やすor中身を変える」って調整も書きたかったのですが、非常に長くなりそう&修行中なのでまた別の機会にします。

 

カスタマイズして自分のイメージを形にするのってすごく楽しいので、参考になれば幸いです!

 

それではっ!written by 南蒼樹(@Sight50Sky).