サイドバーに設置するSNSフォローボタンをカスタマイズ｜ルクセリタス
Webサイトに設置する SNSのボタンがあります。
記事下に設置するのはシェアボタン、サイドバーに設置するのがフォローボタンです。
ボタンの設置はウィジェットと外観カスタマイズ機能から簡単に行えますがこのボタンのデザインを少しカスタマイズしてみます。
ルクセリタスのバージョン luxeritas-3.21.0 以降で有効性を 確認できています。
サイドバーにSNSボタンを表示させる
外観カスタマイズからもウィジェットを追加することができます。
ボタンをカスタマイズする場合は アイコンだけの外観を選択します。
自身が活用しているSNSにチェックを入れアカウントIDを入力します。
フォローボタンのカスタマイズ
いくつかのデザインのカスタマイズを作成してみました。
コードは右上のコピーアイコンをクリックするだけで全文コピーできます。
デフォルトから白い枠と影を消す
デフォルトの状態からかんたんなカスタマイズをしてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/*白い枠と影を消す*/ #thk-follow li a { border:none; } #thk-follow ul li { box-shadow:
none; } /*アイコンサイズの調整*/ #thk-follow .snsf { height:
100%; width:
50%; } |
ボタンの形を四角や丸にカスタマイズ
ボタンのサイズを四角や円状にカスタマイズします。
円状にする場合、両方のカスタマイズコードを記述します。
ここはボタン４つを想定してのコード設定です。
|
1 2 3 4 5 6 7 8 9 10 11 |
/*アイコンサイズの調整*/ #thk-follow .snsf { height:
100%; width:
45%; } /*円状にカスタマイズ*/ #thk-follow .snsf { border-radius:
50px; } |
SNSボタンを同色にカスタマイズ
白抜きがカワイイな！と思い 円状のボタンを同色で表示するようにカスタマイズしてみました。
色を変更することで好みのデザインにカスタマイズすることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/*すべてのSNSボタンを同色にカスタマイズ*/ /* 影を消す */ #thk-follow ul li { box-shadow:
none; } /* ボタンのデザイン*/ #thk-follow li a { border:solid
2px
#555; border-radius:
50%; color:
#555; } /* ボタンの背景色を変更*/ #thk-follow .snsf { background:
#ffffff;
} /*ボタンの数に合わせて調整する箇所*/ #thk-follow { border-spacing:
20px
0; } #thk-follow .snsf { display:
block; border-radius:
50%; padding:
1px; height:
100%; width:
80%; } |
ボタンの数よって調整する場合、
① #thk-follow { border-spacing: 20px 0; }を変更、または削除する
② #thk-follow .snsf の width: 80%; の数値を変更する
枠の無いSNSボタン
枠なしにするパターンも作ってみました！！
デフォルトでは youtube の色が少し違いますので変えています。
あと、ピンタレストは分かりやすく背景などのCSSも追加で記述しています。
下のコードから必要なSNSボタンのコードを選択して記述してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/*ボタンのサイズ*/ #thk-follow li a{ border:none; font-size:
30px; } /*背景と影を消す*/ #thk-follow .snsf{
background:none;} #thk-follow ul li {
box-shadow:
none;} /*各ボタンのデザイン*/ #thk-follow i.ico-twitter {
color:
#1c9be2;
} #thk-follow i.ico-facebook {
color:
#3b5998;
} #thk-follow i.ico-instagram{color:
#e62f8b;} #thk-follow i.ico-hatena {
color:
#3875C4;
} #thk-follow i.ico-google {
color:
#dd4b39;
} #thk-follow i.ico-youtube-play {
color:#fc0d1c;
} #thk-follow i.ico-line {
color:
#00c300;
} #thk-follow i.ico-rss {
color:
#f86300;
} #thk-follow i.ico-feedly {
color:
#2bb24c;
} /*ピンタレストのみ丸枠のデザインで*/ #thk-follow i.ico-pinterest-p { background:#bd081c;
border-radius:50%; padding:5px
5px
0px
5px; font-size:25px;} |
マウスホバー時にボタンを動かすには？
ボタンにマウスを重ねた際に ボタンが動くというの、ありますよね！
動かしたい場合はこのCSSを追加します！！
|
1 2 3 4 5 6 7 8 9 10 |
#thk-follow .snsf:hover{ -webkit-transform:translateY(-5px); -ms-transform:translateY(-5px); transform:translateY(-5px); } #thk-follow li a:hover { color:
#fff; background:#555; } |
正常に表示できないこんな時は？
リストに関するCSSなど 必要のないブロックにまでカスタマイズされてしまう場合があります。
このような場合のCSSのコードを変更することによって解消される場合がありますので一例をご紹介します。
リストアイコンが表示されてしまった場合
このケースでは フォローボタンの上にアイコンが表示されています。
カテゴリーに使用したリストアイコンの影響がここに出てしまいました。
今回のケースでは カテゴリーのセレクタ部分を以下のように変更することで問題は解決されました。
#side .widget li:before { ・・・ ・・ }
↓
after
#side .widget_categories li:before { ・・・・・ }