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

画像で見出し

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

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

• 方法２（見出しの背景または文字の前に画像を置いて、文字でタイトルを書く方法）
  この方法は画像と文字の両方を使い見出しにします。(h2, h3などのタグを出力）
  CSSで背景画像を指定して、通常の見出しのおまじないを書きます。
  この方法は、見出しは普通に書くだけなのでかんたんで使いやすいです。すべての見出しの背景が変更になります。

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

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>
   }}

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

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

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

ご意見箱

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

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

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