【WordPress】インスタグラムのオシャレなフォローボタン設置方法とCSSデザイン解説

今回はWordPressの記事やプロフィールと一緒に使えるインスタグラムの少しオシャレなアイコンフォローボタンを作成してみました。このオシャレなインスタボタンを使って多くの人にフォローしてもらいましょう。手順としてはあまり複雑ではない為、是非挑戦して頂きたいと思います。

 

インスタグラムのURLを確認する

まずは自分のインスタグラムのURLを確認する必要があります。確認方法はこちらの記事でも紹介していますので参考にしてください。

自分のインスタグラムURLを確認する

 

インスタグラムの自分のURLを確認できたら、コピーしたURLに?ref=badgeを足します。
フォローボタンに使う実際のURLは次のようになります。

https://www.instagram.com/ユーザー名?ref=badge

このコードを後の[ウィジェット]→[カスタムHTMLコード]HTMLのaタグの中にhref=”#”という部分があるので、ここをa href=”フォロー用URL”という形に変えればインスタグラムのフォロー用のボタンが完成です。

 

FontAwesomeの導入

まずは、事前準備として「FontAwesome」の導入を行います。

 

FontAwesomeとは?

簡単に言うとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるツールです。

こちらが公式ホームページになります。
FontAwesome

 

さまざまなアイコンを使用することができます。

導入方法

FontAwesomeの使用方法についてご紹介します。

 

手順1:以下のソースコードをコピーします。

link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"

手順2:テーマの編集でheadタグ内に貼付け

heder.phpを編集します。

[ダッシュボード]⇒[外観]⇒[テーマの編集]⇒右側のバーの[header.php]

heder.phpを開いて<head>~</head>の中に貼り付けます。よく分からなければ</head>の直前に貼りつけましょう。これだけでアイコンフォントの使用準備は完了です。

 

アイコン作成

今回作成するのはこんなようなインスタグラムフォロー用のアイコンです。

アイコンに触れるとFollow Meボタンがくるっと回転します。

 

インスタのアイコン風フォローボタン自体はFontAwesomeによって表示しています。そこにCSSでボタンのデザインを行います。今回はWebサイトのサイドバー部分にインスタのフォローアイコンを表示させたかったので、サイドバーエリアにカスタムHTMLのウィジェットを追加しました。

以下のHTMLソースコードをそのままコピーして貼り付けてください。

 

 

・HTML

a href="#" class="insta_btn"  span class="insta" i class="fab fa-instagram"  /span  Follow Me/a

 

カスタムHTMLのウィジェット追加は[ダッシュボード]→[外観]→[ウィジェット]から行えます。

 

CSSコードの追加は色々ありますが今回は[ダッシュボード]→[外観]→[カスタマイズ]を開いて「追加CSS」にそのまま貼りつけて利用します。

・CSS

.insta_btn2{  color: #FFF;  border-radius: 7px;  position: relative;  display: inline-block;  height: 50px;  width: 190px;  text-align: center;  font-size: 25px;  line-height: 50px;  vertical-align: middle;  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;  overflow: hidden;  text-decoration:none;}.insta_btn2:before{  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;}.insta_btn2 .fa-instagram{  font-size: 35px;  position: relative;  top: 4px;}.insta_btn2 span {  display:inline-block;  position: relative;  transition: .5s}.insta_btn2:hover span{  -webkit-transform: rotateX(360deg);  -ms-transform: rotateX(360deg);  transform: rotateX(360deg);}

 

こんな感じでサイドバーのプロフィール欄にFollowボタンを設置することができます。

 

まとめ

以上がインスタ風アイコンの作成方法でした。FontAwesomeの導入とHTML、CSSコードの貼り付けだけで簡単に表示できるので是非チャレンジして頂ければと思います。

 

coconalaでWordPressの構築やってます。
WordPressインストール&初期設定代行します WordPressで最高のブログライフを始めよう!

最新情報をチェックしよう!
PAGE TOP