▼年末おせちの予約は早い方がお得▼
~ 10月の早割で最大3,000円OFF ~ オイシックス/おせちご予約開始
ブログで稼ぐ

【WordPressテーマ・JINカスタマイズ】SNSシェアボタンの上下にテキスト(文字)を追加する

 

この記事は、WordPressの人気テーマ・JINの非公式カスタマイズです。

「SNSシェアボタン」を目立たせるために、上下に文字を付けてみました♪

 

こんにちは!

あつみん(@lemonatumi)です。

 

このブログは、WordPressのテーマ・JINを使用しています。

 

人気の『JIN』カスタマイズシリーズ【第二弾】は、「SNSシェアボタン」の上下に任意のテキストを追加する方法です!

 

まずはじめに、JINでは

  • 記事タイトル(またはアイキャッチ画像)の下
  • 記事の一番最後

の2箇所に「SNSシェアボタン」が表示されるようになっています。

 

この機能の効果をもっと発揮させたい!ということで、今回カスタマイズしてみました。

 

多くの人に自分の記事をSNSでシェアしてもらうため、簡単にできるカスタマイズで「SNSシェアボタン」を目立たせてみましょう♪

 

\ ブロガー初心者さんへ /

ブログで稼ぎたい(= 広告収入を得たい)ならまずはASPに登録しましょう(`・-・´)b

 私が登録しているおすすめのASPです

 

あつみん
あつみん
それではカスタマイズを紹介していきます!

JINカスタマイズの注意点

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

しかしながら万が一の際に責任がとれませんので、ご自身でバックアップをとったうえで作業していただきますようお願いします。

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

 

JINカスタマイズイメージ

【 標準のSNSシェアボタン 】

【ブログ】WordPressテーマJINカスタマイズ(SNSシェアボタンテキスト)


【 カスタマイズ後のSNSシェアボタン 】

【ブログ】WordPressテーマJINカスタマイズ(SNSシェアボタンテキスト)

SNSシェアボタンの上に文字が入りました♪

 

 

JINカスタマイズ方法

「追加CSS」の画面を開く

このカスタマイズは、「追加CSS」の機能を利用します

 

WordPressの管理画面を開き、

「外観」→「カスタマイズ」→「追加CSS」に進みます。

WordPressテーマJINカスタマイズ(プロフィール)

「追加CSS」欄にカスタマイズ用のコードを入力する

「追加CSS」欄に、下記でご紹介するカスタマイズ用のコードを入力します。

入力後はプレビューで確認し、最後に「公開」ボタンを押して保存してください。

 

 

JINカスタマイズ用のコード【コピペOK】

追加CSS欄に、下記のコードを入力してください。

あつみん
あつみん
コピペして使ってね☆

シェアボタンの上にテキスト(文字)を入れたい場合

【参考イメージ】

【ブログ】WordPressテーマJINカスタマイズ(SNSシェアボタンテキスト)

 

▼ 追加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カラーコードを指定できます。

 

シェアボタンの下にテキスト(文字)を入れたい場合

【参考イメージ】

【ブログ】WordPressテーマJINカスタマイズ(SNSシェアボタンテキスト)

 

▼ 追加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カラーコードを指定できます。

 

 

あとがき

自分で書いた記事が、TwitterやFacebook、LINEなど多くの人が利用するSNSでシェアされることは、ブログ全体のアクセスアップ(SNS流入)につながります。

WordPressの人気テーマ『JIN』では、何も設定しなくても最初からSNSシェアボタンが表示されるようになっているので便利ですよね。

今回は、そんな便利なSNSシェアボタンをより目立たせるために、上下にテキストを付けるカスタマイズをしてみました!

表示するテキストや色、文字の大きさは自由に指定できるので、自分流にカスタマイズしてみてくださいね♪

 

 

最後になりますが、カスタマイズを行う際は必ずバックアップをとったうえで作業を行ってください。

また、ご利用の環境によっては上手く動作しない場合があります。

ご意見ご指摘ありましたらお問い合わせフォームからお願いします。

▼ 海外旅行保険が自動付帯




海外に行くなら旅行保険は必須!!
現地でのお買い物も楽々♡

\ 年会費永年無料 /

エポスカード