JINカスタマイズ

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

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

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

 

 

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

 

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

 

まずはじめに、JINでは

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

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

 

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

 

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

 

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

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

 

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

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シェアボタンをより目立たせるために、上下にテキストを付けるカスタマイズをしてみました!

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

 

 

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

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

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

▼未経験でもOK!在宅で稼ぐスキルを身につけよう




WEBデザインやプログラミングを未経験から勉強するなら【TECH::CAMP】がおすすめ!

まずは無料のオンライン説明会に参加して、講座の内容を見てみよう

\ 25分間の無料説明会 /
TECH::CAMPオンライン説明会

主婦 & WEBライター
あっつ

アラサー主婦、2歳(男の子)のママです。

0~3歳の子育てに役立つ情報をブログで発信しています。

DWEの中古教材を使って楽しく「おうち英語」挑戦中!

詳しいプロフィールはこちら

\ Follow me /