Content?SNSボタン作ってみた良い感じのSNSボタンという名目で、作成したオシャレなボタンレイアウト。決まったパターン箇所を書き換えることでリンクボタンとしても応用のあるコピペ&ペーストOKなソース紹介。注意書きカスタマイズは、子テーマを使用してください。紹介するソースコードには、不備がある場合がありますのでご自身での再確認・自己責任の方をおねがいします。今回は、コピペ&ペーストでカスタマイズ要素のあるSNSボタンを作成してみました。SNSボタンのレイアウトを探している方の期待に沿うことが出来たらなぁ~と思います。カスタマイズの方法、使い方、応用編を取り入れながら紹介していきたいと思います。完成形はコチラになります完成形FacebookTwitterInstagramFeedly僕なりに良く使うんじゃないのかな?と感じるSNSを用いて、Facebook、Twitter、Instagram、Feedlyの4つをモデルにサンプルを作成してあります。上記4つのボタン以外にその他、作成したい!と考えを抱く方もいると思うので、そのへんは順を追って説明していこうと思います。その他のSNSボタンやリンクボタンとして使用するウキウキボタンを実装するまでの準備手順まずは、以下のCSSコードをまるごとコピーしてください。#a349b2);}上記のコード全体をコピーすることが出来たら、Wordpress管理画面メニューの外観からCSS編集を選択し、追加CSSにコードをペーストし、公開をクリックします。これで使用するための準備は完了しました。あと少しボタンを表示させたいところにHTMLコードを記述する次に、下記のHTMLコードを先ほどと同じようにぐるっと全体をコピーしましょう。fa-rss"></i><span>Feedly</span></a>コピーすることが出来たら、表示させたいところにペーストしましょう。例として、サイドバーにSNSボタンを表示させたいときの場合、Wordpress管理画面の外観からウィジェットを選択します。サイドバーのところにカスタムHTMLを挿入し、そのカスタムHTMLの中に今さっきコピーしたHTMLコードをペースト(貼り付け)し公開をクリックすると表示されるようになります。応用その他のSNSボタンやリンクボタンとして使用するサンプルで紹介している4つのSNSボタン以外に、他を追加したいと考える人のためにココからは、この記事で紹介しているボタンレイアウトはそのままに随所を変更することで異なるボタンとして活用するための変更箇所を説明していこうと思います。変更箇所は、アイコン・テキスト文・カラーの3つです。以下のようにSNSボタンではなくリンクボタンとしての意味合いを持たせることが可能なボタンを作ることが出来ます。続きをみる仕組み解説コチラのリンクボタンは次に書くHTMLコードとCSSコードで作られています。background:#ff777a;}1つのボタンあたりに上記のHTMLとCSSで1セットで成り立っているので新規のボタンを作成する際にはこの一式を変更しましょう。アイコンはFontAwesome5を使用しています。FontAwesome5FontAwesome最後まで読んでいただき有難うございました。【WPテーマ】SANGOのショートコード全てを1つのボタンで管理するプラグイン自ブログのデザインは「こんな風にしたい」を叶えるCSS学習法&ツール紹介この記事を書いた人トッド(Todd)「ポケサイズム」で気づきを築くをテーマに好きなコト・興味関心に惹かれたテーマに沿った事を書いています。コメントをキャンセルメールアドレスが公開されることはありません。独立したURLでアパレルオンラインストアが持てる【paintory】にてブランド作りました。