【コピペだけ!】THE THORのSNSシェアボタンをカスタマイズ!

【コピペだけ!】THE THORのSNSボタンをカスタマイズ!

 

ここあです。

 

THE THORのカスタマイズシリーズも今回で第5弾!

カスタマイズできる部分はたくさんあるので

今後もまだまだ増やしていきます!^^

 

今回初めてTHE THORのカスタマイズ記事を

初めて見たというあなたのために

今までのおさらいを簡単にしておくと…

 

以上、4つのカスタマイズ方法を紹介しています。

 

そして、第5弾はSNSシェアボタンの

カスタマイズ方法について解説を致します!

 

THE THORのSNSシェアボタンは

充実していて非常に良いですよね^^

SNSシェアボタン

 

 

しかし、私の個人的な意見としては

少しゴチャついて見える印象があります。

 

正直、FaceBookやTwitterなどに関しては

すでに大半の人がアイコンだけ判別できるし

今更、説明の文字が必要だとは思いません。

 

また、文字があることでSNSボタンは古臭く見え

スタイリッシュではない印象になっています。

 

なので、逆に文字を消し、アイコンを見やすくする方が

スタイリッシュになり、ユーザビリティは上がるはず。たぶん

 

ということで、今回はTHE THORのSNSシェアボタンを

スッキリとカスタマイズする方法をご紹介致しますので

SNSシェアボタンに不満のある方は、ぜひ参考にしてみてください。

 

※カスタマイズは自己責任でお願いします。

 

THE THORのSNSシェアボタンを表示する方法

まず最初にTHE THORのSNSシェアボタンを

表示させる方法について解説致します。

 

THE THORのSNSシェアボタンは

  • 投稿記事
  • 固定記事

それぞれで設定箇所が分かれているので

気を付けましょう。

 

SNSシェアボタンを表示させる場合は

ダッシュボードメニューから外観→カスタマイズをクリックし

ダッシュボードメニュー

 

 

投稿記事の場合は、投稿ページ設定[THE]をクリック

投稿ページ設定

 

 

固定記事の場合は、固定ページ設定[THE]をクリックしましょう。

固定ページ設定

 

 

投稿ページ設定[THE]、固定ページ設定[THE]いずれかをクリックすると

以下のような「シェアボタン設定」というのがあります。

シェアボタン設定

 

 

「シェアボタン設定」をクリックすると

 

記事の上部にシェアボタンを表示するか

下部に表示するか、また、どのシェアボタンを表示するかも

選べますので、あなたのお好みに合わせて設定してください。

シェアボタン設定

 

設定方法の次は、カスタマイズ方法です。

 

THE THORのSNSシェアボタンをカスタマイズする方法

THE THORのSNSシェアボタンは

CSSコードでカスタマイズします。

 

なので、これから紹介するCSSコードは

ダッシュボードメニューから外観 → カスタマイズをクリックし

ダッシュボードメニュー

 

 

さらに最下部にある追加CSSをクリック

追加CSS

 

 

以下の部分にコピペしてください。

追加CSS

 

 

CSSコードがコピペできたら最後に

「公開ボタン」をクリックしてくださいね。

追加CSS

 

ということで、いよいよCSSコードの紹介です^^

 

THE THORのSNSシェアボタンを可愛らしくカスタマイズ!

THE THORのSNSシェアボタンを可愛らしくカスタマイズ!

 

1つ目のカスタマイズ方法は、私が今、STORKでも採用している

丸型のSNSシェアボタンです。

 

SNSボタンが主張し過ぎず、丸みもあって可愛いので

女性ブロガーさんにオススメです。

 

PCでの検証画面ですが、スマホではこんな感じに見えます。

 

 

また、ボタンのカラーコードを全て同じ色で統一すると

ボタンによる賑やかさがなくなります。

SNSシェアボタンカスタマイズ

 

 

ということで、THE THORのSNSシェアボタンを

丸型に変更したい場合は、以下のCSSコードをコピペしましょう。

/* SNSボタンカスタマイズ */
@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) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
/* SNSボタンカスタマイズ */
.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版とスマホ版でコードを分けているからです。

※レスポンシブ対応にしてあります。

 

.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シェアボタンを文字なしでスッキリ!

THE THORのSNSシェアボタンを文字なしでスッキリ!

 

文字がなくなるだけでかなりスッキリ見える

THE THORのSNSシェアボタン。

 

正直、私はこちらのスッキリした感じの方が

デフォルトのシェアボタンより良いと思います。

 

そして何よりも大きいのは

文字がある時と、ない時でのスマホでの見え方の違い。

 

↓カスタマイズ前

↓カスタマイズ後

 

あなたはどちらの見え方が好きですか?

 

ということで「文字がない方が良い!」と思うあなたは

CSSコードをコピペしましょう!

そう思わない方は今のままで…(笑)

/* SNSボタンカスタマイズ */
.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;
}

 

コピぺするだけなので超簡単ですよね^^

 

THE THORのSNSシェアボタンをさらにスッキリ!

THE THORのSNSシェアボタンをさらにスッキリ!

 

先ほどの文字を消したSNSシェアボタンの応用編です。

さらにスッキリ見せるため、背景を白に変更しています。

 

逆に、マウスを乗せた時は色が変わるよう

分かりやすくしてあります。

マウスホバー

 

 

背景が白いSNSシェアボタンのCSSコードはこちら

/* SNSボタンカスタマイズ */
.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シェアボタンをスッキリ可愛く!

THE THORのSNSシェアボタンをスッキリ可愛く!

 

続いて、バリエーションとして無くてはおかしい

丸型で背景が白のSNSシェアボタンです(笑)

 

こちらもボタンにマウスを乗せると

色が変わるようになっています。

私のサイトの逆パターンだと思ってください^^

 

鬼のように長いCSSコードはこちらです(笑)

/* SNSボタンカスタマイズ */
@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) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
/* SNSボタンカスタマイズ */
.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シェアボタン!

 

最後は、無駄に動くSNSシェアボタンです(笑)

 

何が無駄かと言うと、アイコンの上にマウスを乗せた時

クルクルと回転し、最終的に上記画像のTwitterのように

反転したアイコンになるアニメーションを実装したボタンです。

 

百聞は一見に如かず。気になる方はCSSコードをコピーして

あなた自身の目でご確認ください^^

/* SNSボタンカスタマイズ */
@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) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
/* SNSボタンカスタマイズ */
.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;
}

 

ということで、以上5パターンほどご紹介しましたが

あなたのお気に入りがありましたら、

ぜひコピペしてみてくださいね。

 

THE THORのSNSボタンをカスタマイズまとめ

THE THORのSNSボタンをカスタマイズまとめ

 

今回はTHE THORのSNSシェアボタンを

コピペだけでカスタマイズする方法をご紹介致しました。

 

先にお伝えしておきますが、私は決して「THE THOR」の

粗探しをしている訳ではありません^^;

 

というより、むしろその逆で

私もTHE THORユーザーですし、

THE THORは非常に良いテーマだと思うからこそ

 

デザイン面でより満足度を高めてもらうために

カスタマイズ記事を書こうと考えました。

それがデザイナーである私の使命だと思うから。

 

また、自分のサイトに愛着が湧けば湧くほど

サイトの運営を長くすることができます。

実はこれって非常に重要なことなんですね。

 

なぜなら、今やブログやサイトを通じて収益化したいと

考える人がたくさんいるし、かと言ってサイトやブログを

収益化するには最低でも半年〜1年はかかるからです。

 

つまり、ネットビジネスはあくまでもビジネスなので

ブログやサイトでビジネスの仕組みが構築できるまでは

収益化まで確実に時間がかかります。

 

ブログのコンテンツを充実させるのも

それをネットユーザーに読んでもらうのも

読者の信用を高めるのもそんな短期間ではできません。

 

だからこそ、継続力が大事なんです。

 

なので、ブログやサイトで収益化するには

読者に対し愛情を持って価値のあるコンテンツを提供し

自分も読者と成長しながら、ブログを楽しんで運営していく

 

それが非常に大事です。

 

そして、自分のサイトやブログに愛着が湧いてくれば

  • 記事を書き、コンテンツを増やすのも
  • デザインをカスタマイズするのも

楽しくなります。

 

そうして、楽しんでサイト運営していると

次第に読者の満足度も上がり、信用も高くなっていきます。

 

そうなれば、後は簡単。放っておいても商品は売れます(笑)

もちろん、クリック報酬型広告もクリックされるようになるでしょう。

 

冷静に考えてみてください。

今日、初めて出会った人に商品を売られて

あなたは購入しようと思いますか?

 

私は思わないです。

ていうか、絶対嫌ですし、買いません。

怖いもん(笑)

 

人間の心理ってそういうもんです。

だから、信用の積み重ねは大事なんですよ。

 

ということで、まずは

自分のサイトを我が子のように可愛がりながら

楽しんでサイト運営を運営しましょう。

 

ほんと「継続は力なり」です。

なので、私はあなたがしっかりと楽しんで継続できるようにと

これからもカスタマイズ記事を増やしていきます。

 

かなり話がそれましたが(笑)

サイトの収益化にも困っている方もいると思いますので

何か少しでも気付きになれば嬉しいです。

 

ということで、最後までお読みいただき

ありがとうございました!

 

SNSシェアボタンに関しては、コピペだけで完結するので

分からないことはないと思いますが

 

万が一設定で分からないことがありましたら

お気軽にご相談ください。

「ここあ」に問い合わせをする

 

 

合わせて読みたい!

 

ネットで毎月30万円以上の自動収益を得ながら
「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●「デザインばか」のここあが半年で収益化したネットビジネスのノウハウ
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●ここあが副業にネットビジネスをすすめる理由
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●パソコン音痴でもパソコン一台で年収1000万円稼ぐ手法
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
●副業解禁の時代をナメているとこれからどうなってしまうのか?

などなど、掲載できるものだけをピックアップしてみました。

無料メール講座本編では、もっと秘匿性の高い内容もたくさん出していきます。

また、私がこれまで100万円以上投資して学んだ有料セミナーでしか手に入らない情報もコッソリ無料メール講座でお伝えしていきます。

※この無料メール講座は、有料講座で聞いた内容も多数含まれており、予告なく募集を終了する可能性があります。

ですので、募集している今のうちにプレゼントを受け取ってくださいね。

下記のボタンをクリックして

・「あなたのお名前
・「メールアドレス

を入力してご登録お願いします。

ここあ公式「LIFE DESIGN通信

お名前
メールアドレス

ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年に独立。現在はネットとデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。「一度きりの人生」あなたも私と一緒に謳歌しませんか?