WordPressヘッダー右上に連絡先を入れる方法
こんにちは。鎌ヶ谷市ホームページ制作のホットページズ鈴木です。
WordPressをご利用中の方でヘッダー右上に連絡先を入れたいと思ったことはありませんか？
しかし、有料のテーマを除いてWordpressのテーマを探してもなかなか右上に連絡先を挿入できるものがありません。
ヘッダーをカスタマイズできるプラグインも対応しているテーマが少なかったりしてとても使い勝手が悪い・・・。
こういう皆さんの為に今回は
WordPressのヘッダー右上に連絡先を入れる方法を書いていきたいと思います。
【header.php】
WordPressのダッシュボードの外観から「テーマの編集」を選択します。
右の一覧より【header.php】を選択し、の任意の場所に以下を挿入します。
テキストでの表示の場合と画像で表示する場合の2通りをご紹介。
テキストの場合
内容は任意で変更ください
画像の場合
[code]ソースコードを自動判定
||<[/code]
【style.css】
次に【style.css】を選択し、任意の場所に以下を挿入
#header .alignleft{
float:left;
}
#header .head-right{
float:right;
margin:10px 50px 0 0; /* 右寄せ部分の余白 */
}
#header .address{
font-size:16px; /* 住所部分の文字サイズ */
}
#header .tel{
font-size:18px;
}
#header .tel span{
font-size:26px; /* 電話番号サイズ */
margin-left:5px;
color:#4169E1; /* 電話番号の色 */
}
#header .reception{
font-size:13px;
}
以上の設定で完了です。
テーマによって右寄せ部分の余白などで配置を微調整ちなみに
margin:10px 50px 0 0;
上、右、下、左
の順で余白設定
テキストの電話番号部分もタップで電話ができる仕様に変更もできます。
やり方は電話番号部分をいかに変更
<span><a href=”tel:***ハイフンを消した電話番号***”>000-000-0000</a></span>
どうしてもやり方がわからなかった場合はご質問くださいね。
追記20180515
ちなみに
Luxeritasテーマの場合このやり方だと電話番号が下にずれる症状があるようです。
この場合は
カスタマイズ→細部の見た目にあるヘッダーのキャッチフレーズ表示チェックを外す事で治ります。
しかしキャッチフレーズが消えてしまうので必要な場合はまた別のやり方で・・・。
ヘッダーの設定されている高さを超えて電話番号画像やロゴなどを作らないようにすると大丈夫なようです。
お試しください
