loader image

コピペでOK スクロールすると表示されるお問い合わせボタンやアンカーボタン

ブログ記事サムネイル

レスポンシブに最適化したボタンを作成する方法

当サイトにも表示させているスクロールに応じて表示されるボタンを作成していきます。

スマートフォンでそのまま表示すると邪魔になってしまうので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をコピペしてください。

まとめ

いかがでしたでしょうか。少しカスタマイズすれば汎用性も高いパーツになると思うので、ぜひ使ってみてください。

スクロールに合わせて表示したり消えたりするヘッダーの実装方法も書いてのでぜひご覧ください。

集客できるホームページを私たちと作りませんか?😊

ホームページ制作やWEB集客に何かお悩みをお持ちでしたら、お気軽にお問い合わせください。👌

今はまだ発注するか決めていなてもまったく問題ありません。🙆

戻る

こちらもおすすめです