サブブログ|デスク環境構築サイト運営中

【SANGO】のタイトル下シェアボタンを丸い追従型にカスタマイズ

SANGOのSNSシェアボタンをカスタマイズ

SANGOのアイキャッチ下にあるシェアボタンを丸いボタンに変更して、スクロールに付いてくるようにしました。

カスタマイズ前
SANGOタイトル下シェアボタン
カスタマイズ後
SANGOタイトル下シェアボタンPC
SANGOタイトル下シェアボタンスマホ
スマホでもこんな感じです。

ボタンを押した後も変更しました。

カスタマイズ前
SANGOシェアボタンデフォルト
カスタマイズ後
SANGOシェアボタンカスタム後
当サイトでは、この仕様にしてからTwitterやLINEのシェアが増えたので、テストしてみる価値はありそうです。

何よりオシャレで、個人的にはかなり気に入っています。

SANGOシェアボタンの設定
今回のカスタマイズを行う前に、カスタマイズ設定が画像のようになっているか確認してください。

SANGOのシェアボタンを丸くして追従型へカスタマイズ

以下のコードを子テーマの「style.css」にコピペすれば、当サイトと同じデザインになります。

WordPress子テーマCyberduckの使い方WordPressの子テーマを分かりやすく解説

スタイルシート (style.css)編集

style.css
copyする
/* スマホのシェアボタン位置 */ @media(max-width:500px) { .single .fab-btn{ right: -4.9px; }} /* スマホ横向き以上のシェアボタン画像サイズ */ @media (min-width:481px){ .single .fab__contents_img { height: 203px; }} /* タブレット横以上全体の背景色消す*/ @media(min-width:800px){ .single #fab__contents { background: none; }} /*シェアボタンのデザイン*/ .fab-btn{ position: fixed; right:3px; width: 54px; height: 54px; bottom:80px; } .single .accent-bc{ background-color: #e42b2b85; } .fab-btn i:after { content: "シェア"; padding: 0; color: #fff; font-size: 10px; position: relative; top: 23%; left: 4%; } .fa-share-alt:before { color: #fff; position: absolute; top: 37%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } /* シェアボタンをオープンした時のカスタム */ #fab__contents{ background:#948e8ea1; } .single .fab__contents-main{ color:#fff; background: none; } .close span,.close span:before{ background:#fff; } .fab__contents_img{ height:175px; } /* 記事下シェアボタン */ .sns-btn__item a { border-radius: 0px; border: 1px solid ; } .single .sns-btn__item a:hover,.single .sns-dif ul li a { box-shadow: none; } .sns-btn__title{ color: #3d3d3d; } .sns-btn__title:before, .sns-btn__title:after { background-color:#3d3d3d; } .sns-dif ul{ background:none; }

カラーやテキストなどはお好きなものに。細かい調整をしたい方は以下の解説をどうぞ。

SANGOシェアボタンのデザイン解説

style.css
copyする
/* スマホのシェアボタン位置を調整 */ @media(max-width:500px) { .single .fab-btn{ right: -4.9px; }} /*シェアボタンを固定・サイズ・位置の調整*/ .fab-btn{ position: fixed; right:3px; width: 54px; height: 54px; bottom:80px; } /*シェアボタンの背景カラー*/ .single .accent-bc{ background-color: #e42b2b85; } /*シェアボタン内のテキスト調整*/ .fab-btn i:after { content: "シェア"; padding: 0; color: #fff; font-size: 10px; position: relative; top: 23%; left: 4%; } /*シェアボタンのアイコン調整*/ .fa-share-alt:before { color: #fff; position: absolute; top: 37%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

SANGOのシェアボタンオープン時の解説

style.css
copyする
/* スマホ横向き以上の画像サイズ調整 */ @media (min-width:481px){ .single .fab__contents_img { height: 203px; }} /* タブレット横以上全体の背景色消す*/ @media(min-width:800px){ .single #fab__contents { background: none; }} /*全体の背景色(薄くするのがオススメ)*/ #fab__contents{ background:#948e8ea1; } /*SHAREのテキストカラーと画像周りの背景色を消す*/ .single .fab__contents-main{ color:#fff; background: none; } /*バツ印のカラー(SHAREと同じ色にするのがオススメ)*/ .close span,.close span:before{ background:#fff; } /*画像サイズの調整*/ .fab__contents_img{ height:175px; }

SANGOのSNSシェアボタン周りの解説

SANGOシェアボタンデザイン設定
シェアボタン一覧を別デザインにする」にチェックをすると、記事下のシェアボタンと今回のボタンが連動します。
style.css
copyする
/* 記事下シェアボタン・四角にして枠線をつける */ .sns-btn__item a { border-radius: 0px; border: 1px solid ; } /* 記事下シェアボタンにマウスを乗せた時とボタン周りの影を消す */ .single .sns-btn__item a:hover,.single .sns-dif ul li a { box-shadow: none; } /* 記事下の「SHARE」のテキストカラー*/ .sns-btn__title{ color: #3d3d3d; } /* 記事下の「SHARE」の横にあるスラッシュのカラー*/ .sns-btn__title:before, .sns-btn__title:after { background-color:#3d3d3d; } /* 記事下のSNSボタン周りの背景消す*/ .sns-dif ul{ background:none; }

SANGOのタイトル下シェアボタンのカスタマイズ・まとめ

以上SANGOのシェアボタンのカスタマイズについて解説しました。

当サイトはSNSをやっていませんが、それでもシェア数は増えたので、SNSに注力しているサイトならかなり効果を見込めると思います。

トップへ戻るFABの上に表示させているので、邪魔にならないはず。もしくは左側にしてもいいかもしれません。
SANGOアニメーションOFF【SANGO】のデフォルトアニメーションを完全OFFにするCSS【SANGO】PCで見たときのあらゆる幅を広げるカスタマイズHTML&CSSカスタマイズ特集コピペですぐ使える・ブログデザイン用カスタマイズコードまとめ

コメントはお気軽にどうぞ

※日本語が含まれていないコメントは投稿できません。(スパム対策)