どうも!フジグチです!
今後当サイトではプロフィール欄のカスタマイズを公開する予定なので、プロフィール欄にはフォローボタンを設置したいのではないかと思い、先にフォローボタンを作成してみました。
ご自身が使用しているSNSを選び、設置したい場所にお使いください。
最近ではブログとの連携をしている方も増えているPinterestのフォローボタンも、はてなブログではあまり見かけないので作ってみました。
シェアボタンのカスタマイズをしたときに調べたロゴの使用ガイドラインに従い、Twitterが白もしくは青、形は決まったものしか使えないためデザインパターンは多くないですが、シンプルなので使いやすいかと思います。
Font Awesomeの読み込み※Pinterestを使う方のみ
※Pinterestのフォローボタンを設置しない方は、この項目は飛ばしてください。
Pinterestを使う方は、はてなブログで使用出来るウェブアイコンには用意されていないので、Font Awesomeを読み込む必要があります。
Pinterestのアイコンを読み込むために、Font Awesomeを使用するのでheadに以下のコードを追加してください。
【ダッシュボード】>【設定】>【詳細設定】>「headに要素を追加」に以下のコードを貼り付けます。
<!--FontAwesome読み込み--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
既にどこかに記述済みの場合は必要ありませんが、Font Awesome5を使用しています。
Font Awesome4だと表示されませんので注意してください。
共通のHTML
まずは共通のHTMLを入れます。
お手数ですがコメントアウトにて<!--読者登録-->や<!--ツイッター-->などと記述してありますので、不要なフォローボタンは<li>~</li>まで削除してください。
コードを入れたあとにご自身でサイトURLやid名、アカウント名を入れなければいけないので、忘れずに入れてください。
正しく入れないと正常にフォローすることが出来ないので、注意事項にしたがって作業し、必ずフォロー画面に進むか確認してください。
「\フォローお願いします/」の文字はお好きな文言に変えられます。不要であれば<div>~</div>まで1行全て消してください。
※2021/2/8追記
LSSさんの作成したコードを元に入力フォームを作成しました。ありがとうございます。
▽参考記事▽
各フォームに必要事項を入力するとコードに反映され、入力間違いをなくすことが出来ますのでご活用ください。
各項目を入力後にHTMLをコピーしてください。
はてな読者登録&Feedly
サイトURL(Feedlyにも使用します)
※最後の「/」は削除してください
例:https://www.fuji-blo.com/ → https://www.fuji-blo.comはてなid
▽各項目を入力後こちらのコードをコピーして下さい。▽
各項目の入れ方
HTMLの各項目内に書かれている「~を入れる」の部分の入れ方を説明します。
上記の入力フォームを使用してください。
読者登録
<li class="follow-btn-item"><a href="http://blog.hatena.ne.jp/ここにidを入れる/ここにhttps://を除いたサイトURLを入れる/subscribe" class="hatena" target="_blank" title="読者になる" rel="nofollow noopener noreferrer"><i class="blogicon-hatenablog"></i></a></li>
「ここにidを入れる」の部分は自分のはてなid名を入れます。
私の場合は「fujiguchi」になります。
「ここにhttps://を除いたサイトURLを入れる」の部分に自分のサイトのURLを入れます。
私のサイトだと、https://www.fuji-blo.com/
なのでhttps://
を除いたwww.fuji-blo.com
を入れます。
私のサイトを入力した場合は
<li class="follow-btn-item"><a href="http://blog.hatena.ne.jp/fujiguchi/www.fuji-blo.com/subscribe" class="hatena" target="_blank" title="読者になる" rel="nofollow noopener noreferrer"><i class="blogicon-hatenablog"></i></a></li>
となります。
<li class="follow-btn-item"><a href="https://twitter.com/intent/follow?screen_name=ここにアカウント名を入れる" class="twitter" target="_blank" title="ツイッターをフォロー" rel="nofollow noopener noreferrer"><i class="blogicon-twitter"></i></a></li>
Twitterの「ここにアカウント名を入れる」の部分は、自分のTwitterアカウントの@マークを除いたアカウント名を入れてください。
私のTwitterアカウントは@fuji_bloなので「fuji_blo」を入れます。
私のアカウントで入力した場合は
<li class="follow-btn-item"><a href="https://twitter.com/intent/follow?screen_name=fuji_blo" class="twitter" target="_blank" title="ツイッターをフォロー" rel="nofollow noopener noreferrer"><i class="blogicon-twitter"></i></a></li>
となります。
<li class="follow-btn-item"><a href="https://www.instagram.com/ここにアカウント名を入れる?ref=badge" class="instagram" target="_blank" title="インスタグラムをフォロー" rel="nofollow noopener noreferrer"><span class="instagram-g"><i class="blogicon-instagram"></i></span></a></li>
instagramの「ここにアカウント名を入れる」の部分は、自分のinstagramアカウントを入れてください。
アカウントが分からない方は、instagramを開き画面右上のアイコンをクリックすると、プロフィールが開くのでそこから取得できます。
私の架空のアカウントが「fujiguchi」だとしたら
<li class="follow-btn-item"><a href="https://www.instagram.com/fujiguchi?ref=badge" class="instagram" target="_blank" title="インスタグラムをフォロー" rel="nofollow noopener noreferrer"><span class="instagram-g"><i class="blogicon-instagram"></i></span></a></li>
となります。
Feedly
<li class="follow-btn-item"><a href="https://feedly.com/i/subscription/feed/ここにサイトURLを入れる/feed" class="feedly" target="_blank" title="RSSフィードを登録" rel="nofollow noopener noreferrer"><i class="blogicon-rss"></i></a></li>
Feedlyの「ここにサイトURLを入れる」の部分は、ご自身のサイトURLを入れてください。
読者登録の時とは違いhttps://
も含めて入れてください。
私のサイトだとhttps://www.fuji-blo.com
となります。
私のサイトを入力した場合は
<li class="follow-btn-item"><a href="https://feedly.com/i/subscription/feed/
https://www.fuji-blo.com
/feed" class="feedly" target="_blank" title="RSSフィードを登録" rel="nofollow noopener noreferrer"><i class="blogicon-rss"></i></a></li>となります。
<li class="follow-btn-item"><a href="https://www.pinterest.com/ここにアカウント名を入れる/" class="pinterest" target="_blank" title="ピンタレストをフォロー" rel="nofollow noopener noreferrer"><i class="fab fa-pinterest"></i></a></li>
Pinterestの「ここにアカウント名を入れる」の部分は、自分のアカウント名の@マークを除いて入力してください。
アカウント名が分からない方は画面右上のアイコンをクリックすると中央に@マークの付いたアカウントが表示されます。(画像では私のアイコンは隠しています)
私の架空のアカウントが@fujiguchiだった場合「fujiguchi」を入力します。
私の架空のアカウントを入力した場合は
<li class="follow-btn-item"><a href="https://www.pinterest.com/fujiguchi/" class="pinterest" target="_blank" title="ピンタレストをフォロー" rel="nofollow noopener noreferrer"><i class="fab fa-pinterest"></i></a></li>
となります。
フォローボタンのCSS
それではHTMLを入れたらフォローボタンのデザインを選び、それに対応したCSSをコピーしてデザインCSSに入れてください。
デザインは丸で作ってありますが、
border-radius: 50%;
/***ここで角丸の調整***/
となっている部分の50%の部分を「8px」や「0」とすることで角丸や正方形にすることが出来ますので、数値を好みで調整してください。
参考までにCappuccinoやNeumorphismで使えるシェアボタンのデフォルトは4pxに設定しています。
画像は上から50%(デフォルト)、8pxにした場合、0にした場合です。


CSSの入れる場所
CSSの入れる場所は【ダッシュボード】>【デザイン】>【スパナマーク】>【{}デザインCSS】> 枠内にコードを入れます。
フォローボタンカラー
カラーのフォローボタンです。マウスオーバー時にふわっと浮き上がります。
/***フォローボタンラベル部分***/ .follow-label { font-weight: bold; font-size: 1.1em; text-align: center; margin-bottom: -1em; } /***ここからフォローボタンカラー***/ .follow-btn-list { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; margin: 1em auto; padding: 0; } .follow-btn-item a { display: inline-block; text-align: center; width: 40px; height: 40px; margin: 4px; padding: .1em; color: #fff; font-size: 26px; line-height: 40px; border-radius: 50%;/***ここで角丸の調整***/ transition: .2s; } .follow-btn-item a:hover { transform: translateY(-4px); box-shadow: 1px 10px 8px -4px rgba(0,0,0,.2); opacity: .8; color: #fff; } /***読者登録***/ .follow-btn-item .hatena { background: #333; } /***ツイッター***/ .follow-btn-item .twitter { background: #1da1f2; } /***feedly ***/ .follow-btn-item .feedly { background: #2bb24c; } /***pinterest ***/ .follow-btn-item .pinterest { background: #e60023; } /***instagram***/ .follow-btn-item .instagram { background: linear-gradient(125deg, #427eff 0%, #f13f79 70%) no-repeat; position: relative; overflow: hidden; } .follow-btn-item .instagram::before { content: ""; position: absolute; top: 20px; left: -14px; width: 53px; height: 53px; background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); } .blogicon-instagram { position: relative; z-index: 1; } /***instagramここまで***/ .follow-btn-item i:not(.fa-pinterest) { vertical-align: -7%; }
モノクロ
モノクロのフォローボタンです。マウスオーバー時にカラーに変わります。
/***フォローボタンラベル部分***/ .follow-label { font-weight: bold; font-size: 1.1em; text-align: center; margin-bottom: -1em; } /***ここからフォローボタンモノクロ***/ .follow-btn-list { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; margin: 1em auto; padding: 0; } .follow-btn-item a { display: inline-block; text-align: center; width: 40px; height: 40px; margin: 4px; padding: .1em; color: #fff; font-size: 26px; line-height: 40px; border-radius: 50%;/***ここで角丸の調整***/ } /***読者登録***/ .follow-btn-item .hatena { background: #333; } /***ツイッター***/ .follow-btn-item .twitter { background: #1da1f2; } /***feedly ***/ .follow-btn-item .feedly { background: #2bb24c; } /***pinterest ***/ .follow-btn-item .pinterest { background: #e60023; } /***instagram***/ .follow-btn-item .instagram { background: linear-gradient(125deg, #427eff 0%, #f13f79 70%) no-repeat; position: relative; overflow: hidden; } .follow-btn-item .instagram::before { content: ""; position: absolute; top: 20px; left: -14px; width: 53px; height: 53px; background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); } .blogicon-instagram { position: relative; z-index: 1; } .follow-btn-item .instagram:not(:hover)::before { background: none; } /***instagramここまで***/ .follow-btn-item i:not(.fa-pinterest) { vertical-align: -7%; } .follow-btn-item a:hover { color: #fff; } .follow-btn-item a:not(:hover) { background: #a3a6a8; }
Neumorphism用デザイン
当サイトが作成したNeumorphismに合わせたデザインです。
Neumorphism用フォローボタンカラー
Neumorphismがシンプルな配色なので普通時はモノクロ、マウスオーバー時にカラーに反転します。
画像はインスタのカラーがグラデーションなので分かりづらいですが、インセットシャドウを使い、少し押し込んだようなデザインになっています。
/***フォローボタンラベル部分***/ .follow-label { font-weight: bold; font-size: 1.1em; text-align: center; margin-bottom: -1em; } /***ここからフォローボタンカラーNeumorphism***/ .follow-btn-list { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; margin: 1em auto; padding: 0; } .follow-btn-item a { display: inline-block; text-align: center; width: 40px; height: 40px; margin: 4px; padding: .1em; color: #fff; font-size: 26px; line-height: 40px; border-radius: 50%;/***ここで角丸の調整***/ } /***読者登録***/ .follow-btn-item .hatena { background: #333; box-shadow: inset 6px 6px 4px #292929, inset -6px -6px 4px #3d3d3d; } /***ツイッター***/ .follow-btn-item .twitter { background: #1da1f2; box-shadow: inset 6px 6px 4px #1781c2, inset -6px -6px 4px #23c1ff; } /***feedly ***/ .follow-btn-item .feedly { background: #2bb24c; box-shadow: inset 6px 6px 4px #228e3d, inset -6px -6px 4px #34d65b; } /***pinterest ***/ .follow-btn-item .pinterest { background: #e60023; box-shadow: inset 6px 6px 4px #b8001c, inset -6px -6px 4px #ff002a; } /***instagram***/ .follow-btn-item .instagram { background: linear-gradient(125deg, #427eff 0%, #f13f79 70%) no-repeat; box-shadow: inset 6px 6px 4px #3565cc, inset -6px -6px 4px #ff4c91; position: relative; overflow: hidden; } .follow-btn-item .instagram::before { content: ""; position: absolute; top: 20px; left: -14px; width: 53px; height: 53px; background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); } .blogicon-instagram { position: relative; z-index: 1; } .follow-btn-item .instagram:not(:hover)::before { background: none; } /***instagramここまで***/ .follow-btn-item i:not(.fa-pinterest) { vertical-align: -7%; } .follow-btn-item a:hover { color: #fff; } .follow-btn-item a:not(:hover) { background: #a3a6a8; box-shadow: 0 0 0 1px var(--shadow-darkcolor), 3px 3px 5px var(--shadow-darkcolor), -3px -3px 5px var(--shadow-brightcolor); }
Neumorphism用フォローボタンモノクロ
普通時はモノクロ、マウスオーバー時に凹むような動作になります。
/***フォローボタンラベル部分***/ .follow-label { font-weight: bold; font-size: 1.1em; text-align: center; margin-bottom: -1em; } /***ここからフォローボタンモノクロNeumorphism***/ .follow-btn-list { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; margin: 1em auto; padding: 0; } .follow-btn-item a { display: inline-block; text-align: center; width: 40px; height: 40px; margin: 4px; padding: .1em; color: #fff; font-size: 26px; line-height: 40px; border-radius: 50%;/***ここで角丸の調整***/ background: #a3a6a8; box-shadow: inset 2px 2px 4px #828586, inset -2px -2px 4px #c4c7ca; } .follow-btn-item i:not(.fa-pinterest) { vertical-align: -7%; } .follow-btn-item a:hover { color: #fff; } .follow-btn-item a:not(:hover) { box-shadow: 0 0 0 1px var(--shadow-darkcolor), 3px 3px 5px var(--shadow-darkcolor), -3px -3px 5px var(--shadow-brightcolor); }
まとめ
フォローボタンを作っているうちに、Pinterestとブログの連携に少し興味を持ち始めました。
Pinterestは4年ほど前からDIYの情報収集のために使っていたのですが、この機会にブログ用のアカウントを作って、Pinterestと連携してみたいなーなんて思ったりしてます。
はてなブログだと連携するの難しそうですが。
みなさんもサイト内にフォローボタンを設置して、SNSとの連携を強化してくださいね。