はてなブログにシェアボタンやフォローボタンを設置して色々分かったこと

f:id:shhiai:20160109163018p:plain

@soraです。

僕のブログにSNSのシェアボタンとフォローボタンを設置しました。

これです。

f:id:shhiai:20160109163018p:plain

ゆきひー @ftmacchoさんの記事を参考にして設置しました。

今回はゆきひーさんのコピペコードにプラスαしてアレンジしました。

ゆきひーさんのコピペコードは僕みたいにhtmlやcssの事が良く分からない人でも簡単に設置出来ます。

ただ、これをアレンジするとなるとhtmlやcssに詳しくない僕にとっては一苦労でした。

シェアボタン

シェアボタンはこの記事を参考にしてコピペコードをほぼ、そのまま使ってます。

ただし、「シェアする」の文字サイズがスマホで表示すると小さかったので、少し大きくしてあります。

コピペコード④HTML(レスポンシブ)の文字サイズを指定している箇所を次のように変更しました。

オリジナル

<span style="font-size: 8px">シェアする</span>

変更したもの

<span style="font-size:80%; text-align:center">シェアする</span>

www.yukihy.com

フォローボタン

フォローボタンはこの記事を参考にしました。

www.yukihy.com

この記事では、はてなブログの購読ボタン・Twitter・Feedlyのボタンの設置方法だけしか解説してません。

Google+やinstagram、Facebookも設置したかったので、色々調べて何とか設置する事が出来ましたので紹介したいと思います。

Facebookの設定方法

Twitter・Feedly・Facebookのアイコンは、はてなブログ標準のWEBフォントを利用します。

・はてなブログのWEBフォント

知らなかったのですが、はてなブログでは、次のWEBフォントを自動的に読み込んでます。

絵文字みたいなやつです。

ゆきひーさんのコピペコードも、これを使っている事が分かりました。

f:id:shhiai:20160109183650p:plain

このアイコンにはクラス名とコードが紐付けされています。

例えば、Facebookのアイコンを表示させる場合は次のようにやります。

標準サイズのアイコンとクラス名

クラス名は「blogicon-facebook」

このコードを記載するとアイコンが表示されます。

<i class="blogicon-facebook"></i>

大きいサイズのアイコンとクラス名

クラス名は「blogicon-facebook lg」

このコードを記載するとアイコンが表示されます。

<i class="blogicon-facebook lg"></i>

参考にした記事

はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ - しろかい！

スポンサードリンク

Font Awesomeの読み込み

Google+やinstagramのアイコンは、はてなブログのWEBフォントにはないのでFont Awesomeのものを利用します。

次のコードをダッシュボード→設定→詳細設定の「headに要素を追加」にコピペしておくと使えるようになります。

既に、コピー済みの場合はやる必要はありません。

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

instagramのアイコンとクラス名

クラス名は「fa fa-instagram」

このコードを記載するとアイコンが表示されます。

<i class="fa fa-instagram"></i>

Google+のアイコンとクラス名

クラス名は「fa fa-google-plus」

このコードを記載するとアイコンが表示されます。

<i class="fa fa-google-plus" ></i>

このように、はてなブログのWEBフォントやFont Awesomeを利用してソーシャルメディアのアイコンを表示させることが出来るって事が分かりました。

これを踏まえて出来上がった実際のHTMLとcssです。

HTML

はてなブログ、Twitter、Facebook、instagram、Google+の順番になってます。

◯◯◯の部分を自分のURLに変更して下さい。

<!--フォローボタン-->

<div class="follow-btn" >

<span style="font-size:80%; text-align:center">フォローする</span><br>

<a class="hatena" href="◯◯◯" target="_blank"><i class="blogicon-hatenablog lg"></i><br><span class="text-small">はてな</span></a>

<a class="twitter" href="◯◯◯" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="text-small">Twitter</span></a>

<a class="facebook" href="〇〇◯" target="_blank"><i class="blogicon-facebook lg" ></i><br><span class="text-small">Facebook</span></a>

<a class="instagram" href="◯◯◯" target="_blank"><i class="fa fa-instagram" ></i><br><span class="text-small">instagram</span></a>

<a class="googleP" href="〇〇◯" target="_blank"><i class="fa fa-google-plus" ></i><br><span class="text-small">Google+</span></a>

</div>

CSS

/*フォローボタン*/

.follow-btn{
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}
.follow-btn a {
    display: inline-block;
    height: 45px;
    line-height: 22px;
    width: 15%;
    font-size: 14px;
    text-align: center;
    text-decoration: none;

}
.follow-btn .hatena {
    color: #3D3F44;
    border: 2px solid #3D3F44;
    background: #ffffff; 
}
.follow-btn .twitter {
    color: #00ACEE;
    border: 2px solid #00ACEE;
    background: #ffffff; 
}
.follow-btn .facebook {
    color: #405BA7;
    border: 2px solid #405BA7;
    background: #ffffff; 
}
.follow-btn .instagram {
    color: #8B4513;
    border: 2px solid #8B4513;
    background: #ffffff; 
}
.follow-btn .googleP {
    color: #C53727;
    border: 2px solid #C53727;
    background: #ffffff; 
}
.follow-btn .hatena:hover {
    color: #ffffff;
    background: #3D3F44;
    transition: all .3s;
}
.follow-btn .twitter:hover {
    color: #ffffff;
    background: #00ACEE;
    transition: all .3s;
}
.follow-btn .facebook:hover {
    color: #ffffff;
    background: #405BA7;
    transition: all .3s;
}
.follow-btn .instagram:hover {
    color: #ffffff;
    background: #8B4513;
    transition: all .3s;
}
.follow-btn .googleP:hover {
    color: #ffffff;
    background: #C53727;
    transition: all .3s;
}
.text-small{
    font-size: 8px;
}

何分HTMLやCSSに疎いので、うまく説明出来てませんが、ゆきひーさんの記事と合わせてご覧ください。