画像で見出し(方法1)
画像で見出し
見出しを画像にしたいという質問がQHMユーザフォーラムにありました。画像で大きな文字を書いて、それを貼り付けただけでは見出しにはならないので、SEO上好ましくありません。そこで、簡単に見出しを画像化する方法を考えました。
以下の2つの方法が考えられます。
- 方法1(見出し全体を画像にする方法)
この方法は画像のみ使い、見出しにします。(h2, h3などのタグを出力)
基本は、普通の見出しのおまじないの後に&showで画像を貼り付ければOKです。
ただし、背景画像、背景色、罫線などを使用しているときはそれらをCSSで無効にしてやる必要があります。
この方法は、全部の見出しを画像で作成する必要があるので面倒ですが、インパクトのある見出しが作成できます。(画像を指定しなければ、通常の見出しも使えます)
- 方法2(見出しの背景または文字の前に画像を置いて、文字でタイトルを書く方法)
この方法は画像と文字の両方を使い見出しにします。(h2, h3などのタグを出力)
CSSで背景画像を指定して、通常の見出しのおまじないを書きます。
この方法は、見出しは普通に書くだけなのでかんたんで使いやすいです。すべての見出しの背景が変更になります。
方法1のサンプル
【作成方法】
- 見出しにする画像を作成し、SWFUでアップする。
以下の例では、midashi1_h2.jpg と midashi2_h3.jpg をアップする。 - 以下のコードのように見出しのおまじないを書く。
- 使用しているデザインによっては、以下のスクリプトをコンテンツ領域内に入れる。
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