CSS

【コピペOK】サイドバーにおしゃれなフォローボタンをCSSで実装する方法

投稿日:2019年3月2日 更新日:

ブログのサイドバーにおしゃれなフォローボタンをつけたいなぁ

おしゃれな画像をリンクにするのは簡単です

でもサイドバーのような常に表示される箇所に画像を表示してしまうのはサイト速度を遅くする原因にもなります

ボタンのデザインはできる限りCSSとHTMLだけでデザインしたいところ

そこで当ブログも上記の記事を参考にしてワードプレスの有料テーマ『JIN(ジン)』のようなデザインのフォローボタンを実装してみました

参考サイトに記載されているソースコードを当ブログに合わせて修正した箇所は以下のとおり

  • Font Awesome4.7に修正
  • ボタン枠内のアイコンの位置を修正
  • ボタンの種類を「Twitter」「LINE」「YouTube」
  • ボタンホバー時の色をブランドカラーに修正
  • ボタン全体の表示位置を修正
  • ボタン表示部の背景を追加

今回は実際に当ブログで利用しているテーマ『アフィンガー5(WING)』で以下のようなボタンを実装するまでにやったことをご紹介します

注意ポイント

Font AwesomeのWebフォントが利用可能であることが今回のカスタマイズの前提です

Font Awesomeが利用可能なテーマではない場合はBetter Font AwesomeをインストールするなどしてFont Awesomeが利用可能な状態にしておいてください

CSSの記載方法

参考元:オシャレな丸いSNSフォローボタンを設置する【WordPressカスタマイズ】

CSSのコードはカスタマイズ>追加CSSに追加するのがオススメ

ポイント

WordPress管理画面>外観>テーマの編集>style.cssでも可能です

アフィンガー5(WING)では元のソースコードのline-heightプロパティを25pxから40pxに修正しています

アイコンとボタンの位置がずれているという場合は、line-heightプロパティの数値を修正して自分のテーマに合わせてアイコンの位置を調整してみてください

HTMLの記載方法

参考元:オシャレな丸いSNSフォローボタンを設置する【WordPressカスタマイズ】

「\Follow me!/」のテキスト文言とフォントサイズは好みに合わせて変更してください

「<span style="font-size: 20px;">」の数値を変更することでフォントサイズを調整することができます

liタグの点が消えない場合

サイドバーではない箇所に上記のコードを記載すると、各アイコンの前にリスト表示の黒点が表示されたままになる場合があります
もしもサイドバーでも黒点が表示されてしまうという場合は以下のコードを追記してみてください

li{
display:block;
}

※このコードはliタグすべての点を消してしまうものですので、普段liタグにclass指定をして使用していない場合は注意が必要です

フォローボタンのカスタマイズ方法

YouTubeとLINE@じゃなくてFacebookのボタンにしたいんだけど……

そんなときはアイコンとボタンの色を変更して、自分が設置したいボタンにカスタマイズしましょう

手順については以下の通りです

CSSクラスを設定する

/* Twitterボタンの色 */
.flowbtn8.fl_tw8{
border:solid 1px #000;/* 枠線の色 */
color:#000;/* 文字の色 */
}
/* Twitterマウスホバー時 */
.flowbtn8.fl_tw8:hover{
color:#fff!important;/* 文字の色 */
border:solid 1px #55acee;/* 枠線の色 */
background:#55acee;/* 背景の色 */
}

上記の赤字にした部分を自分で分かりやすい好きな文字列に変更しましょう
※Facebookのボタン用にしたいのであれば『fb8』など

ポイント

今回紹介したものにさらに種類を追加したいという場合は、既存のCSSを修正するのではなく、同様のCSSをもうひとつ追加してください

HTMLクラスを指定する

<li><a href="#" class="flowbtn8 fl_tw8" target="_blank" rel="noopener"><i class="fa fa-twitter" aria-hidden="true"></i>
</a></li>

HTMLの上記赤字箇所を先ほどCSSで設定したCSSクラス名に変更してください

これであなたが設定したCSSがHTMLを記載した箇所に反映されます

HTMLでアイコンを差し替える

<li><a href="#" class="flowbtn8 fl_tw8" target="_blank" rel="noopener"><i class="fa fa-twitter" aria-hidden="true"></i>
</a></li>

上記の赤字箇所をFont Awesome 4.7の利用したいアイコン名に差し替えてください

アイコン名の確認方法は、アイコン一覧画面で利用したいアイコンをクリックすることで確認することができます

よく使われるフォローアイコン名

  • Twitter:fa-twitter
  • Facebook:fa-facebook
  • Instagram:fa-instagram
  • YouTube:fa-youtube
  • Pinterest:fa-pinterest
  • RSS:fa-rss
  • LINE(代用):fa-comment

CSSでボタンの色を変更する

/* Twitterボタンの色 */
.flowbtn8.fl_tw8{
border:solid 1px #fff;/* 枠線の色 */
color:#fff;/* 文字の色 */
}
/* Twitterマウスホバー時 */
.flowbtn8.fl_tw8:hover{
color:#fff!important;/* 文字の色 */
border:solid 1px #55acee;/* 枠線の色 */
background:#55acee;/* 背景の色 */
}

上記の赤字箇所を好みの色のカラーコードに変えることで、マウスをボタン上に乗せたとき(スマホではタップしたとき)に変わる色を変更することができます

基本的にはそれぞれのSNSのブランドカラーを利用するのがオススメです

ブランドカラーのカラーコードは以下のサイトでまとめられているので探してみてください

さいごに

サイドバーだけではなくフッターでも利用可能なフォローボタン

自分に興味を持ってくれた人が簡単にフォローしやすくするのも情報発信者の仕事のひとつです

ぜひ今回紹介したCSSを活用して自分のメディアにフォローボタンを設置してみてくださいね

-CSS

Copyright© ブログシフト , 2019 All Rights Reserved Powered by AFFINGER5.