ワードプレス ヘッダー右上に電話番号 営業時間等を表示(テーマsimple city)

ワードプレスを使用して、ヘーダーの右上に電話番号、営業時間を表示して、スマホの場合は電話番号、住所などの問い合わせは非表示にしていきたいともいます。

使用しているテーマはこのブログでも使用している国産の【simple city】を使用しています。

表示テキストを入力

【header.php】に【ヘッダーお問い合わせここから】から【ヘッダーお問い合わせここまで】までのソースを上記箇所に挿入して更新をします。
上のソースは【simple city】の【header.php】になります。

wordpress-head-tel01
ヘッダー下にテキストが表示されました。

スタイルシートで整える

スタイルシートで回り込ませて、見た目を整えていきます。

【style.css】に記述します。
wordpress-head-tel02
これでPC表示は整いました。

スマホ タブレット表示を整える

【simple Ctiy】はレスポンシブデザイン対応となりますので、このままですと、スマホやタブレット表示した時にデザインが崩れてしましますので、そちらの対策をします。

【style.css】に記述します。
wordpress-head-tel03

メディアクエリを使用してデバイスサイズによってスタイルシートを追加します。
今回はデバイスサイズが1100px以下でメニュータブが表示されるので、marginで逃がして、639px以下のデバイスの場合は非表示にしました。

今回は大分タイトなスタイルシートで整えましたが、この後も細かい所の修正が必要になってくるかと思います。
その辺はサイトによって違ってくるかと思いますので、各々修正してください。

今回は私のサイトはスマホでは電話番号非表示で大丈夫だったので、このようにしましたが、メディアクエリを使用すれば、スマホの場合は電話番号をボタンにして、押すと電話を掛けられるようにできたりもします。

時間がある時にでもその辺も更新しておきます。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク

コメント

  1. 小林 民成 より:

    さっそく使わせて頂きました。大変かっこよく電話番号などが表示されています。
    但し IEではバッチリ右側に表示されてたのに、クロームで表示させると cssが全く機能してなくてタイトルの下に表示されています。

    解決方があれば 教えて下さい

    • kabubu より:

      小林様
      コメントありがとうございます。
      おそらくキャッシュが残ってしまっているのではなかと思います。
      閲覧履歴でキャッシュを削除してからもう一度試してみてはいかがでしょうか。