ここあです。
THE THORのカスタマイズシリーズも今回で第5弾！
カスタマイズできる部分はたくさんあるので
今後もまだまだ増やしていきます！＾＾
今回初めてTHE THORのカスタマイズ記事を
初めて見たというあなたのために
今までの記事を簡単におさらいをしておくと…
以上、４つのカスタマイズ方法を紹介しています。
そして、第5弾はSNSシェアボタンの
カスタマイズ方法について解説を致します！
THE THORのSNSシェアボタンは
充実していて非常に良いですよね＾＾
しかし、もっと自分のサイトの雰囲気に合う
SNSボタンにしたいという方もたくさんいると思います。
ということで、今回はTHE THORのSNSシェアボタンを
カスタマイズする方法をご紹介致しますので
ぜひ参考にしてみてください。
THE THORのSNSシェアボタンを表示する方法
まず最初にTHE THORのSNSシェアボタンを
表示させる方法について解説致します。
THE THORのSNSシェアボタンは
- 投稿記事
- 固定記事
それぞれで設定箇所が分かれているので
気を付けましょう。
SNSシェアボタンを表示させる場合は
ダッシュボードメニューから外観→カスタマイズをクリックし
投稿記事の場合は、投稿ページ設定［THE］をクリック
固定記事の場合は、固定ページ設定［THE］をクリックしましょう。
投稿ページ設定［THE］、固定ページ設定［THE］いずれかをクリックすると
以下のような「シェアボタン設定」というのがあります。
「シェアボタン設定」をクリックすると
記事の上部にシェアボタンを表示するか
下部に表示するか、また、どのシェアボタンを表示するかも
選べますので、あなたのお好みに合わせて設定してください。
設定方法の次は、カスタマイズ方法です。
THE THORのSNSシェアボタンをカスタマイズする方法
実は、THE THORのSNSシェアボタンのデザインは
先にご紹介した１種類だけではありません。
設定ボタンだけで簡単に変えることができます。
例えば、こんなデザインや
こんなデザイン
こんなバランスに変えることもできます。
これらを設定する場所はダッシュボードメニューから
外観 → カスタマイズ → パーツスタイル設定［THE］をクリックし
そしてさらに、一番下にあるシェアボタン設定（個別ページ用）を
クリックするとデザインを色々と変更することができます。
個人的には設定箇所を全てまとめてもらえると嬉しいんですけどね＾＾；
SNSシェアボタンのパターンは全部で11種類ありますので
設定だけで変更したいというあなたは、ぜひ上記
シェアボタン設定（個別ページ用）からデザインを変更してみてくださいね。
THE THORのSNSシェアボタンをCSSで変更する方法
ここからは、SNSのシェアボタンを設定だけではなく
もっとオリジナルにカスタマイズしたい
そんな風に思うあなたのためのカスタマイズ方法です。
ということで、そんなこだわり屋さんのあなたは
CSSコードを使ってTHE THORのSNSシェアボタンを
カスタマイズしましょう。
そのためのCSSコード記述先は
ダッシュボードメニューから外観 → カスタマイズをクリックし
さらに最下部にある追加CSSをクリック
以下の部分にコピペするようにしてくださいね。
そして、CSSコードがコピペできたら最後に
「公開ボタン」をクリックしましょう。
ということで、いよいよCSSコードの紹介です＾＾
THE THORのSNSシェアボタンを可愛らしくカスタマイズ！
1つ目のカスタマイズ方法は、私が今、STORKでも採用している
丸型のSNSシェアボタンです。
SNSボタンが主張し過ぎず、丸みもあって可愛いので
女性ブロガーさんにオススメです。
PCでの検証画面ですが、スマホではこんな感じに見えます。
また、ボタンのカラーコードを全て同じ色で統一すると
ボタンによる賑やかさがなくなります。
ということで、THE THORのSNSシェアボタンを
丸型に変更したい場合は、以下のCSSコードをコピペしましょう。
- 追加CSSにコピペ
@media screen and (min-width: 479px) {.socialList {list-style: none;display: flex;flex-wrap: wrap;justify-content: center;}.socialList ul li{display: flex;}.socialList__item{width:40px;}.socialList-type11 .socialList__link::after {content: attr(title);display:none;}.socialList-type11 .socialList__item {line-height: 40px;margin: 0px;margin-right:3px;}.socialList-type11 .socialList__link {color: #fff;border-radius: 20px;transition: .15s;}}@media screen and (max-width: 479px) {.socialList {list-style: none;display: flex;flex-wrap: wrap;justify-content: center;}.socialList-type11 .socialList__link::after {content: attr(title);display:none;
}.socialList-type11 .socialList__item {line-height: 32px;margin: 0px;margin-right:3px;}.socialList-type11 .socialList__link {border-radius: 50%;}}
また、ボタンのカラーを全て統一したい場合は
以下のCSSコードをそれぞれ2箇所
}}
の間にコピペしてください。
※ボタンのカラーを統一しない場合、ここから先のコードは追加不要です。
なぜ、2箇所に挿入するかというと
PC版とスマホ版でコードを分けているからです。
※レスポンシブ対応にしてあります。
- 追加CSSにコピペ
.socialList__link.icon-facebook,.socialList__link.icon-twitter,.socialList__link.icon-google-plus,.socialList__link.icon-hatenabookmark,.socialList__link.icon-pocket,.socialList__link.icon-line,.socialList__link.icon-linkedin,.socialList__link.icon-pinterest {background: #ff7a99;}
以下のように挿入できたらOKです。
↓上のコード（PC・タブレット用）
↓下のコード（スマホ用）
ということで、分からない場合は諦めてください（笑）
全色統一のSNSシェアボタンは1カ所で
ボタンカラーを指定しているので、もしも色を変更したい場合は
.socialList__link.icon-facebook,.socialList__link.icon-twitter,.socialList__link.icon-google-plus,.socialList__link.icon-hatenabookmark,.socialList__link.icon-pocket,.socialList__link.icon-line,.socialList__link.icon-linkedin,.socialList__link.icon-pinterest {background: #ff7a99;}上記コードbackground: #ff7a99;のカラーコード
#ff7a99;をあなたの好きな色に変えてください。
それでボタンの色がピンクから指定色に一気に変わります。
THE THORのSNSシェアボタンをさらにスッキリ！
ここでは通常の設定できる文字なしのSNSシェアボタンを
さらにスッキリ見せるため、背景を白に変更する方法を
解説いたします。
ぱっと見は非常にシンプルですが逆に、マウスを乗せた時は
色が変わるよう分かりやすくしてあります。
背景が白いSNSシェアボタンのCSSコードはこちら
- 追加CSSにコピペ
.socialList {list-style: none;display: flex;flex-wrap: wrap;justify-content: space-between;}.socialList__item{width:11.8%;}.socialList-type11 .socialList__link::after {content: attr(title);display:none;}.socialList-type11 .socialList__item {height: 35px;line-height: 35px;margin: 0px;}.socialList__link.icon-facebook {border:solid 1px #3b5998;color:#3b5998;background:#fff;}.socialList__link.icon-facebook:hover {background:#3b5998;color:#fff;}.socialList__link.icon-twitter {border:solid 1px #00b0ed;color:#00b0ed;background:#fff;}.socialList__link.icon-twitter:hover {background:#00b0ed;color:#fff;}.socialList__link.icon-google-plus {border:solid 1px #df4A32;color:#df4A32;background:#fff;}.socialList__link.icon-google-plus:hover {background:#df4A32;color:#fff;}.socialList__link.icon-hatenabookmark {border:solid 1px #008fde;color:#008fde;background:#fff;}.socialList__link.icon-hatenabookmark:hover {background:#008fde;color:#fff;}.socialList__link.icon-pocket {border:solid 1px #eb4654;color:#eb4654;background:#fff;}.socialList__link.icon-pocket:hover {background:#eb4654;color:#fff;}.socialList__link.icon-line {border:solid 1px #00c300;color:#00c300;background:#fff;}.socialList__link.icon-line:hover {background:#00c300;color:#fff;}.socialList__link.icon-linkedin {border:solid 1px #0e76a8;color:#0e76a8;background:#fff;}.socialList__link.icon-linkedin:hover {background:#0e76a8;color:#fff;}.socialList__link.icon-pinterest {border:solid 1px #cb2027;color:#cb2027;background:#fff;}.socialList__link.icon-pinterest:hover {background:#cb2027;color:#fff;}
ちなみにスマホではこんな感じに見えます。
THE THORのSNSシェアボタンをスッキリ可愛く！
続いて、バリエーションとして無くてはおかしい
丸型で背景が白のSNSシェアボタンです（笑）
こちらもボタンにマウスを乗せると
色が変わるようになっています。
私のサイトの逆パターンだと思ってください＾＾
鬼のように長いCSSコードはこちらです（笑）
- 追加CSSにコピペ
@media screen and (min-width: 479px) {.socialList {list-style: none;display: flex;flex-wrap: wrap;justify-content: center;}.socialList ul li{display: flex;}.socialList__item{width:40px;}.socialList-type11 .socialList__link::after {content: attr(title);display:none;}.socialList-type11 .socialList__item {line-height: 37px;margin: 0px;margin-right:3px;}.socialList-type11 .socialList__link {color: #fff;border-radius: 20px;transition: .15s;}.socialList__link.icon-facebook {border:solid 1px #3b5998;color:#3b5998;background:#fff;}.socialList__link.icon-facebook:hover {background:#3b5998;color:#fff;}.socialList__link.icon-twitter {border:solid 1px #00b0ed;color:#00b0ed;background:#fff;}.socialList__link.icon-twitter:hover {background:#00b0ed;color:#fff;}.socialList__link.icon-google-plus {border:solid 1px #df4A32;color:#df4A32;background:#fff;}.socialList__link.icon-google-plus:hover {background:#df4A32;color:#fff;}.socialList__link.icon-hatenabookmark {border:solid 1px #008fde;color:#008fde;background:#fff;}.socialList__link.icon-hatenabookmark:hover {background:#008fde;color:#fff;}.socialList__link.icon-pocket {border:solid 1px #eb4654;color:#eb4654;background:#fff;}.socialList__link.icon-pocket:hover {background:#eb4654;color:#fff;}.socialList__link.icon-line {border:solid 1px #00c300;color:#00c300;background:#fff;}.socialList__link.icon-line:hover {background:#00c300;color:#fff;}.socialList__link.icon-linkedin {border:solid 1px #0e76a8;color:#0e76a8;background:#fff;}.socialList__link.icon-linkedin:hover {background:#0e76a8;color:#fff;}.socialList__link.icon-pinterest {border:solid 1px #cb2027;color:#cb2027;background:#fff;}.socialList__link.icon-pinterest:hover {background:#cb2027;color:#fff;}}@media screen and (max-width: 479px) {.socialList {list-style: none;display: flex;flex-wrap: wrap;justify-content: center;}.socialList-type11 .socialList__link::after {content: attr(title);display:none;}.socialList-type11 .socialList__item {line-height: 32px;margin: 0px;margin-right:3px;}.socialList-type11 .socialList__link {border-radius: 50%;}.socialList__link.icon-facebook {border:solid 1px #3b5998;color:#3b5998;background:#fff;}.socialList__link.icon-facebook:hover {background:#3b5998;color:#fff;}.socialList__link.icon-twitter {border:solid 1px #00b0ed;color:#00b0ed;background:#fff;}.socialList__link.icon-twitter:hover {background:#00b0ed;color:#fff;}.socialList__link.icon-google-plus {border:solid 1px #df4A32;color:#df4A32;background:#fff;}.socialList__link.icon-google-plus:hover {background:#df4A32;color:#fff;}.socialList__link.icon-hatenabookmark {border:solid 1px #008fde;color:#008fde;background:#fff;}.socialList__link.icon-hatenabookmark:hover {background:#008fde;color:#fff;}.socialList__link.icon-pocket {border:solid 1px #eb4654;color:#eb4654;background:#fff;}.socialList__link.icon-pocket:hover {background:#eb4654;color:#fff;}.socialList__link.icon-line {border:solid 1px #00c300;color:#00c300;background:#fff;}.socialList__link.icon-line:hover {background:#00c300;color:#fff;}.socialList__link.icon-linkedin {border:solid 1px #0e76a8;color:#0e76a8;background:#fff;}.socialList__link.icon-linkedin:hover {background:#0e76a8;color:#fff;}.socialList__link.icon-pinterest {border:solid 1px #cb2027;color:#cb2027;background:#fff;}.socialList__link.icon-pinterest:hover {background:#cb2027;color:#fff;}}
おまけ）無駄に動くSNSシェアボタン！
最後は、無駄に動くSNSシェアボタンです（笑）
何が無駄かと言うと、アイコンの上にマウスを乗せた時
クルクルと回転し、最終的に上記画像のTwitterのように
反転したアイコンになるアニメーションを実装したボタンです。
百聞は一見に如かず。気になる方はCSSコードをコピーして
あなた自身の目でご確認ください＾＾
- 追加CSSにコピペ
@media screen and (min-width: 479px) {.socialList {list-style: none;display: flex;flex-wrap: wrap;justify-content: center;}.socialList ul li{display: flex;}.socialList__item{width:40px;}.socialList-type11 .socialList__link::after {content: attr(title);display:none;}.socialList-type11 .socialList__item {line-height: 40px;margin: 0px;margin-right:3px;}.socialList-type11 .socialList__link {color: #fff;border-radius: 20px;transition: .15s;}}@media screen and (max-width: 479px) {.socialList {list-style: none;display: flex;flex-wrap: wrap;justify-content: center;}.socialList-type11 .socialList__link::after {content: attr(title);display:none;}.socialList-type11 .socialList__item {line-height: 32px;margin: 0px;margin-right:3px;}.socialList-type11 .socialList__link {border-radius: 50%;}}.socialList__link.icon-facebook{transition: .6s;}.socialList__link.icon-facebook:hover {-webkit-transform: rotateY(360deg);transform: rotateY(360deg);border:solid 1px #3b5998;color:#3b5998;background:#fff;}.socialList__link.icon-twitter {transition: .6s;}.socialList__link.icon-twitter:hover {-webkit-transform: rotateY(360deg);transform: rotateY(360deg);border:solid 1px #00b0ed;color:#00b0ed;background:#fff;}.socialList__link.icon-google-plus {transition: .6s;}.socialList__link.icon-google-plus:hover {-webkit-transform: rotateY(360deg);transform: rotateY(360deg);border:solid 1px #df4A32;color:#df4A32;background:#fff;}.socialList__link.icon-hatenabookmark {transition: .6s;}.socialList__link.icon-hatenabookmark:hover {-webkit-transform: rotateY(360deg);transform: rotateY(360deg);border:solid 1px #008fde;color:#008fde;background:#fff;}.socialList__link.icon-pocket {transition: .6s;}.socialList__link.icon-pocket:hover {-webkit-transform: rotateY(360deg);transform: rotateY(360deg);border:solid 1px #eb4654;color:#eb4654;background:#fff;}.socialList__link.icon-pocket {transition: .6s;}.socialList__link.icon-pocket:hover {-webkit-transform: rotateY(360deg);transform: rotateY(360deg);border:solid 1px #eb4654;color:#eb4654;background:#fff;}.socialList__link.icon-line {transition: .6s;}.socialList__link.icon-line:hover {-webkit-transform: rotateY(360deg);transform: rotateY(360deg);border:solid 1px #00c300;color:#00c300;background:#fff;}.socialList__link.icon-linkedin {transition: .6s;}.socialList__link.icon-linkedin:hover {-webkit-transform: rotateY(360deg);transform: rotateY(360deg);border:solid 1px #0e76a8;color:#0e76a8;background:#fff;}.socialList__link.icon-pinterest {transition: .6s;}.socialList__link.icon-pinterest:hover {-webkit-transform: rotateY(360deg);transform: rotateY(360deg);border:solid 1px #cb2027;color:#cb2027;background:#fff;}
ということで、以上4パターンほどご紹介しましたが
あなたのお気に入りがありましたら、
ぜひコピペしてみてくださいね。
THE THORのSNSボタンをカスタマイズまとめ
今回はTHE THORのSNSシェアボタンを
コピペだけでカスタマイズする方法をご紹介致しました。
先にお伝えしておきますが、私は決して「THE THOR」の
粗探しをしている訳ではありません＾＾；
というより、むしろその逆で
私もTHE THORユーザーですし、
THE THORは非常に良いテーマだと思うからこそ
デザイン面でより満足度を高めてもらうために
カスタマイズ記事を書こうと考えました。
それがデザイナーである私の使命だと思うから。
また、自分のサイトに愛着が湧けば湧くほど
サイトの運営を長くすることができます。
実はこれって非常に重要なことなんですね。
なぜなら、今やブログやサイトを通じて収益化したいと
考える人がたくさんいるし、かと言ってサイトやブログを
収益化するには最低でも半年〜1年はかかるからです。
つまり、ネットビジネスはあくまでもビジネスなので
ブログやサイトでビジネスの仕組みが構築できるまでは
収益化まで確実に時間がかかります。
ブログのコンテンツを充実させるのも
それをネットユーザーに読んでもらうのも
読者の信用を高めるのもそんな短期間ではできません。
だからこそ、継続力が大事なんです。
なので、ブログやサイトで収益化するには
読者に対し愛情を持って価値のあるコンテンツを提供し
自分も読者と成長しながら、ブログを楽しんで運営していく
それが非常に大事です。
そして、自分のサイトやブログに愛着が湧いてくれば
- 記事を書き、コンテンツを増やすのも
- デザインをカスタマイズするのも
楽しくなります。
そうして、楽しんでサイト運営していると
次第に読者の満足度も上がり、信用も高くなっていきます。
そうなれば、後は簡単。放っておいても商品は売れます（笑）
もちろん、クリック報酬型広告もクリックされるようになるでしょう。
冷静に考えてみてください。
今日、初めて出会った人に商品を売られて
あなたは購入しようと思いますか？
私は思わないです。
ていうか、絶対嫌ですし、買いません。
怖いもん（笑）
人間の心理ってそういうもんです。
だから、信用の積み重ねは大事なんですよ。
ということで、まずは
自分のサイトを我が子のように可愛がりながら
楽しんでサイト運営をしましょう。
ほんと「継続は力なり」です。
なので、私はあなたがしっかりと楽しんで継続できるようにと
これからもカスタマイズ記事を増やしていきます。
かなり話がそれましたが（笑）
サイトの収益化にも困っている方もいると思いますので
何か少しでも気付きになれば嬉しいです。
ということで、
最後までお読みいただきありがとうございました！
