アンケート [おためし]
日々、アンケートに協力している柊太郎です。
マクロミルというアンケートに参加しています。
原田知世さんが、イメージキャラクタなので、知っている人も多いと思います。
「原田知世のちょっとモニタになってミル?」
いま、こんなタイトルで、アンケートメンバーを募集しています。
文章だけの、参加募集の説明だけでは、なかなか分かりづらいのですが、Naviの原田さんが、OLの知世さんに分かりやすく説明してくれます。
普段、このような説明はほとんど聞かない私でも、内容が良く分かりました。
イメージキャラクタに、知っている人が採用されていると、それだけでも安心できます。
ましてや、知的な知世さんなら、なおさらです。
私が、マクロミルに登録してから、もう4年以上になります。
初めは、個人情報に関する心配などもありましたが、新聞やテレビでのアンケート情報の提供先に、マクロミルの名前を見かけることで、利用先などが分かり、こんなところに協力しているのかと、チョッとうれしく感じました。
ポイントの交換先も、最初は特定のインターネットバンクくらいでしたが、今ではいろいろな形で交換可能になりました。
初めは、アンケートも少なく、なかなかポイントもたまりませんが、季節や時期、ニュースなどにより、まとまってアンケートの連絡があったり、高額ポイントのアンケートがあったりもします。
話題性の高い、高額ポイントのアンケートは、募集人員が少ないのが欠点でしょうか・・・何度も、取逃したこともあります。
でも、安定して募集があるので、かなり気に入っています。
連絡のメールも、広告性の高いものはあまり無く、助かっています。
「原田知世のちょっとモニタになってミル?」はコチラから!
http://monitor.macromill.com/tour/intro.html?entry_kbn=560
ちょっと気になったら、クリックしてみてください。
ではでは。
実験結果10 [おためし]
Webページカラーチャート(標準16色)
black #000000 |
gray #808080 |
silver #c0c0c0 |
white #ffffff |
blue #0000ff |
navy #000080 |
teal #008080 |
green #008000 |
aqua #00ffff |
lime #00ff00 |
yellow #ffff00 |
magenta #ff00ff |
olive #808000 |
puaple #800080 |
maroon #800000 |
red #ff0000 |
色名(英語名)と色指定値(赤(R)、緑(G)、青(B) それぞれを、2桁の16進数(00~FF)で表現:#RRGGBB)で示しました。
WebSafeカラー(Win、Macなどの機種に依存しない色指定値)
R=00 (G=00-FF/B=00-FF) | |||||
#0000ff | #0033ff | #0066ff | #0099ff | #00ccff | #00ffff |
#0000cc | #0033cc | #0066cc | #0099cc | #00cccc | #00ffcc |
#000099 | #003399 | #006699 | #009999 | #00cc99 | #00ff99 |
#000066 | #003366 | #006666 | #009966 | #00cc66 | #00ff66 |
#000033 | #003333 | #006633 | #009933 | #00cc33 | #00ff33 |
#000000 | #003300 | #006600 | #009900 | #00cc00 | #00ff00 |
R=33 (G=00-FF/B=00-FF) | |||||
#3300ff | #3333ff | #3366ff | #3399ff | #33ccff | #33ffff |
#3300cc | #3333cc | #3366cc | #3399cc | #33cccc | #33ffcc |
#330099 | #333399 | #336699 | #339999 | #33cc99 | #33ff99 |
#330066 | #333366 | #336666 | #339966 | #33cc66 | #33ff66 |
#330033 | #333333 | #336633 | #339933 | #33cc33 | #33ff33 |
#330000 | #333300 | #336600 | #339900 | #33cc00 | #33ff00 |
R=66 (G=00-FF/B=00-FF) | |||||
#6600ff | #6633ff | #6666ff | #6699ff | #66ccff | #66ffff |
#6600cc | #6633cc | #6666cc | #6699cc | #66cccc | #66ffcc |
#660099 | #663399 | #666699 | #669999 | #66cc99 | #66ff99 |
#660066 | #663366 | #666666 | #669966 | #66cc66 | #66ff66 |
#660033 | #663333 | #666633 | #669933 | #66cc33 | #66ff33 |
#660000 | #663300 | #666600 | #669900 | #66cc00 | #66ff00 |
R=99 (G=00-FF/B=00-FF) | |||||
#9900ff | #9933ff | #9966ff | #9999ff | #99ccff | #99ffff |
#9900cc | #9933cc | #9966cc | #9999cc | #99cccc | #99ffcc |
#990099 | #993399 | #996699 | #999999 | #99cc99 | #99ff99 |
#990066 | #993366 | #996666 | #999966 | #99cc66 | #99ff66 |
#990033 | #993333 | #996633 | #999933 | #99cc33 | #99ff33 |
#990000 | #993300 | #996600 | #999900 | #99cc00 | #99ff00 |
R=cc (G=00-FF/B=00-FF) | |||||
#cc00ff | #cc33ff | #cc66ff | #cc99ff | #ccccff | #ccffff |
#cc00cc | #cc33cc | #cc66cc | #cc99cc | #cccccc | #ccffcc |
#cc0099 | #cc3399 | #cc6699 | #cc9999 | #cccc99 | #ccff99 |
#cc0066 | #cc3366 | #cc6666 | #cc9966 | #cccc66 | #ccff66 |
#cc0033 | #cc3333 | #cc6633 | #cc9933 | #cccc33 | #ccff33 |
#cc0000 | #cc3300 | #cc6600 | #cc9900 | #cccc00 | #ccff00 |
R=ff (G=00-FF/B=00-FF) | |||||
#ff00ff | #ff33ff | #ff66ff | #ff99ff | #ffccff | #ffffff |
#ff00cc | #ff33cc | #ff66cc | #ff99cc | #ffcccc | #ffffcc |
#ff0099 | #ff3399 | #ff6699 | #ff9999 | #ffcc99 | #ffff99 |
#ff0066 | #ff3366 | #ff6666 | #ff9966 | #ffcc66 | #ffff66 |
#ff0033 | #ff3333 | #ff6633 | #ff9933 | #ffcc33 | #ffff33 |
#ff0000 | #ff3300 | #ff6600 | #ff9900 | #ffcc00 | #ffff00 |
補色は難しいです・・・バックカラーと文字色の対比が悪いので、見づらいかもしれません。
今後の課題ですね・・・
色名の表はまた後日・・・
実験結果9 [おためし]
黒板のHarbot大改造
|
こんなことが、やりたかった・・・
A | B | C | |||||||||||||||||
1 | 画像の上 | ||||||||||||||||||
2 | 画像の左 | Harbox | 画像の右
|
||||||||||||||||
3 | 画像の下 | ||||||||||||||||||
4 | 月日、曜日、日直 |
日付・日直の位置(C2のところ)に、更にテーブル(4×4)を入れて座標を固定して・・・
と考えてみたのですが、追加したテーブル(4×4)の裏の画像が表示されませんでした。
<table>の中の、<td>に対しては、background属性が有効なのですが、<table>や、<tr>に対しては、background属性が有効になってくれません。
ブラウザで確認すると、OKなんですけどね・・・
みんなのコードを見てみると、やはり<td>に対してbackgroundを指定しています・・・
特定の座標位置に、文字を書いたり、画像を置いたりしたいだけなんですが・・・
要求が難しいのでしょうか?
もうしばらく、調査が必要・・・
実験結果8 [おためし]
てすてすてす
編集しているうちに、だんだん離れてゆく・・・
現象がつかめていないので、想像ですが・・・
多分こんなことではないのかと思います。
このように設定していますか?
絵文字や色、文字サイズの設定が可能な状態にしてあるのではないでしょうか?
保存のときに、記述しているタグを補正してから保存している(されている)のだと思います。
設定を変えてから、編集状態に入ってみてください。
たぶん、いらないコードが山のように・・・・
保存して、確認が取れたら、設定を元に戻せばOKです。
タグを記述しているところの編集は、チョッと注意ですね。
ちなみに私は、この状態のままです。
そのため、チョッと殺風景ですが・・・
実験結果7 [おためし]
てすてす
<img src="画像" style="position:absolute; top:0px; left:500px; filter:alpha(opacity=50);"> <div style="position:absolute; top:120px; left:300px;"> 当然ですが文字も書けます。</div>
こんな感じです・・・
画像はGIF形式ですけど、あんまり関係ないのでは?
単位の記述ミスは盲点でしたね・・・
気になる点。このWindowをリサイズすると、画像の位置がずれること。
なぜ?当然か・・・両脇のスペースがあるから。
Windowのサイズを変えたときの対応はこうですね。
縦位置:topの指定はabsoluteで行います。
横位置:2×1のtableで行います。
<table width="550"> <tr><td width="300"></td><td> <img src="画像" style="position:absolute; top:0px; filter:alpha(opacity=50);"> </td></tr> </table>
こうすれば、横のズレはなくなります。
blogとしての横幅は750pxですが、モニタの解像度によって両脇のスペースが変わります。
ここでは、記事の表示エリア(横幅:550px)をターゲットにしています。
サイドバーの上は・・・今後の課題ですね。(サイドバーに記述すればOK?)
原点(0,0)の位置が、blogの左上ではなく、クライアント領域の原点(ブラウザで表示されている本当の左上)を指しているため位置決めが難しいです。
文字も書けます。
実験結果6 [おためし]
分かったこと
記事の編集に関して
サイドバーの編集であれば[プレビュー]での確認はある程度有効
サイドバーに画像を使用する際には、横幅に注意すること
広すぎた場合、本文記事の表示が下方向に移動してしまい、訪問者がビックリする
この状態は[プレビュー]では判断できないし、下書き状態にも出来ないため
本文の編集の場合は、保存のあと編集ページの中央上にある[自分のブログ]で確認するか
保存のあと、編集ページの右上にある[公開中の記事を見る]で確認をする
[公開中の記事を見る]は、下書き状態であっても確認可能なので、訪問者に影響が出ない
スクリプトを使用するときは、書式ミスがあってもいいように、コードをコメントで囲むこと
スクリプトに対応できないブラウザがあることを忘れないため
最悪、編集状態に戻れなくなる事態を招かないようにするため
(完全に回避できるとは思いませんが、被害を最小限に抑えることは出来ると思います)
プレビューに関しては、本当に苦労しました
従来通りに、HTML文書ファイルを作ってブラウザで確認・・・OKになったら、記事に貼り付け
でも、思った通りの表示にならない・・・
一般常識が通じないんですね
で、黒板のHarbotは、このように作りました
A | B | C | |
1 | 画像の上 | ||
2 | 画像の左 | Harbox | 画像の右 |
3 | 画像の下 | ||
4 | 月日、曜日、日直 |
場所が分かるように、Excelのような座標を書いてみました
今回の特徴は、[A4]に置いた月日などを[C3]の黒板に移動させているところです
<div>タグに、position属性を使って文字の位置を移動させました
ホームページに日付の表示をしたことのある人は、知っていると思いますが
数字を文字に変換する必要があります
それは、曜日も数字で求まるからです
ここでは、月日、曜日すべてを文字型の配列に持たせて
処理を楽にしました
とはいっても、プログラムの経験がないと
なんで楽なのか分からないと思いますが・・・
日直は、乱数を発生させて、やはり文字型の配列から選んでいます
縦書きにするために、一文字ごとに<br>を入れてあります
移動位置を複数持っているわけではありません
ソースは、また後日・・・
ソースコードをコメントで囲む・・・が、よく分からないと言うことなので、以下に説明します。
JAVAスクリプト 01: <script language="javascript"> 02: <!-- 03: var n=new Date() 04: mm = new Array("1","2","3","4","5","6","7","8","9","10","11","12") 05: dd = new Array("1","2","3","4","5",・・・,"26","27","28","29","30","31") 06: ss = new Array("日","月","火","水","木","金","土") 07: nn = new Array("ハ<br>ボ<br>タ<br>ン",・・・,"柊<br>太<br>郎","","","") 08: d=n.getDate()-1 09: m=n.getMonth() 10: s=n.getDay() 11: h=Math.floor(Math.random()*(11+1)) 12: //--> 13: </script> スタイルシート 15: <style type="text/css"> 16: <!-- 17: #IM {margin:0;} 18: --> 19: </style>
このソースで、説明します。
JAVAスクリプトの、02行がコメントの開始を示す書式です。で、12行がコメントの終了を示す書式です。
コメントの終了には"//"を付けます。付けないとNetscapeブラウザでエラーになります。
スタイルシートもほぼ同じ書式なので、16行がコメントの開始で18行がコメントの終了になります。
コメントの終了に"//"は付けません。付けるとエラーになります。
スクリプトはHTMLと違って、プログラムに近いものです。スクリプト未対応のブラウザが、この記述を見た場合、無反応であればよいのですが、記述によってはHTMLと解釈できてしまうような場合もあります。そうなると、表示が誤動作してしまいます。表示が出来ない・・・画面が崩れる・・・などにつながります。
なので、スクリプト未対応の場合には、記述をコメントと判断してもらえればこのような問題もなくなります。
スクリプトの記述ミスに関しては、完全にはカバーできませんが・・・でも、付けるべきだと思います。
実験結果5 [おためし]
ちょっと、お遊び!
|
表示ごとに、日直が変わります。
当然、月日と曜日も日付によって変わります。
標準フォントを使用しての、手抜き表示ですが、画像を使用すればもっと雰囲気が出ますよね。
あとは、特殊なイベントを発生させて、時々落書きを書くことも出来ますね・・・
実験結果3 [おためし]
記事での確認
左のサイドバーと、同じコードなんですが、記事の中では画像が離れてしまいます。
みんなの情報で、各画像の周りに余白が設定されてしまう為・・・ということが分かりました。
対策としては、<img>タグにスタイルシートのmargin:0を指定するとのこと。
たしかに・・・OKです。
でも、ここの場合、画像が4つ+Harbotです。
ほかでは、画像が8つ+Harbotのところもあります。
記述が多くなるのはあまり好みでなく、ちょっと面倒なので、他の手段を考えてみます。
なかなか、思うようにいきません。 何とかなりました。
スタイルシートのIDで属性指定をしています。
01: <style type="text/css"> 02: <!-- 03: #IM {margin:0;} 04: --> 05: </style> : xx: <td><img id=IM src="画像"></td> :
01~05行が、スタイルシートの指定です。
02、04行は、コメントの開始と終了です。記述した指定が間違っていたり、対応していないブラウザであっても、支障が出ないようにするためのものです。
で、03行に設定する内容と、その定義名称を記述します。この場合は、IMというIDに、margin:0を設定します。{・・・}のカッコと、セミコロンが重要です。
これを、xx行のimgタグのIDとして使用してみました。
定義のときに、タグを指定していないので、なんにでも使用できます。
これによって、各imgタグにmargin属性を付けるわけです。
16文字 style="margin:0"
5文字 id=IM
じゃっかん、節約になりました。
上記のソースです
01: <style type="text/css"> 02: <!-- 03: #IM {margin:0;} 04: --> 05: </style> 06: 07: <table border="0" cellpadding="0" cellspacing="0" align="right"> 08: <tr> 09: <td colspan="3"><img id=IM src="画像うえ.gif" width="177"></td> 10: </tr> 11: <tr> 12: <td><img id=IM src="画像ひだり.gif" width="25" height="201"></td> 13: <td><img id=IM src="画像中央.gif"></td> 14: <!-- 上の1行は、サンプル用の画像。下の1行がHarboxの書式(コメントにしてます)。 15: <td><script language="JavaScript" src="HarboxID"></script> 16: --> 17: <td><img id=IM src="画像みぎ.gif" width="25" height="201"></td> 18: </tr> 19: <tr> 20: <td colspan="3"><img id=IM src="画像した.gif" width="177"></td> 21: </tr> 22: </table>
実験結果2 [おためし]
いろんなパターンがあります。
いつも訪問してくださるコキアさんの、Harbot枠が、チョッと特殊だったのでそんなときの設定方法を説明します。
(コキアさん、勝手にサンプルにしてごめんなさい)
01: <table border="0" cellpadding="0" cellspacing="0"> 02: <tr> 03: <td><img src="左上の画像" width="35" height="35"></td> 04: <td><img src="中上の画像" width="117" height="35"></td> 05: <td><img src="右上の画像" width="35" height="35"></td> 06: </tr> 07: </table> 08: <table border="0" cellpadding="0" cellspacing="0"> 09: <tr> 10: <td><img src="左の画像" width="30" height="201"></td> 11: <td><script language="JavaScript" src="Harbox-ID"></script></td> 12: <td><img src="右の画像" width="30" height="201"></td> 13: </tr> 14: </table> 15: <table border="0" cellpadding="0" cellspacing="0"> 16: <tr> 17: <td><img src="左下の画像" width="35" height="20"></td> 18: <td><img src="中下の画像" width="117" height="20"></td> 19: <td><img src="右下の画像" width="35" height="20"></td> 20: </tr> 21: </table>
サイドバーの一番下・・・に、サンプルを置いています。記事の中に、設置してみたのですが・・・テーブルフレーム枠が0になりませんでした・・・なぞ?なので、サイドバーに設置・・・2つ置くのは違反かな?(画像にしました)
対策は、[実験結果3]に書きました。
|
入れてみました |
今回は、1段のテーブルを3つ作って、縦に並べています。
このようにしたのは、四隅の画像のサイズがチョッと大きい画像のためです。縮小すると、リンゴマークが崩れたり、右端の曲線の影が上手く出なかったり・・・という問題があります。
テーブルの横幅が187ピクセルまではOKと言うことなので、両サイドには30ピクセルの空きがあります。でも、四隅を縮小しないで使用すると、35ピクセル×2の70ピクセルが必要です。そうすると、中央は117ピクセルになり、Harbotの横サイズの127ピクセルが取れません。
そこで、問題を解決するために、上中下段を別のテーブルで管理します。
上段の横は、35+117+35=187ピクセル。
中段の横は、30+127+30=187ピクセル。
下段の横は、35+117+35=187ピクセル。
と、しました。
縦に関しては
上段:35ピクセル。
中段:201ピクセル。
下段:20ピクセル。
です。
元の画像サイズをそろえるのが、一番素直なやり方でしょう。でも、融通の利かない場合があると思います。発想の転換で、ここまでできます。
いや・・・まだまだ、いろんなことができると思います。
ぜひ、挑戦してください。
質問などあれば、コメントしてください。