WordPress Cocoon

【Cocoon】サイドバーのSNSフォローボタンをカスタマイズ

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はサイドバーにウィジェットで表示する「SNSフォローボタン」のカスタマイズをしてみました。

サイドバーにプロフィールボックスを置いてる人は必要ないですが、プロフィールじゃなくてSNSボタンだけ置きたいという場合もあると思います。

このブログではこんな感じで通常は色なし、マウスホバーで色が変わるようにしてみました。

他の形や色などのパターンも紹介しますので参考にしてみてください。それではいってみましょう〜!

サイドバーにSNSフォローボタンを表示する準備

まずはサイドバーにSNSフォローボタンを表示するための手順から紹介します。すでに表示できている人は飛ばしてください。

表示するボタンの設定

管理画面のメニューから「ユーザー>あなたのプロフィール」を開いて、サイト〜GitHub URLまでの必要な部分にURLを入力してから一番下の「プロフィールを更新」のボタンを押します。

ウィジェットの設定

次に「外観>ウィジェット」を開いて「サイドバー」のウィジェットに「[C]SNSフォローボタン」を追加します。

「タイトル」が見出しになるのでお好きな文字を入力してください。未入力だと自動的に「SNSフォローボタン」という見出しになります。

これでサイドバーにフォローボタンが表示されていると思います。見出しのデザイン変更については以前に書いたので参考にどうぞ↓

CSSコードその1(当ブログと同じ設定)

あとはCSSを追加するだけですが、以下は現在このブログで使っているのと全く同じコードです。

上記コードで冒頭で紹介した画像のようになります。続いてFacebookとInstagramも入れたバージョンのコードがこちら↓

上記コードだとこうなります。ボタンの数によって2行目の「width: 18%; /*ボタンの幅*/」の数字を調整してください。

FeedlyとRSSボタンを非表示にしたい場合

FeedlyとRSSのボタンは設定に関係なく表示されるので、消したい場合は下記のCSSを追記すればオッケーです。

CSSコードその2(最初からカラー表示)

カスタマイズ前のカラー表示のままならコードは短くなります↓

上記コードだとこうなります。InstagramのボタンだけCSSで背景色を変更しています。

下から2行目の「border-radius: 50px;」を「border-radius: 0;」にすれば四角になります。「4px」とかだと少し角が丸い四角といった感じ。お好みで調整してください。

CSSコードその3(ボタンを丸くする)

ボタンの形を正円にしたい場合は以下のコードを使ってください。

上記コードでこうなります。ボタンやアイコンの大きさはCSSでお好みのサイズに変えてください。

1〜3行目のコードと、12行目の「margin: 0 6px;」を削除すると、デフォルトの指定である「justify-content: space-between;」が適用されるので幅いっぱいに等間隔に並びます↓

justify-content」はFlexboxのプロパティの1つで、「space-between」だと等間隔に配置されます。

まとめ

応用すればカラーを変えたり色々とアレンジできると思います。サイトの雰囲気に合わせて調整してみてください。

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

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