CocoonのSNSボタンをカスタムしてみた!

ブログ・デザイン
こだわり君
こだわり君

こんにちは、「こだわりスタイル」のこだわり君です!

@KodawariStyle

「Cocoon」は無料テーマなのに、有料テーマのように装備が充実しています。

管理人さんがマメにアップデートしてくれ、更新頻度も高く非常に優れたテーマで私も使用させていただいています。

スキンも豊富に用意されていますので、それほど人と被らず、すぐにブログを始めることができるのも魅力です。

カスタムしなくてもそのままで十分使用できますが、日々使用していく中で、職業柄自分なりにカスタムしていきたい部分が出てきたりします。

今日は私が使用していて、

こだわり君
こだわり君

SNSのボタンが大きいのでもう少し小さくしたい!

そんな、ちょっとしたカスタムをご紹介しようと思います。

スポンサーリンク

CocoonのSNSボタンをカスタム!

ご紹介するのは、カスタムというほど大袈裟なものでもないのですが、初期で設定されているものの幅とか大きさとか、上下のアキとかを調整しようとすると、どうしてもHTMLとCSSの知識が必要になってきます。

いわゆるソース(コード)を少し調整してあげることですね!

日々「Cocoon」を使用していて、たまたま気になっていたところが「SNSのシェアボタン」です、これは完全に好みの範疇なので同じように思った方は、コピペしてみてください。

これがデフォルト(初期設定)で、アイキャッチ画像の下に表示されるPC用のSNSボタン画面で、
SNSボタンの天地幅(高さ)があるので、ボタンのインパクトが強いのです。

SNSボタンサンプル1

天地幅を縮めるとこんな感じ!自分的にかなりスッキリして、ボタンの間隔も丁度良くなりました!

SNSボタンサンプル2

PC用はこれでもいいと思いますが、スマホになると下の写真の左側のような感じでSNSボタンがデカいです!

SNSボタンサンプル3

SNSボタンの天地幅が広いために、ファーストビュー(ページを読み込んでスクロールする前の見える範囲のこと)が、かなりSNSボタンで占領されています。

このスクリーンショットはXPERIAのXZ1 CPMPACTなので表示範囲がかなり狭く、記事の内容までは見えません。

私のサイトのデバイス閲覧シェアは、70%がスマホ、30%がパソコンになります。

ランディングページなどもそうですが、デバイスにおけるファーストビューは非常に大切で、ここでどれだけメッセージできるかが、直帰率や離脱率を下げるファクターになります。

ちなみに統計ではァーストビューでの直帰率は70%と言われています。

※この場合「ファーストビュー直帰率」とは訪れたページのファーストビューだけ一目見て、スクロールせずに元のページへ帰ってしまう割合が70%ということです。

これだけ大切なファーストビューですから、ファーストビューでSNSボタンがこれだけ幅をきかせていてはいけません。これより長いスマホなら(大抵は長い)間違いなく本文が見えているはずなのです。

より多くの情報を表示させてあげることが、より良いユーザビリティーにもつながります。

そんなわけで、今回はこのSNSボタンの天地幅を上の写真のように縮めてみたいと思います。

スポンサーリンク

ちょっとしたカスタムですので簡単です

CSSをいじれない方もコードをコピーすれば簡単です!

CSS

/* SNSシェアボタン*/
.button-caption { display: none; }
.sns-share-buttons a {
 font-size: 16px; /*ロゴサイズ*/ 
 border-radius: 3px; /*角の丸み*/
 height: 28px; /*ボタンの高さ*/
 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18); /*影*/
}

.sns-share.ss-col-6 a {
    width: 15%;
}

簡単に説明していきますね。

.button-caption { display: none; }

こちらは、ボタンの名前が「Twitter」「FaceBook」などロゴの後に入っていますが、私はシンプルにこれを非表示にしてロゴだけにしています。

.sns-share-buttons a {
   font-size: 16px; /*ロゴサイズ*/
   border-radius: 3px; /*角の丸み*/
   height: 28px;/*ボタンの高さ*/
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18); /*影*/
}

font-size: 16px; はSNSアイコンのロゴの大きさです。このロゴはフォント扱いなのでpxで指定しています。

border-radius: 3px; はボタンの角Rです。もっと丸めたい場合は3pxの数字を増やせば良いです。

height: 28px; はボタンの天地幅になりますので、これももう少し増やしたければ28pxの数字を増やしてください。

box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18); はよく見るとわからない程度に各ボタンにドロップシャドーが入っています。ここもお好みに応じて数字を増減させてみてください。

.sns-share.ss-col-6 a {
     width: 15%;
}

これはボタン同士の間隔というか、各ボタンの長さになります。
PC画面でボタンとボタンの間隔をもう少し増やしたかったので、逆にボタンの左右幅を少なくしています。

このサイトのパソコンとスマホの表示で問題なければCSSにコピペしていただければ反映されるはずです。

あくまでもワードプレスでテーマ「Cocoon」を使用している場合のみ有効ですのでお間違いなく!

カスタムについては自己責任でお願いいたします。

スポンサーリンク

一応、コピペする場所

Cocoonを使用されている方は、皆さん「子テーマ」でカスタムされていると思うのでそこは割愛して、

管理画面の左メニューの「外観」→「テーマエディター」を選びます。

CSS画面2

するとテーマのコードを編集する画面になります。

CSS画面

右上の「Cocoon Child」を選択すると、上の画面になりますので、赤枠に先ほどのコードをコピペしてください。

画面の左下端の「ファイルを更新」をクリックで反映されます。

以上が、SNSボタンの天地幅をカスタムする方法でした。

CSSはこの手の微修正をするには必ず必要ですので、興味があれば概要だけでも覚えておくといいと思います。

ちょっとやってみたいと思う方は是非試してみてください!

あくまでもワードプレスでテーマ「Cocoon」を使用している場合のみ有効ですのでお間違いなく!

カスタムについては自己責任でお願いいたします。

ブログ・デザイン
スポンサーリンク
スポンサーリンク
この記事を書いた人
こだわりスタイル

東京出身、現役グラフィック・Webデザイナーのモノへのこだわり情報や日々気になった事を発信するの情報ブログを開設。趣味やガジェット、ファッションなど5つのカテゴリーでご紹介。フォロー頂けると嬉しいです。

「こだわりスタイル」をフォローする
こだわり記事をシェアする
こだわりスタイル