━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
WEBデザイナーが送る：ホームページをもっとすてきに vol.001
無料フォトアルバム製作キットUntitled...の素材の更新情報や
メルマガ読者だけに送るすてきな素材準備中！
■ 発行人：1000leaves
■ 創刊号 2004年2月18日(水)
───────────────────────────────────
■ http://www.1000leaves.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
★公開二ヶ月で１２０以上のサイトで採用！次はあなたの番です。
このメールマガジンではバージョンアップ情報や、Untitled...を使ってホーム
ページを作製した方を紹介したり、メールマガジンを購読してくれているのあな
たのためにバージョンアップしたUntitled...を配布しちゃったりします。
Untitled...を配布し始めてからたくさんの方から感動のお礼報告や、お便りを
頂き、本当にありがとうございます！
そしてこのメルマガも配信前だというのに480人のかたからの予約を受けて
ひじょーに身が引き締まる思いがしてます。
まだまだ未熟なUntitled...は皆様からのアイデアをうけ、ますます使いやすく
なりそうです！
そして、今回はスペシャルダウンロード付き。
あの「メモと日記」Untiteld...memoがダウンロードできるパスワード付きです。
設置はUntitled...like a Polaroidが設置できた人なら簡単です。
詳細readme.txtが付いてるから安心してください！
<< もくじ >>
１．ホームページ初心者の私にも出来た！ペロパルさん感動の設置報告
２．Untitled...こんな使い方・・・表紙の一部としてUntitled...をいかす
３．小窓を作る方法−大きさを指定してブラウザを立ち上げる
初心者もこれで安心？出来たらしてみたいことNo.1
４．もっとステキにTips：テキストリンクにアイキャッチをつける
ちょっとした手間でずいぶん違うクリックの数
５．メルマガ読者だけに送る新素材！(メモと日記のお知らせ)
６．1000leaves通信（編集後記）
┏━━━━━━━━━━━━━━━━━━━━［在宅ワークのアルシオ］━┓
余った時間に収入を得たい。
まずは無料で資料をゲット!!
http://px.a8.net/svt/ejp?a8mat=IKSPY+FP0DV6+4RY+C2103
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
………………………………………………………………………………………………
□ １．ホームページ初心者の私にも出来た！感動の設置報告
ペロパルさん：http://www5d.biglobe.ne.jp/~peropal/
………………………………………………………………………………………………
★写真をきれいに見せたい！
写真をきれいに見せたい！という気持ちは誰にでもありますよね。Untitled...の
導入までしてくださったペロパルさんもそんな気持ちから始まったのです。
Flashを使ってる素材が気になる。でもソフトは無いしどこから手を付けるの？
そんなペロパルさんからの感動の設置報告が届きました。
「やってみたい」「でも出来ない」を繰り返した結果、今日、初めて挑戦。
な にしろビルダーの「どこでもモード」しか触れない初心者です。
でも・・・出来たんです！多分・・・出来たのだろうと思います。
もう感激です。
そして、ペロパルさんはクリックすると指定した大きさに小窓が出るようにし
たい。やり方を教えてくださいませんか？とメールを締めくくりました。
私はその日のうちにメールの返信が出来なかったのですが、次の日こんなメー
ルが届きました。
きのう、ＳＯＳのメールをしたものです。昨晩、頭をひねって出来ました！
御迷惑をおかけいたしました。
それにしても・・この私が出来たのですから、どれだけUntitledさんが素晴
らしいかが分かります。
ありがとうございました。
ここで見る皆さんの素晴らしいサイトには足元にも及びませんが、参考にし
て少 しでも近づけるようにがんばります！
そして、この奮闘記を日記にしてくれました。
このときの様子はこちらです。
http://www.number21.jp/diary/peroparu/index.html
2004/2/12の”で〜き〜た〜〜ぁ(^^♪ ”
に感動の秘話が記載されてます。
もうタイトルからかなりのうれしさがこみ上げているのがわかります。
こちらこそ感激です！
しかも、読んでいると、「桜道」のめいさんからの紹介とのこと。
めいさん！ありがとうございます！
桜道、めいさん：http://www5d.biglobe.ne.jp/~s_miti/
"memo"でUntitled...like a Polaroidを使ってくれてます。
これからもUntitled...を使って色々な輪が広がり続けてくれるというのを期待
しています。そして、ペロパルさん！今度はあなたがUntitled...の導入を手伝って
あげてください！ペロパルさん頑張ってくださいね。
素材を作っていて、気がつかなかったうれしいこと。
それは、私とあなたとのやりとりだけではありませんでした。
あなたが、あなたのお友達にUntitled...を紹介してくれている。
ここに気がつかなかったうれしさがありました。
メルマガもそんな皆さんによって支えられてるんだと思うと、うれしいです。
★Untitled...は素敵なフォトアルバムを作りたいあなたの為のスクリプトです！
素材配布はこちらから
http://www.1000leaves.jp/1kleaves/materials/
画像を用意して、フォルダに入れておくだけです。簡単な設定であっというま
に出来ちゃいます。
………………………………………………………………………………………………
□ ２．Untitled...こんな使い方・・・表紙の一部としてUntitled...をいかす
………………………………………………………………………………………………
みなさんいろんな使い方をなさっているんです。
開発者の自分でもこんな使い方をしてるんだ！素敵だ！と思ってます。
TOPページというのは、アイデアも決まらず、そして作るのが難しい！このページ
さえ決まってしまえば！と思うことありますよね。
そんな難しいTOPのページや、一番多くの人が見るページにUntitled...を利用し
てくれているサイトをご紹介します。
★. S L O W F L O W ．
saiさん：http://sai.staba.jp/
内容が複数ページにわたる場合も、内容がその場でスライドしてくれたら便利
だろうなって思いを具体的に形にしてくれてるのが、saiさんのページ。
ページのコンテンツの一部としてUntitled...を使ってくれてます。
左のメニューで選んで、右のページはなにかしら動きのあるコンテンツ。
Untitled...のアルバム以外の使い方を気づかせてくれました。
あなたもこのメールマガジンでご自身のホームページを紹介してみませんか？
Untitled...をこんな風に使ってますや、フォトアルバム更新しました！
などなど、実際設置したときの感じを教えてください。
更新しました！だけでもOKですよ。
★素材配布ページ内の問合せメールフォームからどうぞ。
http://www.1000leaves.jp/1kleaves/materials/
相互リンクご希望の際は、本文中に相互リンク希望とお願いします。
………………………………………………………………………………………………
□ ３．小窓を作る方法−大きさを指定してブラウザを立ち上げる
………………………………………………………………………………………………
さて、もうすでに3人くらいの人から、やり方を知りたい！教えてください！
そして、同梱セットを出してください！との声をいただきまして、はじめての
ホームページをもっとすてきにの具体的なコンテンツは
このJavascript(ジャバスクリプト)を取り上げてみよう！とのことにあいなりま
した。
簡単に言っちゃえば、
<a href="#" onclick="window.open
('Untitled_pola.html','untitled','status=yes,width=300,height=400')">
リンク</a>
※改行しないで一行でばしーっと書いちゃいましょう！
と書くだけなんです。
ホームページ製作ソフトを使ってるから分からない！とお嘆きの方。
どきどきしてもかまいません！
ご自分のソース(***.htmlをメモ帳で見てみて！)を見てみてください。
リンクには、<a href="../**/******.html">リンク</a>
などのように書かれているのが普通です。***.htmlだけということもあります。
ブラウザのメニューは要らない！写真だけを見せたいんだからって思ったら
試すことは一つ。
<a href="../**/******.html">
を
<a href="#" onclick="window.open
('../**/******.html','untitled','status=yes,width=300,height=400')">
に書き換えます。もちろん、お使いの環境(？)に応じてご自身で変えなくてはなら
ない箇所がありますよ。
具体的にはシングルコーテーション(')で囲まれている3つの要素
('../**/******.html','untitled','status=yes,width=300,height=400')
￣￣￣￣ ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
を変更します。って変更箇所多いよ!ですね(笑)
一箇所目と二箇所目のアンダーラインの説明です。
─────────────────────────────────────
◆untitled ：窓の名前(おまじない)
◆statusとかwidthとか、heighとか：画像が切れないように大きさを指定したり
使いこなすと色々出来ます。属性と呼びます
─────────────────────────────────────
★それじゃ、具体的に実践していきましょー。
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
test.html(編集中のぺーじ)←ここに書かれているリンクをポチッと押したら・・・
├album1(フォルダ名)
│ ├untitled.html(これを呼び出したらスライドショーが始まる)
│ ├untitled.swf
│ ├data.xml
│ ├01.jpg
│ ├02.jpg
│
├album2(フォルダ名)
│ ├untitled.html(これを呼び出したらスライドショーが始まる)
│ ├untitled.swf
│ ├data.xml
│ ├01.jpg
│ ├02.jpg
│
という状況を考えてみましょう。
こんなときにtest.htmlに書くタグは次の通りです。
都合で改行されてますが一行で書いちゃってください。
<a href="#" onclick="window.open
('album1/untitled.html','untitled1','status=yes,width=300,height=400')">
アルバム１</a>
<a href="#" onclick="window.open
('album2/untitled.html','untitled2','status=yes,width=300,height=400')">
アルバム２</a>
これは今あるリンクの<a>から</a>までをそっくり置き換えてしまうもんです。
大きさは、各自指定してあげてください。
Untitled...の大きさが600×500だったら・・・立ち上がる窓の大きさも
width=600,height=500
になりますよ。
★次回は、ページの中にUntitled...を表示させたい！方にお届けします。
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
………………………………………………………………………………………………
□ ４．もっとステキにTips：テキストリンクにアイキャッチをつける
………………………………………………………………………………………………
テキストにリンクを設定するとき、あなたはどうしてますか？
うちのリンクは、マウスをのせたら下に動くから分かる。指の形になるから分か
るって思ってませんか？
リンクって一目みたら分かるっていうのが今回のTips。
アイキャッチと呼ばれるリンクのすぐ近くに置くポイントになる画像を指します。
Promemoria Projectの場合、"赤い3つの小さな四角"と、"ブルーの四角"がこの
アイキャッチになります。
あと、[new]の画像もつけてますね。
これで一目でリンクが分かって、ステキさがUPしますよ。
そこで今回のTipsを完成させるために1000leavesがしている工夫を公開します。
文字のそばに画像を置くと次の二つが気になります。
・テキストと画像の間の隙間が調整できない
・テキストの位置と、画像の位置が微妙にずれる(中央でそろって欲しい！)
★テキストと画像の間の隙間・・・・・・・・・・・・・・・・・・・・・・・
これは迷わずポイントとなる画像に逆にスペースを加えてつくりました。
画像自体にスペースを加えることで、アイキャッチの周りに隙間が出来る！
これをしてから、文字とアイキャッチとの間の隙間をうまく使えるように
なりました。
★テキストの位置と、画像の位置のずれ・・・・・・・・・・・・・・・・・・
<img>タグの中に属性を加えることが出来ます。
Promemoria Projectでは赤いアイキャッチを文章と同じ高さにするために
<img src="img/yajirusi.gif" width="7" height="9">
を
<img src="img/yajirusi.gif" width="7" height="9" align="absmiddle">
にして、
align="absmiddle"
を加えることでアイキャッチとテキストが一直線に並んで見れるようになります。
………………………………………………………………………………………………
□ ５．新素材準備報告(汗)
………………………………………………………………………………………………
メルマガだけで配る新素材、第一弾は前ふりも期間も長くお待たせしすぎた感の
ある「日記とメモ」です。名前、どーしよ。
untitled... memo
ということでいいでしょうか。
そんなことよりも早く、ダウンロード先を教えてくれ！
ということで、
パスワードとダウンロードページを発表します。
ダウンロード時にパスワードが必要になります。
http://www.1000leaves.jp/1kleaves/materials/mm.html
パスワード
promemoria
です。メルマガを発行したときにパスワードが変わります。
設置後、お友達に欲しい！って聞かれたら、メルマガ登録を促してあげてく
ださいね。
★枠の中にパスワードを入れてダウンロードを押してください。
半角英数字、大文字小文字判断します。
きちんと打ってるのに・・・おっかしいなあって思ったら"CapsLock"を疑って
ください。
★ダウンロードは、
http://www.1000leaves.jp/1kleaves/materials/mm.html
からどうぞ。
あと、みなさんにご報告があります。
今回のバージョンはクレジットを入れさせていただきました。
(？)というボタンを一つ増やして、バージョン情報と、お粗末ながらPromemoria
Projectへリンクするボタンを入れました。
消して欲しい人もいらっしゃるかもしれませんがPromemoria Project発展のために
ご協力くださいね。
★そしてダウンロードさせているのも新しい素材です・・・・・・・・・・・・
この簡易ダウンローダー。Untitled...と同じくらい簡単な設定でパスワードを
使った様々なことをすることができます。
秘密のページにレッツゴーとかそんな使い方も出来ます。
パソコンに詳しくないと破ることが難しい。そんな素材です。
ちょっとした仲間内のパスワード設定にはいいかもねと思いませんか？
簡易ダウンローダー！ぽちっとな。
この素材に興味がある方、欲しい！って思う方は
バシバシ、配布してほしい光線を浴びせかけてください。
配布ラインアップに登場させます。
設置方法など、詳しく分かってしまうと意味が無いので、どう説明しようか
思案中です。
………………………………………………………………………………………………
□ ６．1000leaves通信（編集後記）
………………………………………………………………………………………………
メルマガ第一弾はいかがでしたか？
多くの方の登録、本当にありがとうございました。
ホームページなど皆さんステキに作製してますね。それもすべては、ホームページ
の対象となる深い愛情があるからでしょう。
そんなWebマスターさんのバックアップや、いっしょに協力し合えればいいなあと
思っています。これからもよろしくおねがいします！
………………………………………………………………………………………………
ホームページの方も更新されてます！
ジャーナル
[2004/2/11] 西表島の男の子
[2004/2/14] インターネットの遊びが面白い
[2004/2/16] 地球の時間、太陽の時間、そして宇宙の時間
Webチップス
[2004/2/15] 楽になる製作 Myライブラリのススメ
Webデザイナーのための快適SOHOのススメ(すでにあるページ自体も更新されます)
□WEBデザイナーになるために
□USB機器で快適デスク周り
http://www.1000leaves.jp
┏━━━━━━━━━━━━━━━━━━━━［在宅ワークのアルシオ］━┓
余った時間に収入を得たい。
まずは無料で資料をゲット!!
http://px.a8.net/svt/ejp?a8mat=IKSPY+FP0DV6+4RY+C2103
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
発行者 1000leaves
ご意見お待ちしています web@1000leaves.jp
メールマガジン解除ページ http://www.1000leaves.jp/malmaga/maimaga.html
Promemoria Project http://www.1000leaves.jp/
───────────────────────────────────
無断転載、複写を禁じます。Copyright(C) All Rights Reserved
