![ゾムビット](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/05/daba9f5d64042cd59cb5cfe267231ea2-1.png?w=1256&ssl=1)
ドーモ、僕(@zomubbit)です。ぞむぅ。
前回の記事はここからどうぞ☆
ゾムビットのブログのSNSシェア、フォローアイコンはこんな風に丸形になっています。
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/sns-icon12-1.png?resize=1024%2C299&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/sns-icon12-1.png?resize=1024%2C299&ssl=1)
これはCSSを編集しているからで、何も編集しないとこんな感じです。
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/sns-icon2.png?resize=1024%2C299&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/sns-icon2.png?resize=1024%2C299&ssl=1)
今回は四角いアイコンを丸形に変更する方法を解説していきます。秒で終わります。
最初に
①Cocoon設定
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/638b1e9536a9801ebf98945b2d1057e1.png?resize=1024%2C683&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/638b1e9536a9801ebf98945b2d1057e1.png?resize=1024%2C683&ssl=1)
WordPressの編集画面から『Cocoon設定→SNSシェア』に行きます。
上記2点を設定後、変更をまとめて保存してください。
②バックアップを取る
③style.cssの場所
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/656ff116cc13ccf6b497f7a38944396a.png?resize=1024%2C683&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/656ff116cc13ccf6b497f7a38944396a.png?resize=1024%2C683&ssl=1)
WordPressの編集画面から『外観→テーマエディター→style.css』。
『編集するテーマを選択』はCocoon childを選択してください。
ソースコードを貼り付けたら、「ファイルを更新」を押してください。
※貼り付ける場所は列の一番下です。
SNSボタンをアイコンのみにする
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/sns-icon7.png?resize=1024%2C299&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/sns-icon7.png?resize=1024%2C299&ssl=1)
以下のコードをstyle.cssに貼り付けてください。
/*SNSボタンをアイコンのみにする*/
#main .button-caption {
display: none; /*キャプション非表示*/
}
SNSシェアボタン、フォローボタン共通で作用するコード。
文字の装飾
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/sns-icon8.png?resize=1024%2C299&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/sns-icon8.png?resize=1024%2C299&ssl=1)
以下のコードをstyle.cssに貼り付けてください。
/*文字の装飾*/
.sns-share-message{
font-weight: bold; /*太字*/
color: #875d5b; /*文字色*/
}
#875d5bの『875d5b』を変えたら色が変わります。
ボタンを一列にする
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/sns-icon9.png?resize=1024%2C299&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/sns-icon9.png?resize=1024%2C299&ssl=1)
以下のコードをstyle.cssに貼り付けてください。
/*ボタンを一列にする*/
.sns-share-buttons {
flex-wrap: nowrap; /*折り返さない*/
justify-content: center; /*中央寄せ*/
}
ボタンを丸くする
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/sns-icon10.png?resize=1024%2C299&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/sns-icon10.png?resize=1024%2C299&ssl=1)
以下のコードをstyle.cssに貼り付けてください。
/*ボタンを丸くする*/
.sns-share-buttons a {
border-radius: 50%; /*丸くする*/
font-size: 20px; /*アイコンのサイズ*/
margin: 0 8px; /*ボタン同士の間隔*/
}
ボタンの形を整える
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/sns-icon11.png?resize=1024%2C299&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/sns-icon11.png?resize=1024%2C299&ssl=1)
以下のコードをstyle.cssに貼り付けてください。
/*ボタンの形を整える*/
#main .sns-share a {
width: 40px; /*ボタンの横幅*/
height: 40px; /*ボタンの高さ*/
}
ボタンに影をつける
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/sns-icon12-1.png?resize=1024%2C299&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/sns-icon12-1.png?resize=1024%2C299&ssl=1)
以下のコードをstyle.cssに貼り付けてください。
/*ボタンに影をつける*/
.sns-share-buttons a {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 10); /*影*/
}
SNSシェアボタンまとめ
/*文字の装飾*/
.sns-share-message{
font-weight: bold; /*太字*/
color: #875d5b; /*文字色*/
}
/*ボタンを一列にする*/
.sns-share-buttons {
flex-wrap: nowrap; /*折り返さない*/
justify-content: center; /*中央寄せ*/
}
/*ボタンを丸くする*/
.sns-share-buttons a {
border-radius: 50%; /*丸くする*/
font-size: 20px; /*アイコンのサイズ*/
margin: 0 8px; /*ボタン同士の間隔*/
}
/*ボタンの形を整える*/
#main .sns-share a {
width: 40px; /*ボタンの横幅*/
height: 40px; /*ボタンの高さ*/
}
/*ボタンに影をつける*/
.sns-share-buttons a {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 10); /*影*/
}
SNSフォローボタンまとめ
/*文字の装飾*/
.sns-follow-message{
font-weight: bold; /*太字*/
color: #875d5b; /*文字色*/
}
/*ボタンを一列にする*/
.sns-follow-buttons {
justify-content: center; /*中央寄せ*/
}
/*ボタンを丸くする*/
.sns-follow-buttons a {
border-radius: 50%; /*丸くする*/
font-size: 20px; /*アイコンのサイズ*/
margin: 0 10px; /*ボタン同士の間隔*/
}
/*ボタンの形を整える*/
#main .sns-follow a {
width: 40px; /*ボタンの横幅*/
height: 40px; /*ボタンの高さ*/
}
/*ボタンに影をつける*/
.sns-follow-buttons a {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 10); /*影*/
}
シェアボタンとフォローボタンのコードは、
『.sns-share-buttons {』『.sns-follow-buttons a {』
赤字の箇所が違うだけであとは同じ。
![](https://www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/5f15467c6c76115ab4064ef346390895.png)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/5f15467c6c76115ab4064ef346390895.png?resize=160%2C90&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/5f15467c6c76115ab4064ef346390895.png?resize=160%2C90&ssl=1)
![](https://www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/e9800ae96ba069a27a3b362fcba1aaf5.png)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/e9800ae96ba069a27a3b362fcba1aaf5.png?resize=160%2C90&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/e9800ae96ba069a27a3b362fcba1aaf5.png?resize=160%2C90&ssl=1)
まとめ
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/Cocoon-__-2-160x90.jpg?ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/fa12b0349a6a0d885a29d069115aa5df-160x90.jpg?ssl=1)
はい!四角いアイコンを丸形に変更する方法を解説しました。
このカスタムは簡単かつ目に見えて表示が変わったことが分かるので、お勧めです!
数値を変更すればアイコンの大きさや間隔の変更もできるので試してみてください。
![ゾムビット](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/05/daba9f5d64042cd59cb5cfe267231ea2-1.png?w=1256&ssl=1)
![ゾムビット](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/05/daba9f5d64042cd59cb5cfe267231ea2-1.png?w=1256&ssl=1)
丸アイコン、マジでかわいくて気に入ってます!
それでは今回はこの辺で。次もぜってぇ見てくれよな☆
コメント