【WP】Cocoonでプロフィール欄のSNSアイコンを見栄え良くする方法

当サイトでは、Wordpressの無料テーマ「Cocoon」を利用しています。

無料とは思えないほど高機能で使いやすいですが、細かいところで気になる点が少しずつ見つかってきており、ちょこちょこカスタマイズしながらデザインを整えています。

今回はプロフィール欄のSNSアイコンのカスタマイズ方法をご紹介します。

プロフィール欄を未設置の方は、下記手順でまず設置しましょう。

【WP】Cocoonでプロフィールをサイドバーに表示する方法

Wordpressを開設したら、まず設置したいのがプロフィール。個人ブロガーの人たちのブログを見ると分かると思いますが、多くの人が設置されています。プロフィールは、ブログ運営者（あなた）の人となりを伝える上で重要です。（と言いつつも...

ひと目で分かるこの記事の内容

完成形のイメージ
子テーマのstyle.cssを開く
コードを記載する（コピペOK）

完成形のイメージ

アイコンを押しやすいようにサイズを調整して、プロフィール画像同様に丸みをもたせました。

ちなみにデフォルトは下記です。アイコンサイズがめちゃめちゃ小さく、見辛い＆押しづらいと感じてしまいますよね。

でもこれ、CSSを少しばかりいじるだけで改善可能です！

子テーマのstyle.cssを開く

今回はCocoonの子テーマにスタイルを記載します。

子テーマは、親テーマに影響を与えずに機能やデザインを追加できるカスタマイズ用のテーマです。

サイトに手を加えるなら基本的に子テーマを編集することを推奨します。まだインストールしてない方は、Cocoonの公式HPからダウンロードして導入しましょう。

親テーマではなく子テーマの利用を推奨する理由は、親テーマをアップデートしたときに親テーマの編集した部分がぶっ飛ぶからです。特に有料テーマや高機能な無料テーマは頻繁にアップデートが行われるので子テーマの利用必須です。

管理画面の外観からテーマエディターを開きます
編集するテーマが「Cocoon Child」であることを確認の上、スタイルシートを選択します

コードを記載する（コピペOK）

下記、コードを子テーマのstyle.cssに追記します。

/* SNSアイコンの表示枠を調整します */
.author-box .sns-follow-buttons a.follow-button {
font-size: 40px;
width: 40px;
height: 40px;
background-color: #fff;
border: 1px solid #4a4a4a;
border-radius: 80px;
}

/* SNSアイコンの位置とサイズを調整します */
.author-box .sns-follow-buttons a.follow-button span:before {
position: absolute;
left: 4.5px;
top: 4.5px;
color: #4a4a4a;
font-size: 30px;
}

/* ホームアイコンを非表示にします */
.author-box .sns-follow-buttons a.website-button {
display: none;
}

一部SNSアイコンはアイコンの位置が中央からズレる場合があります。その場合は、個々のアイコンのCSSを書き足して位置を調整しましょう。

例えば、Facebookアイコンなら

.icon-facebook-logo:before {
    left: 0px !important;
}

というコードを追記すればズレを解消できます。

ぜひ、お試し下さい。