こんにちは、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>
一番下部に入れ込みます。
(※初心者の方は、コードをそのまま一番下に入れてください。)
すると、上記コードは
きちんと反映することができました!
おそらく、お悩みの方は、
コードを間違った部分に
挿入してしまった?とかで
反映されなかったのでは
ないでしょうか・・・。
■cssの内容
・h2 = 二番目の見出し
・background = 背景色
※色味はWEBセーフカラーから選んでコードをコピペしましょう。
・padding = 余白サイズ
ちなみに、エミリの場合は
「h2」タグには、余白を以下の様に
設定し直してみました。
h2 { background: #eeefe8; padding: 5px 0 5px 20px; }
●変更前
●変更後
まとめ
いかがでしたか?
このように、
jimdoはエディタ内のスタイルで
細かいところまで設定できない部分が
結構あるのでその場合、
cssを使用して設定する必要があります。
もしあなたがcss設定でお悩みでしたら、
私が代わりに設定を行うことも受け付けてます!
以下より、お申し込みください*
「ホームページお悩み相談」
■wixカスタマイズまとめ
wixでホームページ作成を検証した内容は、以下より確認できます。メリット・デメリット・カスタマイズ方法を検証しておりますので、jimdoと迷っている方は以下もぜひチェックしてみてください!
-
-
Wixテンプレートのカスタマイズ方法まとめ
このページでは、Wixで作成したホームページのカスタマイズ方法をまとめました。 随時更新しますので、ホームページ作成を検 ...