WordPressのサイドバーにシンプル&オシャレな浮き出しSNSボタンを設置する方法 | LIVE YOUR LIFE

WordPressのサイドバーにシンプル&オシャレな浮き出しSNSボタンを設置する方法

 

WordPressのサイドバーのウィジェット機能は新着記事一覧や人気記事ランキングなど、いろんな項目を設定することができますが、その中でも特に『テキスト』機能はかなり万能。

プラグインを使わずとも、テキストエディタにコードを入力するだけで本当に自由自在にウィジェットを追加することができます。

 

そこで今回は、そのテキストウィジェット機能を利用して、サイドバーにSNSボタンを設置する方法について解説していきます。

とてもシンプルでオシャレな浮き出しデザインになっているので、マテリアルデザインが好みの方やスタイリッシュなサイトデザインを実現したい方などは、ぜひ参考になさってくださいね。

 

基本的にコードをコピー&ペーストするだけでカンタンに実装することができるので、一緒にボタンの設置を進めていきましょう。

 

浮き出しSNSボタンがシンプル&オシャレ

 

まず、今回実装する浮き出しSNSボタンは、以下のような2種類のイメージになります。

 

⑴丸型ボタン

See the Pen sidebar-snsbutton by RIKU (@coderiku) on CodePen.

⑵楕円形ボタン

See the Pen button-side1 by RIKU (@coderiku) on CodePen.

 

四角い枠の部分には、SNSのアイコンが入るようになっています(当サイトのサイドバーを実際にご参照ください)。

 

このように、とてもシンプルかつオシャレなボタンデザインになっています。

また、マウスオーバーをした際には丸型であればそのまま浮き出すように、そして楕円型であれば各SNSのイメージカラーに染まるように設定しています。

 

本来であればSNSボタンを実装できるプラグインを使用していくのがベーシックなのかもしれませんが、個人的にプラグインだけでは特にデザイン面においてどこか寂しさがあると感じていました。

 

しかし上記のイメージのように、コーディングによって実現したボタンデザインはとても理想的なもので、使用感もとても素晴らしかったので採用することにしたんですね。

また、デザイン性が高いことによってユーザーの目にもより触れやすくなり、結果としてSNSアカウントの広報を大きく助けてくれるようにもなりました。

 

サイドバーはユーザーの目に多く触れる重要なパーツですので、ぜひプラグインだけに頼るのではなく、コーディングを活用することによってさらに独自性を高めていきましょう。

ちなみに丸型と楕円型については、お好みでどちらかを選んでいただき実装してみてくださいね。

 

WordPressのサイドバーに浮き出しSNSボタンを設置する方法

 

さて、それではここからは先ほどの浮き出しSNSボタンを、実際にWordPressのサイドバーへ設置していきましょう。

今回はボタン上で使用するアイコンを『FontAwesome』という便利なWebサービスから呼び出すことになるので、最初にまずそのための準備をしていきます。

 

POINT

 『FontAwesome』は、サイト上にWebアイコンフォントを表示できるようにしてくれる便利なサービスです。

Webアイコンフォントは画像のアイコンとは違い、解像度が変わることでぼやけてしまうことがなく、色やサイズも自由に調節することができます

FontAwesome公式ページ

 

FontAwesomeをWordPressに導入する

 

まずFontAwesomeをWordPressに導入していくのですが、とてもカンタンな設定で済ませることができます。

以下のコードを、サイト内の『headタグ内(<head>~</head>の間)』に貼り付けましょう。

 

headタグは、WordPressのダッシュボード画面より『外観』→『テーマの編集』→『header.php』の中から見つけることができます。

無事にコードを貼り付けることができたら、これでWordPressでFontAwesomeのWebアイコンフォントを呼び出せるようになりました。とてもカンタンでしたね:)

 

それではここからは、じっさいに浮き出しSNSボタンを作成し、WordPressのサイドバーに設置していきましょう。

『丸型ボタン』『楕円型ボタン』両方の作り方を解説していきますが、お好みで気に入った方を使用していただいてOKです。

 

丸型ボタンの作り方

 

丸型ボタンはこのようなデザインでしたね。

See the Pen sidebar-snsbutton by RIKU (@coderiku) on CodePen.

 

基本的に自由にご利用いただいてOKですが、丸型ボタンはあまりスペースを取らないのが1つのメリットです。

自然にサイドバーに設置することができるので、ウィジェットが元から多い場合などにオススメですね。

 

ウィジェットに HTMLコードを入力する

 

丸型ボタンを実装するにはまず、サイドバーのウィジェット機能を活用していきます。

WordPressのダッシュボード画面より『外観』→『ウィジェット』を選択し、左側の利用できるウィジェット内から『テキスト』ウィジェットをサイドバーへドラッグ&ドロップしましょう。

 

そして、テキストウィジェットの『テキストエディタ(ややこしい)』に、以下のコードを貼り付けましょう。

 

上記コードのままでは各SNSアカウントと紐付けがされていないので、それぞれ以下の箇所を自身のSNSアカウントのURLに差し替えておいてくださいね。

  • TwitterアカウントのURL
  • FacebookアカウントのURL
  • InstagramアカウントのURL
  • YouTubeチャンネルのURL

 

基本的にお持ちでないアカウントのボタンは設置しなくてOKですが、それぞれのボタンデザインを指定しているのは、

  • ”button”クラス=Twitter
  • ”button2”クラス=Facebook
  • ”button3”クラス=Instagram
  • ”button4”クラス=YouTube

というように対応しているので、もしボタン数を増減させていく際にはお気をつけください。

 

無事にテキストウィジェットのテキストエディタに、SNSアカウンのURLを差し替えたコードを貼り付けることができたら、忘れずに『保存』ボタンをクリックしておきましょう。

続いて、指定したクラスに対してCSSで動きや色合いを足していきます。

 

スタイルシートにCSSを入力する

 

WordPressのダッシュボード画面より『外観』→『テーマの編集』→『design.css(テーマによってstyle.css/カスタムCSSなど名称は異なります)』を選択しましょう。

 

そして記載されているコードの一番下に、以下のコードを追記します。

 

だいぶ長いコードになりましたが、コピー&ペーストするだけで整うようになっているのでご安心ください。

 

軽くコードについて説明しておくと、先ほどお伝えした通り各buttonクラスでそれぞれのボタンの幅や高さ、周りの影などをまず設定しています。

そしてhover値でマウスオーバーした際のボタンの浮き上がりや影の色を表現しており、before値ではFontAwesomeからWebフォントを呼び出しています。

 

細かいサイズや色などはカンタンに変更することができるので、もし調節したい場合にはコードに変更を加えてくださいね。

これで無事に丸型ボタンの設置は完了です。

 

楕円型ボタンの作り方

 

楕円型ボタンのデザインは、次のようなイメージでしたね。

See the Pen button-side1 by RIKU (@coderiku) on CodePen.

 

このように、楕円型ボタンはとてもサイドバーにおいて大きな存在感を放つことができ、ユーザーに対するアプローチが丸型とは大きく変わってきます。

マウスオーバー時の変色もユーザーの興味を引くものがあり、サイドバーにアクセントを効かせたい場合などにオススメですね。

 

ウィジェットに HTMLコードを入力する

 

楕円型ボタンを設置するには、丸型と同じようにWordPressのダッシュボード画面から『外観』→『ウィジェット』を選択し、『テキスト』ウィジェットを右側へドラッグ&ドロップしましょう。

 

そして、テキストウィジェットの『テキストエディタ』に以下のコードを貼り付けましょう。

 

ここからは先程と同様で、上記コードのままでは各SNSアカウントと紐付けがされていないので、それぞれ以下の箇所を自身のSNSアカウントのURLに差し替えておいてくださいね。

  • TwitterアカウントのURL
  • FacebookアカウントのURL
  • InstagramアカウントのURL
  • YouTubeチャンネルのURL

 

基本的にお持ちでないアカウントのボタンは設置しなくてOKですが、それぞれのボタンデザインを指定しているのは、

  • ”button”クラス=Twitter
  • ”button2”クラス=Facebook
  • ”button3”クラス=Instagram
  • ”button4”クラス=YouTube

というように対応しているので、もし数を増減させていく際にはお気をつけください。

 

そして、無事にテキストウィジェットのテキストエディタに、SNSアカウンのURLを差し替えたコードを貼り付けることができたら、忘れずに『保存』ボタンをクリックしておきましょう。

続いて、指定したクラスに対してCSSで動きや色合いを足していきます。

 

スタイルシートにCSSを入力する

 

WordPressのダッシュボード画面より『外観』→『テーマの編集』→『design.css(テーマによってstyle.css/カスタムCSSなど名称は異なります)』を選択しましょう。

 

そして記載されているコードの一番下に、以下のコードを追記します。

 

こちらも先程と同じく、各buttonクラスでボタンのベースとなるデザインを整え、hover値でマウスオーバー時の動きを指定、before値ではFontAwesomeからWebフォントを呼び出しています。

もしボタンに変更点を加えていくのであれば、それに対応させる形でCSSにも変更を追記していってくださいね。

 

これで無事に楕円型ボタンの設置は完了です。

 

最後に

 

以上、WordPressのサイドバーにシンプル&オシャレな浮き出しSNSボタンを設置する方法を解説しました。いかがだったでしょうか?

 

WordPressを使いこなせるようになっていくと、プラグインを活用していくことはもちろんながら、コーディングによってもサイトデザインを自由自在にカスタマイズできるようになります。

カスタマイズ性の高さこそ、他のブログサービスより勝るWordPressのメリットですので、ぜひサイトデザインを理想の形へ近づけていけるようカスタマイズしていきましょう。

 

当サイトでは、基本的なコーディングの質問やWordPressでのカスタマイズ方法、その他Webサイト集客に関するお悩みなど、幅広い範囲でお問い合わせを受け付けております。

何か疑問点などありましたら、ぜひこちらのお問い合わせフォームより気軽にご相談くださいね:)

 


MAIL MAGAZINE

 

 

     

公開日:2017/09/25 更新日:2017/09/26

コメントを残す

サブコンテンツ

TO THE TOP