Cocoonのプロフィール欄のリンクアイコンをカスタマイズする

こんにちは、ゆんつです。

WordPressのテーマ「Cocoon」にはプロフィールウィジェットというウィジェットがありあます。

これをサイドバーに設置すると、ブログにプロフィール欄が設けられます。

プロフィール欄の下部には、ユーザーのプロフィールページで設定した、自分のYoutubeやTwitterなどのへのリンクアイコンが表示されます。

このリンクアイコンはデフォルトの状態では以下のような感じです。

シンプルで感じが良いのですが、ちょっと小さくて目立ちづらいかなとも思います。

リンクアイコンのサイズをもっと大きくして更に色を付けたりすると、今よりも目立ちクリックにも繋がるかもしれません。

というわけで、今日はCocoonのプロフィール欄のSNSリンクアイコンのカスタマイズについて書きたいと思います。

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

リンクアイコンのサイズなどの大枠のデザインはCSSで

    .author-box .sns-follow-buttons a.follow-button {
    font-size: 18px;
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    margin-right: 4px;
    background-color: transparent;
    color: #777;
    border: 1px solid #ccc;
    border-radius: 2px;
}
  

という感じにデザインされています。

ですので、これを上書きするようなCSSにすればOKです。

具体的には以下のようなCSSとなります。

/* リンクアイコンのデザインを変更する */    
.author-box .sns-follow .sns-follow-buttons a.follow-button {
  font-size: 36px;
  width: 100px;
  height: 46px;
  margin-bottom: 10px;
  margin-right: 10px;
  color: #fff;
  border: none;
  border-radius: 6px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.1),0 3px 5px 0 rgba(0,0,0,.2);
}

/* アイコンをセンタリングする */
.author-box .sns-follow-buttons a.follow-button span::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}
  

コードの内容を簡単に説明すると

というカスタマイズになっています。

このコードをCocoonの子テーマに記述すると、プロフィール欄のSNSリンクアイコンは以下のような見た目となります。

リンクの枠自体の大きさやアイコンの大きさは変更されているのですが、元々の背景色が透明の設定になっており、その状態で文字の色（アイコンの色）を白に変更したのでアイコンが全く見えていない状態になっています。

ですので、リンクの枠に各SNSのブランドカラーの背景色をつけて、ブランドカラーの背景色の中に白のアイコンが表示されるようにします。

各アイコンにはSNSに応じて○○-buttonという独自のクラス名がつけられています（例えばyoutubeならyoutube-buttonなど）

そのクラスを使って、それぞれのブランドカラーの背景色を設定します。

例えば僕のプロフィールの場合はTwitterとYoutubeとFeedlyとRSSのリンクアイコンを設置しています。

ですので、以下のコードを追加します。

/* リンクの背景色にSNSのブランドカラーを設定する */   
.author-box .sns-follow-buttons a.twitter-button {
  background-color: #1da1f2 !important;
}

.author-box .sns-follow-buttons a.youtube-button {
  background-color: #FF0000 !important;
}

.author-box .sns-follow-buttons a.feedly-button {
  background-color: #6cc655 !important;
}

.author-box .sns-follow-buttons a.rss-button {
  background-color: #f26522 !important;
}
  

このCSSをCocoonの子テーマに記述すると、プロフィールのSNSリンクアイコンは以下のような見た目になります。

このような感じで、表示するSNSに応じて背景色をつけていけば白色のアイコンが表示されますし、なおかつ背景色がある分デフォルトの状態のSNSリンクアイコンよりも目立つようになります。

カスタマイズ前と後を比較してみましょう。

カスタマイズ前よりも大分目立つようになったと思います。

ここまでのコードをまとめると、以下のようになります。

/* リンクアイコンのデザインを変更する */    
.author-box .sns-follow .sns-follow-buttons a.follow-button {
  font-size: 36px;
  width: 100px;
  height: 46px;
  margin-bottom: 10px;
  margin-right: 10px;
  color: #fff;
  border: none;
  border-radius: 6px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.1),0 3px 5px 0 rgba(0,0,0,.2);
}

/* アイコンをセンタリングする */
.author-box .sns-follow-buttons a.follow-button span::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}

/* リンクアイコンの背景色にSNSのブランドカラーを設定する */   
.author-box .sns-follow-buttons a.twitter-button {
  background-color: #1da1f2 !important;
}

.author-box .sns-follow-buttons a.youtube-button {
  background-color: #FF0000 !important;
}

.author-box .sns-follow-buttons a.feedly-button {
  background-color: #6cc655 !important;
}

.author-box .sns-follow-buttons a.rss-button {
  background-color: #f26522 !important;
}
  

以上で、カスタマイズ完了です。

アイコンを丸くしたい場合

アイコンを丸くしたい場合には以下のようなコードにするといいかもしれません。

/* リンクアイコンのデザインを丸くする */   
.author-box .sns-follow .sns-follow-buttons a.follow-button {
  font-size: 36px;
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  margin-right: 10px;
  color: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.1),0 3px 5px 0 rgba(0,0,0,.2);
}

/* アイコンをセンタリングする */
.author-box .sns-follow-buttons a.follow-button span::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}

/* リンクアイコンの背景色にSNSのブランドカラーを設定する */   
.author-box .sns-follow-buttons a.twitter-button {
  background-color: #1da1f2 !important;
}

.author-box .sns-follow-buttons a.youtube-button {
  background-color: #FF0000 !important;
}

.author-box .sns-follow-buttons a.feedly-button {
  background-color: #6cc655 !important;
}

.author-box .sns-follow-buttons a.rss-button {
  background-color: #f26522 !important;
}
  

先ほどのコードと違う部分は

という部分だけです。

こうすることで、SNSリンクアイコンは以下のように丸くなります。

ブランドカラー一覧

以上、Cocoonのプロフィール欄にあるSNSリンクアイコンのカスタマイズ方法でした。

もし参考にされる場合は、自分のプロフィールウィジェットに合うようにサイズなどを適宜変更してください。

最後にCocoonのプロフィール欄の中にあるSNSで、使用する可能性が高いSNSのブランドカラーのカラーコードを調べたので、一覧にしておきます。

パパっと調べたので、間違いがあったらご容赦を。

ちなみに、「インスタグラム」は何種類かの色がグラデーションするようになっているので、色の数が多くてややこしいので省略しました。

ゆんつ

すんません

「ブランドカラー　インスタグラム」で検索するといろいろと参考になる情報が出てくるので、そちらを参照いただくと幸いです。

何かの参考になれば幸いです。

それでは、またー。