ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【⑩SNSシェアボタンを整えるCSS】

ブログ

こんにちは
ニワトリです

『ブログのSNSシェアボタンを見やすく
 オシャレにしたい・・・』

『デフォルトはボタンが
 大きくてダサい・・・』

『CSSとか難しくて分からない・・・』

こんな悩みを抱えた初心者ブロガーさんも
多いのではないでしょうか?

私もそのひとりです!!

そんなブログ初心者の私が
追加CSSでcocoonをカスタマイズしたので

やり方を紹介していきます。

cocoonの良いところ
  • wordpressの無料テーマ
  • 細かくカスタマイズができる
  • デザインの幅が広い

今回はSNSシェアボタンを変更する
方法を紹介していきます!

当ブログのSNSシェアボタンは
このようになっています。

今回のカスタマイズ
  • SNSシェアボタンの設定
  • SNSシェアボタンの調整

SNSシェアボタンを設定する方法

cocoonのデフォルトでは
上の画像のようになっています。

悪くはないですが、
少し物足りないですよね?

設定方法
  • SNSシェアボタンの設定
  • CSSをスタイルシートに貼り付ける
  • スマホとPCの両方でデザインの確認

SNSシャアの設定方法

やり方
  • wordpressメニュー
  • cocoon設定
  • SNSシェア

トップとボトムがあるので
注意してください!!ボトムです。

  • ボトムシェアボタンの表示
    ・メインカラムボトムシェアボタンを表示に✓
  • シェアメッセージ
    ・好きな言葉を入力します

  • カラム数
    ・6列
  • ロゴ・キャプション配置
    ・ロゴ・キャプション 上下
  • シェア数の表示
    ・非表示

その他の項目は自身のサイトに合わせて
好きな設定をしてください。

SNSシェア設定はこれで終わりだよ!

【コピペでOK!】SNSシェアボタンのデザインをCSSで調整する

追加CSS貼り付け時の注意点
  • 編集前にバックアップを取っておく
  • 元のCSSはそのままにする
    今回の追加CSSを前回のCSSの下から
    貼り付けていきます

やり方
  • wordpressメニュー
  • 外観
  • テーマエディター
  • スタイルCSS

スタイルシート用追加CSS

/************************************
** SNSシェアボタン
***********************************/
.sns-share, .sns-follow {
margin: 0 0 24px ;
}
.sns-share-message:before, .sns-follow-message:before, span.related-entry-main-heading.main-caption:before, .comment-title:before {/*SHARE MORE COMMENT*/
font-weight: normal;
letter-spacing:.4em;
border-radius:20px;
border: 0;
padding: 0.1em 4em;
background-color:#8b968d;
color:#fff;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}
.sns-share-message, .sns-follow-message, span.related-entry-main-heading.main-caption, .comment-title {
margin:2em;
}
.sns-share.ss-high-and-low-lc a .button-caption.button-caption{
display:none;
}
.sns-share-buttons {
padding-right:15%;
padding-left:15%;
}
.sns-share-buttons a {
transition:0.4s;
}
.sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {
width: 30px;
}
aside#related-entries.related-entries.rect-mini-card{
padding-top:.4em;
}
.comment-btn {
margin-top: 1em;
}

CSSの貼り付けが終わりましたら
左下の「ファイルを更新」を押します。

ファイルを更新を押さないと
CSSが反映されないため気をつけてください!

スマホとPCで変更したデザインが反映しているか確認する

変更したSNSシェアボタンが
スマホとPC画面の両方で
反映しているか確認をします。

SNSシェアボタンが上の画像のように
表示されていれば設定は完了です。

まとめ

さて、いかがだったでしょうか?

wordpress無料テーマcocoonを
カスタマイズする追加CSS。

今回はSNSシェアボタンについて
紹介してきました。

次回もcocoonカスタマイズについて
記事をまとめていきますね!

最後までお付き合いいただき
誠にありがとうございました。

ニワトリでした!

ニワトリ
ニワトリ

Twitterやってます。

ニワトリの自己紹介はコチラ

コメント

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