CSSでシェアボタン(SNSボタン)のキレイな作り方

この記事では、CSSでシェアボタン(SNSボタン)をキレイに作る方法を解説していく。 スマートフォンでもキレイに表示されるよう、レスポンシブデザインにも対応させた。

シェアボタンのHTML

まずは、シェアボタンのHTMLを準備する。設置するシェアボタンは「Twitter」「Facebook」「はてなブログ」「Pocket」の4つを選んだ。下記ソースの「サイトURL」「ページタイトル」は、自分のサイトに合わせて書き換えて欲しい。

<ul class="shareSns">
  <li><a class="icon-twitter" href="https://twitter.com/intent/tweet?url=サイトURL&text=ページタイトル" target="_blank" title="Twitter"></a></li>
  <li><a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u=サイトURL" target="_blank" title="Facebook"></a></li>
  <li><a class="icon-hatebu" href="http://b.hatena.ne.jp/add?&url=サイトURL" target="_blank" title="はてなブックマーク"></a></li>
  <li><a class="icon-pocket" href="https://getpocket.com/edit?url=サイトURL" target="_blank" title="Pocket"></a></li>
</ul>

今回、SNSのアイコンを表示するために「IcoMoon」を使用した。記事の最後に「IcoMoon」の使い方を説明したので、よかったら参考にして欲しい。

シェアボタンのスタイルシート

作成したシェアボタン
作成したシェアボタン

ここでは、記事の横幅を720pxとした。また、それを4で割った値の180pxが、1つあたりのボタンの横幅となる。

/*
  Share SNS
  Created by Toshihiko Arai.
  https://101010.fun/programming/css-sns-share.html
*/
.shareSns {
    list-style: none;
    overflow: hidden;
    margin:0;
    padding: 0px;
}
.shareSns li {
    text-align: center;
    float: left;
    margin:0;
    padding: 0px;
}
.shareSns li a {
    width: 180px;
    line-height: 50px;
    font-size:20px;
}
.shareSns li a:hover{
    opacity: 0.8;
}

.shareSns li .icon-twitter{
    display:block;
    background:#55acee;
    color:#ffffff;
}
.shareSns li .icon-facebook{
    display:block;
    background:#3B5998;
    color:#ffffff;
}
.shareSns li .icon-hatebu{
    display:block;
    background:#008FDE;
    color:#ffffff;
}
 
.shareSns li .icon-pocket{
    display:block;
    background:#EB4654;
    color:#ffffff;
}

上のスタイルシートでは、スマホから表示した場合にデザインが崩れてしまう。そこで、次ではレスポンシブデザインに対応させたスタイルシートを紹介する。

CSSの横並び表現はこちらの記事を参考に

シェアボタンのレスポンシブデザイン版

レスポンシブデザインでスマホ表示に対応
レスポンシブデザインでスマホ表示に対応

ここでは、先ほどのスタイルシートを元に、レスポンシブデザインへ対応させたコードを紹介する。

改良した点は次の2つ。

  • aタグのwidth: 180px;を削除する
  • liタグを position: relative;width: 25%;で指定する
/*
  Share SNS
  Created by Toshihiko Arai.
  https://101010.fun/programming/css-sns-share.html
*/
.shareSns {
    list-style: none;
    overflow: hidden;
    margin:0;
    padding: 0px;
}
.shareSns li {
    text-align: center;
    float: left;
    margin:0;
    padding: 0px;
    position: relative; /* ←ここを追加 */
    width: 25%; /* ←ここを追加 */
}
.shareSns li a {
    /* width: 180px; ←ここを削除 */
    line-height: 50px;
    font-size:20px;
}
.shareSns li a:hover{
    opacity: 0.8;
}

.shareSns li .icon-twitter{
    display:block;
    background:#55acee;
    color:#ffffff;
}
.shareSns li .icon-facebook{
    display:block;
    background:#3B5998;
    color:#ffffff;
}
.shareSns li .icon-hatebu{
    display:block;
    background:#008FDE;
    color:#ffffff;
}
 
.shareSns li .icon-pocket{
    display:block;
    background:#EB4654;
    color:#ffffff;
}

IcoMoonを使ってSNSのアイコンを表示する

SNSのアイコンを表示するために、「IcoMoon」というサービスを使用した。

IcoMoonのサイトで、使いたいアイコンを選びダウンロードする。

IcoMoonからダウンロードしたファイル
IcoMoonからダウンロードしたファイル

ダウンロードしたfontsフォルダとicon.cssを自分のサイトに設置する。アイコンを表示させたい要素に、たとえばclass="icon-twitter"と指定すればアイコンの表示が可能だ。

もしも、表示できなかった場合は次の2つを確認してみてほしい。とくに、CSSのキャッシュは強力なので要注意だ。

  • fontディレクトリのパスが間違っていないか
  • CSSのキャッシュがブラウザーに残っていていないか

ちなみに、Chromeの開発者ツールを使っている場合は、Network項目のDisable chacheをオンに設定すれば、キャッシュから読み込みさせない設定ができる。

Webデザインのオススメ書籍

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

Web界隈やデザイナーに大人気! Web関連の情報やデザインについて学べる『Webクリエイターボックス』の中の人、Manaによる渾身のHTML&CSSとWebデザインが学べる本。 Webサイト制作に必要な知識がすべて身につく! 今のWebサイトの作り方が一気に学べる!

KindleAmazonRakuten
CSS設計完全ガイド ~詳細解説+実践的モジュール集
CSS設計完全ガイド ~詳細解説+実践的モジュール集

CSS設計の考え方をウェブ開発に取り入れる案件が、プロジェクトの大小を問わず増えています。本書は、CSSのさまざまな設計手法を紹介しつつ、基礎から実践のポイントまで解説します。ボタン、ラベル、カード、テーブルといったモジュールごとの、実践的なコードを多数掲載。

KindleAmazonRakuten
スラスラわかるHTML&CSSのきほん
スラスラわかるHTML&CSSのきほん

4万人が学んだベストセラーが、5年ぶりの大改訂! 小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版! 第2版ではPCだけでなくスマホやタブレットにも対応したサイトが完成します。 ソースコードは現在のトレンドに合わせ、解説もいっそう丁寧にわかりやすくなりました。 これからWeb制作を始める人にも、HTML/CSSを学び直したい人にもおすすめの、充実の内容です!

KindleAmazonRakuten

Amazonでお得に購入するなら、Amazonギフト券がオススメ!

\Amazonギフトがお得/

コンビニ・ATM・ネットバンキングで¥5,000以上チャージすると、プライム会員は最大2.5%ポイント、通常会員は最大2%ポイントがもらえます!
Amazonギフト券

\この記事をシェアする/