見出しにグラデーションを使う

サンプル
見出し・(グラデーション)タイトル01

見出し・(グラデーション)タイトル02

見出し・(グラデーション)タイトル03

 見出しの背景にグラデーション画像を加えるだけで、手軽に見出しのデザインを向上させることができます。(主観ですが・・・)前項のボタンを加えると、さらに見栄えが良くなるかと思います。

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

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

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

CSSnyuuryoku.gif

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

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

fileupload.gif

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

1.ボタン画像を作成、または取得する

自分で作成する場合
gradation002silver.gif
↑のような横幅の小さいグラデーション画像を画像作成ソフトやフォトレタッチソフトなどで作成します。グラデーションツールが付いているソフトなら簡単にできます。


サンプル画像を使用する

 このページの最後に私が作ったグラデーション画像があります。よろしければ使ってみてください。さらに加工しても構いません。

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

 グラデーション画像を作成、あるいは入手したら、次はその画像をアップロードします。

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

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

fileupload02.gif

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

fileupload03.gif

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

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

サンプル
見出し・(グラデーション)タイトル02

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


HTMLソース

<h4> 見出し・(グラデーション)タイトル02</h4>
スタイルシート
h4{  ←見出し4のスタイルを指定
background-image:url(http://画像のURL);  ←背景画像:(URL)
font-weight:bold;
font-size:14px;
color:#9999aa;  ←文字色:やや青みがかったグレー
padding:0px 10px;  ←枠内余白:上下0px、左右10pxずつ
line-height:26px;  ←行の高さ:26px
border:1px solid #666666;  ←枠線:1px、実線、グレー
}

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

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

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

4.素材サンプル

 私が作成したグラデーション画像を以下に掲載します。稚拙な画像ですが、よろしかったら使ってみてください。

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

grad-green.gifサンプル
grad-navy.gifサンプル
grad-purple.gifサンプル
grad-red.gifサンプル
grad-yellow.gifサンプル

gradation002gold.gifサンプル
gradation002silver.gifサンプル
gradation002copper.gifサンプル

gradation003aqua.gifサンプル
gradation003blue.gifサンプル
gradation003green.gifサンプル
gradation003orenge.gifサンプル
gradation003red.gifサンプル
gradation003yellow.gifサンプル
×

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