==教えることは自分育て==

Picture Trail の作り方
このフラッシュのスライドショーは、アメリカの無料サイトを利用しています。
フラッシュの種類・自分の画像を指定すると、サイトのほうで自動的にフラッシュを作成してくれます。こちらでは、CodeをHPあるいはブログに貼り付けるだけ。

種類も豊富。楽しいですよ~。お試し下さい。

[PR]
# by otomi7771 | 2008-06-09 10:15 |TOPに戻る
Picture Trail
[PR]
# by otomi7771 | 2008-06-07 15:44 |TOPに戻る
QRコードの作り方
 まず無料サイト「QRのススメ」へ行きます。←ブルーの文字をクリック。

 真ん中の列の「さっそく作る」をクリック。

 目的別の「自由テキスト」の【作る】をクリック。

b0063421_18481751.jpg


b0063421_18484436.jpg

[PR]
# by otomi7771 | 2008-05-26 18:06 | ◆QRコードの作り方 |TOPに戻る
FC2の登録の仕方
この頃動画が面白いです。
VideoStudio10で編集して、ドガログは使わずに(?)自分のサイトに直接UPするものですから、いつも残高が心配です。(^^ゞ

そこで今回新たにFC2のHPエリアをゲット。
無料で1Gbまでいただけるのですよ~。これでしばらくは安心ですね。(*^^)v

申し訳ありません。FC2は動画・フラッシュ単体ではUP出来ても、すぐ消されてしまいました。HPの形でないとUP出来ないようです。その辺、どうぞよろしく。

b0063421_14192899.jpg
まずFC2(←クリック)のサイトに行きます。

新規ユーザー登録をクリック。

赤○を入力→次へ。
b0063421_1422675.jpg
「***(アドレス)にメールを送信しました。メール受信後、本登録を行ってください。」

メールを開けます。
b0063421_143124100.jpg

本登録。すべて入力して→登録。
b0063421_1434694.jpg

「FC2IDへの登録が完了しました。アドレス宛てに詳細をメールで送信しました。」

メールを受信すると、「FC2ID・登録完了のお知らせ」がきており、このメールは大事ですから保存しておくといいですね。

サービス追加をクリック。
b0063421_1456929.jpg

FC2ホームページの「このサービスを追加」をクリック。b0063421_168817.jpg



無料ホームページ登録をクリック
b0063421_15572867.jpg

すべて入力し、「以上の内容で登録」をクリック。
b0063421_161041.jpg
確認画面がでますから→OK。

10
このようにメールを送りましたの画面。
b0063421_16193855.jpg


11
またメールを開け(3度目)、URLをクリック。
b0063421_1633278.jpg


12
自分のHPのURLをクリック。
b0063421_1633442.jpg

13
このように白紙のトップ頁が自動生成されています。
あとは、このindex.htmlにUPして上書きすればOK!!
b0063421_1634527.jpg


[PR]
# by otomi7771 | 2008-03-04 14:02 | ◆FC2の登録方法 |TOPに戻る
カレンダーのカスタマイズ
b0063421_16435821.jpgテキストにありますように、
1) カレンダーに背景をいれるには・・・・・・・・DIV.CAL
2) 今日の日付に、gifアニメを貼るには・・・.CAL_TODAY
それをカスタマイズすると→のようになります。
私はアニメgifを貼らずにCSSで点線の枠をつけました。

でもまだ変ですね。
実は、カレンダーは3層構造になっているのです。

/*.CAL_TR {BACKGROUND : #FFF;}*/
をリマークして非表示にしてください。

今度は綺麗に背景が表示されました。→サイドバーのカレンダー。
[PR]
# by otomi7771 | 2007-08-26 16:38 | ├カレンダーの変更 |TOPに戻る
花火のHP
リクエストがありましたので、花火のHP(ブログではありません)の作り方をご紹介します。
HPのUPの仕方がわからない方は、パソコンに保存しておくだけでも、お孫さんがパソコンの中で遊べますよ~。トライなさってみて下さい。

TimeTripperさんのHPへいきます。いろいろな花火のアプレットが公開されていますが、今回は音が一番派手なjhanabi8を紹介します。→ENTER
jhanabi8.lzhをクリック。
b0063421_17323322.jpg


「このファイルを保存しますか」→保存→名前を付けて保存→とりあえずデスクトップを選び→保存。
b0063421_17341651.jpg

デスクトップにjhanabi8.lzhファイルが出来る。

b0063421_17373776.jpgこれは圧縮ファイルですから、解凍ソフトで解凍します。私は+Lhacaをつかっていますので、アイコンの上へドラックするとデスクトップ上に解凍します。



解凍されたファルダと中身です。

java.htm以外は、部品です。jhanabi8.classが花火の動きを設定しているJavaAppletのプログラムです。


b0063421_17541733.jpgb0063421_17585339.jpg

背景画像を用意します。私は439×450(大きい方が打ち上げる領域が広がる)を用意。その名前をback.jpgにしてから、jhanabi8フォルダにいれると、上書きしますか→OK。

java.htmをWクリック。表示→ソース。
以下を参考にソースを変え→上書き保存
自動打ち上げは、5000(5秒)にした方が、自分の打ち上げが効果的ですよ。
タイトルはGIF画像で作られた方が素敵です。

b0063421_215452.jpg

b0063421_21353020.jpg


Dドライブなど適当なところに保存して、フォルダごとサイトにUPします。
パスは・・・wwwサーバ名/jhanabi8/java.htm・・・です。

頑張ってくださいね~!!

HPをお持ちの方でないと、わかりにくいかもしれません。
悪しからず。
[PR]
# by otomi7771 | 2007-08-11 20:36 | ◆花火のHPの作り方 |TOPに戻る
ポラロイドの右寄せ、左寄せ
ポラロイド風のスタイルにすると、思うように右寄せ・左寄せが出来ないとお悩みの方へ。

可愛い音楽隊あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。

可愛い音楽隊可愛い音楽隊あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。


右寄せは、<img src="http://pds.exblog.jp/pds/1/200708/04/21/b0063421_224182.jpg" class="waku4" width="160" height="160" alt="可愛い音楽隊" align="right">あああああああ

左寄せは、align="left"です。これはHTMLタグです。

CSSでは、style="float:left"です。
[PR]
# by otomi7771 | 2007-08-04 21:54 | ├ポラロイド風写真 |TOPに戻る
卒業課題
下は卒業課題のサンプル作品です。

b0018441_15322935.gif
b0018441_15325717.gif
b0018441_15331279.gif
b0018441_16341724.gif


マーキーで海中散歩です。素材はこちらからいただきました。

★作り方を順を追って説明いたします。

まず素材集めです。

素材 アニメーションGIF等で検索してください。気に入ったのが見つかりましたら、右クリックで名前を付けて保存→適当なフォルダ(ブログでCSSのimageで可)に保存。
アニメーションGIFは、必ず.gifで保存しますよ。
b0063421_18262342.jpg背景画像JPG
500×314
b0063421_2227113.gifアニメGIF(蝶)38×37
b0063421_14171085.gifアニメGIF(トンボ)50×50
b0063421_14192342.gif  アニメGIF(カエル)32×32

では、投稿です。

<div></div>で、背景画像の枠(領域)を確保します。

インラインCSSで背景画像、画像の幅・高さをいれます。

背景画像は、記事を非公開にしてダミーで記事内に貼り、後で削除でもよいし、マイイメージアカウントに登録してURLをとってもいいですよ。

<div style="background-image:url(http://pds.exblog.jp/pds/1/200707/31/21/b0063421_18262342.jpg);width:500px;height:314px;"></div>

これで背景に画像が入りました。
インラインCSSの場合、ダブルコーテーションが入れ子になりますので、url()内のダブルコーテーションは付けないで下さい。


次にマーキーで<div></div>内にアニメGIFを動かします。上からまず蝶を飛ばしましょう。

<div style="background-image:url(http://pds.exblog.jp/pds/1/200707/31/21/b0063421_18262342.jpg);width:430px;height:311px;"><marquee>蝶の画像の擬似タグ</marquee></div>

次にトンボは、<marquee width="100" scrollamount="2" behavior="alternate">トンボの擬似タグ</marquee>としました。

さて、ここで問題です。カエルはどういうタグをつかったでしょうか?
答えはソースです。
マーキーのいろいろなタグは、カテゴリー「マーキー」をご覧下さい。

アニメGIFの間隔は、<br>で調整します。


b0063421_2227113.gif
b0063421_162706.gif

b0063421_14192342.gif

[PR]
# by otomi7771 | 2007-07-31 13:20 |TOPに戻る
背景の変更
背景色の変更

/*背景色*/ background-color:色;

背景画像

背景画像は、デフォルトでは縦・横に繰り返されます。
下の画像を貼って見ましょう。

b0063421_915438.gifb0063421_102405.jpg

/*背景画像*/ background-image:url(画像URL);

背景画像の固定

これは、BODYに背景画像をはります。ですから、トップ画像は、/**/でリマークして非表示にします。「花見」のスキンをマイスキンに登録して試してみましょう。

background: #f5faf3 url("http://pds.exblog.jp/pds/1/200703/
11/41/sakura2.jpg");
background-repeat:no-repeat;
background-position:center top;
background-attachment: fixed;


グラデーションの背景

background: #ffffff url("http://pds.exblog.jp/pds/1/200705/12/21/line.jpg");
background-repeat:repeat-x;
background-position:top;
background-attachment: fixed;


★ウェブアートデザイナーのグラデーションの背景の作り方は下のサイトをご参照ください。↓グラデーションの作り方

★ご自分のHPにも、早速応用してみてくださいね。わからない方は、万年山のHPのソースをご覧下さい。
[PR]
# by otomi7771 | 2007-07-23 09:15 |TOPに戻る
蛍光ペンでマーク
蛍光ペンでマークしたように、文字に色をつけてみましょう。

<CSS編集>
下をCSS編集に登録しましょう。

/*蛍光ペン*/
.k08{
background-color:#ffffc4;/*薄黄*/
}

.k09{
background-color:#80ff80;/*薄黄緑*/
}

.k10{
background-color:#80ffff;/*薄水色*/
}


<投稿画面>
編集したい文字を<span></span>で囲み、クラス名を付けて適用させましょう。

(例)
ブログは簡単で、面白いですね。

<span class=k08>ブログ</span>は簡単で、面白いですね。
[PR]
# by otomi7771 | 2007-07-22 22:26 | ├蛍光ペンでマーク |TOPに戻る