実験結果６ [おためし]
分かったこと
記事の編集に関して
サイドバーの編集であれば［プレビュー］での確認はある程度有効
サイドバーに画像を使用する際には、横幅に注意すること
広すぎた場合、本文記事の表示が下方向に移動してしまい、訪問者がビックリする
この状態は［プレビュー］では判断できないし、下書き状態にも出来ないため
本文の編集の場合は、保存のあと編集ページの中央上にある［自分のブログ］で確認するか
保存のあと、編集ページの右上にある［公開中の記事を見る］で確認をする
［公開中の記事を見る］は、下書き状態であっても確認可能なので、訪問者に影響が出ない
スクリプトを使用するときは、書式ミスがあってもいいように、コードをコメントで囲むこと
スクリプトに対応できないブラウザがあることを忘れないため
最悪、編集状態に戻れなくなる事態を招かないようにするため
（完全に回避できるとは思いませんが、被害を最小限に抑えることは出来ると思います）
プレビューに関しては、本当に苦労しました
従来通りに、HTML文書ファイルを作ってブラウザで確認・・・ＯＫになったら、記事に貼り付け
でも、思った通りの表示にならない・・・
一般常識が通じないんですね
で、黒板のＨａｒｂｏｔは、このように作りました
| Ａ | Ｂ | Ｃ | |
| １ | 画像の上 | ||
| ２ | 画像の左 | Ｈａｒｂｏｘ | 画像の右 |
| ３ | 画像の下 | ||
| ４ | 月日、曜日、日直 | ||
場所が分かるように、Excelのような座標を書いてみました
今回の特徴は、［Ａ４］に置いた月日などを［Ｃ３］の黒板に移動させているところです
<div>タグに、position属性を使って文字の位置を移動させました
ホームページに日付の表示をしたことのある人は、知っていると思いますが
数字を文字に変換する必要があります
それは、曜日も数字で求まるからです
ここでは、月日、曜日すべてを文字型の配列に持たせて
処理を楽にしました
とはいっても、プログラムの経験がないと
なんで楽なのか分からないと思いますが・・・
日直は、乱数を発生させて、やはり文字型の配列から選んでいます
縦書きにするために、一文字ごとに<br>を入れてあります
移動位置を複数持っているわけではありません
ソースは、また後日・・・
ソースコードをコメントで囲む・・・が、よく分からないと言うことなので、以下に説明します。
ＪＡＶＡスクリプト
01: <script language="javascript">
02: <!--
03: var n=new Date()
04: mm = new Array("１","２","３","４","５","６","７","８","９","10","11","12")
05: dd = new Array("１","２","３","４","５",・・・,"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>
このソースで、説明します。
ＪＡＶＡスクリプトの、02行がコメントの開始を示す書式です。で、12行がコメントの終了を示す書式です。
コメントの終了には"//"を付けます。付けないとＮｅｔｓｃａｐｅブラウザでエラーになります。
スタイルシートもほぼ同じ書式なので、16行がコメントの開始で18行がコメントの終了になります。
コメントの終了に"//"は付けません。付けるとエラーになります。
スクリプトはHTMLと違って、プログラムに近いものです。スクリプト未対応のブラウザが、この記述を見た場合、無反応であればよいのですが、記述によってはＨＴＭＬと解釈できてしまうような場合もあります。そうなると、表示が誤動作してしまいます。表示が出来ない・・・画面が崩れる・・・などにつながります。
なので、スクリプト未対応の場合には、記述をコメントと判断してもらえればこのような問題もなくなります。
スクリプトの記述ミスに関しては、完全にはカバーできませんが・・・でも、付けるべきだと思います。
おはようございます。
＞スクリプトを使用するときは、書式ミスがあってもいいように、コードをコメントで囲むこと
・・・理解できません。ソースを見れば解かるのかも・・・
by (2006-02-23 09:22)
こんにちは＾＾
なんだかとってもむつかしそうですね。
柊太郎さんって すごいです。
なんでそんなむつかしいことわかるのですか？
プログラマーさんですか？
この前から、質問ばかりでごめんなさい。でも気になるのです＾＾；
by kuu (2006-02-23 12:05)
プロフィールには、エンジニアとしています・・・別名：何でも屋です。
ｋｕｕさんがイメージしているプログラマとは、かなり違いますが・・・プログラマです。
でも、パソコンで動くソフトとか、インターネットに関しては、一般の人と大して変わりませんよ・・・それ以下かも？
情報源は、教科書とインターネットで、あとはひたすら実験です。
で、特に意識しているのは、分かりやすく単純に・・・と言うことです。
今後も、おいおい紹介させていただきます・・・
また質問してください。
by 柊太郎 (2006-02-24 10:42)
なるほどです＾＾
でもほんとすごいです。私が柊太郎さんの域に達するのは一体何年後かわかりませんが、近づいていきたいです。
ところで、↓の実験で、年齢とお誕生月がわかりました。
日にちまでは割り出さなかったですけど＾＾；
若輩者ですが、今後ともよろしくお願いいたします。兄上様＾＾
by kuu (2006-02-24 14:18)
えっ・・・まだあったのか・・・
まずいまずい・・・
早く消さねば・・・
by 柊太郎 (2006-02-24 16:10)
oho・・・
じゃばすくりぷと・・・墓穴を掘った感じです・・・
今晩、柊太郎さんにうかがいたいこと、記事にしてますが、時間を今朝にずらしてアップしますので、よろしくお願いします。
９時すぎになるかも・・・。
はみ出し効果、の使い方です。
by (2006-02-24 18:12)
ハーボット枠のソースも見ていただけませんでしょうか？？？
by (2006-02-24 19:47)
こんばんは～。アップできました。
サイドバーの一番下にはハーボット枠も置いてみました。
よろしくお願いします。
by (2006-02-24 20:36)
ハーボット枠引っ込めました。
by (2006-02-24 22:27)
こちらのチェックお願いしたいのですが・・・
http://blog.so-net.ne.jp/kokia/2006-02-24
by (2006-02-26 22:08)
柊太郎さん、できました。
pix、tarさんは、ｐｘだったので、iをぬかしたら、できました。
見にいらしてください。
by (2006-02-28 00:23)
こんばんは。
ちょっとは、柊太郎さんの言葉が解かってきた感じがします。
書くことは出来ませんが、表示されるのは、こういうことかな？
と、想像することはできるようになりました。
もう、半年が過ぎようとしてるんですね。 早いです。
スキンの表示については、本当にお世話になりました。
改めて、ありがとうございました。＾＾
by (2006-08-04 23:14)
おはようございます。
９月のオリジナルスキン、お友達の応援で、時間でスキン表示を変えるようにしました。
柊太郎さんのこのページも紹介したので、リンク貼りました。
よろしくお願いします。＾＾
by (2006-08-30 09:37)