見出しを変更
T01 コンテンツ内の大見出し<h2>の前に画像を表示する
【手順】
- 背景画像を作成します。当サイトの例では、以下の画像を作成しています。
画像名:sun01_s.png
サイズ:幅 35px 高さ 35px - 作成した画像をSWFUでアップロードします。
- 以下のスクリプトをフッターにコピペします。
#beforescript{{ <style type="text/css"> <!-- /* コンテンツ内の大見出し<h2>の前に画像を表示する */ .haik-palette-orange .haik-container h2 { border-color: #fff #fff #fff #fff; background: url('/swfu/d/sun01_s.png') no-repeat left center; border-width: 1px 1px 1px 1px; padding: 5px 15px 5px 45px; } --> </style> }}
【解説】
- 見出しの枠(border-color)を白に指定して見えなくします。
- 作成した画像はリピート無し指定で設定します。
- パディングで見出し文字の表示位置を変更します。
T02 コンテンツ内の中見出し<h3>の前に画像を表示する
【手順】
- 背景画像を作成します。当サイトの例では、以下の画像を作成しています。
画像名:sun02_s.png
サイズ:幅 30px 高さ 30px - 作成した画像をSWFUでアップロードします。
- 以下のスクリプトをフッターにコピペします。
#beforescript{{ <style type="text/css"> <!-- /* コンテンツ内の中見出し<h3>の前に画像を表示する */ .haik-palette-orange .haik-container h3 { background: url('/swfu/d/sun02_s.png') no-repeat left center; border-bottom: 2px solid #ededed; color: #333; padding-left: 35px; } --> </style> }}
【解説】
- パッデイングで見出し文字の表示位置を変更し、画像と見出し文字が重ならないようにします。
T03 コンテンツ内の中見出し<h4>の前に画像を表示する
【手順】
- 背景画像を作成します。当サイトの例では、以下の画像を作成しています。
画像名:sun03_s.png
サイズ:幅 25px 高さ 25px - 作成した画像をSWFUでアップロードします。
- 以下のスクリプトをフッターにコピペします。
#beforescript{{ <style type="text/css"> <!-- /* コンテンツ内の小見出し<h4>の前に画像を指定する */ .haik-palette-orange .haik-container h4 { color: #ff9800; background: url('/swfu/d/sun03_s.png') no-repeat left center; padding-left: 30px; } --> </style> }}
【解説】
- パッデイングで見出し文字の表示位置を変更し、画像と見出し文字が重ならないようにします。
こんな感じになります。
これは小見出し<h4>です。
枠を取る
(未稿)
見出しの文字色を変更する
(未稿)
背景にグラデーションを付ける
(未稿)