この記事には広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元させることがあります。
WordPressの人気テーマ『JIN』の、コピペでできる簡単カスタマイズをご紹介します。
今回は、「SNSシェアボタン」の上下にテキストを追加するカスタマイズです！
JINでは
- 記事タイトル（またはアイキャッチ画像）の下
- 記事の一番最後
の2箇所に「SNSシェアボタン」が表示されるようになっています。
この機能の効果をもっと発揮させたい！ということで、今回カスタマイズしてみました。
多くの人に自分の記事をSNSでシェアしてもらうため、簡単にできるカスタマイズで「SNSシェアボタン」を目立たせてみましょう♪
＼＼ ブログ初心者さん必見 ／／
最初に登録しておきたい3つのASP
目次（もくじ）
カスタマイズをする際の注意点
今回のカスタマイズは、JIN（親テーマ）のPHPやCSSを直接編集するものではありません。
しかしながら万が一の際に責任がとれませんので、ご自身でバックアップをとったうえで作業していただきますようお願いします。
また、アップデートによりデザインが修正前に戻ってしまうのを防ぐため、子テーマの導入もおすすめします。
スポンサーリンク
SNSシェアボタンにテキストを追加するカスタマイズイメージ
【 標準のSNSシェアボタン 】
▼
▼
【 カスタマイズ後のSNSシェアボタン 】
SNSシェアボタンの上に文字が入りました♪
カスタマイズ方法
「追加CSS」の画面を開く
このカスタマイズは、「追加CSS」の機能を利用します。
WordPressの管理画面を開き、
「外観」→「カスタマイズ」→「追加CSS」に進みます。
「追加CSS」欄にカスタマイズ用のコードを入力する
「追加CSS」欄に、下記でご紹介するカスタマイズ用のコードを入力します。
入力後はプレビューで確認し、最後に「公開」ボタンを押して保存してください。
カスタマイズ用のコード【コピペでOK】
追加CSS欄に、下記のコードを入力してください。
シェアボタンの上にテキスト（文字）を入れたい場合
【参考イメージ】
▼ 追加CSSに下記コードを追加してください
/* SNSシェアボタンの上にテキストを追加する */
.sns-top:before,.sns:before{
content: "＼ この記事をSNSでシェアする ／";
font-size: .8em; /* 文字の大きさ */
color:#f58e7e; /* 文字色 */
font-weight: bold; /* 文字を太く */
}
.sns-top,.sns{
text-align:center;
}
※ content:の " "に囲まれたテキストは好きな文言を指定できます。ダブルクォーテーション(”)は半角で入力してください。
※ font-size:の 数字は文字の大きさです。お好みで数字を指定できます。
※ color:の #英数字は文字の色です。お好きなHTMLカラーコードを指定できます。
シェアボタンの下にテキスト（文字）を入れたい場合
【参考イメージ】 
▼ 追加CSSに下記コードを追加してください
/* SNSシェアボタンの下にテキストを追加する */
.sns-top:after,.sns:after{
content: "＊ この記事をSNSでシェアする ＊";
font-size: .8em; /* 文字の大きさ */
color:#f58e7e; /* 文字色 */
font-weight: bold; /* 文字を太く */
}
.sns-top,.sns{
text-align:center;
}
※ content:の “ ”に囲まれたテキストは好きな文言を指定できます。ダブルクォーテーション(”)は半角で入力してください。
※ font-size:の 数字は文字の大きさです。お好みで数字を指定できます。
※ color:の #英数字は文字の色です。お好きなHTMLカラーコードを指定できます。
以上、WordPressテーマ『JIN』のSNSシェアボタンの上下にテキストを追加するカスタマイズをご紹介しました。
自分で書いた記事が、TwitterやFacebook、LINEなど多くの人が利用するSNSでシェアされることは、ブログ全体のアクセスアップ（SNS流入）につながります。
WordPressの人気テーマ『JIN』では、何も設定しなくても最初からSNSシェアボタンが表示されるようになっているので便利ですよね。
今回は、そんな便利なSNSシェアボタンをより目立たせるために、上下にテキストを付けるカスタマイズをしてみました！
表示するテキストや色、文字の大きさは自由に指定できるので、自分流にカスタマイズしてみてくださいね♪
当サイトでは、他にもJINのオリジナルカスタマイズをご紹介しています。こちらの記事もぜひあわせてお読みください。
最後になりますが、カスタマイズを行う際は必ずバックアップをとったうえで自己責任にて作業を行ってください。
ご質問ご指摘ありましたらお問い合わせフォームからお願いします。
