スマホからワンタッチで電話できるボタンの設置方法

2019/06/12 style.cssにて一部不足部分があったため修正
(携帯電話以上のサイズでは見せない場合、footer_areaだけではなく、footer_area_innerも対象としないと画像は消えるが領域が残ってしまうため)
④cssで見栄えを整える の赤字領域をご確認ください。


 スマートフォンの普及率は年々伸びあがり、最も低い北海道で普及率78.6%、最も高い九州で91.6%と、サービスサイトやECサイトなどホームページを介してビジネスを行っている方々には無視できない数になっていると言えるでしょう。

 そのため、WordPressでも『Fixed Footer Bar』や『Really Simple Click To Call Bar』などのプラグインで固定フッターに電話番号を記載し、お手軽に電話番号を設置する方が増えております。

 しかし、プラグインのため「もっと見栄え良くしたい」、「番号じゃなくてアイコンにしたい」などのカスタマイズがしたくても出来ないということはありませんか?

 プラグインに頼るのも良いが、自身のサイトなら自力でやってみたいな、という方も多いと思います。

 このページでは自作で固定フッターに連絡先を入れてホームページから電話をかけられるようにする方法をご紹介いたします。

自力で設置するメリット

・プラグインに頼らないためプラグインの不具合に影響を受けない

・今後、機能を追加したい場合自分で導入することが出来る

・自分でデザイン&レイアウトをいじれる、cssについて知識を得やすくなる


 全体の大まかな流れは

①アイコンに使いたい画像の検索
 ↓
②FileZillaで画像データをアップロードする
 ↓
③footer.phpにコードの記載
 ↓
④cssで見栄えを整える

 となります。
 

導入手順動画です、本文と合わせてご閲覧ください。
動画時間4:11

 

①アイコンに使いたい画像の検索

 

 私は小物のアイコンなどをダウンロードしたい時は下記のサイト様をよく利用しています。

  Webサイト:「ICOOON MONO」様

 このサイトの素晴らしい点は大きく次の3つです。      

①素材数が豊富な上に、基本的にフリーで使わせていただける

②サイズ変更、素材の色を変更して利用できる   

③裏地が透明なPNGがダウンロードできる

 特に③が素晴らしいです。アイコンの裏地が透明でないと、背景を決めていて合わせる時にとても苦労します。

 ご自分のお気に入りのアイコンを使用する場合には必ず裏地を透明にすることも忘れずに取り組んでください。

※ライセンスを閲覧する限り、商用にて利用しなければ問題ないとのことですが事前にライセンスを確認してください、また画像への直リンクはサーバーを圧迫させてしまうので絶対にやめましょう。

 今回はこちらの二つの画像を使用します。

「iPhone風のスマートフォンのアイコン素材」「メールの無料アイコンその6」

 
 両方とも48px、png形式でダウンロードします。スマホ表示するときに表示させたいのであまり大きくてもコンテンツが見えなくなってしまいます。
 

②FileZillaで画像データをアップロードする

 

 ①で画像をダウンロードしましたが、当然ネット上にデータを格納しなければ使用することが出来ません。

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

 FileZillaの操作方法、接続方法はこちらにてご確認いただけます。


 アップロード先は現在使用しているテーマの一階層下のoriginal(違うフォルダ名でも問題ありません)に格納いたします。

 階層の順番としては下記になります、人によって若干異なる可能性があります。


 私はhabakiri-childを使ってますが、テーマは人によって変わりますのでご留意ください。
 また、originalフォルダは無いと思いますので各自フォルダを作成してください。

 

③footer.phpにコードの記載

 

 画像をアップロードしたら次はfooter.phpにコードを打ち込みましょう。
 footer.phpにはHTMLで表示する内容・先ほどアップロードした画像のリンクを記載します。

※超重要 今回は直にホームページの構成データを編集するので事前にバックアップをとっておきましょう。
 
 footer.phpは使用中のテーマ(私の場合はhabakiri-child)フォルダ内に格納してあります。

 バックアップ、不具合が発生した場合の対処法は別記事になります。

 
 ダッシュボードより「外観」→『テーマエディタ―』の順に選択してください。


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

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


 下記のソースコードをfooter.phpの最下部にそのまま入れれば問題ありません。tel:とmailto:の部分はご自身の入れたい情報を入力してください。

 
 参考までにペーストした後の私のPC画面を貼っておきます。


 入力しましたら『ファイルを更新』をクリックしてください。下記が表示されましたら問題なく更新完了してます。


もし、上記の画像が表示されず『ファイルの更新に失敗しました』などが表示された場合は稼働中のphpへの編集を拒否されている可能性があります。

 その場合はFTPソフトでファイルをアップロードして更新を行うか、一度テーマを変更して動作していないタイミングで更新してみてください。


 スマートフォンで確認します。

 
 先ほどアップロードしたアイコンがちゃんと表示されてますね、これで画像のアップロードは問題なく行われております。

 このままだと使いものにならないので次はcssでレイアウトを編集しましょう。

 

④cssで見栄えを整える

 

 現在のままですと、フッター部分にとどまっているだけで使い物になりませんので次にcssで見栄え良く配置できるようにいたします。
 
 『style.css』にコードを入力します。

 ダッシュボードより「外観」→『テーマエディタ―』の順に選択してください。


 アクセスしましたら、左上のテーマの横に『スタイルシート(style.css)』もしくは『style.css』と書かれているかを確認します。


 デフォルトでstyle.cssが開かれているはずです。

 現在使用しているテーマかを確認し、違ったら『編集するテーマ』より使用しているテーマを選択し、テーマファイルよりstyle.cssを選択してください。

 style.cssはホームページの配色やレイアウトを編集するファイルになりますので、注意して作業を行いましょう。

 まずは先ほどアップロードした画像データがスマートフォンのみならず、パソコンからも見えるようになってますので、スマートフォンより大きいデバイスからは見えないように設定しましょう。


 style.cssの一番下に下記のコードをコピーして、貼り付けてください。
(※下記コードにて一部誤りがあったため修正。

  footer_areaを指定する際、footer_area_innerも指定しておかないと画像は見えなくなできるが、領域はそのまま表示されてしまう)

 


 貼り付け後、ファイルを更新しましたら再度ホームページを確認しましょう。


 無事に消えてることが確認できたはずです。

@media screen and (min-width:751px){・・・}でスマートフォン以上の画面サイズのデバイスには見えないように設定するソースとなっております。

 次は本格的にレイアウトを整えましょう。

 開いたstyle.cssのまま次のソースを入力してください。


 ソースを貼り付けて、ファイルを更新後、スマートフォンでどのように反映されているか確認してみましょう。

 私のスマートフォンで確認しますと下記のように反映されています。

 先ほどと違い、アイコンが中央揃えで背景に色などがつけることが出来ました。

 この場合は、フッター(footer.area)の上にアイコン(電話とメール)を表示させてレイアウトを取っただけですが、これだけでも見栄えは良くなったのではないでしょうか。

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

 cssは自身で一個一個変えていくとホームページの構造や色などわかるようになるので是非チャレンジしてほしいです。

 次回は以前友人のホームページでも作った「ワンタッチボタンをふわっと表示させる」をご紹介したいと思います。

 「ワンタッチボタンのデザインをカスタマイズしよう」にてデザイン方法紹介しております。

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

 

 著者 マエヒロ

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

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