THE THORのシェアボタンの上下に文章を入れるカスタマイズ

WordPressテーマ「THE THOR」のシェアボタンのカスタマイズはじめたよ!

THE THORのシェアボタンのデザインは11種類もあるので、よっぽど暇な人以外はデザインのカスタマイズする必要性はありません。基本装備で100%満足できます。

だから、今回は上下にテキストを追加して少しでもシェアされる確率を高めるための下心丸出しのカスタマイズです。

レッボ
シェア数増やしたいなら記事の内容を充実させること考えた方がいいっすよ!

そんなこたぁ、わかっちゃいるけど記事の品質上がるまでは媚び売ってでもシェアされたいんです!

THE THORのシェアボタンの基本設定

まずはTHE THORの基本操作で設定できる内容を確認しておきましょう。

シェアボタンの種類

THE THORで使用できるシェアボタンは全部で8種類あり、下のとおりです。

※Google+は2019年に終了しているので、実際使えるのは7種類ですね。

表示するシェアボタンの設定方法

シェアボタン設定
投稿ページ設定
シェアボタン設定
シェアボタン設定
【外観】→【カスタマイズ】→【投稿ページ設定】→【シェアボタン設定】

使いたいシェアボタンを設定するだけで、横幅は勝手に調整してくれるのでめっちゃ楽勝です。

わたしも最初はいろんなボタンを配置してましたが、最終的にはTwitterとはてブの2つに落ち着きました。

シェアボタンのデザイン

THE THORで使用できるシェアボタンのデザインは全部で11種類。

どんなデザインになるかは自分でさわって確認してください。画面サイズによって2列や3列になるので自分の目で確かめるのが一番良いかと思います。

レッボ
どうせ11パターンのサンプル写真を準備するのが面倒になったんやろうな

バレてしまったか…

からあげ棒さんが詳しくまとめてくれてますので確認したい方は、THE THOR ザ・トール SNSボタン (シェアボタン) 一覧でチェックしてみてください!(←秘技・他力本願Lv.100)

シェアボタンのデザイン設定方法

パーツスタイル設定
パーツスタイル設定
パーツスタイル設定
シェアボタン設定
【外観】→【カスタマイズ】→【パーツスタイル設定】→【シェアボタン設定】

プレビュー見ながらいろんなシェアボタンのデザインパターンが確認できるので余裕ですね。

サクッと終わらせちゃいましょう。本題のカスタマイズが待ちくたびれてます。

カスタマイズする前の注意事項

Name
これマジ大事なんとこなんでよろしこ!

今回のカスタマイズは、THE THOR(親テーマ)のPHPやCSSを直接編集するものではありません。

それでも導入して不具合(デザイン崩れ)が起きる可能性はゼロではないです。万が一の際に責任はとれませんので、ご自身でバックアップをとって作業しましょう!

また、アップデートによりデザインが修正前に戻ることを防ぐため、子テーマの導入もおすすめします。

 

カスタマイズは自己責任ってことですね

カスタマイズ後のイメージ

SNSコメント入れる前
カスタマイズ前
SNSコメント入れた後
カスタマイズ後

なんか押したくなってきたんじゃない?今すぐ、押してもいいんだよ~

ちなみにTHE THORには記事最下部にもシェアボタンがあるので、そちらもカスタマイズしてみました。

ボトムSNSボタンカスタマイズ前
カスタマイズ前
ボトムSNSボタンカスタマイズ後
カスタマイズ後

シェアするなら記事全部読んでからなんで、最下部のシェアボタンにコメント入れておく方がシェアされやすいはず。たぶん。。。

レッボ
結局、記事の内容がショボかったらシェアされんと思うけどね

THE THORのシェアボタン上下に文章を入れよう【コピペOK】

シェアボタンの上に文章を入れる

SNSの上側にコメント
.social-top:before,.social-bottom:before{
content: "  参考になったらシェアしてちょ♪";
font-size: 1.2em; 
color:#e13a37; 
font-weight: bold; 
}
.social-top,.social-bottom{
text-align:center;
}

シェアボタンの下に文章を入れる

SNS下側にボタン
.social-top:after,.social-bottom:after{
content: "  参考になったらシェアしてちょ♪";
font-size: 1.2em; 
color:#e13a37; 
font-weight: bold; 
}
.social-top,.social-bottom{
text-align:center;
}

THE THORのシェアボタンカスタマイズ:まとめ

今回はわたしが利用しているWordPressテーマ「THE THOR」のシェアボタンのカスタマイズを紹介していきました。

あくまでシェアを後押しするためのカスタマイズになるので、実際にシェアされるためには読者の役に立つ記事を作成する必要があります。

どんどん価値ある記事を作っていきましょう!

最新情報をチェックしよう!