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

Cocoon

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

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

Cocoonのプロフィールウィジェット

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

プロフィール欄

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

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

Cocoonのプロフィール欄のSNSリンクアイコン

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

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

SNSリンクアイコンをデフォルトよりも目立たせる

というわけで、今日は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);
}
 

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

・font-sizeを大きくすることでデフォルトよりもアイコンを大きくする
・widhtとheightを大きくしてデフォルトよりも表示枠を大きくする
・marginをデフォルトの状態よりも広くとる
・colorでアイコンをデフォルトでは灰色っぽい色から白色にする
・borderをなくして代わりにbox-shadowを使い、フワッと浮いたような見た目にする

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

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

背景色が透明でアイコンの色が白なのでアイコンが表示されない

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

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

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

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

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

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


    .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に応じて背景色をつけていけば白色のアイコンが表示されますし、なおかつ背景色がある分デフォルトの状態の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.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.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;
}
 

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

・ボタンのwidthとheightを同じ値にする
・ボタンのborder-radiusを50%する

という部分だけです。

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

丸くなったSNSリンクアイコン

ブランドカラー一覧

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

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

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

SNSカラーコード実際の色
Twitter#1da1f2
Facebook#3b5998
はてブ#00a4de
YouTube#ff0000
note#41c9b4
LINE#06c755
Amazon#ff9900
楽天#bf0000
Feedly#6cc655
Rss#f26522

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

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

ゆんつ
ゆんつ

すんません

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

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

それでは、またー。

コメント