LINE2022.02.27INDEXCocoonのSNSボタンをカスタム!ちょっとしたカスタムですので簡単です一応、コピペする場所こだわり君こんにちは、「こだわりスタイル」です!@KodawariStyle「Cocoon」は無料テーマなのに、有料テーマのように装備が充実しています。管理人さんがマメにアップデートしてくれ、更新頻度も高く非常に優れたテーマで私も使用させていただいています。スキンも豊富に用意されていますので、それほど人と被らず、すぐにブログを始めることができるのも魅力です。カスタムしなくてもそのままで十分使用できますが、日々使用していく中で、職業柄自分なりにカスタムしていきたい部分が出てきたりします。今日は私が使用していて、こだわり君SNSのボタンが大きいのでもう少し小さくしたい!そんな、ちょっとしたカスタムをご紹介しようと思います。スポンサーリンクCocoonのSNSボタンをカスタム!ご紹介するのは、カスタムというほど大袈裟なものでもないのですが、初期で設定されているものの幅とか大きさとか、上下のアキとかを調整しようとすると、どうしてもHTMLとCSSの知識が必要になってきます。いわゆるソース(コード)を少し調整してあげることですね!日々「Cocoon」を使用していて、たまたま気になっていたところが「SNSのシェアボタン」です、これは完全に好みの範疇なので同じように思った方は、コピペしてみてください。これがデフォルト(初期設定)で、アイキャッチ画像の下に表示されるPC用のSNSボタン画面で、SNSボタンの天地幅(高さ)があるので、ボタンのインパクトが強いのです。天地幅を縮めるとこんな感じ!自分的にかなりスッキリして、ボタンの間隔も丁度良くなりました!PC用はこれでもいいと思いますが、スマホになると下の写真の左側のような感じでSNSボタンがデカいです!SNSボタンの天地幅が広いために、ファーストビュー(ページを読み込んでスクロールする前の見える範囲のこと)が、かなりSNSボタンで占領されています。CPMPACTなので表示範囲がかなり狭く、記事の内容までは見えません。私のサイトのデバイス閲覧シェアは、70%がスマホ、30%がパソコンになります。ランディングページなどもそうですが、デバイスにおけるファーストビューは非常に大切で、ここでどれだけメッセージできるかが、直帰率や離脱率を下げるファクターになります。ちなみに統計ではファーストビューでの直帰率は70%と言われています。※この場合「ファーストビュー直帰率」とは訪れたページのファーストビューだけ一目見て、スクロールせずに元のページへ帰ってしまう割合が70%ということです。これだけ大切なファーストビューですから、ファーストビューでSNSボタンがこれだけ幅をきかせていてはいけません。これより長いスマホなら(大抵は長い)間違いなく本文が見えているはずなのです。多くの情報を表示させてあげることが、より良いユーザビリティーにもつながります。そんなわけで、今回はこのSNSボタンの天地幅を上の写真のように縮めてみたいと思います。15%;}簡単に説明していきますね。}こちらは、ボタンの名前が「Twitter」「FaceBook」などロゴの後に入っていますが、私はシンプルにこれを非表示にしてロゴだけにしています。SNSアイコンのロゴの大きさです。このロゴはフォント扱いなのでpxで指定しています。丸めたい場合は3pxの数字を増やせば良いです。ボタンの天地幅になりますので、これももう少し増やしたければ28pxの数字を増やしてください。見るとわからない程度に各ボタンにドロップシャドーが入っています。ここもお好みに応じて数字を増減させてみてください。15%;}これはボタン同士の間隔というか、各ボタンの長さになります。PC画面でボタンとボタンの間隔をもう少し増やしたかったので、逆にボタンの左右幅を少なくしています。このサイトのパソコンとスマホの表示で問題なければCSSにコピペしていただければ反映されるはずです。ワードプレスでテーマ「Cocoon」を使用している場合のみ有効ですのでお間違いなく!カスタムについては自己責任でお願いいたします。管理画面の左メニューの「外観」→「テーマエディター」を選びます。するとテーマのコードを編集する画面になります。Child」を選択すると、上の画面になりますので、赤枠に先ほどのコードをコピペしてください。画面の左下端の「ファイルを更新」をクリックで反映されます。以上が、SNSボタンの天地幅をカスタムする方法でした。CSSはこの手の微修正をするには必ず必要ですので、興味があれば概要だけでも覚えておくといいと思います。やってみたいと思う方は是非試してみてください!あくまでもワードプレスでテーマ「Cocoon」を使用している場合のみ有効ですのでお間違いなく!カスタムについては自己責任でお願いいたします。スピードマスターにラバーベルトでレーシング風にしてみる!PROFILEこだわりスタイル東京出身、現役グラフィック・Webデザイナーのモノへのこだわり情報や日々気になった事を発信するの情報ブログを開設。趣味やガジェット、ファッションなど5つのカテゴリーでご紹介。レビュー記事制作依頼等は、お気軽にお問い合わせフォームから。defined.")}))})()タイトルとURLをコピーしました。