見出しを変更

T01 コンテンツ内の大見出し<h2>の前に画像を表示する

【手順】

  1. 背景画像を作成します。当サイトの例では、以下の画像を作成しています。
    h2の画像
    画像名:sun01_s.png
    サイズ:幅 35px 高さ 35px
  2. 作成した画像をSWFUでアップロードします。
  3. 以下のスクリプトをフッターにコピペします。
    #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>の前に画像を表示する

【手順】

  1. 背景画像を作成します。当サイトの例では、以下の画像を作成しています。
    h3の画像
    画像名:sun02_s.png
    サイズ:幅 30px 高さ 30px
  2. 作成した画像をSWFUでアップロードします。
  3. 以下のスクリプトをフッターにコピペします。
    #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>の前に画像を表示する

【手順】

  1. 背景画像を作成します。当サイトの例では、以下の画像を作成しています。
    h4の画像
    画像名:sun03_s.png
    サイズ:幅 25px 高さ 25px
  2. 作成した画像をSWFUでアップロードします。
  3. 以下のスクリプトをフッターにコピペします。
    #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>です。

枠を取る

(未稿)

見出しの文字色を変更する

(未稿)

背景にグラデーションを付ける

(未稿)

ご意見箱

皆様のご意見をお待ちします。


当ページは役に立ちましたか?

選択肢 投票
とても役に立った 3  
少しだけ 0  
あんまり 0