見出しにオリジナル画像を使う

サンプル
square-red01.gifタイプA:文字はテキスト入力で行う

画像で見出し・タイトル01

画像で見出し・タイトル02


square-red01.gifタイプB:文字は画像で表現する

見出しを画像で作成する

STEP2見出しで画像をつくる

 見出しを画像で表示すれば、ホームページの見栄えは格段に良くなると思います。上のサンプル画像は私が作成したものなのでたいしたことないですが、センスがあれば個人サイトとは思えないようなデザインのサイトも作れるかもしれません。

 上のサンプルでは、文字がテキストのタイプと、画像の中に文字も加えたものを作成しました。

以下の手順で説明します。

準備:スタイルシート
 SeeSaaブログの 「マイ・ブログ」タグからサインイン(ログイン)して → 「デザイン」 → 「スタイルシート」 → 「使用しているテンプレートのタイトル」 でスタイルシートを変更、書き足しができるページを開きます。

下の画像のようなページが表れます。このページでスタイルシートを変更していきます。

CSSnyuuryoku.gif

準備:画像アップロード
 SeeSaaブログの 「マイ・ブログ」タグからサインイン(ログイン)して → 「ツール」 → 「ファイルマネージャ」で画像をアップロードするページを開きます。通常は「ツール」タグをクリックするだけで「ファイルマネージャ」のページが開きます。ここから画像をアップロードします。

 アップロードとは、自分のパソコン内にあるデータをインターネット上のサーバにコピーすることです。インターネット上のサーバから自分のパソコンにデータをコピーするダウンロードと逆の作業です。

fileupload.gif

 画像の拡大、縮小などの編集作業はここではできません。あらかじめフォトレタッチソフトや画像作成ソフトなどで編集しておく必要があります。

1.見出し画像を作成、または取得する

自分で作成する場合

見出し画像を画像作成ソフトやフォトレタッチソフトなどで作成します。私の場合はadobeのphotoshopを使用しています。


フリー素材・サンプル画像を使用する

フリー素材サイトを探せば良い画像がたくさん見つかると思います。
市販の素材集でもすばらしい画像がたくさんあるのではないかと思います。
このページの最後に私が作った画像があります。よろしければ使ってみてください。さらに加工しても構いません。

2.画像をファイルマネージャからアップロードする

 見出し画像を作成、あるいは入手したら、次はその画像をアップロードします。

 まず、冒頭の準備:画像アップロードのところで書いたようにファイルマネージャを開きます。

 次に『参照...』と書かれたボタンを押します。別ウィンドウでファイル選択する画面が現れるのでパソコン内に保管してある画像を選択します。

fileupload02.gif

 画像を選択すると下の画像のように『参照...』ボタンの左側の窓にパソコン内の画像のアドレスが表示されます。右側の『追加』ボタンを押すとファイルがアップロードされます。

fileupload03.gif

 アップロードした画像のURLは、「ツール」→「ファイルマネージャ」でその画像の「タイトル」をクリックし、開いたページの「元ファイル」から確認できます。

3.サンプルのHTMLソースとスタイルシート

タイプ:A
サンプル
画像で見出し・タイトル02

 上のサンプルを<h4>(見出し4)として使う場合のHTMLソースとスタイルシートは以下のとおりです。


HTMLソース

<h4> 画像で見出し・タイトル02</h4>
(<>を半角で書くと投稿時にバグってしまうため、上では全角で書いていますが、実際は半角で書きます。)
スタイルシート
h4{  ←見出し4のスタイルを指定
background-image:url(http://画像のURL) ;  ←背景画像:(URL)
background-repeat:no-repeat;  ←背景の繰り返し設定:繰り返さない
line-height:36px;  ←行の高さ:36px
font-weight:bold;
font-size:17px;
color:#ffffff;  ←文字色:白
padding-left:35px;  ←枠内余白(左側):35px
}

 冒頭ののサンプルの場合、セレクタは h4{ } ではなく .sampmidashi02{ } という私が適当につけたセレクタ名でスタイルを作っていますが、実際に見出しとして使う場合は見出しタグで作成すべきだと思います。

 h4{ } でスタイルを指定した場合、すべての<h4>でそのスタイルが適用されます。

一部の<h4>だけにスタイルを使用したい場合は、セレクタ名を自分でつくり、<h4 class="セレクタ名">見出しタイトル</h4>と、すれば、その<h4>だけにスタイルが指定できます。

line-height:36px;
行の高さは画像の高さに合わせて設定しています。

padding-left:35px;
画像のボタンの部分に見出しの文字が重ならないように、文字の左側に35pxの余白を設定しています。


タイプ:B

サンプル

見出しを画像で作成する

 見出しの文字を画像で描いた場合で、横幅がページボディの横幅と同程度の場合は、特にスタイルシートを設定する必要はないかもしれません。上のサンプルの場合はスタイルシートの設定はしていません。


HTMLソース

<h4><img src="http://画像のURL" mce_src="http://画像のURL" alt="見出しを画像で作成する" width="510" height="64" border="0" /></h4>

(<>を半角で書くと投稿時にバグってしまうため、上では全角で書いていますが、実際は半角で書かきます。)

alt=""

alt=""は代替テキストと呼ばれるものです。代替テキストを設定する理由は主に以下のものです。

  • 画像が表示されなかった場合に変わりに表示される。
  • 画像の上にマウスを乗せたときに画像の説明として表示される。
  • サーチエンジンの巡回ロボットに画像の内容を説明するるため

4.素材サンプル

 私が作成した見出し画像を以下に掲載します。稚拙な画像ですが、よろしかったら使ってみてください。

フリー素材です。使用条件などは特にありません。使用される場合は、一度ダウンロード(画像を保存)してご自身のファイルマネージャ/サーバー内で使用してください。加工しても構いません。

heading_wave_blue.gif heading_wave_green.gif heading_wave_red.gif heading_wave_yellow.gif heading_01_aqua .gif heading_01_blue .gif heading_01_green .gif heading_01_red .gif heading_01_yellow .gif
heading_crayon_blue00.gif heading_crayon_blue.gif heading_crayon_green00.gif heading_crayon_green.gif heading_crayon_pink00.gif heading_crayon_pink.gif heading_crayon_red00.gif heading_crayon_red.gif heading_crayon_yellow00.gif heading_crayon_yellow.gif heading_4men_nasi.gif heading_4men_nasi2.gif heading_4men_chumoku.gif heading_4men_douga.gif heading_4men_hikaku.gif heading_4men_nyuukai.gif heading_4men_koryaku.gif heading_4men_seikei.gif heading_4men_saisin.gif heading_4men_nasi3.gif heading_4men_sinchaku.gif heading_4men_siki.gif
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。