シェアボタンなどのコードを出してから、メールなどでいろいろと指摘をいただくようになりました。本当にありがたく、なるほどと思うと共に感謝しております！

 

いただくメールの中に、フォローボタンのコードはどんなん？というようなことがありましたので、こちらもコピペコードにしてみました。 

 

実装図はこちら

実際に設置した感じはこちらです。（この他のデザインも下の方に載せてあります）

はてなブログの購読ボタン・Twitter・Feedlyのボタンです。Facebookなどは僕自身やっていなくって試していないため載せていません。

 

実際にカスタマイズ

実際にカスタマイズをやってみます。

１　HTML

まずはHTMLでリンクを貼り付けましょう。コードは以下

これを「記事下」「記事上」「サイドバー」など、自分が設置したい場所に貼ると、以下のようになると思います。

試しにそれぞれをクリックしてみると、おそらく全部Yukihyへのフォロー画面に繋がると思います。

そのままにして僕のフォローボタンを設置していただいても良いのですが、自分へのリンクにしたい方のみ以下のことを行ってください。

• ４行目の「ftmaccho/yukihy.hatenadiary.com」を、「(自分のはてなID)/(自分のブログのURLの「http://」を除いた部分)」に変更
• ５行目の「ftmaccho」を「自分のTwitterアカウントの@を抜いた部分」に変更
• ６行目の「http://www.yukihy.com/feed」を「自分のブログのURL」に変更

これでリンクをつけることは完了です。ボタンを押してみて正しく反応されているか確認してみてください。

 

注：独自ドメインを導入された人は、４行目のURLに必ずはてなドメイン時のURLを入れるようにしてください。でないと動かないです。

６行目はそのまま自分のURLで大丈夫です。

 

２　CSSでデザイン

CSSで具体的にデザインしてみます。

 

貼る位置はPCなら「デザインcss」にそのままコピペでOKです。

スマホならHTMLを貼ったところに貼るのが一番良いですが、最終的に

<style type="text/css">ここにコピペコードが入る！</style>

となるように、前後に緑の部分を入れてください。（赤いとこは消してください）

 

いろいろと候補を作ったので好きなのをどうぞ。

フラットデザイン

フラットデザインコードで実装図はこちら

マウスをのせると色が逆転します。

コードは

.follow-btn{
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}
.follow-btn a {
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 25%;
    font-size: 18px;
    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 .feedly { 
    color: #70CA3B;
    border: 2px solid #70CA3B;
    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 .feedly:hover {
    color: #ffffff;
    background: #70CA3B;
    transition: all .3s;
}
.text-small{
    font-size: 12px;
}

です。

 

フラットで丸く可愛く

実装図はこちら

かわいー！コードはこちら

.follow-btn{
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}
.follow-btn a {
    display: inline-block;
    width: 65px;
    height: 65px;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}
.follow-btn .hatena {
    color: #3D3F44;
    border: 2px solid #3D3F44;
    background: #ffffff; 
}
.follow-btn .twitter {
    color: #00ACEE;
    border: 2px solid #00ACEE;
    background: #ffffff; 
}
.follow-btn .feedly { 
    color: #70CA3B;
    border: 2px solid #70CA3B;
    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 .feedly:hover {
    color: #ffffff;
    background: #70CA3B;
    transition: all .3s;
}
.text-small{
    font-size: 12px;
}

です。

3Dボタンで主張！

実装図はこちら

ふてぶてしい、いかにもボタンです。マウスを乗っけるとボタンが下がります。

コードはこちら

.follow-btn{
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}
.follow-btn a {
    display: inline-block;
    position: relative;
    width: 25%;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    color: #ffffff;
}
.follow-btn .hatena {
    border: 2px solid #3D3F44;
    background: #ffffff; 
    color: #3D3F44;
    box-shadow: 0 3px 0 #3D3F44;
}
.follow-btn .twitter {
    border: 2px solid #00ACEE;
    background: #ffffff; 
    color: #00ACEE;
    box-shadow: 0 3px 0 #00ACEE;
}
.follow-btn .feedly {
    border: 2px solid #70CA3B;
    background: #ffffff;
    color: #70CA3B;
    box-shadow: 0 3px 0 #70CA3B;
}
.follow-btn .hatena:hover {
    top: 3px;
    box-shadow: none;
}
.follow-btn .twitter:hover {
    top: 3px;
    box-shadow: none;
}
.follow-btn .feedly:hover {
    top: 3px;
    box-shadow: none;
}
.text-small{
    font-size: 12px;
}

です。

シンプルな某WordPressテーマのようなボタン

おお！？どっかで見たことあるな。すみません、真似しました…。

シンプルで記事下なんかに良いですよね。

コードですが、まずHTMLの4~6行目についている共通の「<br><span class="text-small">◯◯</span>」の部分を消去してください。

その後下のコードをコピペです。

.follow-btn{
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
}
.follow-btn a {
    display: inline-block;
    width: 40px;
    height: 40px;
    font-size: 22px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    color: #ffffff;
}
.follow-btn .hatena {
    background: #3D3F44; 
}
.follow-btn .twitter {
    background: #00ACEE; 
}
.follow-btn .feedly {
    background: #70CA3B;
}
.follow-btn .hatena:hover {
    background: #B5B5B5;
}
.follow-btn .twitter:hover {
    background: #9FD9F6;
}
.follow-btn .feedly:hover {
    background: #A9F5A9;
}

最後に

そろそろカスタマイズ記事も終わりそうですw。

 

不具合やリクエストなどありましたらお気軽にお知らせください！

 

ブログカスタマイズ記事一覧

www.yukihy.com