HTML・CSSコピペで簡単!facebookなどSNSフォローボタンの実装

facebook_シェアボタン_実装

facebookとtwitter、instagram、feedlyなど
SNSフォローボタンをコピペで実装

システムエンジニア(SE)かっきーです。

サイドバーは、サイトのつくりにもよりますが、基本的にはどの画面にも表示させることができます。
サイドバーにSNSへシェアするためのボタンがあったら、どのページからでも記事を拡散することでき、その情報を知りたい人や探している人にとって、とても便利になるとは思いませんか?

そこで今回はサイドバーのサイズに合わせて、SNSシェアやフォローのボタンを作ってみました。


SNSシェアボタン

「Font Awesome」の利用

SNSへのボタンにはアイコンが良くついていますね。
それを「Font Awesome」を使って表示させます。

この「Font Awesome」は、アイコンマークを画像ではなくフォントで表示させてくれるため、とても読み込みスピードが速くサクサク動いてくれるためとても便利です。

まず、下記のサイトからZIPフォルダーをダウンロードしてきます。

ダウンロードしたファイルを解凍し、格納されている「cssフォルダ」「fontsフォルダ」をサーバにアップします。

「Font Awesome」設定

次に今サーバに上げた「cssフォルダ」→「font-awesome.min.css」を読み込ませます。

cssフォルダの中には「font-awesome.css」というファイルの存在しますが、「font-awesome.css」を圧縮させたものが「font-awesome.min.css」になります。
そのため、問題がなければ「font-awesome.min.css」を読み込ませることをオススメします。

<head>
…
<link href="css/font-awesome.min.css" rel="stylesheet">
…
</head>

「href」のURLは自分がアップした場所のURLに変更してください。
これで準備完了です。

アイコンの設定方法

「Font Awesome」サイト上部メニューの「Icons」をクリックします。
クリックすると表示することが出来るアイコンの一覧が表示されます。

fontawesome4

この中から表示させたいアイコンをクリックします。


facebook2

すると、アイコンを表示させるためのクラス名が表示されているため、このクラス名をタグの中で設定してあげることによりアイコンを表示させることが出来ます。


facebook1

facebookのアイコンクラスは「class=”fa fa-facebook-square”」のため、
<i class="fa fa-facebook-square"></i>

上記のhtmlでfacebookアイコンを表示することができます。
なんとも簡単!

それでは「Font Awesome」を利用して、SNSのボタンを作っていきます。

htmlのコード説明

今回は、facebookとtwitter、instagram、feedlyへのボタンを作成します。
コードは下記に記載しました。

<div class="sidebar-follow-buttons">
<a class="facebook" href ="facebookへのURL" target="_blank">
<i class="fa fa-facebook-square"></i>
<span class="inner-text">facebook</span>
</a>
<a class="twitter" href ="twitterへのURL" target="_blank">
<i class="fa fa-twitter-square"></i>
<span class="inner-text">twitter</span>
</a>
<a class="instagram" href ="instagramへのURL" target="_blank">
<i class="fa fa-instagram"></i>
<span class="inner-text">instagram</span>
</a>
<a class="feedly" href ="http://writing-recipe.com/feed" target="_blank">
<i class="fa fa-rss"></i>
<span class="inner-text">feedly</span>
</a>
</div>

<i class=”fa fa-facebook-square”></i>facebookのアイコンを、
<i class=”fa fa-twitter-square”></i>twitterのアイコン
<i class=”fa fa-instagram”></i>instagramのアイコン
これらの記述でアインコンマークを表示させております。

cssのコード説明

次にcssの説明をしていきます。

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

これをcssのファイルにコピーしてもOKですが、
今回は軽く説明していこうと思います。

まずは背景の設定!

.sidebar-follow-buttons{
    width: 100%;
    text-align: center;
    letter-spacing: -.40em;
}
.sidebar-follow-buttons a {
    display: inline-block;
    letter-spacing: normal;
    position: relative;
    width: 47%;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    padding:6% 0;
    margin:1%;
    overflow: hidden;
    z-index:2;
}
.sidebar-follow-buttons a:hover {
    color:#fff;
}

ここまでが大まかな背景の設定になります。
「a:hover」を設定することにより、マウスをのせたとき白色に変化させています。

.sidebar-follow-buttons .inner-text {
    font-size:16px;
    padding-left:5px;
}

これにより、ボタンの中の文字の大きさと位置を設定しています。

またfacebook部分のcssこんな感じです。
これをtwitter、instagramでも設定していきます。

.sidebar-follow-buttons .facebook {
    color: #ffffff;
    border: 1px solid #305097;
    background: #305097;
}
.sidebar-follow-buttons .facebook:hover {
    color: #305097;
    background: #ffffff;
    transition: all .3s;
}
.sidebar-follow-buttons .facebook:hover:before,.sidebar-follow-buttons .facebook:hover:after {
    height: 0;
    background:#305097;
}

これでサイドバーにシェアボタンを実装することが可能です。
簡単にサイドバーに実装できるため皆さんもお試しください。

うまく実装できない場合は、お気軽にお問い合わせフォームよりご連絡くださいませ。

( icon-star 前回の記事も見る

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です