一歩先を行く QHMユーザのためのTips

画像で見出し(方法1)

画像で見出し

見出しを画像にしたいという質問がQHMユーザフォーラムにありました。画像で大きな文字を書いて、それを貼り付けただけでは見出しにはならないので、SEO上好ましくありません。そこで、簡単に見出しを画像化する方法を考えました。
以下の2つの方法が考えられます。

  • 方法1(見出し全体を画像にする方法)
    この方法は画像のみ使い、見出しにします。(h2, h3などのタグを出力)
    基本は、普通の見出しのおまじないの後に&showで画像を貼り付ければOKです。
    ただし、背景画像、背景色、罫線などを使用しているときはそれらをCSSで無効にしてやる必要があります。
    この方法は、全部の見出しを画像で作成する必要があるので面倒ですが、インパクトのある見出しが作成できます。(画像を指定しなければ、通常の見出しも使えます)
  • 方法2(見出しの背景または文字の前に画像を置いて、文字でタイトルを書く方法)
    この方法は画像と文字の両方を使い見出しにします。(h2, h3などのタグを出力)
    CSSで背景画像を指定して、通常の見出しのおまじないを書きます。
    この方法は、見出しは普通に書くだけなのでかんたんで使いやすいです。すべての見出しの背景が変更になります。

方法1のサンプル
【作成方法】

  1. 見出しにする画像を作成し、SWFUでアップする。
    以下の例では、midashi1_h2.jpg と midashi2_h3.jpg をアップする。
  2. 以下のコードのように見出しのおまじないを書く。
  3. 使用しているデザインによっては、以下のスクリプトをコンテンツ領域内に入れる。
    CSSの指定に !important が付いているのがミソ。
    【コード】
    *&show(midashi1_h2.jpg,,見出し1(h2));
    ここには、上記見出しに対する本文を書く
    **&show(midashi2_h3.jpg,,見出し2(h3));
    ここには、上記見出しに対する本文を書く
    // デザインによってはCSSで背景画像を無効にしたり、背景色を変更する必要あり
    #beforescript{{
    <style type="text/css">
    #body h2 {
      background-image: url("") !important;
      background-color: #FFFFFF !important;
    }
    #body h3 {
      border: none !important;
    }
    </style>
    }}

見出し1(h2)

ここには、上記見出しに対する本文を書く

見出し2(h3)

ここには、上記見出しに対する本文を書く

 方法2のサンプルはこちらへ


ご意見箱

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

  • ありがとうございます。 -- sai 2012-10-13 (土) 19:08:08
  • たいへん役に立っています。ありがとうございます。 -- マングー 2012-12-21 (金) 15:27:02

認証コード(0728)

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

選択肢 投票
たいへん役に立った 3  
ちょっとだけ役に立った 1  
普通 0  
あんまり 0  

powered by QHM 6.0.9 haik
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional