【Cocoon】プロフィールSNSアイコンを「色付き」にカスタマイズ。CSSだけ

Cocoonのプロフィールボックスの、SNSアイコンだけをカスタマイズします。

プロフィールボックス自体はいじりません。

デフォルトのアイコンはこちら。

例：Cocoon作者様のプロフィール

変更後は

ひつじ先輩

元モンスター社員の頑張らない主夫。家事育児も徹底的にサボ…効率化。ITっぽいことが好き（基本情報／情報系院卒）

中の人をフォローする

のように色がつきます。

やっていきます。

この記事の信頼性

この記事の信頼性

貯蓄・投資で資産3,000万円超
情報系院卒・基本情報技術者
ブログで最高70,000PV/月
2児の父

プロフィールのSNSアイコンをカスタマイズ

SNSアイコンだけをカスタマイズするコード

style.cssに以下のコードを貼るだけです！

（やり方は後述します）

/*サイドバープロフィールSNSアイコン中央寄せ*/
.sidebar .author-box .author-content .author-follows .sns-buttons{ justify-content: center; }

/*サイドバープロフィールSNSアイコンスタイル設定*/
.author-box .author-content .author-follows .sns-buttons a.follow-button{
border-radius: 50%;
border: none;
width: 30px;
height: 30px;
color: #fff!important;
margin:3px;
transition: .5s;
}
div.author-follows a.follow-button.website-button.website-follow-button-sq{background-color: #6eb6fd!important;}
div.author-follows a.follow-button.twitter-button.twitter-follow-button-sq{background-color: #000000!important;}
div.author-follows a.follow-button.bluesky-button.bluesky-follow-button-sq{background-color: #1185FE!important;}
div.author-follows a.follow-button.facebook-button.facebook-follow-button-sq{background-color: #7c9dec!important;}
div.author-follows a.follow-button.hatebu-button.hatebu-follow-button-sq{background-color: #2c6ebd!important;}
div.author-follows a.follow-button.instagram-button.instagram-follow-button-sq{background: linear-gradient(165deg, #427eff 5%, #f13f79 50%) no-repeat !important;}
div.author-follows a.follow-button.pinterest-button.pinterest-follow-button-sq{background-color: #bd081c!important;}
div.author-follows a.follow-button.youtube-button.youtube-follow-button-sq{background-color: #cd201f!important;}
div.author-follows a.follow-button.tiktok-button.tiktok-follow-button-sq{background-color: #000000!important;}
div.author-follows a.follow-button.linkedin-button.linkedin-follow-button-sq{background-color: #0A66C2!important;}
div.author-follows a.follow-button.note-button.note-follow-button-sq{background-color: #41C9B4!important;}
div.author-follows a.follow-button.soundcloud-button.soundcloud-follow-button-sq{background-color: #FF5500!important;}
div.author-follows a.follow-button.flickr-button.flickr-follow-button-sq{background-color: #111!important;}
div.author-follows a.follow-button.line-button.line-follow-button-sq{background-color: #00c300!important;}
div.author-follows a.follow-button.amazon-button.amazon-follow-button-sq{background-color: #ff9900!important;}
div.author-follows a.follow-button.twitch-button.twitch-follow-button-sq{background-color: #5C16C5!important;}
div.author-follows a.follow-button.rakuten-room-button.rakuten-room-follow-button-sq{background-color: #C61E79!important;}
div.author-follows a.follow-button.slack-button.slack-follow-button-sq{background-color: #4A154B!important;}
div.author-follows a.follow-button.github-button.github-follow-button-sq{background-color: #4078c0!important;}
div.author-follows a.follow-button.codepen-button.codepen-follow-button-sq{background-color: #47CF73!important;}
div.author-follows a.follow-button.feedly-button.feedly-follow-button-sq{background-color: #2bb24c!important;}
div.author-follows a.follow-button.rss-button.rss-follow-button-sq{background-color: #f26522!important;}
.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }

style.cssに貼るとは？

WordPressでstyle.cssにコードを貼る方法は以下の通りです。

管理画面から「外観」→「テーマファイルエディター」を開く
右側のファイル一覧から「style.css」（通常は子テーマのstyle.cssがおすすめ）を選択する
そこにカスタマイズしたいCSSコードを直接貼り付ける（例：SNSアイコンのスタイルを変更するコード）
「ファイルを更新」ボタンをクリックして保存する

ひつじ

ここはAIによる解説で失礼します。

元のコードと変更点

上記のコードは、以下の記事から抜粋・改変させていただきました。

【Cocoon】プロフィールを設置する方法とカスタマイズ

WordPress/Cocoonを使ったブログでの『プロフィール』をカスタマイズします。コピペでOKなので「初心者だけどブログをおしゃれにデザインしたい」という方にもおすすめです。モバイル表示にも対応しています。

yujiblog.org

こちらで実施した変更点は以下です。

1.SNSボタンに関する部分だけ抜粋

全部適用したら、記事内にプロフィールボックスを設置したとき崩れたため。

ひつじ

たぶん、元記事はサイドバーへの設置を前提としたカスタマイズ

2.記事内にプロフィールを表示時、アイコンを左寄せ

つまり「.sidebar」を足した部分があります。

3.Blueskyアイコンの設定を追加

div.author-follows a.follow-button.bluesky-button.bluesky-follow-button-sq{background-color: #1185FE!important;}

を追加しました。

4.アイコンサイズ調整

自分がちょうどいいと思うサイズに調整しました。

別の記事で、Xのボタンだけ設置するカスタマイズもあります。

Cocoonのプロフィールでtwitter(X) を目立たせるカスタマイズ｜ひつじ先輩

アイキャッチ画像の通り、 目立つTwitter(X)ボタン 「＞詳しく」のリンク 設置していきます。 Cocoonプロフィール カスタマイズ準備 以下のコード、 remove_filter('pre_user_description', '...

note.com

ひつじ

もしよかったら、読んでみてください。