< 当ブログではアフィリエイト広告を利用しています >
PR
ブログ・デザイン

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」を使用している場合のみ有効ですのでお間違いなく!

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

タイトルとURLをコピーしました