CALENDAR
S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
<< November 2019 >>
ARCHIVES
CATEGORIES
RECOMMEND
RECOMMEND
MOBILE
qrcode
<< アドレスバーのicon。 | main | Office2004 >>
StyleSheet
各記事のタイトル部分を変えてみよ〜!
今回、活躍したのはパワーポイント・・・

エントリーした時のタイトルの背景が同色でもイマイチだし、違う色にしても・・・
では、グラデーションを付けてみてはどうだろうか??
普通に色指定をしてもグラデーションにはならない・・・
どうしたら、思い通りのグラデーションを作れるのか??
ここで、MicrosoftのPowerPointを使ってグラデーション効果を演出してみた。

操作手順は非常に簡単。
1.まずPowerPointを起動し、四角ツールで、適当なサイズの四角を描画する。
2.デフォルトで中に色が着色されているかもしれないが、気にせず四角の中をダブルクリックする。(プロパティを開く)
3.「塗りつぶしの色」でまず好きな色を選択。
4.その後、色のタブ内から「塗りつぶし効果」を選択。
5.自分の好きなグラデーションを作成。
6.そのページを「名前を付けて保存」するが、その際に「ファイルの種類」を「JPEG」にする(GIFでも、PNGでもOK)。
7.ペイントソフト等で不要な余白を削除。
※Macならば、作成した図を「control」キーを押しながら選択すれば直接名前を付けて保存できるので余白の削除など必要ない。一発で作成完了!

それをサーバーへ保存すると下準備完了!
次に、StyleSheetの書き換え・・・

以下のように「 background-image: url("../icon/bg02.jpg");」の1行を追加する・・。
※アドレスおよびファイル名は自分のサーバーにあったように変更すること。

/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
/*記事のタイトル*/
.content h3 {
color: #993300;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
text-align: left;
font-weight: bold;
border-bottom: solid 1px #993300;
border-right: solid 3px #993300;
border-top: solid 1px #993300;
border-left: solid 0px #993300;
padding: 3px 10px 3px 10px;
background-color: #FFFFCC;
background-image: url("../icon/bg02.jpg");
margin-bottom: 0px;
margin-top: 0px;
line-height: 140%;
}
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

今回の場合、小さなサイズにしたので699バイトとファイルサイズも小さく閲覧する
人にも易しめになっていると思う。
これを応用すれば、バーだけでなく、いろんな所へグラデーションを表示できるし、
また自分の好きな絵を背景にすることも可能だ。

実際にはこんな感じでバーが表示される ↓

※今回は、気分でPowerPointを使用してみただけである。
イラレを使うも良し、Photoshopを使うも良し、好きなペイントツール、グラフィックツールを使えば良いだろう〜。
| インターネット | 20:32 | comments(0) | trackbacks(0) | pookmark |
コメント
コメントする









この記事のトラックバックURL
http://blog.kazushi.babyblue.jp/trackback/981604
トラックバック