主要なSNSのシェアボタン風デザインを追加します。ここでは Twitter、Facebook、Google+ の３つのボタンを追加します。
ページの下の方によくあるSNSシェアボタン。
主要なSNSのシェアボタン風デザインを追加します。ここでは Twitter、Facebook、Google+ の３つのボタンを追加します。
ページの下の方によくあるSNSシェアボタン。
記事の末尾にボタンを追加します。ボタンを配置するスペースは<div>で作ったボックスとし、スタイルシートを設定しやすいようにクラス名「sb」(ShareButton)とします。
ボタンはサイドメニュー等と同じ方法を使って、「Twitterでシェア」「Facebookでシェア」「Google＋でシェア」の３つのリンクを作ります。
各リンクは別々の色でデザインするので<a>には個別のクラス名「sb-tw」「sb-fb」「sb-gp」を設定します。
<article>～</article>の範囲内に追加します。<article>
<h1>新型タブレット端末ついに発売</h1>
・・省略・・
解消されており、個人的にはとても嬉しい変更点です。</p>
<div class="sb">
<ul>
<li><a href="#" class="sb-tw">
Twitterでシェア
</a></li>
<li><a href="#" class="sb-fb">
Facebookでシェア
</a></li>
<li><a href="#" class="sb-gp">
Google＋でシェア
</a></li>
</ul>
</div>
</article>
リンクが３つ追加されます。
３つのリンクを横に並べて表示ます。ボックスを横に並べるで解説した方法を使って、sb クラス内の<ul>や<li>に対してスタイルシート設定を行います。
なおボタンの横幅は３等分にしたいので、<li>のそれぞれの width は「33.3333%」に設定します。
/* 記事 */ ・・省略・・ /* 投稿日 */ .info { margin-top: -10px; margin-bottom: 20px; } /* SNSシェアボタン */ .sb ul { margin: 0; padding: 0; list-style: none; } .sb li a { display:block; padding: 5px; color: black; font-size: 14px; text-decoration: none; } .sb li a:hover { background-color: #eeeeee; } .sb ul:after { content: ""; display:block; clear: both; } .sb li { float: left; width: 33.3333%; } /* サイドメニュー */
3つのリンクが横に並びます。
リンク<a>の背景色(background-color)を変更することでボタンの色を変更します。ここではそれぞれSNSのブランドカラーにします。Twitterは「#1da1f2」、Facebookは「#3b5998」、Google＋は「#dd4b39」に設定します。
なお様々なサービスのブランドカラーについては以下のサイトで簡単に確認できます。
Brand Colors
https://brandcolors.net/ボタンの文字については<a>のcolorを「white」にして文字色を白色にし、text-alignを「center」にすることで中央揃えにします。
・・省略・・ /* 投稿日 */ .info { margin-top: -10px; margin-bottom: 20px; } /* SNSシェアボタン */ .sb ul { margin: 0; padding: 0; list-style: none; } .sb li a { display:block; padding: 5px; color: white; text-align: center; font-size: 14px; text-decoration: none; } .sb li a:hover { background-color: #eeeeee; } .sb ul:after { content: ""; display:block; clear: both; } .sb li { float: left; width: 33.3333%; } .sb-tw { background-color:#1da1f2; } .sb-fb { background-color:#3b5998; } .sb-gp { background-color:#dd4b39; } /* サイドメニュー */
ボタンに色が付きました。
SNSのロゴを追加します。以前に解説したアイコンフォント（Font Awesome）を使ってHTMLに<i></i>を追加し、クラス名としてそれぞれ「fa fa-twitter」「fa fa-facebook」「fa fa-google-plus」のように設定すればロゴが表示されます。
<article> <h1>新型タブレット端末ついに発売</h1> ・・省略・・ 解消されており、個人的にはとても嬉しい変更点です。</p> <div class="sb"> <ul> <li><a href="#" class="sb-tw"> <i class="fa fa-twitter"></i> Twitterでシェア </a></li> <li><a href="#" class="sb-fb"> <i class="fa fa-facebook"></i> Facebookでシェア </a></li> <li><a href="#" class="sb-gp"> <i class="fa fa-google-plus"></i> Google＋でシェア </a></li> </ul> </div> </article>
ボタンにロゴが表示されました。
ボタンが小さいと押しづらいので大きくします。<a>の padding を「5px」から「10px 5px」に変更し、上下の余白を10pxまで大きくします。
・・省略・・ /* 投稿日 */ .info { margin-top: -10px; margin-bottom: 20px; } /* SNSシェアボタン */ .sb ul { margin: 0; padding: 0; list-style: none; } .sb li a { display:block; padding: 10px 5px; color: white; text-align: center; font-size: 14px; text-decoration: none; } ・・省略・・
ボタンの縦幅が増えて、押しやすくなりました。
マウスカーソルをボタンに重ねると背景色が薄いグレーになり、文字が読みにくい状態です。
マウスカーソルを重ねると、色が薄くなってしまった。そこで、各ボタンが変化する色を変更します。一箇所ずつ色を設定することもできますが手間がかかるので、<a>の:hoverに設定した背景色の設定は削除し、代わりに opacity を「0.8」に設定します（色の透明度を80%に下げるという効果があります）。
これでマウスカーソルをボタンに重ねたとき、ブランドカラーが少し薄くなった色合いで表示されるようになります。
・・省略・・ /* 投稿日 */ .info { margin-top: -10px; margin-bottom: 20px; } /* SNSシェアボタン */ .sb ul { margin: 0; padding: 0; list-style: none; } .sb li a { display:block; padding: 10px 5px; color: white; text-align: center; font-size: 14px; text-decoration: none; } .sb li a:hover {background-color: #eeeeee;opacity: 0.8; } ・・省略・・
ボタンにマウスカーソルを重ねると、色が少し薄くなります。
記事の文章とSNSボタンとの間隔を広げます。ボタン上部の余白サイズを40ピクセルに設定するために sb クラス
<div class="sb">の margin-top に「40px」を設定します。・・省略・・ /* 投稿日 */ .info { margin-top: -10px; margin-bottom: 20px; } /* SNSシェアボタン */ .sb { margin-top: 40px; } .sb ul { margin: 0; padding: 0; list-style: none; } .sb li a { display:block; padding: 10px 5px; color: white; text-align: center; font-size: 14px; text-decoration: none; } .sb li a:hover { opacity: 0.8; } ・・省略・・
本文とボタンとの間の余白が増えました。以上で制作作業は完了です。お疲れさまでした！
