Simplicity2のSNSのフォローアイコンは、ページの右上と記事の中などにあると思いますが、こちらの色や形をカスタマイズする方法を書きたいと思います。
角丸な四角形をやめる
SNSのフォローボタンの形は、デフォルトでは角丸四角形になっていると思います。
これを思いきってアイコンのみにしたいと思います。
出来上がりはこんな感じです。
「知りたいねっと」も変えてみましたので実際に確認できると思います。
まず準備としてフォローボタンが一色のバージョン、それぞれに色がついていない状態にしたいと思います。
もし色がついていない状態でしたらこちらは飛ばしてください。
［管理画面］の［外観］から［カスタマイズ］を選びます。
［SNS］を選びます。
「フォローボタンに色をつける フォローボタンを各種ソーシャルサービスのテーマカラーにするか。」にチェックが入っていない状態にします。
これをする理由ですが、色をつけてしまうと、ページのソース内にカラーが書き込まれてしまうので、修正の手間が増えてしまうからです。
子テーマに修正したCSSを記述しますので、もしも子テーマを適用していない方は、用意してください。
まずは角丸四角形の色を消します。
親テーマのstyle.css、2645行目をみます。
ul.snsp li a span {
display: block;
font-size: 33px;
width: 33px;
height: 33px;
overflow: hidden;
border-radius: 4px;
background-color: #666;
color: #fff;
}
こちらの background-color: #666;を消します。
ちなみに以前の記事に背景を消すCSSについて書いています。
この命令を子テーマのstyle.cssに入れます。
ul.snsp li a span {
background-color: transparent;
}
アップすると背景が消えるので、アイコンも見えなくなると思います。
アイコンが現在白になっているから見えない状態になります。
こちらを表示させるために#666あたりに変更したいと思います。
アイコンを白にする命令は、親テーマ/simplicity2/webfonts/icomoon/style.cssにあるようです。
43行目～98行目まで、あと237行目の.icon-github-logo:beforeも子テーマのstyle.cssにコピペします。
.icon-facebook-logo:before {
content: "\e92d";
color: #fff;
}
.icon-feedly-logo:before {
content: "\e92e";
color: #fff;
}
.icon-flickr-logo:before {
content: "\e92f";
color: #fff;
}
.icon-google-plus-logo:before {
content: "\e930";
color: #fff;
}
.icon-hatebu-logo:before {
content: "\e931";
color: #fff;
}
.icon-instagram-logo:before {
content: "\e932";
color: rgba(255, 255, 255, 0.97);
}
.icon-instagram-logo-new:before {
content: "\e933";
color: #fff;
}
.icon-instagram-logo-new-sq:before {
content: "\e934";
color: rgba(255, 255, 255, 0.97);
}
.icon-line-logo:before {
content: "\e935";
color: #fff;
}
.icon-pinterest-logo:before {
content: "\e936";
color: #fff;
}
.icon-push7-logo:before {
content: "\e937";
color: #fff;
}
.icon-rss-logo:before {
content: "\e938";
color: #fff;
}
.icon-twitter-logo:before {
content: "\e939";
color: #fff;
}
.icon-youtube-logo:before {
content: "\e93a";
color: #fff;
}
.icon-github-logo:before {
content: "\eab0";
}
こちらをcolor:#fffをcolor:#666;に変えます。
.icon-facebook-logo:before {
content: "\e92d";
color: #666;
}
.icon-feedly-logo:before {
content: "\e92e";
color: #666;
}
.icon-flickr-logo:before {
content: "\e92f";
color: #666;
}
.icon-google-plus-logo:before {
content: "\e930";
color: #666;
}
.icon-hatebu-logo:before {
content: "\e931";
color: #666;
}
.icon-instagram-logo:before {
content: "\e932";
color: #666;
}
.icon-instagram-logo-new:before {
content: "\e933";
color: #666;
}
.icon-instagram-logo-new-sq:before {
content: "\e934";
color: #666;
}
.icon-line-logo:before {
content: "\e935";
color: #666;
}
.icon-pinterest-logo:before {
content: "\e936";
color: #666;
}
.icon-push7-logo:before {
content: "\e937";
color: #666;
}
.icon-rss-logo:before {
content: "\e938";
color: #666;
}
.icon-twitter-logo:before {
content: "\e939";
color: #666;
}
.icon-youtube-logo:before {
content: "\e93a";
color: #666;
}
.icon-github-logo:before {
content: "\eab0";
color: #666;
}子テーマのstyle.cssを上記のように変えたらアップして確認します。
SNSアイコンが表示されていると思います。
オンマウスの時にSNSアイコンを白くする
修正した状態でアイコンにマウスを持ってくると、SNSアイコンはグレーです。
オンマウスでそれぞれのアイコンの色が出るような形です。
好みの問題かもしれませんが、オンマウスの時にSNSアイコンは白いほうがいいかなと思いますので、その修正方法も書いておきたいと思います。
親テーマのstyle.cssの2669行目から2719行目までをコピペして子テーマのstyle.cssに入れます。
ul.snsp li.twitter-page a span:hover{
background-color:#55acee;
}
ul.snsp li.facebook-page a span:hover{
background-color:#3b5998;
}
ul.snsp li.google-plus-page a span:hover{
background-color:#dd4b39;
}
ul.snsp li.instagram-page a span:hover{
background-color:#3f729b;
}
ul.snsp li.hatebu-page a span:hover{
background-color:#008fde;
}
ul.snsp li.pinterest-page a span:hover{
background-color:#cc2127;
}
ul.snsp li.youtube-page a span:hover{
background-color:#e52d27;
}
ul.snsp li.flickr-page a span:hover{
background-color:#1d1d1b;
}
ul.snsp li.github-page a span:hover{
background-color:#24292e;
}
ul.snsp li.feedly-page a span:hover{
background-color:#87bd33;
}
ul.snsp li.push7-page a span:hover{
background-color: #eeac00;
}
ul.snsp li.line-page a span:hover{
background-color:#00c300;
}
ul.snsp li.rss-page a span:hover{
background-color:#fe9900;
}もしも背景の色を1色に合わせたい場合は、background-color:を同じにすればよいと思います。
SNSアイコンの色を変えるには、こちらにbeforeを追加し、color:#fff;をいれます。
例えば
ul.snsp li.twitter-page a span:hover{
background-color:#55acee;
}
の場合ですと、
ul.snsp li.twitter-page a span:hover:before{
color:#fff;
}という風にします。すべて修正したのは下記です。
ul.snsp li.twitter-page a span:hover:before{
color:#fff;
}
ul.snsp li.facebook-page a span:hover:before{
color:#fff;
}
ul.snsp li.google-plus-page a span:hover:before{
color:#fff;
}
ul.snsp li.instagram-page a span:hover:before{
color:#fff;
}
ul.snsp li.hatebu-page a span:hover:before{
color:#fff;
}
ul.snsp li.pinterest-page a span:hover:before{
color:#fff;
}
ul.snsp li.youtube-page a span:hover:before{
color:#fff;
}
ul.snsp li.flickr-page a span:hover:before{
color:#fff;
}
ul.snsp li.github-page a span:hover:before{
color:#fff;
}
ul.snsp li.feedly-page a span:hover:before{
color:#fff;
}
ul.snsp li.push7-page a span:hover:before{
color:#fff;
}
ul.snsp li.line-page a span:hover:before{
color:#fff;
}
ul.snsp li.rss-page a span:hover:before{
color:#fff;
}これをアップすればオンマウス時にアイコンが白い状態になると思います。
オンマウスの角丸四角形を消したい
このままでもよいかとも思いますが、オンマウス時の角丸四角形を消したい場合は、上記のul.snsp li.twitter-page a span:hoverスタイルでbackground-color:#55acee;を background-color: transparent;にすれば消えると思います。
下記にstyle.cssを修正したものを書いておきます。
ul.snsp li.twitter-page a span:hover{
background-color:transparent;
}
ul.snsp li.facebook-page a span:hover{
background-color:transparent;
}
ul.snsp li.google-plus-page a span:hover{
background-color:transparent;
}
ul.snsp li.instagram-page a span:hover{
background-color:transparent;
}
ul.snsp li.hatebu-page a span:hover{
background-color:transparent;
}
ul.snsp li.pinterest-page a span:hover{
background-color:transparent;
}
ul.snsp li.youtube-page a span:hover{
background-color:transparent;
}
ul.snsp li.flickr-page a span:hover{
background-color:transparent;
}
ul.snsp li.github-page a span:hover{
background-color:transparent;
}
ul.snsp li.feedly-page a span:hover{
background-color:transparent;
}
ul.snsp li.push7-page a span:hover{
background-color: transparent;
}
ul.snsp li.line-page a span:hover{
background-color:transparent;
}
ul.snsp li.rss-page a span:hover{
background-color:transparent;
}
ul.snsp li.twitter-page a span:hover:before{
color:#55acee;
}
ul.snsp li.facebook-page a span:hover:before{
color:#3b5998;
}
ul.snsp li.google-plus-page a span:hover:before{
color:#dd4b39;
}
ul.snsp li.instagram-page a span:hover:before{
color:#3f729b;
}
ul.snsp li.hatebu-page a span:hover:before{
color:#008fde;
}
ul.snsp li.pinterest-page a span:hover:before{
color:#cc2127;
}
ul.snsp li.youtube-page a span:hover:before{
color:#e52d27;
}
ul.snsp li.flickr-page a span:hover:before{
color:#1d1d1b;
}
ul.snsp li.github-page a span:hover:before{
color:#24292e;
}
ul.snsp li.feedly-page a span:hover:before{
color:#87bd33;
}
ul.snsp li.push7-page a span:hover:before{
color:#eeac00;
}
ul.snsp li.line-page a span:hover:before{
color:#00c300;
}
ul.snsp li.rss-page a span:hover:before{
color:#fe9900;
}
これをアップすればオンマウス時にSNSアイコンはそれぞれの色になり、角丸四角形はなくなると思います。
【Simplicity2】を使っている人だとだいたい右上のフォローアイコンはみんな一緒だと思いますので、ちょっとカスタマイズすると雰囲気が変わってよいのではと思います。
コメントをどうぞ