Jimdoでヘッダーエリアに電話番号を追加する方法

Jimdoの公式サイト「ジンドゥーハウツー」で、2020年7月に行われた「クリエイターカスタマイズ講座」の動画と資料が公開されました。

その中の［標準レイアウトカスタマイズ編］に、ヘッダーに要素（この場合は電話番号）を追加する方法があります。動画で47：30秒からです。

YoutubeのJimdo公式チャンネルに動画がアップロードされました。

ヘッダーエリアに電話番号を配置するのが今の流れ

今のホームページの流れとして、お問い合わせの電話番号やメール送信ボタンなどをヘッダーエリアに設置するのが一般的です。とくに病院や歯医者など、問い合わせと予約が必要な業種のサイトにはほぼ入っています。

自分でタグ打ちして作ったサイトなら要素を追加するもの簡単です。しかしJimdoのテンプレートの機能ではヘッダーエリアに要素を入れることは出来ないので、実現するにはちょっとしたテクニックが必要になってきます。

動画では解決策として、jqueryを使用しています。フッターに追加したい要素を配置し、.insertBefore()でヘッダーエリア内、メインメニューを囲むクラスの前に要素を移動させます。

このままではスマホ画面でも電話番号が表示されるので、メディアクエリでスマホの画面ではdisplay:noneにするのも忘れないで下さい。

この作業を行う前提として、HTML/CSSの初歩的知識（idとclassを扱うため）とGoogle Chromeの検証メニューの使い方を知らなければなりません。それが分かっていれば動画内で説明されるjqueryもなんとなく理解できるはずです。

HTMLもCSSも分からないな〜と言う方は、動画を始めから見て下さい。動画では分かりやすく説明されているので、一度では理解できなくても、何度か見れば理解できるようになります。

ヘッダーエリアに電話番号とボタンがあるだけでサイトの見栄えが変わってきます。

更に、この方法をを応用すればヒーローイメージの上にあるタイトルやロゴの下にボタンを配置することも可能になります。

これまでやりたくても出来なかったと言う方は、動画を見て是非チャレンジして下さい。