As you desire it.

↓こんな子(バナーを作成してみました。)

カーソルを乗せると　『手を上げてウインクし ぃょぅ！と表示されます。』



◆作成方法◆
まずは
�@このバナーを作るためには画像を三つ作らなければなりません。
画像�T

画像�U

画像�V



これら三つ画像は、GIFアニメの要領で作ります。
※解らない方は、前回のGIFアニメの作成解説を参照して下さい。


出来たら　三つとも画像をアップロードしアドレスを取得します。

取得したアドレスを下記のタグに挿入して下さい。
↓ロールオーバーの動作タグです。

=======================================================================

＜img src="一つ目の画像URL" onmouseover="二つ目の画像URL'" onmouseout="this.src='三つ目の画像URL'" title="喋らせたい言葉" width="88" height="31" alt="画像の名前" /＞

=======================================================================

以上で完了です。

※実際に貼る際には ＜＞の記号を <>に変更。



また　リンクアドレスを挿入したい際には


=======================================================================

＜a href="リンク先のアドレス"＞＜img src="一つ目の画像URL" onmouseover="二つ目の画像URL'" onmouseout="this.src='三つ目の画像URL'" title="喋らせたい言葉" width="88" height="31" alt="画像の名前" /＞＜/a＞

=======================================================================

※実際に貼る際には ＜＞の記号を <>に変更。


になります。

上手く活用すると　いろいろなことが出来ますので
参考にしてみて下さい。

今回は、残像バナーです。
いろいろな用途に利用可能なテクニックなので便利ですが
基本さえ出来ていれば ごくごく簡単！
なんてことはありません。

必要なもの
PHOTO SHOPバージョン
�@PHOTO SHOPのソフト(全バージョン可)
�AANI4Gあるいは、IMAGE READYなどのGIFアニメ動画作成ソフトあるいは機能
�B使いたいフォント
�C載せたい画像

ペイントバージョン
�@Winがあればok!
�A無料ソフトのANI4Gでok！
�B使いたいフォント
�C載せたい画像

以上です。
PHOTO SHOPの購入は、私の関与するところではありません。
ANI4Gについては、前回 ダウンロード先や使い方を記載しました。
フォントも web上で探すなり、素材ソフトを買うなりして下さい。
画像は、自分で撮りましょう…著作権やパブリシティ権の問題もありますので…
自己責任の上で…


では
作成解説に入ります。

PHOTO SHOPバージョン


�@ファイル→開く→画像を選ぶ
�Aイメージ→画像解像度→88pixel,31pixelに合わせる(必要であれば カットツールでカット)
�Bフォント→フォントと色を決定→文字入れ
�Dフィルタ→表現手法→風(強さは、小さいバナーなので一コマに対し『普通』を選択が無難)
好みで　他フィルターの利用も可。参考バナーでは
リズ部屋の文字が消える際に『拡散』を選んでいます。
�EANI4Gを起動させ 一連の作業で合成して完成
例
サンプルの場合の各数字設定

画像１
数値設定100

画像２
数値設定5

画像３
数値設定5

画像４
数値設定5

画像５
数値設定5

画像６
数値設定100

画像７
数値設定5

画像８
数値設定5

画像３
数値設定5

画像２
数値設定5

ペイントバージョンは　続きを開いて下さい。

続きはコチラ

前回までを見る
バナー作成�B

今回は、GIFアニメの動作部分の解説に入りますが
その前に GIFアニメについての理解をして頂きたいと思います。

GIFアニメというのは どんなものか？
簡単に言うと パラパラマンガと考えて下さい。
複数枚の 微妙に動きを進めた画像に表示設定をして あたかも動いているように見せる

…というのが　GIFアニメの考え方です。

動作の仕方自体を設定して動かすFLASHとは違い
一枚一枚自作し動かすというアナログな作成方法なのがGIFアニメなのです。

では
動かすための画像を複数枚用意してみましょう。

�@前回出来たバナーを動作を想定し複数枚作成します。

一枚目

二枚目

三枚目

四枚目


�A以上四枚を用意しました。

�B次は、この四枚を合成して動かす作業です。
まずは、それ専用のソフトが必要なので↓からダウンロードして下さい。
Ani4GIF.EXEver2.1.8
幾つか バージョンがありますが新しいAni4GIF.EXEver2.1.8をダウンロードして下さい。
無料且つ安全なソフトですし、非常に軽いので動作不良等も起きませんから
気軽にダウンロード出来ます。




これで完成です。

※サンプル動画は、４枚いづれも 時間設定を５にしています。



如何でしたか？
解らないことがあったら　気楽に御尋ね下さい。


JPEGバナーは こちらを参照

JPEGバナーは、画像切抜き以外は、特に差が無いので参考サイトを閲覧下さい。

次回は、GIFアニメだと 一度は憧れるコレ↓

PHOTO SHOPバージョン

ペイントバージョン

さて
バナー作成の続きです。
前回までの項目は
以下のとおり

バナー作成�@
バナー作成�A


ペイントを開けたら まず操作を覚えて下さい。

とりあえず、簡単な説明は以下のとおり…





今回は、こんなモノを作ってみます↓



工程�@黒の下地にします。

下地を黒にする方法は
ペンキツール→パレットから黒を選択→塗るでも
バケツツール→パレットから黒を選択→一気に色を変えるでも
変形→色の反転でも構いません。

工程�Aグライコを描く。



えんぴつツール、あるいは 線ツールで白いグライコを段差を付けて描いて下さい。
拡大指定で800倍にすると やり易いです。
書きたい文字の数だけ グライコを横並びに作りましょう。(CAPRICCIOは ９文字なので９本)

工程�B上のほうを赤に変える。
バケツツール、えんぴつツール、線ツールどれを用いても構いません。

工程�C文字を入れる。



ペイントの文字では サイズなどの問題があるので PictBear(PHOTOSHOPでも構いません。)を開いて下さい。


続きはコチラ

バナーを作る際に
まず決めておかなくてはならないことがあります。

�@サイズ(これは とりあえず 88×31pixelということで…)
�A拡張子を何にすえるか？です。


拡張子とは、JPEG,GIF,BMP,PNG,SWFなどです。
詳しい説明は抜きますが
バナーの場合、FLASH(SWF)を除き JPEGか GIFで作成します。

主に 写真を取り込みたい時はJPEG
ロゴ調にしたい時にはGIF
を使います。

逆は 向かないので注意して下さい。
※JPEGは 色数が多く細かい画像が乗るので写真に適していますが
歪みが出ます。
ロゴなどは、色数が少なくても歪まないほうが綺麗です。

例↓
JPEG

↓拡大

GIF(PHOTOSHOPでGIF変換したもの。)

↓拡大

GIF(ペイントでGIF変換したもの)




JPEG

↓拡大

GIF

↓拡大



なので
まず 自分が どちらのタイプのバナーを作りたいのか？
をまずは、決めることが先決です。
(※ちなみに 当ページのバナーは GIFのバナーです。)


続きはコチラ

折角、ブログをカスタマイズしたので バナーを作成しました。

↓こんな奴


私の場合には、他にもホムペやブログがありますので
そちらとの連携にも使えるためバナーは必須アイテムですが
ココだけのことを考えても バナー交換は 名刺交換みたなもので楽しいでしょう？
(そんなことないか？)

少なくとも チャットレディの方の場合は
勤め先のチャットのスキン画面にバナーを貼れます。
素敵なバナーを貼れれば フォントリンクより　ずっと見栄えが良いので
ポチッとしてくれる御客様もいるかもしれません？


…と御託は さておき…(本当は、自分が作りたかっただけだしね…)
なには ともあれ 今回は バナー作成の話です……ｗ


まず
一回目の今回は、動かない一枚のバナーの作り方から はじめます。

さて
基本的に　フォトショやらイラストレーターやらを御持ちでない方もいらっしゃると思いますので
フリーソフトウェアの紹介からします。

Pict Bear 1.74
CG作成の基本ツール、フィルタやレイヤー加工、貼り付け、フォント入れ等は 一通り出来ます。
有料ソフトの質と比較するのは 間違いですが、さして大きな差はありません。
シンプルで 有料有名ソフトより扱いが楽なので 特に初心者には向いています。

Irfan View32日本語版
フリーのGIF変換マルチメディアビューア
簡単に言うと Pict Bearで作成した BMP画像をGIF画像に変換するためのもの。

これらのフリーソフトと PCに入っているペイントを活用して バナーを作成することが出来ます。
(※スタート→すべてのプログラム→アクセサリ→ペイント)



続きはコチラ

皆さんが あまりやっていないスクロールバーの色変更の仕方を
つまり↓画面右端の水色のを　自分のblogに合わせて
色変更する方法を　今回は、アップしてみます。



とても簡単に出来るので 是非 試してみて下さい。



↓スクロールバーの色変更タグは以下の通り
(※色は上部掲載のピンクのものです。)

=========================================================================


＜STYLE ype="text/css"＞
＜!--BODY{scrollbar-face-color:#e4859d; /*スクロールバー本体の色*/
#cf4e6f; /*スクロールバー左側（上）の影*/
scrollbar-shadow-color: #cf4e6f; /*スクロールバー右側（上）の影*/
scrollbar-3dlight-color: #ffffff; /*スクロールバーの左側（下）の影*/
scrollbar-arrow-color: #cf4e6f; /*矢印の色*/
scrollbar-track-color: #ffffff; /*背面の色*/
scrollbar-darkshadow-color: #ffffff;/*スクロールバー右側（下）の影*/
}--＞
＜/STYLE＞

=========================================================================


注１)
/*　　　*/
で挟んである文字は web上に反映されないので
そのまま添付可です。
再度 色変更する際に記述したままのほうが 解り易いでしょう。

注２)
＜＞ は、ペーストの際に <> に変更して下さい。


さて
肝心の挿入場所ですが
コチラも そう難しくはありません。

�@管理ページ
↓
�Aスキン
↓
�Bスキン編集
↓
�Cメインテンプレート

と進んで頂きます。

メインテンプレート内の<body></body>タグに挟んで頂ければokです。

う〜ん 挟む？？？とか よく意味が解らない方は 単純に

<head></head> の直ぐ下あたりに <body>というタグがある筈ですので更に　その直ぐ下あたりに 挿入(コピペ)して貰えれば完了！
以上です。


解らなかったら 気軽に質問して下さい。

最近は、簡単に音楽をweb上で流せるんですね…
昔は、いちいち著作権フリーの音楽を探して MIDIファイルを取り込んで
サーバーにアップロードし JAVA設定をして EMBETのタグで添付したものですが…

個人では、著作権フリーで無い音楽を貼り付けるなど
いつ著作権協会から請求が来るか分らず(昔は 結構 注意などがあったそうです。)
結局、著作権が切れている(死後50年ですから、大概 CLASSICかJAZZ)の作品をアマチュアが演奏している音源や
自分で打ち込んだ音源をアップするしかありませんでした。

しかし
今ならば 公然の無法地帯you tube(法的に問題はありますから いづれは、それなりの取締りがあるかもしれませんが？)から
音源を引っ張り貼れるので 以前のような心配は無いんですね…


いやぁ なんとも 便利な世の中(バーチャル空間)になったというものです…


因みに
you tube動画の添付の際

↓赤く囲っている部分をコピーすると



↓このようになっており
※１　幅：高＝４：３であれば 数値は自由。単位は、pixel
※２　オレンジの部分は、各動画毎に違います。





アドレスの後ろ＝ココに挿入(二箇所両方)に
autoplay=1
を加えると 映像がページを開いた時に 自動で再生されますが

↓のように加えると
&autoplay=1&loop=1
曲が終わった後に繰り返し再生されます。(無限)

短い曲や 一発芸を流したい方には こちらの設定が良いでしょう。

続きはコチラ