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

<   2007年 07月 ( 11 )   > この月の画像一覧
|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に戻る
陣中お見舞い申し上げます。

陣中御見舞

ふ~。暑いですね~。
皆様宿題頑張ってありますね。
15日は日曜日の追い山です。
チャンス到来。
台風が心配ですが、
熱気の迸りを肌で感じてきます。
今日から早寝しましょう。
でもご質問はドンドンどうぞ。
       by Otomi

[PR]
by otomi7771 | 2007-07-15 02:33 |TOPに戻る
スキン編集ヘルプ
スキンの内部CSS(窓はCSS編集)を書き換え、または書き加えることで自分風にカスタマイズする前に、まずスキン編集ヘルプ(←クリック)を読みましょう。

特に3)、4)については最初はわからないと思いますが、テキストを進むうちに次第に理解できるようになると思います。

要点を箇条書きします。(ヘルプより抜粋)
1)背景イメージとBGMの使用
  遅いロードスピードと読みづらい本文によって不便を与える場合もあります。
  背景イメージとBGM使用をできるだけ控えてください。
  エキサイトブログがおすすめするイメージ使用容量は1スキン当り60KBです。

2)適当なスキンの横幅
  モニターが大きくなり解像度が高くなっても多くのユーザーがウィンドウを最大化
  して見るわけではありません。

  私どもがおすすめするスキンの総横幅は800ピクセル以下です。
  本文の場合400~700ピクセルの間の値をおすすめし、ロゴおよびメニューの場合
  100~300ピクセルの間の値をおすすめします。

3)普通スキンを構成するセクションを大きく分けると次のようになります。
このような構成要素はexblogタグという特殊な機能および値を持っているタグによって表示されます。 エキサイトブログタグは <$タグ名$> 形式に表示されますので カテゴリーのエキサイトブログタグを参照してくだい。
b0063421_0403727.jpg


4)部分別横幅とは?
HTML/CSS編集画面上段にある各部分別横幅が何かがよく理解できない方もいるかと思います。

部分別横幅を指定することとは本文に含まれるイメージ、ロゴイメージそしてメモ帳およびメモ帳にアップされるイメージの横幅をあらかじめ指定することで、サイズを指定しておくと本文、ロゴ、メモ帳などにアップされるイメージや動画などのオブジェクトが自動でリサイズされます。
例えば、本文の横幅を500pixelに指定しておけば、ポスト登録時添付するイメージの横幅が1000pixelであっても自動で500pixeに表示されます。
従ってこの数値は編集するHTMLおよびCSSでの各部分別横幅にあわせてあらかじめ指定しておく必要があります。

5)ほとんどのエキサイトブログスキンは次のような構造を持っています。
CSS FILE
DIV#TOP {属性}
DIV#LEFT {属性}
DIV#RIGHT (属性)

DIV.POST {属性}
DIV.HEADER {属性}
.....

HTML FILE
<DIV ID=TOP>
<DIV CLASS=HEADER><$header$></DIV>
</DIV>

<DIV ID=LEFT>
<DIV CLASS=POST><$post$></DIV>
</DIV>

この図式はとても簡略に表現したものです。
つまりCSSでは大きいセクションを#(ID)に指定して、小さいボックスを.(CLASS)に指定した後HTMLファイルでDIV(ボックスタグ)でそれぞれエキサイトブログタグを囲む形式になっています。

[PR]
by otomi7771 | 2007-07-14 21:01 | ├スキン編集ヘルプ |TOPに戻る
Jtrimのダウンロード
Googleで「Jtrim」と検索します。【Jtrim】をクリック。
b0063421_23321998.jpg
Trim1.53bは Windows Vistaに正式対応してはいませんが、概ね良好に動作します。

下へスクロール。今回は、解凍ソフトのいらないセットアップ版でダウンロード。
b0063421_2342150.jpg

このファイルを実行または保存しますか。→【保存】をクリック。
b0063421_018255.jpg

保存先を聞いてくるので、私は、Dドライブの中に「downloads」というフォルダを作り、フリーソフト類はいつもここを選択→保存。【jt153b.exe】をWクリック
b0063421_2351948.jpg

「このソフトウェアを実行しますか」→【実行】
b0063421_0494423.jpg

「セットアップウィザードへようこそ」→【次へ】

インストールフォルダの選択。CドライブのProgramFilesのまま【次へ】。
ショートカットがJtirmのまま【次へ】
b0063421_1105545.jpg

追加タスク→【次へ】

インストールの準備が出来ました→【インストール】
セットアップの終了→【終了】
b0063421_111743.jpg

デスクトップにJtrimのアイコンが出来ました。
b0063421_1214158.jpg

[PR]
by otomi7771 | 2007-07-10 13:00 | ├Jtrim(画像作成) |TOPに戻る
トップ画像の作り方
このスキン『ナチュラル』の場合のTOP画像の変更を説明します。
まず、トップ用の画像をJtrimで作ります。 →Jtrimの使い方。

まずデジカメで撮った原画がかなり大きいので、1024×768にリサイズします。

b0063421_12464112.jpgファイル→開く→写真を選択→開くで原画をだします。

イメージ→リサイズ(ツールのリサイズでもよし)→サイズを記入・縦横の比率を保持するにチェックを入れる→OK。

このチェックが大事。




b0063421_12531090.jpg
イメージ→座標指定切抜き→

座標1  X:0   Y:0
座標2  x:746 Y:170(これはナチュラルのサイズ)を入力。
これでサイズの枠がでます。
b0063421_13103812.jpg


座標指定切抜きのウインドウを出したまま、枠を切り取りたい場所に移動→OK。
b0063421_13301068.jpg


これで希望のサイズ、希望の場所を切り取れました。
b0063421_13224023.jpg

ファイル→名前を付けて保存。名前は英数半角で。
[PR]
by otomi7771 | 2007-07-10 12:09 | ├TOP画像の変更 |TOPに戻る
画像のないTOPの場合のサイズの取り方
まずブログを立ち上げ、キーボードのPrintScreenをクリック。
これでデスクトップ画面がコピーされます。

Jtrimを立ち上げ、編集→貼り付け。
b0063421_16513257.jpg


イメージ→切り取り。

グレーの部分ピッタリに選択枠を合わせ→OKで切り取ります。

b0063421_16462689.jpg
イメージ→リサイズでサイズがわかります。
座標2から座標1を引いた数値ですね。
b0063421_16542686.jpg

[PR]
by otomi7771 | 2007-07-10 10:58 | ├TOP画像の変更 |TOPに戻る
ポラロイド風写真のサインの作り方
ソフトはフリーの「Trtrim」を使います。

b0063421_13422157.jpgツールの【新規作成】→【キャンバスの色】を下やじるしで【白】を選び、OK。

ツールの【A】。サンプルとして、例えば「Otomi」と入力。
下の画像を参考にいろいろ設定→OK。
b0063421_21575215.jpg

b0063421_2222910.jpgドラッグで囲み→【編集】から【切り取り】→【編集】から【貼り付け】。


b0063421_22141561.jpgb0063421_2211712.jpg【イメージ】→【透過色設定】→鉛筆マークでサインの周りをクリック→透過(背景市松模様)になる。


【ファイル】→【名前を付けて保存】→【ファイルの種類】はGIFを選び、名前を付けて【ブログでCSS】の【image】に保存で完了です。
[PR]
by otomi7771 | 2007-07-10 09:12 | ├Jtrim(画像作成) |TOPに戻る
基本的な枠を使って・・・
基本的な枠をいろいろ使って、作って見ました。
HPの台紙の感覚で使って見るのも、面白いですね。

草野町椿ウォーキングに行ってきました。
b0063421_3465969.jpg
岩根椿

[PR]
by otomi7771 | 2007-07-07 02:42 |TOPに戻る