Cocoon【Cocoon】サイドバーのSNSフォローボタンをカスタマイズWordPress2019.07.03WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はサイドバーにウィジェットで表示する「SNSフォローボタン」のカスタマイズをしてみました。サイドバーにプロフィールボックスを置いてる人は必要ないですが、プロフィールじゃなくてSNSボタンだけ置きたいという場合もあると思います。このブログではこんな感じで通常は色なし、マウスホバーで色が変わるようにしてみました。他の形や色などのパターンも紹介しますので参考にしてみてください。表示するボタンの設定Cocoon設定の「SNSフォローボタン」を確認ウィジェットの設定CSSコードその1(当ブログと同じ設定)CSSコードその2(最初からカラー表示)CSSコードその3(ボタンを丸くする)まとめサイドバーにSNSフォローボタンを表示する準備まずはサイドバーにSNSフォローボタンを表示するための手順から紹介します。表示できている人は飛ばしてください。URLまでの必要な部分にURLを入力してから一番下の「プロフィールを更新」のボタンを押します。Cocoon設定の「SNSフォローボタン」を確認デフォルトだとSNSボタンの上に「◯◯をフォローする」という文字が出ると思いますが、これを消すには管理画面のメニューから「Cocoon設定>SNSフォローボタン」を開いて、「フォローメッセージ」を削除してください。feedlyとRSSのボタンを表示するかどうかも変更できるので、必要であれば設定してください。その他の部分は変更せずにそのままで大丈夫です。次に「外観>ウィジェット」を開いて「サイドバー」のウィジェットに「[C]SNSフォローボタン」を追加します。「タイトル」が見出しになるのでお好きな文字を入力してください。未入力だと自動的に「SNSフォローボタン」という見出しになります。これでサイドバーにフォローボタンが表示されていると思います。【Cocoon】サイドバーの見出しデザインをカスタマイズ...web-ashibi.net2018.04.22CSSコードその1(当ブログと同じ設定)あとはCSSを追加するだけですが、以下は現在このブログで使っているのと全く同じコードです。#f26522;}上記コードで冒頭で紹介した画像のようになります。#c522b8;}上記コードだとこうなります。/*ボタンの幅*/」の数字を調整してください。!important;}上記コードだとこうなります。InstagramのボタンだけCSSで背景色を変更しています。0;」にすれば四角になります。「4px」とかだと少し角が丸い四角といった感じ。お好みで調整してください。CSSコードその3(ボタンを丸くする)ボタンの形を正円にしたい場合は以下のコードを使ってください。!important;}上記コードでこうなります。ボタンやアイコンの大きさはCSSでお好みのサイズに変えてください。「justify-content」はFlexboxのプロパティの1つで、「space-between」だと等間隔に配置されます。まとめ応用すればカラーを変えたり色々とアレンジできると思います。サイトの雰囲気に合わせて調整してみてください。AM大変ためになる記事ありがとうございます。AMコメントありがとうございます。Cocoon設定の「SNSフォロー」内にある「フォローメッセージ」を削除すると消えると思います。それも記事に追加しておいたほうが良さそうですね。気付かせていただいてありがとうございます。返信コメントをキャンセルメールアドレスが公開されることはありません。超オススメ!iMacの周辺機器&アクセサリ【オシャレ&機能的】タイトルとURLをコピーしました。