見出し・リストの前にボタン画像を使う

サンプル
見出し・タイトル01

見出し・タイトル02

見出し・タイトル03
  • リスト1
  • リスト2
  • リスト3

  • リスト1
  • リスト2
  • リスト3

 このような感じで見出しやリストの左側にボタン画像を装飾するとホームページの見栄えが大分変わると思います。

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

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

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

CSSnyuuryoku.gif

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

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

fileupload.gif

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

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

自分で作成する場合

 ボタン画像を画像作成ソフトやフォトレタッチソフトなどで作成します。ボタン作成だけならばフリーソフトの機能で問題ありません。ちょっと極端ですが、Windowに付属しているペイントでも簡単なボタン画像なら作れます。


フリー素材・有料素材を使用する

 フリー素材を配布しているサイトはたくさんあります。検索して好みの画像を探してみてください。
 有料素材ならボタンだけでなく、さまざまな画像が高品質で手に入れられると思います。

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

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

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

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

fileupload02.gif

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

fileupload03.gif

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

3.見出しにボタン画像を挿入する

サンプル
見出し・タイトル02

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


HTMLソース

<h4><img src="http://ボタン画像のURL" mce_src="http://ボタン画像のURL" /> 見出し・タイトル02</h4>
スタイルシート
h4{  ←見出し4のスタイルを指定
background-color:#119156;  ←背景色:ボタン画像と同色になる緑を指定
font-weight:bold;
font-size:15px;
color:#ffffff;  ←文字色:白
padding:3px 10px;  ←枠内余白:上下3pxずつ、左右10pxずつ
border-right:1px solid #000000;  ←枠線(右):1px、実線、黒
border-bottom:1px solid #000000;  ←枠線(下):1px、実線、黒
}

h4 img{ ←見出し4内の<img>のスタイルを指定
vertical-align:middle;   ←画像の右側の文字の位置(縦方向):中間
}

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

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

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


ちなみに、サンプルで見出しの前に使用している画像は以下の画像です。
hijou.gif

4.リストにボタン画像を使用する

サンプル
  • リスト1
  • リスト2
  • リスト3

 サンプルのリストのHTMLソースとスタイルシートは以下のとおりです。


HTMLソース

<div class="listsampbo01">
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</div>
もし、divタグとulタグの意味が分からない場合は「スタイルシートでサイドナビを作成する」を参照してみてください。
スタイルシート
.listsampbo01 li{
list-style-image: url(http://ボタン画像のURL);  ←リストのボタン画像:(URL)
padding:3px 6px;  ←枠内余白:上下3pxずつ、左右6pxずつ
border-bottom:1px dotted #555555;  ←枠線(下):1px、点線、灰色
width:150px;  ←横幅:150px
}

.listsampbo01 li{ }は、.listsampbo01の範囲内にある<li>〜</li>の範囲にスタイルを適用させるという意味です。

.listsampbo01というセレクタ名は私が適当につけた名前です。

5.素材サンプル

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

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

yaji03_navy.gif yaji03_blue.gif yaji03_green.gif yaji03_orenge.gif yaji03_red.gif yaji03_yellow.gif yaji02_10b.gif yaji02_18.gif yaji04_10.gif yaji05_lime.gif new02.gif new01.gif rose2.gif rose.gif hijou.gif hanamaru.gif hanamaru_mini.gif square-blue01.gif square-blue01flash.gif square-blue.gif square-green01.gif square-green01flash.gif square-green.gif square-red01.gif square-red01flash.gif square-red.gif square-yellow01.gif square-yellow01flash.gif square-yellow.gif tama_black.gif tama_blue.gif tama_enji.gif tama_green.gif tama_orange.gif tama_red.gif tama_yellow.gif yaji01_redD.gif yaji01_redL.gif yaji01_redR.gif yaji01_redU.gifyaji06-red.gif
×

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