ワンタッチボタンをふわっと表示させる

 投稿記事「スマホからワンタッチで電話できるボタンの設置方法」でスマホ表示時にワンタッチ電話&メールボタンの設置をご紹介しました。

 ただ、こういったボタンや広告があると本来読んでほしい記事が読みにくくなるかも、と思いませんか?

 前に友人のホームページにてワンタッチボタンを導入した時は、記事の途中からこのボタン表示できる?と問いあわせがありましたので、JavaScriptを使用してふわっと表示させるようにしました。

 プラグインを使用しないで自分で作るのはこういった自分でやりたいことをやれることが醍醐味ですね。

 簡単なので、こちらの記事を読みながら是非試してみてください。基本的に私が書いたソースのコピー&ペーストで問題ありません。

 

1.jsファイルの作成 

 

 jsファイルとはJavaScriptで書かれたホームページの要素に動作を与えるファイルです。

 こう言われるてもよくわからないと思いますが、ただJavaScriptというプログラミング言語で書かれたテキストデータです(笑)今回のは難しいものではありませんので、大丈夫です。

 今回は拡張子名を変更しますので事前にファイルの拡張子を変えられるように設定を変更します。(Windows10の場合でご紹介します。すでに設定済みの方は読み飛ばしてください)

 ご使用しているPCで何かフォルダを開いて、上部のメニューから表示を選択して『フォルダーオプション』を開きます。

 

 
 フォルダーオプションの表示タブを選択し、『登録されている拡張子は表示しない』のチェックボックスをOFFにします。

 
 これで拡張子が表示されていないファイルも拡張子が表示されるようになりました。

 まずは空のテキストファイルを作成し、ファイル名を「Footer_Area」、拡張子を「js」にしてください。

 

↑のようになっていればOKです

 

 Footer_Area.jsにJavaScript言語でソースを記入します。

 現在はscrollTopは1000(一番上から1000pxまでスクロールしたら表示)の設定にしておりますが、変更しても大丈夫です。

 下のコードを全部コピーして貼り付けてください。

 

 

 貼り付けたら忘れず保存しましょう。これでjsファイルの作成は終了です。 

 

2.footer.phpに追記

 

 以前、投稿記事「スマホからワンタッチで電話できるボタンの設置方法」にて使用するアイコン画像をアップロードしました。

 前回と同じ要領で作成した『Footer_Area.js』をアップロードします、ファイル格納先はjsフォルダにします。

 

 使用しているテーマは人によって異なりますのでご注意ください、階層は特に変わらないはずです。

 今回もFileZilla(FTPソフト)にてデータをアップロードします。もちろん違うFTPソフトで行っても問題ありません。

 FileZillaの操作方法、接続方法は別記事にてご紹介いたします。

 

 

 これでFooter_Area.jsのアップロードまで終了しました。

 あとはfooter.phpにFooter_Area.jsを呼び出すようコードを打ち込むだけです。

 

3.footer.phpからjsファイルを呼び出す

 

 footer.phpは使用しているテーマの(私の場合はhabakiri-child)フォルダ内に格納してあります。

 以前にもご説明あげましたが、footer.phpなどのWordPressの動作に影響を及ぼすファイルを変更する際は必ずバックアップを取りましょう。

 


 現在使用しているテーマが①の部分と同じか確認し、違う場合はボックスからテーマを選び、『選択』をクリックしてください。

 問題ない場合は『テーマフッター(footer.php)』をクリックしてください。


 下記のソースコードをfooter.phpの<body>と</body>の間ににそのまま貼り付けてください。

 貼り付けた箇所がわかりやすいように私は</body>の直前に貼り付けました。


 追加しましたら忘れずにファイルを更新をクリックしてください。

 これでワンタッチボタンをふわっと表示することが出来ます、試しに下の動画を見てみてください。

 

 

 最初は画面に映っていませんでしたが、下にスクロールするとふわっと表示されましたね。

 これでワンタッチボタンをふわっと表示させることが出来ました!

 

4.より見栄え良くしよう

 

 ワンタッチボタンをふわっと表示することが出来ましたが、ちょっと急に出てきた気がしませんか(笑)?

 表示する時のアニメーションの速度はcssで編集することが可能です。

 ここまで作ったのなら、どうせなら細部までこだわってみましょう!

 編集する部分は追加CSS、プロパティは transitionを使用します。

 ダッシュボードから『外観』→『カスタマイズ』の順に選択します。

 

 カスタマイズ画面が表示されます。

 左側のテーマカスタマイザーの一番下にある『追加CSS』を選択。

 

 

 投稿記事『ワンタッチボタンのデザインをカスタマイズしよう』で追加CSSにワンタッチボタンのコードを写したので、今はこちらにコードが入っていますね。

 ここの.footer_area部分にtransitionの文を追加します。

 


 追加をしたら忘れず更新をクリックしましょう。

 transition:0.2sを追加した後は下記のようになりました。

 

 

 どうでしょう、ほんの少しゆっくり表示されるようになったはずです(笑)

 0.2s(0.2秒)なのでほぼかわらず見えますが、ほんの若干ゆっくりになっています。なぜか0.4s以上にするとゆっくりではなく、急に切り替わるようになってしまうので、こちら原因わかりましたら記載します。

 

 いかがでしたでしょうか。

 scrolltopの値を変更すればより記事の下方で表示させることも出来るし、動作がはいることでホームページが少しお洒落になったのではないでしょうか?

 今は電話とメールのみ固定フッターに載せておりますが、他の記事に飛べるようにしたり、クリックすることでカレンダーをさせたりするのも面白いですね。

 また固定フッターについては改造したら記事を書こうと思います。

 こちらの記事が皆様の少しでもお役に立てば幸いです。

 

 著者 マエヒロ

 

コメント

画像を押して、質問に来てね!

タイトルとURLをコピーしました