COCOONプロフィールのSNSアイコンを少し大きくカスタムする方法

スマホで自分の記事を見たとき、COCOON標準のプロフィールカードに表示されているSNSアイコンが小さくてタップしづらいと感じました。

なので、今回はプロフィールカードのところの各種SNSフォローボタンのサイズを少し大きくしてみたお話です。

アイコンが小さくてタップしづらい…
プロフカードSNSアイコンを大きくするCSS
- もっと大きくする
- アイコン枠を円にする
まとめ

アイコンが小さくてタップしづらい…

当サイトではモバイル表示の際、記事の最後の方に著者プロフィールカードを表示しているのですが、動作確認のためスマホから自分の記事を見たとき、プロフィールカードのTwitterボタンなどが小さくてタップしづらかったんですよね。

デザイン的には、ちょっと小ぶりであまり主張せずなので標準のままでいいと思ってたんだけど、いざ何かアクションを起こすとなると、ボタンが小さくて押しにくいのは如何なものか…

そこで、CSSを設定して、プロフィールカードに表示される各種SNS系ボタンのサイズを少し大きくなるようにカスタムしてみました。

プロフカードSNSアイコンを大きくするCSS

見た目のデザインはそのままにサイズだけ大きくしたかったので、今回のカスタムにあたってサイトに追加したのは以下のようなCSSコード。

/*COCOONプロフカード：SNSアイコンのサイズ設定*/
.widget_author_box .sns-follow-buttons.sns-buttons a{
	width:1.8rem;  /*アイコン枠の横幅*/
	height:1.8rem;  /*アイコン枠の高さ*/
}
.widget_author_box .sns-follow-buttons.sns-buttons a span{
	font-size:1.5rem;  /*アイコンフォントのサイズ*/
}

上記のコードを追加した結果、プロフィールカードに表示されるSNSアイコンは以下のようにちょっとだけ大きくなりました！

これならスマホでも多少はタップしやすくなったかな？

もっと大きくする

アイコンサイズをもっと大きくしたい場合は、aタグのwidth＆heightとspanのfont-sizeの指定を大きくすればOKです。

例えば以下のコード。width・heightともに2.8rem、font-sizeを2.5remで指定した場合…

/*COCOONプロフカード：SNSアイコンのサイズ設定*/
.widget_author_box .sns-follow-buttons.sns-buttons a{
	width:2.8rem;  /*アイコン枠の横幅*/
	height:2.8rem;  /*アイコン枠の高さ*/
}
.widget_author_box .sns-follow-buttons.sns-buttons a span{
	font-size:2.5rem;  /*アイコンフォントのサイズ*/
}

アイコンのサイズはこんな感じの大きさになります。

アイコン枠を円にする

デフォルトではSNSアイコンの枠は四角ですが、まるい円にしたいこともあるかもしれませんね。

その場合はaタグのborder-radiusを50％に指定するといいですよ。

/*COCOONプロフカード：SNSアイコンのサイズ設定*/
.widget_author_box .sns-follow-buttons.sns-buttons a{
	width:2.8rem;  /*アイコン枠の横幅*/
	height:2.8rem;  /*アイコン枠の高さ*/
	border-radius:50%;  /*アイコン枠を円にする*/
}
.widget_author_box .sns-follow-buttons.sns-buttons a span{
	font-size:2.5rem;  /*アイコンフォントのサイズ*/
}

上記サンプルCSSを適用すると、アイコンはこんな感じになります。