見出し
レスポンシブに最適化したボタンを作成する方法
当サイトにも表示させているスクロールに応じて表示されるボタンを作成していきます。
スマートフォンでそのまま表示すると邪魔になってしまうので768px以下ではメールアイコンのみ表示させるようにしています。
デモ
まずは下記のデモをご確認ください。
レスポンシブ対応しているのでcodepenで表示して動作を確認してみてください。
今年のお問い合わせ件数は0件です。
See the Pen
お問い合わせボタンとアンカーボタン by TMあさ (@TM-the-styleful)
on CodePen.
ボタンをWordPressテーマに追加する
WordPressにボタンを付けたい方が多いと思いますのでその方法を詳しく書いていきたいと思います。
htmlをコピペ
まずはhtmlをボタンを表示したい投稿や固定ページに張り付けてください。
すべてのページに表示したいときはテーマのfooter.phpに張り付けてください。
cssをコピペ
WordPress管理画面から「外観」→「カスタマイズ」にある「追加CSS」にcssをコピペしてください。
すべてのページに表示したいときはテーマのfooter.phpに張り付けてください。
JavaScriptをコピペ
WordPressテーマに.jsファイルを作成、または既存の.jsファイルにJavaScriptをコピペしてください。
まとめ
いかがでしたでしょうか。少しカスタマイズすれば汎用性も高いパーツになると思うので、ぜひ使ってみてください。
スクロールに合わせて表示したり消えたりするヘッダーの実装方法も書いてのでぜひご覧ください。