So-net Top に戻る
  U-Page+みんなのホームページサービス  
Menu
U-Page+ってなに?(サービスガイド)

U-Page+パーク

U-Page+カフェ

みんなのもくじ

ホームページづくりを学ぼう

HOME PAGE TUTORIAL

素材作成講座

つかってみよう

ファーストページアシスタント

ホームページ素材集

困ったときにはまずここを

よくあるご質問と回答(FAQ)

お問い合わせは

障害・メンテナンス情報

特定商取引法に基づく表記

ホームページづくりを学ぼう
素材作成講座 TOPへ
第12回 「アクセスカウンターをオリジナルデザインに」(1)
    next

はじめに   見本

ホームページに訪れた人数をカウントできるアクセスカウンターは、 HTMLファイルにタグを埋め込むだけで、簡単に利用できます。その数字も、自分で作ったイメージと変更ができるということを知ってましたか?

それでは、アクセスカウンター作りにチャレンジ!

  イメージイメージイメージイメージイメージ
イメージイメージイメージイメージイメージ
素材ダウンロード
  自由に加工できる完成形の素材です。 
counter.lzhファイル(28k)
● 作成の手順
数字を置くイメージを作成して、その後で数字をレイアウトします。
作り方 のついた画像をクリックすると拡大図が見られます。
1. 新規ファイルを作成する
上部のメニューから「ファイル→新規作成」を選択して、開いた「新規ドキュメント」ウィンドウで、幅19、高さ17、解像度は72ピクセルと入力し、キャンバスカラーは「透明」をチェックして「OK」をクリックします。

イメージ

2. 背景のカバンを作る
細かい作業なので作業がやりやすい様に、ズームツールで2回クリックし、400%に拡大して作業をします。

「角丸矩形ツール」を選択し、「ウィンドウ→塗り」を選択し、「塗り」パネルで種類は「基本」、カラーは#993300に設定し、「ウィンドウ→ストローク」を選択し、「ストローク」パネルで種類を「なし」に設定して幅19、高さ14の角丸の長方形を描きます。「ウィンドウ→オブジェクト」を選択し、角丸の割合を「30」とします。
「ウィンドウ→情報」を選択し、「情報」パネルでX:0、Y:3へ移動します。
「ウィンドウ→レイヤー」を選択し、「レイヤー」パネルでレイヤー名「レイヤー 1」をダブルクリックし、「背景」と名前を変更します。


イメージ
3. カバンの握り手を作る
「角丸矩形ツール」を選択し、「塗り」パネルで、種類は「なし」に設定し、「ストローク」パネルで、種類を「鉛筆」、カラーは#993300、ストロークの名は「柔らかい線」、チップのサイズを2に設定して、幅7、高さ7のカバンの握り手を描きます。
「情報」パネルでX:6、Y:1へ移動します。

イメージ
4. フレームの複製
「ウィンドウ→フレーム」を選択し、「フレーム」パネル右端にあるプルダウンメニューから「フレームの複製」を選択します。
「フレームの複製」ウィンドウで、数を「9」、「現行フレームの後に挿入」をチェックして、「OK」をクリックします。

イメージ

5. 数字を入力する
「フレーム」パネルで、「フレーム1」を選択します。
「レイヤー」パネルで、パネル右端にあるプルダウンメニューから新規レイヤーを作成し、「数字」と言う名前を付けておきます。
その「数字」レイヤーを選択したまま、「フレーム」パネルに戻ります。

「フレーム1」を選択します。
「テキストツール」を選択しドキュメントウィンドウをクリックすると「テキストエディタ」が表示されます。
フォントは「Arial Black」、テキストサイズは「12」、色は「黒色(#000000)」、横比率は「120%」と設定し、「1」と入力して「OK」をクリックします。
「情報」パネルでX:5、Y:4へ移動します。

次に、「フレーム2」を選択し、同じ設定で「テキストツール」を使い「2」と入力し、「情報」パネルでX:5、Y:4へ移動します。

同じ要領で、3から9までの数字をそれぞれのフレームへ入力していきます。

最後に、「フレーム10」には「0」と入力し、「情報」パネルでX:5、Y:4へ移動します。

 


イメージ

イメージ

このままでは少し物足りない感じがしますね。
次で数字の色を変えて、アクセントを付けてみます。
さらに、複数のオブジェクトの簡単な書き出し方法も紹介します。
    next
素材作成講座 TOPへ | ホームページづくりを学ぼう TOPへ | U-Page+ TOPへ
So-net TOPへ
 
Copyright 2010 So-net Entertainment Corporation