WordPress無料テーマ「Cocoon」のソーシャルアイコンカスタマイズサンプル

どうもこんにちわ、Studio Argusです。

本日は、WordPress無料テーマ「Cocoon」のソーシャルアイコンのカスタマイズについてです。

ソーシャルアイコンは、シェアボタンとフォローボタンと２種類あり、デフォルト状態ですと以下のように表示されます。

こちらはテーマのスキン「Natural（グリーン）」を使用している状態ですので少し柔らかめのカラーリングにはなっていますが、基本的な形としてはこのような感じになります。

こちらを、少しカスタマイズして見た目の印象を変えてみようと思い、やってみました。

まずは、アイキャッチの下に右寄せした、丸アイコンの形です。

右寄せして表示させるパターンは、メディアサイトなどでも良く見られるデザインですね。

次に、アイキャッチの下にタイトルを中央寄せにして表示した後、ソーシャルアイコンを枠線無しで同じく中央寄せして表示したものです。

白基調のサイトですと、とても上品にまとまるデザインになります。

今回はアイコンのみ表示させたパターンですが、SNS名をキャプションとして表示させて同様にレイアウトを変更することも出来ます。

デフォルトのままでも充分ですし、何より分かりやすいとは思うのですが、サイトデザインから大きく浮いてしまうようであれば、デザインの変更も検討する価値はあるのでは、と思います。

これらのカスタマイズは、ほとんどがCSSです。

少しだけCSS以外を変更しているものもありますが、ソーシャルアイコンに限っては、CSSだけで変更可能です。

---

このようなソーシャルアイコンの変更なども、サイトデザインに合わせたカスタマイズを承ります。どうぞお気軽にご相談ください。

ほんの少しのことですが、サイトデザインが全体的にまとまると訪問者からの印象も良くなります。よければご検討ください。