フジブロっ！

HTML、CSSを独学で楽しく学ぶガテン系のブログ

トップ > カスタマイズ > はてなブログで使えるフォローボタン【Pinterest、テーマNeumorphism対応】※追記あり

はてなブログで使えるフォローボタン【Pinterest、テーマNeumorphism対応】※追記あり

カスタマイズ

どうも！フジグチです！

今後当サイトではプロフィール欄のカスタマイズを公開する予定なので、プロフィール欄にはフォローボタンを設置したいのではないかと思い、先にフォローボタンを作成してみました。

ご自身が使用しているSNSを選び、設置したい場所にお使いください。

最近ではブログとの連携をしている方も増えているPinterestのフォローボタンも、はてなブログではあまり見かけないので作ってみました。

シェアボタンのカスタマイズをしたときに調べたロゴの使用ガイドラインに従い、Twitterが白もしくは青、形は決まったものしか使えないためデザインパターンは多くないですが、シンプルなので使いやすいかと思います。

はてなブログで使えるフォローボタンのカスタマイズPinterest対応

Font Awesomeの読み込み※Pinterestを使う方のみ

※Pinterestのフォローボタンを設置しない方は、この項目は飛ばしてください。

Pinterestを使う方は、はてなブログで使用出来るウェブアイコンには用意されていないので、Font Awesomeを読み込む必要があります。

Pinterestのアイコンを読み込むために、Font Awesomeを使用するのでheadに以下のコードを追加してください。

【ダッシュボード】>【設定】>【詳細設定】>「headに要素を追加」に以下のコードを貼り付けます。

FontAwesomeの貼り付け場所１

FontAwesomeの貼り付け場所２

<!--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>まで１行全て消してください。

フォローボタンサンプル

※2021/2/8追記

 LSSさんの作成したコードを元に入力フォームを作成しました。ありがとうございます。
▽参考記事▽

各フォームに必要事項を入力するとコードに反映され、入力間違いをなくすことが出来ますのでご活用ください。

各項目を入力後にHTMLをコピーしてください。

はてな読者登録＆Feedly

Twitter

Instagram

Pinterest

▽各項目を入力後こちらのコードをコピーして下さい。▽

 

各項目の入れ方

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を入れます。

注意
※最後の「/」はHTMLコード内に入っているので不要です。「/」が重複しないように注意してください。

私のサイトを入力した場合は

 <!--読者登録-->
<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>

となります。

Twitter

  <!--ツイッター-->
<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>

となります。

instagram

 <!--インスタグラム-->
<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を開き画面右上のアイコンをクリックすると、プロフィールが開くのでそこから取得できます。

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

  <!--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となります。

注意
※最後の「/」はHTMLコード内に入っているので不要です。「/」が重複しないように注意してください。

私のサイトを入力した場合は

  <!--Feedly-->
<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>

となります。

Pinterest

  <!--pinterest-->
<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の「ここにアカウント名を入れる」の部分は、自分のアカウント名の＠マークを除いて入力してください。

アカウント名が分からない方は画面右上のアイコンをクリックすると中央に＠マークの付いたアカウントが表示されます。（画像では私のアイコンは隠しています）

Pinterestアカウントの表示の仕方

私の架空のアカウントが@fujiguchiだった場合「fujiguchi」を入力します。

私の架空のアカウントを入力した場合は

  <!--pinterest-->
<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】> 枠内にコードを入れます。

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がシンプルな配色なので普通時はモノクロ、マウスオーバー時にカラーに反転します。

画像はインスタのカラーがグラデーションなので分かりづらいですが、インセットシャドウを使い、少し押し込んだようなデザインになっています。

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用フォローボタンモノクロ

普通時はモノクロ、マウスオーバー時に凹むような動作になります。

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は４年ほど前からDIYの情報収集のために使っていたのですが、この機会にブログ用のアカウントを作って、Pinterestと連携してみたいなーなんて思ったりしてます。

はてなブログだと連携するの難しそうですが。

みなさんもサイト内にフォローボタンを設置して、SNSとの連携を強化してくださいね。

 関連記事
プロフィールをおしゃれにカスタマイズするデザイン１０選
プロフィールをおしゃれにカスタマイズするデザイン１０選
 関連記事
はてなブログの新しいテーマNeumorphismを公開しました！
はてなブログの新しいテーマNeumorphismを公開しました！
 関連記事
はてなブログ記事一覧をiphone風にカスタマイズしてみた
はてなブログ記事一覧をiphone風にカスタマイズしてみた
トップへ戻る
　

お問い合わせ 　 プライバシーポリシー

Copyright © 2020 fuji-blo.com