WordPressサイドバーにシンプルなSNSアイコンを表示するプラグインを紹介 | LIVE YOUR LIFE

 

WordPressサイドバーにシンプルなSNSアイコンを表示するプラグインを紹介

 

今回は、WordPressサイトのサイドバーにシンプルなSNSアイコンを表示させるプラグイン、『Lightweight Social Icons』をご紹介していきます。

サイドバーにはプロフィール詳細を掲載するのが一般的ではありますが、紹介文に加えてソーシャルアカウントへのリンクを貼っておくとユーザーがフォローしてくれる可能性も高まります。

 

とは言っても、明らさまに『SNSアカウントはこちらですよ!』と誇張してしまうのは個人的には好みではなかったので、当サイトではよりシンプルなアイコンで表示させています。

SNSが広く浸透した昨今では、検索エンジンからの流入だけでなくソーシャルメディアでの拡散をもとに大きなアクセスを集めることも可能になりました。

ぜひとも今回を機に、SNSアカウントを開設しSNSアカウントのフォローならびに拡散を積極的に促していきましょう。

 

サイドバーにシンプルなSNSアイコンを表示するプラグイン『Lightweight Social Icons』

 

SNSアイコンを表示させるプラグインは割と数多くあるのですが、その中でも特にシンプルで洗練されたデザインなのが、今回ご紹介する『Lightweight Social Icons』

当サイトでもこのプラグインを使用していますが、実際には以下のように表示されています。

 

このプラグインの優れているとことは、何よりも設定が簡単なところ。

SNSアカウントのURLを貼り付けるだけで設定が済むので、誰でも簡単にSNSアイコンを設置することができます。

 

また、対応しているソーシャルメディアも数多く、全50種ものアイコンをお好みで使用することもできます。

上記の画像の通り、当サイトではTwitter・Facebook・YouTube・Instagram・お問い合わせフォームをアイコン化して表示させています。

ぜひともご自身が持つアカウントと紐付けて、フォロワーをどしどし増やしていきましょう。

 

Lightweight Social Iconsの設定方法

 

それではさっそく、プラグイン『Lightweight Social Icons』の設定方法について解説していきましょう。

 

まずは、Lightweight Social Iconsのダウンロードページからプラグインをダウンロードしましょう。

 

そしてWordPressのダッシュボード画面から『プラグイン』→『新規追加』→『プラグインのアップロード』を選択し、先ほどダウンロードしたファイルをアップロードします。

 

インストール後忘れずに有効化を済ませたら、再びダッシュボード画面へと戻りましょう。

『外観』→『ウェジェット』を選択すると、『利用できるウィジェット』内に先ほどインストールした『Lightweight Social Icons』がウィジェットとして追加されています。

 

実際にSNSアイコンを表示させたい箇所に、ウィジェットをドラック&ドロップし移動させましょう。

 

ここまできたら、次は表示させたいアイコンを選択しリンクさせたいURLを入力していきましょう。

『Lightweight Social Icons』ウィジェットの右側にある『▼』ボタンをクリックすると、以下のような設定画面が表示されます。

 

これらの項目では、アイコンのサイズやマウスオン時の色など様々な設定を施すことができます。

  • Icon Size:アイコンのサイズをpx値で設定できる
  • Border Radius:アイコンの角丸をpx値で設定できる
  • Background Color:アイコンの背景色
  • Text Color:アイコン色
  • Background Hover Color:マウスオン時のアイコン背景色
  • Text Hover Color:マウスオン時のアイコン色

 

基本的には上記の項目を変更することで、自由にアイコンのデザインを設定することができます。

SNSアカウントへ飛ぶこととなるので、『Open links in new window?』にチェックを入れ別タブでリンクを開いてもらうのがユーザビリティを考慮した上では良いですね。

 

『Alignment』で、アイコンを左寄せ・中央寄せ・右寄せのそれぞれに配置することもできるので、お好みで設定してみてくださいね。

 

次に、そのまま下へ移動してみると以下のような項目が表示されていると思います。

画像は当サイトのものではありますが、初期状態では『Add Icon』のボタンが表示されているのみですね。

 

この項目では、アイコンにSNSアカウントへのリンクを反映させていきます。

まずは『Add Icon』ボタンをクリックし、設置したいアイコンの数だけ項目を表示させてみましょう。

 

ここからの設定はいたって単純で、左側の項目では『Twitter』『Facebook』『YouTube』など、50種近くものメディア媒体の例が並んでいるので、好きなものを選んでください。

そうしましたら、あとは右側にある空欄に該当するSNSアカウントのURLを貼り付けるだけです。

これで簡単に、SNSアカウントとリンクしたアイコンを設定することができました。

 

非常に使いやすい仕様となっているので、ご自身が持つアカウントをお好みで表示させてみましょう。

 

最後に

 

以上、wordPressサイトのサイドバーにシンプルなSNSアイコンを表示させるプラグイン、『Lightweight Social Icons』の設定方法について解説してきました。

設置したいメディア媒体を選択しアカウントのURLを貼り付けるだけだったので、簡単に設定することができたと思います。

 

個人的な考えではありますが、プロフィール欄にSNSアカウントを表示させておくことはデザイン的にも締まりが出ておすすめなので、SNSアカウントのフォロワーを増やすのと同時にサイトをスタイリッシュなものへと仕上げていきましょう。

 


MAIL MAGAZINE

RIKU

最後まで読んでいただきありがとうございます!

僕が運営しているメール講座では、
自ら立ち上げたメディアから3ヶ月で月収10万円の収益を得た方法
会社に依存せずに個人で収入を得て生きれるようになった経緯など、
こちらのオフィシャルメディアではできないお話をしています。

無料で参加することができるので、ぜひ気軽にご参加くださいね:)

 

 

     

公開日:2017/02/07 更新日:2017/03/06

コメントを残す

サブコンテンツ

TO THE TOP