ガッハッハッハッハッハ!!大魔王ポルポル(@poruofficial)だ。


ライブドアブログHow Toを共有するぞ!


フォローボタンをオシャレにしたい!


ツイッターが公式にフォローボタンを提供しているのはご存知!

ただし、livedoorブログでは、はてなブログみたいなオシャレなフォローボタンにできないのが現状。

「忍者おまとめボタン」を使うと、簡単に設置できたりしますが、これだとカスタマイズしにくいのが現状だ。





ツイッターが公式で提供している上記のフォローボタンですが、公式サイトの出力オプションであって、現代風のオシャレなボタンではないのです。


無題

この不愛想なボタンも簡単にカスタマイズできます。

Google+、Facebook、Instagram、Feedlyも同様にオシャレにカスタマイズ仕様にすることができます。

デザインを統一するために、こやつらをオシャレにカスタマイズしたいと思います。


無題

HTML共通コード

今回は、Twitter、Google+、Facebook、Instagram、Feedly、はてなブックマークの6種類を設置いたします。

記事のヘッダー、フッター、サイドバーのお好きな場所にコイツを設置いたします。



[html]
<!-- フォローボタン -->
<center>
<div  class="content-inner-follow-buttons">
<div  class="follow-title"><span  style="font-size: 8px;">フォローする</span></div>
<a  onclick="window.open('http://blog.hatena.ne.jp/shun_prog0929/www.ituore.com/subscribe', '', 'width=500,height=400'); return false;" href="ここにはてなブログのURL/www.ituore.com/subscribe" class="hatena">
<i  class="blogicon-hatenablog lg"></i>
<span  class="inner-text">Hatena</span>
</a>
<a  target="_blank" href="ここにFacebookのURL" class="facebook">
<i  class="blogicon-facebook lg"></i>
<span  class="inner-text">Facebook</span>
</a>
<a  target="_blank" href="https://twitter.com/intent/follow?screen_name=ここに@を覗いたツイッターのアカウント" class="twitter">
<i  class="blogicon-twitter lg"></i>
<span  class="inner-text">Twitter</span>
</a>
<a  target="_blank" href="インスタグラムのアカウントのURL" class="instagram">
<i  class="blogicon-instagram lg"></i>
<span  class="inner-text">Instagram</span>
</a>
<a  target="_blank" href="http://feedly.com/i/subscription/feed/ここにブログのURL/feed" class="feedly">
<i  class="blogicon-rss lg"></i>
<span  class="inner-text">Feedly</span>
</a>
<a  target="_blank" href="URL" class="googleplus">
<i  class="fa-google-plus fa"></i>
<span  class="inner-text">Google+</span>
</a>
</div> 
[/html]




[css]

/*記事上・記事下フォローボタン*/
.content-inner-follow-buttons{
    width: 100%;
    text-align: center;
    margin-top:40px;
    letter-spacing: -.40em;
}
.content-inner-follow-buttons .follow-title {
    letter-spacing: normal;
    width:100%;
    color:#666;
}
.content-inner-follow-buttons a {
    display: inline-block;
    letter-spacing: normal;
    position: relative;
    width: 30%;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    padding:20px 0;
    margin:3px;
    overflow: hidden;
    z-index:2;
}
.content-inner-follow-buttons a:hover {
    color:#fff;
}
.content-inner-follow-buttons a:before, .content-inner-follow-buttons a:after {
    position:absolute;
    content:'';
    width:100%;
    height:50%;
    left:0;
    z-index:-1;
    transition: 0.3s;
}
.content-inner-follow-buttons a:before {
    top:0;
}
.content-inner-follow-buttons a:after {
    bottom:0;
}
.content-inner-follow-buttons .inner-text {
    font-size:16px;
    padding-left:5px;
}
.content-inner-follow-buttons .hatena {
    color: #ffffff;
    border: 1px solid #38393C;
    background: #38393C;
}
.content-inner-follow-buttons .hatena:hover {
    color: #38393C;
    background: #ffffff;
    transition: all .3s;
}
.content-inner-follow-buttons .hatena:hover:before,.content-inner-follow-buttons .hatena:hover:after {
    height: 0;
    background:#38393C;
}
.content-inner-follow-buttons .facebook {
    color: #ffffff;
    border: 1px solid #305097;
    background: #305097;
}
.content-inner-follow-buttons .facebook:hover {
    color: #305097;
    background: #ffffff;
    transition: all .3s;
}
.content-inner-follow-buttons .facebook:hover:before,.content-inner-follow-buttons .facebook:hover:after {
    height: 0;
    background:#305097;
}
.content-inner-follow-buttons .twitter {
    color: #ffffff;
    border: 1px solid #55acee;
    background: #55acee;
}
.content-inner-follow-buttons .twitter:hover {
    color: #55acee;
    background: #ffffff;
    transition: all .3s;
}
.content-inner-follow-buttons .twitter:hover:before,.content-inner-follow-buttons .twitter:hover:after {
    height: 0;
    background:#55acee;
}
.content-inner-follow-buttons .instagram {
    color: #ffffff;
    border: 1px solid #3f729b;
    background: #3f729b;
}
.content-inner-follow-buttons .instagram:hover {
    color: #3f729b;
    background: #ffffff;
    transition: all .3s;
}
.content-inner-follow-buttons .instagram:hover:before,.content-inner-follow-buttons .instagram:hover:after {
    height: 0;
    background:#3f729b;
}
.content-inner-follow-buttons .feedly {
    color: #ffffff;
    border: 1px solid #6cc655;
    background: #6cc655;
}
.content-inner-follow-buttons .feedly:hover {
    color: #6cc655;
    background: #ffffff;
    transition: all .3s;
}
.content-inner-follow-buttons .feedly:hover:before,.content-inner-follow-buttons .feedly:hover:after {
    height: 0;
    background:#6cc655;
}
.content-inner-follow-buttons .googleplus {
    color: #ffffff;
    border: 1px solid #db4a39;
    background: #db4a39;
}
.content-inner-follow-buttons .googleplus:hover {
    color: #db4a39;
    background: #ffffff;
    transition: all .3s;
}
.content-inner-follow-buttons .googleplus:hover:before,.content-inner-follow-buttons .googleplus:hover:after {
    height: 0;
    background:#db4a39;
}

[/css]



というわけで!
ライブドアブログでもオシャレなフォローボタンが設置できました。要らないボタンは削除していただいても[<br>]タグで改行しても使うことができます。



人気記事

[短所を克服!]長所を伸ばすためにやるべき2つの診断

[転職診断!]大魔王ポルポルの年収は620万円!

[おすすめ!]バーチャルリアリティーの世界を体験してきたよ!


プロフィール
bc697bf888b01b3cd628ebc76b7f82ada97744a8



大魔王ポルポル/ホームレス

日本一周をママチャリで達成する。その後、クズとなり、仕事もせず、ダラダラとホームレスな生活をしている。しかし、その後はアフリカに行こうとしている。ブログを通じて助けを求めたり、グチをこぼしたり、小遣いを稼いだり、とにかくクズ


トップページブログ運営 > Livedoorブログで「オシャレなフォローボタン」を設置する方法