MENU
アドセンス審査代行・サイト制作代行・記事代行・アフィリエイトツール販売等
LINE登録者に有料販売中の副業案件を無料配布中 登録はこちら
  1. ホーム
  2. ブログアフィリエイト
  3. はてなブログ
  4. はてなブログにSNSフォローボタン（スマホのアプリ型デザイン）を設置する人気フラットカスタマイズ

はてなブログにSNSフォローボタン（スマホのアプリ型デザイン）を設置する人気フラットカスタマイズ

はてなブログ

f:id:buchibuchi4647:20170507220533j:plain

コピペで簡単！はてなブログのフォローボタンにタイトルをつけてカスタマイズしましょう。今回はスマホのアプリのようなデザインのフォローボタン。

フォローボタンは全部で（流行のinstagramを含んだ）６種類！記事上、または記事下に簡単にコピーして貼り付けるだけの簡単な作業ですので、ぜひお試しください。

目次
  1. フォローボタンをタイトルつけてカスタマイズ
    1. 実装後 
    2. 設置手順1
    3. 設定手順2（htmlを貼り付け）
    4. その他のフォローボタン
    5. おわりに

フォローボタンをタイトルつけてカスタマイズ

フォローボタンに枠や背景をつけて目立たせているのはよく見かけます。今回はタイトルもつけることにより、いっそう目立つことを意識したカスタマイズです。また、スマホのアプリのような形のフォローボタンを作っていました。

基本的にレスポンシブ対応を意識して作っています。

実装後 

f:id:buchibuchi4647:20170507202856p:plain

「サイトタイトル」〜フォローボタン設置まですべてコピペで簡単にできますので、初心者の方でも可能なカスタマイズです。

また、各フォローボタンにマウスを近づけると色が変わるようにしています。フォローボタンは左から「はてなブックマーク、twitter,読者登録、facebook,インスタグラム、feedly」。6種類のフォローボタンがありますが、使わなければ削除してください。

設置手順1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
view raw gistfile1.txt hosted with ❤ by GitHub

上記のコードを管理画面の［設定］→［詳細設定］→［head に内容を追加］に貼り付けて下さい。フォントを読み込むコードになります。

注意

カスタマイズしていると、コードを２重に貼り付けることがあります。上記のコードをすでに貼り付けていないか確認してください。

設定手順2（htmlを貼り付け）

htmlでリンクの貼り付けをしていきます。設置したい所（記事上、記事下）に以下のコードを貼り付けてください。

<div class="subscribe">
<div class="cell1">1段目<br>２段目</div>
<div class="cell2">
<div align="center">
<ul class="follow-me">
<li><a href="http://b.hatena.ne.jp/entry/english-apple-diy.hatenablog.com"></a></li>
<li><a href="https://twitter.com/joyous4647"></a></li>
<li><a href="http://blog.hatena.ne.jp/buchibuchi4647/english-apple-diy.hatenablog.com/subscribe"></a></li>
<li><a href="https://www.facebook.com/joyous1005/"></a></li>
<li><a href="https://www.instagram.com/english.awa/"></a></li>
<li><a href="http://feedly.com/i/subscription/feed/http://english-apple-diy.hatenablog.com/feed"></a></li>
</ul></div>
</div>
</div>
view raw gistfile1.txt hosted with ❤ by GitHub

ここで少しコピペ以外に重要な作業が必要になります。コピペだけじゃないのって思った方はすいません。しかし、簡単な作業なので大丈夫です。

snsの情報を入力する 

このまま設置してしまうと、すべて僕の情報ままのフォローボタンなので書き換えます。

  • 6行目の「english-apple-diy.hatenablog.com」 を自分のブログURLに変更
  • 7行目の「joyous4647」を自分のtwitterアカウントに変更
  • 8行目の「buchibuchi4647/english-apple-diy.hatenablog.com」を自分のはてなID/自分のブログURLに変更
  • 9行目の「english.awa」を自分のinstagramアカウントに変更
  • 10行目の「http://english-apple-diy.hatenablog.com」を自分のブログURLに変更

打ち間違いがないか確認しましょう。また、ブログURLを入力するとき「http://」が必要なのはfeedlyのみです。必要のないsnsフォローボタンは不要な行を削除してください。

タイトルを入力する

  • 2行目の「1段目」、「2段目」を書き換えることによってタイトルを変更

１段目は「follow」や「フォローお願いします」と僕は書いていました。2段目は自分のブログタイトルや目を引くようなキャッチフレーズに変更してください。空欄にすることで、どちらか一方のみ表示も可能です。

設定手順3(cssを貼り付け)

最後にcssの設定です。今回は3種類のデザインを紹介します。気に入ったものを選んで貼り付けてください。

以下のコードを「デザインcss」に貼り付けてください。

.follow-me li {
color: #fff;
padding: 0px 0px 0px 0px;
margin: 0px 8px ;
width: 67px;
height: 60px;
vertical-align: top;
line-height: 64px;
text-align: center;
display: inline-block;
border-radius: 50%;
}
.follow-me li a::before {
background-color: #fff;
border-style: solid;
position: relative;
list-style: none;
border-width: 1px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
display: inline-block;
font-family: FontAwesome;
font-size: 16px;
height: 42px; /* Button height */
line-height: 42px; /* Button height */
-webkit-transition: all .3s ease;
transition: all .3s ease;
text-align: center;
width: 37px; /* Button width */
}
.follow-me li a[href*="facebook.com"]::before { border-color: #00336D; color: #3b5998; content: "\f09a"; }
.follow-me li
a[href*="feedly.com"]::before { border-color: #00336D; color: #6cc655; content: "\f09e"; }
.follow-me li a[href*="b.hatena.ne.jp"]::before { border-color: #00336D; color: #008fde; content: "\f027"; font-family: blogicon; }
.follow-me li a[href*="instagram.com"]::before { border-color: #00336D; color: #125688; content: "\f16d"; }
.follow-me li
a[href*="last.fm"]::before { border-color: #00336D; color: #d51007; content: "\f202"; }
.follow-me li
a[href*="twitter.com"]::before { border-color: #00336D; color: #55acee; content: "\f099"; }
.follow-me li a[href$="/subscribe"]::before { border-color: #00336D; color: #363636; content: "\f000"; font-family: blogicon; }
.follow-me li a:hover::before {
color: #fff;
}
.follow-me li a[href*="facebook.com"]:hover::before { background-color: #3b5998; }
.follow-me li a[href*="feedly.com"]:hover::before { background-color: #6cc655; }
.follow-me li a[href*="b.hatena.ne.jp"]:hover::before { background-color: #008fde; }
.follow-me li a[href*="instagram.com"]:hover::before { background-color: #125688; }
.follow-me li a[href*="twitter.com"]:hover::before { background-color: #55acee; }
.follow-me li a[href$="/subscribe"]:hover::before { background-color: #363636; }
.follow-me li a::before {
-webkit-border-radius: 2px; /* for Android ~4.3 */
border-radius: 2px;
font-size: 19px;
height: 41px;
line-height: 44px;
width: 70px;
vertical-align: middle;
}
.subscribe {
display: table;
width: 100%;
}
.cell1 {
width: 100%;
display: table;
vertical-align: middle;
text-align: center;
background: #3a3a3a;
color: white;
letter-spacing: 0.3em;
font-size: 19px;
font-weight: bold;
line-height: 1.3em;
}
.cell2 {
width: 100%;
display: table-;
border-left: none;
background: #ececec;
}
view raw gistfile1.txt hosted with ❤ by GitHub

基本的にレスポンシブデザインで作っていますので、スマホ設定はレスポンシブ対応に設定してください。

背景色を変更する

  • 70行目でタイトルの背景色を変更。81行目でフォローボタンの背景色を変更

現在の背景色は黒になっています。ブログに合わせて変更してください。

WEB色見本 原色大辞典 – HTMLカラーコード

横幅を調整

現在は6つのフォローボタンに合わせて横幅を設定しています。フォローボタンを削除することによってレイアウトが崩れることがあります。

  • ５行目、５８行目の〜pxの数字の値を変更

数字の値を変更することによって横幅を変更できますので調整してください。

その他のフォローボタン

最後のフォローボタンを2種類紹介します。手順1,手順2は同様です。手順3のcssの貼り付けであなたの好みあったものを選んで選んで貼り付けてください。

アプリ型フォローボタン

スマホのホームボタンのアプリのようなフォローボタン。かわいいデザインです。

f:id:buchibuchi4647:20170507214509p:plain

以下のコードを「デザインcss」に貼り付けてください。

.follow-me li {
color: #fff;
padding: 0px 0px 0px 0px;
margin: 0px 8px ;
width: 67px;
height: 60px;
vertical-align: top;
line-height: 64px;
text-align: center;
display: inline-block;
border-radius: 50%;
}
.follow-me li a::before {
background-color: #fff;
border-style: solid;
position: relative;
list-style: none;
border-width: 1px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
display: inline-block;
font-family: FontAwesome;
font-size: 16px;
height: 42px; /* Button height */
line-height: 42px; /* Button height */
-webkit-transition: all .3s ease;
transition: all .3s ease;
text-align: center;
width: 37px; /* Button width */
}
.follow-me li a[href*="facebook.com"]::before { border-color: #00336D; color: #3b5998; content: "\f09a"; }
.follow-me li
a[href*="feedly.com"]::before { border-color: #00336D; color: #6cc655; content: "\f09e"; }
.follow-me li a[href*="b.hatena.ne.jp"]::before { border-color: #00336D; color: #008fde; content: "\f027"; font-family: blogicon; }
.follow-me li a[href*="instagram.com"]::before { border-color: #00336D; color: #125688; content: "\f16d"; }
.follow-me li
a[href*="last.fm"]::before { border-color: #00336D; color: #d51007; content: "\f202"; }
.follow-me li
a[href*="twitter.com"]::before { border-color: #00336D; color: #55acee; content: "\f099"; }
.follow-me li a[href$="/subscribe"]::before { border-color: #00336D; color: #363636; content: "\f000"; font-family: blogicon; }
.follow-me li a:hover::before {
color: #fff;
}
.follow-me li a[href*="facebook.com"]:hover::before { background-color: #3b5998; }
.follow-me li a[href*="feedly.com"]:hover::before { background-color: #6cc655; }
.follow-me li a[href*="b.hatena.ne.jp"]:hover::before { background-color: #008fde; }
.follow-me li a[href*="instagram.com"]:hover::before { background-color: #125688; }
.follow-me li a[href*="twitter.com"]:hover::before { background-color: #55acee; }
.follow-me li a[href$="/subscribe"]:hover::before { background-color: #363636; }
.follow-me li a::before {
-webkit-border-radius: 2px; /* for Android ~4.3 */
border-radius: 5px;
font-size: 19px;
height: 41px;
line-height: 44px;
width: 70px;
vertical-align: middle;
}
.subscribe {
display: table;
width: 100%;
}
.cell1 {
width: 100%;
display: table;
vertical-align: middle;
text-align: center;
background: #3a3a3a;
color: white;
letter-spacing: 0.3em;
font-size: 19px;
font-weight: bold;
line-height: 1.3em;
}
.cell2 {
width: 100%;
display: table-;
border-left: none;
background: #ececec;
}
view raw gistfile1.txt hosted with ❤ by GitHub

不要なフォローボタンを削除したときの横幅の設定は上記の「横幅の調整」と同じ方法です。

個性的なデザインのフォローボタン

もっと丸みのあるフォローボタンです。全体的に文字も大きくしました。

f:id:buchibuchi4647:20170507215624p:plain

 以下のコードを「デザインCSS」に貼り付けてください。

.follow-me li {
color: #fff;
padding: 0px 0px 0px 0px;
margin: 0px 8px ;
width: 67px;
height: 60px;
vertical-align: top;
line-height: 64px;
text-align: center;
display: inline-block;
border-radius: 50%;
}
.follow-me li a::before {
background-color: #fff;
border-style: solid;
position: relative;
list-style: none;
border-width: 1px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
display: inline-block;
font-family: FontAwesome;
font-size: 16px;
height: 42px; /* Button height */
line-height: 42px; /* Button height */
-webkit-transition: all .3s ease;
transition: all .3s ease;
text-align: center;
width: 37px; /* Button width */
}
.follow-me li a[href*="facebook.com"]::before { border-color: #00336D; color: #3b5998; content: "\f09a"; }
.follow-me li
a[href*="feedly.com"]::before { border-color: #00336D; color: #6cc655; content: "\f09e"; }
.follow-me li a[href*="b.hatena.ne.jp"]::before { border-color: #00336D; color: #008fde; content: "\f027"; font-family: blogicon; }
.follow-me li a[href*="instagram.com"]::before { border-color: #00336D; color: #125688; content: "\f16d"; }
.follow-me li
a[href*="last.fm"]::before { border-color: #00336D; color: #d51007; content: "\f202"; }
.follow-me li
a[href*="twitter.com"]::before { border-color: #00336D; color: #55acee; content: "\f099"; }
.follow-me li a[href$="/subscribe"]::before { border-color: #00336D; color: #363636; content: "\f000"; font-family: blogicon; }
.follow-me li a:hover::before {
color: #fff;
}
.follow-me li a[href*="facebook.com"]:hover::before { background-color: #3b5998; }
.follow-me li a[href*="feedly.com"]:hover::before { background-color: #6cc655; }
.follow-me li a[href*="b.hatena.ne.jp"]:hover::before { background-color: #008fde; }
.follow-me li a[href*="instagram.com"]:hover::before { background-color: #125688; }
.follow-me li a[href*="twitter.com"]:hover::before { background-color: #55acee; }
.follow-me li a[href$="/subscribe"]:hover::before { background-color: #363636; }
.follow-me li a::before {
-webkit-border-radius: 2px; /* for Android ~4.3 */
border-radius: 30px;
font-size: 24px;
height: 41px;
line-height: 44px;
width: 70px;
vertical-align: middle;
}
.subscribe {
display: table;
width: 100%;
}
.cell1 {
width: 100%;
display: table;
vertical-align: middle;
text-align: center;
background: #3a3a3a;
color: white;
letter-spacing: 0.3em;
font-size: 19px;
font-weight: bold;
line-height: 1.3em;
}
.cell2 {
width: 100%;
display: table-;
border-left: none;
background: #ececec;
}
view raw gistfile1.txt hosted with ❤ by GitHub

こちらも、不要なフォローボタンを削除したときの横幅の設定は上記の「横幅の調整」と同じ方法です。

おわりに

カスタマイズは楽しいです。今回の反響が良かったら、いろいろ紹介したいと思いますのでよろしくお願いします。

はてなブログ
  • URLをコピーしました！

関連記事

目次
  1. フォローボタンをタイトルつけてカスタマイズ
    1. 実装後 
    2. 設置手順1
    3. 設定手順2（htmlを貼り付け）
    4. その他のフォローボタン
    5. おわりに