【Cocoon】プロフィールのSNSアイコンを色付きの丸型にカスタマイズ

Cocoon SNSアイコン カスタマイズ ブログ運営

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

管理画面の「ユーザー」→「あなたのプロフィール」で設定した情報を、自動的にレイアウトして表示してくれる便利な機能です。

 

今回はその中のSNSアイコンをカスタマイズする方法を紹介します。

もともとはモノクロのシンプルなデザインなんですが、cssを使って丸型の色付きアイコンにしてみました。

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

早速ですが、今回のカスタマイズで実装できるのがこちら。

Cocoon SNSアイコン カスタマイズ

プロフィールウィジェット内のSNSフォローボタンを、こんな感じのデザインにカスタマイズすることができます。

HTMLはそのままcssのみで実装したので、スタイルシートにコピペするだけでOKなんですが、せっかくの実践的にcssに触れられる機会。解説を入れながら紹介していきたいと思います。

色んな事に応用できるプロパティばかりなので、覚えておくと便利です。

 

ポイントを解説する前に、コピペしたい人向けに最終的に張り付けるコードを置いておきます。

/* Twitter
===================================*/
.author-follows .sns-follow .sns-follow-buttons .twitter-button{
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #55acee;
    color: #fff;
    border: 0;
    margin-right: .5em;
}
.author-follows .sns-follow .sns-follow-buttons .twitter-button:hover{
    background-color: #55acee;
}

/* Facebook
===================================*/
.author-follows .sns-follow .sns-follow-buttons .facebook-button{
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #315096;
    color: #fff;
    border: 0;
    margin-right: .5em;
}
.author-follows .sns-follow .sns-follow-buttons .facebook-button:hover{
    background-color: #315096;
}

/* Instagram
===================================*/
.author-follows .sns-follow .sns-follow-buttons .instagram-button{
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background: -webkit-linear-gradient(135deg,#427eff 0,#f13f79 70%) no-repeat;
    background: linear-gradient(135deg,#427eff 0,#f13f79 70%) no-repeat;
    color: #fff;
    border: 0;
    margin-right: .5em;
}

/* feedly
===================================*/
.author-follows .sns-follow .sns-follow-buttons .feedly-button{
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #6cc655;
    color: #fff;
    border: 0;
    margin-right: .5em;
}
.author-follows .sns-follow .sns-follow-buttons .feedly-button:hover{
    background-color: #6cc655;
}

/* RSS
===================================*/
.author-follows .sns-follow .sns-follow-buttons .rss-button{
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #ff8c00;
    color: #fff;
    border: 0;
    margin-right: .5em;
}
.author-follows .sns-follow .sns-follow-buttons .rss-button:hover{
    background-color: #ff8c00;
}

Twitter、Facebook、Instagram、feedly、RSSにしか対応していないので、他のSNSも使用している場合はこれをもとに複製してみてください。

 

また、Cocoonをほとんどカスタマイズしていない場合はよっぽど大丈夫だと思いますが、各自これまでに追加しているcssと競合する可能性もあるので注意してください。

カスタマイズのポイント

このカスタマイズを実装するのためのポイントは4つです。

  1. SNSアイコンの対象セレクタを調べる
  2. アイコンを丸型にする
  3. アイコンの背景色を指定
  4. その他調整

コツさえつかめば、いたって簡単に実装できる内容です。

ここからは「Twitter」のボタンを例にコードの解説をしていきたいと思います。

1、SNSアイコンの対象セレクタを調べる

まずはcssの対象となるセレクタを調べましょう。

ブラウザ画面で「右クリック」→「検証(Ctrl+Shift+I)」よりHTMLを覗いてみると、CocoonのプロフィールTwitterボタン箇所はこんな感じになっています。

<a href="https://twitter.com/ffyamaryo" class="follow-button twitter-button twitter-follow-button-sq" target="_blank" title="Twitterをフォロー" rel="nofollow"><span class="icon-twitter-logo"></span></a>

ちなみにこれは「aタグ」によってSNSページのリンクを生成し、「spanタグ」を使ってwebアイコンフォントを表示させる構造です。

 

さらにaタグを詳しく見ると、

  • .follow-button
  • .twitter-button
  • .twitter-follow-button-sq

の3つのclass名が付けられています。これがcssの対象となるセレクタ。

しかし「.follow-button」は、ツイッター以外のSNSアイコンにも使われているので、Twitterボタンに独自の色を指定したい場合は使用できません。

「.twitter-button」か「.twitter-follow-button-sq」を使いましょう。

 

また、このクラス名単体では、もともと適応されているスタイルが優先されてしまうので、下記のように階層を細かく指定してあげる必要があります。

.author-follows .sns-follow .sns-follow-buttons .twitter-button{
    //ここにスタイルを記述
}

2、アイコンを丸型にする

続いて、アイコンを丸型にする方法を解説します。

HTMLの要素を丸くしたいときは「border-radius」プロパティを使いましょう。

border-radius: 50%;

こんな感じで、値を「50%」にすることで正円になります

角丸の四角もこのプロパティで実装できるので、使いどころは多いですね。

 

ちなみにアイコンのサイズを変更したい場合は、「width」「height」プロパティを使って調整することができます。今回は「30px」にしてみました。

3、アイコンの背景色を指定

続いて、アイコンの背景色を変更する方法を解説。

背景色を変更するのは「background-color」プロパティです。

background-color: #55acee;
color#fff;

SNSのキーカラーは調べるとすぐにでてきます。ツイッターの場合は「#55acee」ですね。

 

さらに、アイコン自体の色を「color」プロパティで白くすることで、白抜きのカラーアイコンが完成します。

Instagramアイコンのグラデーションを作成

インスタグラムに限り、キーカラーがグラデーションになっているので単純にはいきません。

グラデーションを作るのは少し難しいんですが、「linear-gradient()」関数を使うことで実装できます。

background: linear-gradient(135deg,#427eff 0,#f13f79 70%) no-repeat;

4、その他調整

上記工程で実装したいことはほぼ完了しています。後は細かい調整です。

今回は、アイコン同士の間隔を調整したり、もともとついていた枠線を消す作業を行っています。

margin-right: .5em;
border: 0;

親テーマのスタイルシートで不要な箇所を削除すると、アップデートのタイミングでもとに戻ってしまうことがあるので、こうやって子テーマに上書きするしかないんですよね…。

カスタマイズすると、もともとCocoonにあったcssと競合することも

WordPressのレイアウトをカスタマイズすると、もともとそのテーマにあったcssと競合して、思わぬレイアウト崩れがおきる場合があります。

実は今回も、CocoonのSNSアイコンの色を変えただけなんですが、ホバーした時に背景色が薄いグレーになって消える現象が起きました。

.author-follows .sns-follow .sns-follow-buttons .twitter-button:hover{
    background-color: #55acee;
}

上記コードにより、ホバー時の色を指定することで解決はできましたが、WordPressのように全てのcssを自分で把握できていないサイトをカスタマイズする際は注意が必要です。

 

Cocoonのカスタマイズ範囲が広がってきたら、テーマを更新するたびに、念のため全体のレイアウトを確認する習慣も付けておくと良いでしょう。

テーマによってはアップデートするときに、しれっとHTMLの記述が変わったりすることもあるんです。子テーマを使っていても絶対安心ではありません。

ブログ運営

FFseeのweb担当。ブログ、アフィリエイト、ネットショップ運営歴3年。
最初の1年で失敗サイトを量産しながらも、今は6サイトくらいに落ち着いて半フリーランスな生活をしてます。

やまりょうをフォローする
\ この記事をシェアする /
スポンサーリンク
FFsee