ここでは、WordPressテーマ・SWELLのSNSシェアボタンについての設定やカスタマイズ方法を解説します。
SWELLには表示できるSNSボタンが3パターンあります。
![SWELLのSNSシェアボタン](https://ytechnote.com/wp-content/uploads/2023/02/98743327c004f9320ce2e3e8de4c6d7c.webp)
- 記事上部
- 記事下部
- 左サイド(スクロール追従)
サイトのレイアウト方針によって表示する・しないや、デザインの変更などを行ってみましょう。
(1)上部管理メニューの「カスタマイズ」をクリックします。
![WordPressのカスタマイズへ](https://ytechnote.com/wp-content/uploads/2023/01/WordPressのカスタマイズへ.webp)
WordPressのカスタマイズへ
(2)カスタマイズモードになるので「投稿・固定ページ」をクリック。
![カスタマイズの投稿・固定ページへ](https://ytechnote.com/wp-content/uploads/2023/02/c239b070d9b76dacfe3a52ba80033cdb.webp)
カスタマイズの投稿・固定ページへ
(3)「SNSシェアボタン」をクリック。
![SNSシェアボタンの設定へ](https://ytechnote.com/wp-content/uploads/2023/02/f9d960b035a8dc6f11482d35b1a00eec.webp)
SNSシェアボタンの設定へ
(4)SNSシェアボタンの設定変更はここで行います。
![SNSシャアボタンの設定変更](https://ytechnote.com/wp-content/uploads/2023/02/4ea361bf80fad7874853ef2319a68ffe.webp)
SNSシャアボタンの設定変更
次項で詳しい設定方法について説明します。
ちなみに、カスタマイズ画面の変更を反映させるときは上部メニューの『公開』をクリックし、『×』で終了、『<』で前の画面に戻ります。(共通の操作)
![カスタマイズを反映させる](https://ytechnote.com/wp-content/uploads/2023/02/3d6c5718e672821e26999dedfcc01406.webp)
カスタマイズを反映させる
SNSシェアボタン:各項目の設定方法
SWELL、SNSボタンの設定画面でできる項目をそれぞれ解説します。
- ボタンの表示位置
- ボタンの種類
- ボタンデザイン
- URLコピーボタン
- 記事下部ボタン上のメッセージ
- Twitter用の追加設定
✔ ボタンの表示位置
![シェアボタンを表示する位置](https://ytechnote.com/wp-content/uploads/2023/02/f7d9838f75e2f4db757a03ea2b679b34.webp)
シェアボタンの表示位置は冒頭でも紹介しましたが、
- 記事上部に表示する
- 記事下部に表示する
- 画面端に固定表示する(スクロール追従)
3種類をそれぞれ、チェックのオン・オフで表示・非表示が選択できます。
![SWELLのSNSシェアボタン](https://ytechnote.com/wp-content/uploads/2023/02/98743327c004f9320ce2e3e8de4c6d7c.webp)
✔ 表示するボタンの種類
![表示するボタンの種類](https://ytechnote.com/wp-content/uploads/2023/02/a7e421adddd31d4aaffbc5661ab7e260.webp)
表示するシェアボタンの種類を選択できます。
- はてブ
- LINE
6種類をそれぞれ、チェックのオン・オフによる表示・非表示を設定できます。
✔ ボタンのデザイン
![ボタンデザインの種類](https://ytechnote.com/wp-content/uploads/2023/02/7fb82438b6297932999b7d4019e231a5.webp)
シェアボタンのデザインが変更できます、
- ブロック
- ボタン
- ボタン(小)
- アイコン
- ボックス
5種類から選べます。
![ボタンデザイン_ブロック](https://ytechnote.com/wp-content/uploads/2023/02/f3dba4ce241c2f83448983ef20210cec.webp)
![ボタンデザイン_ボタン](https://ytechnote.com/wp-content/uploads/2023/02/2c75a4c8c8724c45fc8753db8973309e.webp)
![ボタンデザイン_ボタン小](https://ytechnote.com/wp-content/uploads/2023/02/ec9c9c79cb3ee67e548bfc58659fa88d.webp)
![ボタンデザイン_アイコン](https://ytechnote.com/wp-content/uploads/2023/02/9388e6900f674723649e5f19507b6440.webp)
![ボタンデザイン_ボックス](https://ytechnote.com/wp-content/uploads/2023/02/9bd80a456326f729c3202e43a24cdccb.webp)
✔ URLコピーボタン
![URLコピーボタンの設定](https://ytechnote.com/wp-content/uploads/2023/02/87fd81a70952552eff861bc1e81c6086.webp)
URLコピーボタンの表示・非表示やサイズを設定できます。
- 表示しない
- 小さく表示
- 多きく表示
![URLコピーボタン](https://ytechnote.com/wp-content/uploads/2023/02/68fdbb804de9a4f57c060c00183fd626.webp)
初期は『小さく表示』で、『大きく表示』にすると下記のように、横幅いっぱいになります。
![大きく表示](https://ytechnote.com/wp-content/uploads/2023/02/30415fcf60efa558f4f685ea5fabb930.webp)
私の環境だけかもですがボタン内のテキストが表示崩れしてるので、同じようになるなら『大きい表示』はあまりおすすめできません。
✔「記事下部シェアボタン」の上に表示するメッセージ
![記事下部シェアボタン上のメッセージ](https://ytechnote.com/wp-content/uploads/2023/02/17def4371c351e0897422f653db2b777.webp)
記事下部のシェアボタンの上に配置されているメッセージを変更できます。
![シェアボタン上のメッセージ初期状態](https://ytechnote.com/wp-content/uploads/2023/02/c22faf6d461e3ad8192ee677f76f79c8.webp)
初期は『よかったらシェアしてね!』になっています。自分なりの文言に変更しましょう。
左右の \ / (斜めマーク)は自動で付与されます。
メッセージそのものを非表示にしたいなら、テキストを全て削除し空欄にすればOKです。
✔ Twitter用の追加設定
![Twitter用の追加設定.](https://ytechnote.com/wp-content/uploads/2023/02/20891023c5fca5802c598654fc9e8540.webp)
Twitterボタンでシェアされたときのハッシュタグとメンション先を設定できます。
- ハッシュタグ:「#」は入れず、複数ある場合は「,」で区切る。
- Via設定(メンション先):「@●●●さんから」が付けられる(@は不要)。
あまり詳しくないなら、ここの設定は初期のままで良いと思います。
冒頭でも紹介しましたが、カスタマイズ変更の反映は上部メニューの『公開』をクリックしてください。
まとめ:SNSシェアボタン、表示やデザインはお好みで
SWELLテーマのSNSシェアボタンに関するカスタマイズをご紹介しました。
今やブログ運営だけでは収益化が難しい時代です。
無理のない範囲でSNSも有効活用して、サイテーションの向上(知名度UP)も狙っていきましょう。
閲覧ありがとうございました。
コメントをどうぞ