SWELLの「シェアボックス」をカスタマイズ!

2019 12/07
SWELLの「シェアボックス」をカスタマイズ!

SWELLのバージョン1.3.6のカスタマイズ方法を追記しました 。

目次

SWELLテーマの記事内シェアボックス

変更前のシェアボックス

SWELLテーマの記事内のシェアボタンが
これ

画像

そのままでもいいのですが、「シェアボタン??」って思う方も多いと思う。
また、「押してほしい感」がないので「そのままスルー」をされそう。

記事をシェアして欲しいのに・・。

って事で、こんな感じにカスタマイズしてみます!

変更後のシェアボックス

画像

これだと、「記事をシェアして!」って読み手にも伝わること間違いなし!
早速デザインの変更に取り掛かりましょう!

記事内シェアボックスの変更手順

CSSを追加する準備

CSSの追加に関しては安全な方法にて記事を書きますが、あくまでも自己責任にて行ってください。
もし、万が一のトラブルが起きても、当方にて責任は致しません。

サイトのデザインを変更するのは「CSS」という言語を使っておこないます。
CSSについてここでは詳しく説明をしませんが、サイトに影響が出ない手順で説明をしていきますね。

テーマカスタマイザーの追加CSSとは

テーマカスタマイザーの「追加CSS」を使ってCSSを記載していきます。

追加CSSのいいところ
  • 標準機能なので誰でも簡単にできる
  • 入力と同時にCSSが反映される
  • テーマをアップデートしても消えない

テーマカスタマイザーの追加CSSの開き方

管理画面(ダッシュボード)の左側にあるメニュー一覧の中の
外観」「カスタマイズ」をクリックします。

テーマカスタマイザーを開いたら、左側のメニューの「追加CSS」をクリックしてください。

画像

すると右の画像(スマホなら下)のような表示がされるので
赤丸を囲んだところに「CSS」を記載していきます。

画像

追加するCSS

では先ほど開いた「追加CSS」にコードをコピペしましょう。
以下のコードを張り付けてくださいね。

SWELLのバージョン1.3.6以上の場合

.c-shareBtns.-top, .c-shareBtns.-bottom {
    position: relative;
}
.c-shareBtns.-top::before, .c-shareBtns.-bottom::before {
    position: absolute;
    top: 10%;
    color: #888;
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 120%;
    content: "\ この記事をみんなにシェアしてね! /";
}
.c-shareBtns.-top ul.c-shareBtns__list, .c-shareBtns.-bottom ul.c-shareBtns__list {
    background: #eaedf2;
    padding: 50px 15px 25px;
    justify-content: center;
}
.c-shareBtns.-top li.c-shareBtns__item, .c-shareBtns.-bottom li.c-shareBtns__item {
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.c-shareBtns.-top li.c-shareBtns__item:hover, .c-shareBtns.-bottom li.c-shareBtns__item:hover {
    box-shadow: 1px 3px 5px 0px rgba(0,0,0,.3);
    transition: .5s;
}
.c-shareBtns.-top .hov-flash-up:hover, .c-shareBtns.-bottom .hov-flash-up:hover {
    -webkit-animation: none;
    animation: none;
}

SWELLのバージョン1.3.5.2までの場合

article > ul.sns_share_btns {
    position: relative;
    background: #eaedf2;
    padding: 35px 15px 25px;
    justify-content: center;
}
article > ul.sns_share_btns::before {
    position: absolute;
    top: 10%;
    left: 50%;
    color: #888;
	width: 100%;
	text-align: center;
    font-weight: 700;
    font-size: 3.2vw;
	-webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    content: "\ シェアはこっち! /";
}
article > .solid .share_btn {
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
article > .solid .share_btn:hover {
    box-shadow: 1px 3px 6px 0px rgba(0,0,0,.5);
    transition: .5s;
}
@media screen and (min-width: 600px) {
	article > ul.sns_share_btns {
        padding: 50px 15px 25px;
    }
    article > ul.sns_share_btns::before {
        font-size: 16px;
    }
}

カスタマイザー内のサイトを該当箇所まで表示させると変わってないですか?
もし追加CSS内で赤×やらが表示されていたら
もう一度コピペしてください。
表示を確認後、問題がなければ「公開」をクリックして保存してください。

CSSの補足 文字を変えたい場合

ちなみに「この記事をみんなにシェアしてね!」の文字を変更したい場合は
そこの文字を変更してください。

content: "シェアもできますよ!";

って感じです。

CSSの補足2 マウスカーソルにて一瞬フラッシュをさせる場合

SWELLのバージョン1.3.6以上の場合のCSSの最後にある以下のCSSを削除してください。

.c-shareBtns.-top .hov-flash-up:hover, .c-shareBtns.-bottom .hov-flash-up:hover {
    -webkit-animation: none;
    animation: none;
}

CSSの補足3 シェアボタンの固定表示には影響しません。

ちなみに記事内にあるシェアボタンのみ変化をさせるコードになっているので
固定表示のシェアボタンは変更後も変更前と同じように表示されます。

まとめ

「シェアボタンだよ!」ってアピールをすることで、
「いい記事だな」って思った読者さんがSNSでシェアをしやすい環境になります。

そうすることで、たくさんの方々に自分の記事を知ってもらえるチャンスが生まれてくるわけです。

読み手の気持ちを考える」って事がとても大切ですね!

私ももっと勉強をしないとなぁ。

この記事が気に入ったら
フォローしてね!

目次
目次