【JIMDO】見出しに背景色を付ける

はじめに

コレはJIMDOを「クリエイター」で作る時のTipsの備忘録です。
 
JIMDOって凄く使いやすいけど、用意されているレイアウトが質素過ぎてそのまま使うのは芸がない。
「クリエイター」ならHTMLが弄れるので、ある程度オリジナリティを出すことも可能です。
ネット上には親切にJIMDOのTipsを体系立てて公開してくれているサイトがいくつもあります。
 
ところが自分はHTMLが全く解らず基礎がないので何時も試行錯誤しながら実践してます。
自分の様にTipsがすんなり理解出来ない方の一助になれば幸いです。（笑）

もくじ

• 目標
• 基本設定→ヘッダー編集で＜style＞タグを加える
• ほんの少しだけ補足
• 数値を変えて調整出来る箇所

目標

JIMDOの大・中・小の３種類の見出しの背景に色を付けます。
折角なので背景を角丸にもしちゃいます。

基本設定→ヘッダー編集で＜style＞タグを加える

ヘッダー編集画面の一番最後に以下のテキストをコピペする。
↓↓↓↓↓ここより下から ↓↓↓↓↓
<style type="text/css">
/*<![CDATA[*/
 
h1 {background:#b0c4de; padding: 2px 0px 0px 5px;border-radius: 7px;} 
/*]]>*/
</style>
 
<style type="text/css">
/*<![CDATA[*/
 
h2 {background:#b0c4de; padding: 2px 0px 0px 5px;border-radius: 6px;} 
/*]]>*/
</style>
 
<style type="text/css">
/*<![CDATA[*/
 
h3 {background:#b0c4de; padding: 2px 0px 0px 5px;border-radius: 5px;} 
/*]]>*/
</style>
↑↑↑↑↑ここより上まで ↑↑↑↑↑
 最後に保存ボタンを忘れずに。

ほんの少しだけ補足

＜style＞タグで見出し大・中・小（h1、h2、h3）の設定をしています。
一つの＜style＞タグで３つを設定することも可能かも知れないけれど、分からないので別々に３回設定しています。
恐らくわかる人がみたら間抜けなことやってると思われそう。（笑）
 
「background:#b0c4de」で背景色を指定してます。
「padding: 2px 0px 0px 5px」で背景色の大きさを指定してます。
「border-radius: 5px」で背景色の角を丸める設定をしています。

数値を変えて調整出来る箇所

• 「background:#b0c4de」の＃以下はWebのカラーコードです。
  ネットで調べればカラーコード一覧とかがあるので、お好きな色に置き換えて下さい。
• 「padding: 2px 0px 0px 5px」の数字は見出し文字からの距離を指定しています。
  最初が左側の文字からの距離、二番目が文字の上の距離、三番目が文字の右側からの距離、四番目が文字の下の距離です。
• 「border-radius: 5px」の数字は角丸のアールの大きさで、大きいほど丸みが大きくなります。