【WordPress】インスタグラムのオシャレなフォローボタン設置方法とCSSデザイン解説2018年2月23日2018年10月23日Instagramスポンサーリンク今回はWordPressの記事やプロフィールと一緒に使えるインスタグラム(instagram)の少しオシャレなアイコンフォローボタンを作成してみました。このオシャレなインスタボタンを使って多くの人にフォローしてもらいましょう。手順としてはあまり複雑ではない為、是非挑戦して頂きたいと思います。まとめインスタグラムのURLを確認するまずは自分のインスタグラムのURLを確認する必要があります。確認方法はこちらの記事でも紹介していますので参考にしてください。[...]インスタグラムの自分のURLを確認できたら、コピーしたURLに?ref=badgeを足します。フォローボタンに使う実際のURLは次のようになります。href=”フォロー用URL”という形に変えればインスタグラムのフォロー用のボタンが完成です。FontAwesomeの導入まずは、事前準備として「FontAwesome」の導入を行います。FontAwesomeとは?簡単に言うとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるツールです。こちらが公式ホームページになります。FontAwesomeさまざまなアイコンを使用することができます。導入方法FontAwesomeの使用方法についてご紹介します。手順1:以下のソースコードをコピーします。rel="stylesheet"手順2:テーマの編集でheadタグ内に貼付けheder.phpを編集します。[ダッシュボード]⇒[外観]⇒[テーマの編集]⇒右側のバーの[header.php]heder.phpを開いて<head>~</head>の中に貼り付けます。分からなければ</head>の直前に貼りつけましょう。これだけでアイコンフォントの使用準備は完了です。今回作成するのはこんなようなインスタグラムフォロー用のアイコンです。Meボタンがくるっと回転します。インスタのアイコン風フォローボタン自体はFontAwesomeによって表示しています。そこにCSSでボタンのデザインを行います。今回はWebサイトのサイドバー部分にインスタのフォローアイコンを表示させたかったので、サイドバーエリアにカスタムHTMLのウィジェットを追加しました。以下のHTMLソースコードをそのままコピーして貼り付けてください。Me/aカスタムHTMLのウィジェット追加は[ダッシュボード]→[外観]→[ウィジェット]から行えます。CSSコードの追加は色々ありますが今回は[ダッシュボード]→[外観]→[カスタマイズ]を開いて「追加CSS」にそのまま貼りつけて利用します。rotateX(360deg);}こんな感じでサイドバーのプロフィール欄にFollowボタンを設置することができます。まとめ以上がインスタ風アイコンの作成方法でした。FontAwesomeの導入とHTML、CSSコードの貼り付けだけで簡単に表示できるので是非チャレンジして頂ければと思います。coconalaでWordPressの構築やってます。WordPressで最高のブログライフを始めよう!スポンサーリンクANAマイルの貯め方マイルが貯まるクレジットカードだけでは大量のANAマイルは貯まりません。すれば貯まるのか?ANAマイルを大量に貯めたい人は読んで下さい。コメントをキャンセルメールアドレスが公開されることはありません。*サイトスポンサーリンクプロフィールどうも、ITトラベラーです。旅やマイル、ITに関してのブログを運営しています。旅行とスノーボードが大好きなサラリーマンです。システム屋さんとして働きながら色んな国を周遊中。飛行機に乗らず、お金をかけずにマイレージを貯める方法を日々研究し、最初の1年で25万マイル以上を獲得。2018年4月念願だったファーストクラスに搭乗しました。自分の経験が少しでも誰かの役に立てば幸いです。(2)マイル海外旅行ポイントサイト圧倒的なデザインと驚異のSEO性能!マイルカテゴリ2018年4月21日2019年4月15日タイ航空A380夢のファーストクラス搭乗記。