Jimdoメインコンテンツカスタム

h1/h2/h3の背景を変える

h1/h2/h3の見出しに背景画像を付けて引き立ててみましょう。

まずはh1/h2/h3それぞれの背景画像を作成します。

 

h1の画像背景

高さ:45px

画像ファイル名:h1bg.jpg

 

h2の画像背景

高さ:30px

画像ファイル名:h2bg.jpg

 

h3の画像背景

高さ:30px

画像ファイル名:h3bg.jpg

 

画像の用意ができたらファイルをアップロードしましょう。

 

次にCSSに設定をしていきます。

 

CSS:好きな箇所に下記ソースを追加してください。

 

.j-header h1 {padding-left:15px;height:45px;background:url(h1bg.jpg)repeat-x;line-height:45px;}

.j-header h2 {padding-left:15px;height:30px;background:url(h2bg.jpg)repeat-x;line-height:30px;}

.j-header h3 {padding-left:15px;height:30px;background:url(h3bg.jpg)repeat-x;line-height:30px;}

 

これにて見出しに背景を設定することが出来ました。

あなたのサイトに合わせて画像を作成し見出しをかっこ良く、可愛くしてみてください。

 

メインコンテンツ部分に背景を設定する

現在執筆中

hr(罫線)を画像に置き換える

hr(罫線)を画象に変えてみましょう。可愛らしいリボンや、

ナチュラルな線に変更することもできます。

今回は色違いで2種類の点線を画像で作りました。

GRAYの点線を画像で作成

画像ファイル名:linegray.png

オレンジの点線を画像で作成

画像ファイル名:lineorg.png

このまま画像を写真挿入として使ってもOKですね・・しかし今回はhr(罫線)に画像を置き換えてみます。今回は線の画像の高さが2pxですのでheight:2px;としています。

あなたの画像の高にあわせてココは変更してください。

 

CSS:好きな位置に追加(CSSの一番最後がわかりやすいかも)

 

div.hr {
background:url(linegray.png)repeat-x;

border: none;

height:2px;

}

 

簡単ですね。これで線が画像に置き換わります。

画像つき文章のエレメントの画像に枠線をつける

画像つきの文章を挿入した時にだけ、画像に枠線を付けてみましょう。

使い方としては、日記のように写真を付けて文章を書く。や

写真を交えた説明文を頻繁に使う場合に有効です。

CSSの追加だけでできるのでぜひお試しください。

 

CSS:お好きな場所に下記ソースを追加してください。

 

.j-textWithImage img {padding:5px;border:1px solid #CCCCCC;}

 

以上で枠線が付きました。

枠のカラーを変えたい場合は#CCCCCCの部分をお好きなカラーコードに入れ替えてください。