jimdoで作成したホームページの見出しの背景色を変更する方法

こんにちは、WEBデザイナー兼
趣味で社会人バンドを
しているエミリです＊

こちらのブログでは、
無料ホームページ作成サービスjimdoで
どれくらいのページができるのかを検証し、
カスタマイズ方法などをご紹介しています。

今回は、以下の様なお悩みを
見つけたのでお悩みに沿って
解決方法を説明していきます！

jimdoでホームページを作成しました。
見出しの背景色を変更したいので下記コードを入力したのに変更されません。

<style type="text/css"> 
h1 {background:#00ff7f; padding: 10px} 
</style>

via.知恵袋

同じように、見出しの背景色に
ついて変更したいけど方法が
分からないという方は参考に
されてみてください。

レイアウト編集で見出しの背景色が変更できない！

「レイアウト編集」から「スタイル」を
選択してみると見出し部分の背景色を
変更するメニューが見当たりませんでした。

このように細かい設定をしたい場合に、
jimdoのエディタは結構不便です。

恐らく、この見出し背景色を
変更したくて困っている方は多いでしょう。

それでは、以下より変更方法です。

ヘッダー編集の使い方

エディタ内で編集できないのであれば
「ヘッダー編集」でcssを追記すれば、
細かいカスタマイズが可能です。

それでは、「ヘッダー編集」の
ページにいってみましょう。

上記枠内に、cssを入れ込んでいけば
カスタマイズが可能です！

見出し部分の背景色を変更しよう！

それでは、見出し部分の
cssを変更していきましょう。

上記お悩みの方は、
見出し部分を「h1タグ」で
設定されているようですが、
エミリは「h2タグ」の背景を
変更してみようと思います。

「h1」となっている部分を
「h2」にしてヘッダー編集部分に
入れ込んでみます！

<style type="text/css"> 
h2 {background:#00ff7f; padding: 10px;} 
</style>

一番下部に入れ込みます。
（※初心者の方は、コードをそのまま一番下に入れてください。）

すると、上記コードは
きちんと反映することができました！

おそらく、お悩みの方は、
コードを間違った部分に
挿入してしまった？とかで
反映されなかったのでは
ないでしょうか・・・。

ちなみに、エミリの場合は
「h2」タグには、余白を以下の様に
設定し直してみました。

h2 {
background: #eeefe8;
padding: 5px 0 5px 20px;
}

●変更前

●変更後

まとめ

いかがでしたか？

このように、
jimdoはエディタ内のスタイルで
細かいところまで設定できない部分が
結構あるのでその場合、
cssを使用して設定する必要があります。

もしあなたがcss設定でお悩みでしたら、
私が代わりに設定を行うことも受け付けてます！

以下より、お申し込みください＊
「ホームページお悩み相談」

■wixカスタマイズまとめ
wixでホームページ作成を検証した内容は、以下より確認できます。メリット・デメリット・カスタマイズ方法を検証しておりますので、jimdoと迷っている方は以下もぜひチェックしてみてください！