Studio TA Subsite の案内とお知らせ

<   2009年 08月 ( 9 )   > この月の画像一覧

八哥鳥(ハッカチョウ)を探せ

2009年 08月 30日
八哥鳥は日本では篭脱け鳥らしい。関西地方にはけっこう居るらしく、神戸近郊で今まで4回出合った。

最初は2007年5月須磨区の公園、ツガイらしくこの時は500mmを持っていて、妙な鳥を見つけたもんだと興奮した。
b0174191_1613836.jpg
ネットで調べて初めて八哥鳥の名を知った。その月の内に再びその近所で見かけたが、やはり2羽で偶然の再会かと思ったが、今は考えを変えている。

数ヶ月前に、今度は三木市内で電線に留まっているのを見かけた。気になっているハッカ君なので目敏く見つけてしまう。
b0174191_16332514.jpg
コンデジで悪条件だが、鼻トサカが判る。この後飛び立ち羽の白紋が良く見えた。
b0174191_16365916.jpg

+

そして2009年8月末の先日のこと、明石のフェリー乗場の近所で大集団に出合った。交通標識板の上にずらりと留まっているのでムクドリかと思ったが、黒い姿に「キョロロ」という声も懐かしい。下は二車線で交通量が多いが、車は全く気にしていない様子。もともと落ち着いた気性の鳥なのか、みんなでのんびり休んでいるといった風情だ。写真で数えると50羽は超えている。
b0174191_1648523.jpg
いつも望遠を持ち歩いているわけではないので、やはりコンデジで撮影。渋滞の車に見られている様で恥ずかしく、逆光でこの程度しか撮れなかった^^; 下の写真はクリックで少し大きくなるので、トサカを見てやってください。
b0174191_16574271.jpg

+

ハッカ鳥は、神戸や横浜に多く居るという話もある。籠から逃げ出し、遠い故郷の異国を思って美しい声で囀っていると考えると、港の街は似合ってるじゃん。
[PR]
by Ataron | 2009-08-30 17:15 | 鳥さんの写真 | Comments(0)

Test Post Field (11) 「PageUp」スイッチを追加

2009年 08月 27日
あるページで「前のページ」「次のページ」の間に「ページのトップへ戻る」スイッチを作っている人がいた。 ページの記述が多い方だし、これはうちも導入することにしました。^^;
加工するのは最下段のページスイッチだけで、ここにページの最初にある「ID=TOP」の区画へのリンクを作れば良い。もともと、ページスイッチのTABLEは、「前のページ」「次のページ」の間に空白スペースの欄があるので、ここにリンクを書き込んでいる。

HTMLの新たな記入は以下の青い文字の部分。
b0174191_0135719.gif
注1)リンク文字はデザイン上の目的で改行して2行にしている。
このリンクを書き込んだ区画「TD.SENDM」のCSS修飾を追加したのが下の青い文字の部分。
b0174191_0192557.gif
注2)フォントは両横のページスイッチに一応合わせた。
注3)文字サイズは2行を納めるために少し小さく8ポイントにしている。
注4)更に、行間隔を詰めて「line-height:70%」を指定。
注5)「▲」印を中央にもって来るため、中央揃え「text-align:center」を指定。
注6)やはり、両横のスイッチに上下位置を揃えるため、同じPADDINGを指定。
注7)これらは上段のページスイッチの中央部にも影響するが、そちらには文字記入が無いので表面上の変化は無い。

以上の結果で、最下段の「PageUp」スイッチは以下の様なデザインとなった。
b0174191_0331695.jpg


+

注4)行間隔を後に修正し「line-height:65%」にした。

よく調べると、このスイッチと同様のスイッチが、デフォルトの機能に在った。
b0174191_10155380.jpg
左隅の「▲」マークだが、これは「投稿月指定」「タグ検索」など抽出操作で複数ページを表示した場合にのみ、各投稿の末尾に表示される仕組みの様だ。その他の場合は表示されないので、やはり投稿内容が縦長な場合には、こちらで作っておく方が良いだろう。

デフォルトの「▲」は、抽出だと縦に長く羅列されるという考えから付加したのだろうと思う。しかし、ページに一度に表示される件数は最大30件も設定出来るので、そんな設定の人のためにも常設しとけば良いと思われるが?

また、上図の「#」マークは、「投稿月指定」「タグ検索」「カテゴリ」で表示される。投稿の一件のみ選択するスイッチらしい。コメント等が沢山記入される人のページでは、それらを展開表示させる意味があるのだろう。
[PR]
by Ataron | 2009-08-27 00:37 | スキン等の覚書き | Comments(0)

Test Post Field (10) $post$の謎

2009年 08月 16日
本文内で紹介・引用したくて書き込んだ「リンク」の表示が、いまひとつリンクとして目だたないなぁと気になっている。これは訳ありで、意図して少しおとなしめに設定した経緯があるから仕方がないのだが。

Test Post Field (2)に、HTML全体のブロック配置図があるが、この「DIV ID=LEFT」ブロック内のグレー部分「$post$」が、投稿内容等を表示する主要部分だ。

「$post$」は、スキン編集ページの「本文」に相当して、そのHTML内容は以下から
編集可能に見える。
b0174191_1711068.jpg
しかし、実は「$post$」は不可触な部分もある。

+

「以前の記事」「タグ」等で記事を抽出すると、この「$post$」の部分の先頭に、抽出記事のタイトル一覧が表示され、その順で、その下に抽出された投稿ページ本体が並ぶ。
b0174191_18112364.jpg
この動作は特別で、「抽出タイトル一覧」の表示パターンは投稿文のスタイルに準じている。

HTML編集の「本文」から、この「$post$」の構造をもう少し詳しく調べたのが以下の模式図だ。
b0174191_0182598.jpg
Exciteブログのユーザーなら周知と思うが、上部の黄色い部分は、抽出した時のみ表示され、その下の「POST_HEAD」「POST_BODY」のスタイルが適応されて、抽出タイトル一覧は、あたかも一つの投稿文の様になるのだ。

リンク文字に関するスタイル適応の縄張りを*A~*Gで表したが、グリーンは特に指定していないのでページ全体の「BODY」に従っていて、ブルーは既に指定をしている。*C、*Eは独立してCSSで指定出来るが、これらは嫌でも*Bに反映してしまう。これが「$post$」の不可触な部分だ。

ちなみに、試しに*Aで指定をすると、やはり無指定の*D、*F、*Gに反映するが、*Bは*C、*Eに準じたままとなった。

+

話の最初に戻るが、抽出結果部分の表示がデフォルトでは余り良いものでなかったので、「POST_HEAD」「POST_TTL」「POST_BODY」等のデザインを調整したのだが、やっている内に、投稿本文のデザインも抽出結果部分も同時に調整している事に気付き、とりあえず抽出結果部分を優先してやっつけたのだ。

その結果として、投稿本文内の「リンク文字」が大人しすぎるという事になってしまったわけだ。

現在の構造では、この「リンク文字」を別個に修飾する事は不可能なので、投稿文ではリンク文字をいちいちカラーリングするか下線付け等をしてリンク文字である事を示すしかない様だ。
b0174191_18361885.jpg

[PR]
by Ataron | 2009-08-16 18:36 | スキン等の覚書き | Comments(0)

Test Post Field (9) ページスイッチに拘る

2009年 08月 16日
ブログという形式は時間軸が記事の順番になるので、続きものの記事を後ろから読まされる傾向がある。章わけにした様な連続した記事を読もうとした場合、「前のページ」「次のページ」という表記があだになり、何度も間違い逆戻りしてしまう事がある。「以前の日の」「次の日の」と逆方向に受け取りそうになるからだろう。タグなどで抽出しても、時間軸の方向で必ず整理されて来るのだから、いっそのこと「NEW」「OLD」なんかで表記した方が良いのではと思うが。こういう不明快さは、慣れない人を仕組みの理解から遠ざけてしまう事になるのではと思っている。ブログをホームページ代わりにしている方が間違っていると言われれば仕方がないが...

そんなわけで、本当はページスイッチの文字を書き換えたいところだが、これは少々ややこしいテクが必要になるだろう。そんな事を考えるから、つい拘って別の事をしてしまう^^; ここに至る経過は以下にあるので、興味のある方は参照してください。

Test Post Field (4)...ページスイッチを上段と下段に配置
Test Post Field (8)...背景画でスイッチらしくする

+

前回で、スイッチに背景を入れ好結果だったから、もうすこしデザインに手を入れた。先ず、スイッチの角を取り丸みを付けた。影もそれに合わせて書き換えた。
b0174191_415810.jpg
これまでのは上図の真中のパーツだけで表していたが、角をとるには左右のパーツが必要になってくる。どうせ二つ作るので、デフォルトの「<」「>」を使ったのより見栄えのする方向マークを入れた。これは、文字と位置を合わせて「<」「>」を隠してしまう案だ。

HTML側のアレンジは以下。
b0174191_1216880.gif
注1)TABLEを「SENDTB」、いままで一緒にしていた3つの「SEND」を別個に「SENDL」「SENDM」「SENDR」のCLASS名で指定しなおした(上赤い部分)。このCLASS名で各セルを修飾し背景画を入れた。
注2)ページスイッチの要素「$prepage type=1$」はセル内で右詰「ALIGN=RIGHT」、「$nextpage type=1$」は左詰め「ALIGN=LEFT」と、HTML側で修飾されている。CSS側で修飾しても良さそうだが、そのまま使った。
注3)青文字にしたが、デザイン上の理由でスイッチ全体の幅を少し広くした。
以上に対応してCSS側でのアレンジは以下。
b0174191_1355887.gif
注1)「FONT-FAMILY」「FONT-SIZE」「COLOR」の指定は、「TABLE.TABLETB」でまとめて指定出来そうだが、どういうわけか無効になる。仕方がないので、「TD.SENDL」「TD.SENDR」の各項で指定している。
注2)リンク文字の振舞い指定は、「TABLE.TABLETB」でテーブル内の全てに反映した。
注3)「background-position」で、文字要素に合わせて背景画の右詰、左詰をしている。スイッチ画像と文字の左右の位置合わせは、画像を差し替えて微調整。(PADDINGでは上手く行かない) 参照環境によってはズレるだろう。少しは救えるかと方向マークを少し大きめにしている。
注4)文字要素と背景画像の縦位置は、「background-position」を使うと画が上方向に微妙にズレた。「PADDING」の「1PX」「10PX」はそれを修正した結果。また「TD.SENDM 」で不必要な「background-position」を指定したのは、バーの画がここだけ上下にズレてしまうからだ。

+

この様な微細な位置合わせをするデザインは、他環境で悲惨にズレる可能性を感じるが、プロじゃないし。なんでも経験だ。
[PR]
by Ataron | 2009-08-16 05:00 | ブログスキンのアレンジ | Comments(0)

Test Post Field (8) ページスイッチをスイッチらしく

2009年 08月 14日
ページスイッチに関しては、Test Post Field(4)で、ページの最上段と最下段に置くデザインにしている。

最近は細かい事が気になって困る。IEではLINK文字を押すと文字列の周囲に細かなドットの枠が表示されてしまう。これが矩形ならまだ許せるが、改造元にしたスキンのデフォルトでは英フォント「>」「<」と漢字フォントが混ざるため、途中で高さの変わる変な枠になる。 他のブラウザ環境ではこのドットを表示させない方法があったり、JAVAを使ってIEでも消せる様だが、余りややこしい事をしたくない。

CSSのBODYを見ると、
b0174191_17484745.jpg
などと、フォントが指定されていて、このページスイッチでも英フォントが「VERDANA」に、漢字は「MS Pゴシック」が採用されているらしい。 表記の順番の最初に「MS Pゴシック」を持って来れば、漢字・英字ともこちらが採用され、高さが揃うので少なくとも異形の枠ではなくなるはず。 もっとも、英字の「VERDANA」は気にいってるので、全体に影響の出るBODYの書き換えは控えた。

それで、ページスイッチ周囲でCSS修飾を行い、スイッチだけ「MS Pゴシック」を指定することにした。 また、頻繁に使用されるスイッチなのに、いまひとつ目だたないし、リンクの無い末尾ページでの表示も判断し難い。 弄りついでに文字の背景画を入れてスイッチらしくし、リンク動作を確認し易くした。

+

HTMLのページスイッチ部分は以下の部分に納められているので、これを書き換えた。
b0174191_1827517.jpg
注1)フォントはポイント指定することにし、参照環境で背景とのズレをなるべく生じさせない様にする。
注2)スイッチを納めるデータセル「TD~/TD」に「SEND」というCLASS名を付けて、CSSで修飾する。
注3)元は1行をデータセル3個に分けていたが、背景画の幅を文字の幅に合わせるために、空白セルを追加して5個に分割している。
注4)幅の割り当ては実際の表示テストで調節し「32%」「16%」となった。フォントが大きくなるとスイッチが上下に改行されるので、固定ポイントとせざるを得ない。
注5)以上は下段のHTML表記部分にもコピーして使える。

この書き換えにあわせた、CSS側での修飾追加項が以下。
b0174191_18471895.jpg
注1)「MS Pゴシック」「10PT」を指定しているが、環境により幾らかズレを生じるかも。
注2)文字色「#8CCEEC」は、端のページになり「次ページがない時」に表示される文字色になる。これをスイッチ背景画の色にほぼ合わせ、スイッチが見えなくなる様にしている。
注3)次の項でリンク文字の振る舞いを指定しているが、次ページがある場合は「黒」で、ポイントした時にバックがホワイトアウトして明瞭にした。
注4)背景画の適当な高さに文字が表示される様にPADDINGを調節している。
上PADDINGで高さの位置が変化するので先ず設定し、下PADDINGを背景画が全て表れるまで少しずつ増す。増し過ぎると、背景画の繰り返しの2段目が表示されてしまう。

+

以上の書き換えの成果が下図。矩形のドット枠になり、背景画で余り気にならなくなった。
b0174191_1992422.jpg

[PR]
by Ataron | 2009-08-14 19:09 | ブログスキンのアレンジ | Comments(0)

Test Post Field (7) サイドメニューのHTML構造

2009年 08月 13日
既に熟知されている方も多いと思いますが、エキサイト公式のスキン編集ヘルプは以下にあります。
  スキン編集|エキサイトブログ
また、上記ヘルプの中で、構造理解にとくに不可欠なのはタグに関する部分です。
  スキンタグ集

当方の現時点のサイドメニューのHTML構造を以下に図示しておきます。
b0174191_122808.jpg

[PR]
by Ataron | 2009-08-13 12:28 | スキン等の覚書き | Comments(0)

Test Post Field (6) タグ利用時のメニューデザイン

2009年 08月 10日
タグ機能を利用しようとすると、メニューのデザインが少々汚くなってしまった。
下のハードコピーの左側の①がデフォルトだが、タグメニューが追加されるのは良いが、その件数の表示が「黒」文字で不本意に強調されてしまう。これを右の②の様に修正した。
b0174191_23425237.jpg
この原因は、全体のBODYの文字表示の指定に従ってしまう結果だろう。スタイルシート上で、ここの修正をしたいが、CSSにはメニュー最上段の「PROFILE」を指定する項や、メニュー項目のタイトル文字「MNTTL」や、使っていない「CAL」(カレンダー)などの項はあるが、相当する項が見あたらない。

HTMLでメニュー部の構造を表示させると、
b0174191_23434534.jpg
となっている。下側の「DIV CLASS=MNBODY」のCSS項目を追加すれば修飾が出来る。CSSに追加した項の内容は以下です。
b0174191_23543999.jpg
注1)殆どの文字はリンクで、文字色の指定はBODY全体での指定に準じている。
注2)タグ件数はリンクではないため、この項の文字色指定に従うことになる。「#AAA 」のグレーを指定して少し目だたない様にした。
注3)フォントスタイルの指定は、メニューのプロフィールやタイトルなど、個別の指定のあるものを除いて、リンク・非リンクにかかわらず有効になる。「Tahoma」を指定して、英数半角文字の太さを少し抑えた。 件数表示が目だたなくなるが、「以前の記事」の年月表示も貧弱になるので、妥当なところだ。 OS環境により結果が異なるかもしれないが、Win2000では「Tahoma」を指定すると漢字の表示が「MS Pゴシック」から「MS UIゴシック」に代わる。こちらの方が狭いメニュー幅で改行されにくくなり好都合だ。汎用性のつもりで「VERDANA」は残したのだが、実際はどんなものなのだろう^^;

+

一日経って、追加した「DIV.MNBODY」の直後で、リンクの修飾を追記すれば、現在使用しているメニュー内容の殆どがリンクなので、「タグ件数」と「リンク」を別個に修飾出来ることに気付いた。これら今回の追記は全てメニュー内でのみ有効な指定なので、他の範囲に影響する心配はない。今後メニュー内容を追加して「タグ件数」以外の「非リンク」が出て来た場合には、デザインの再考が必要かもしれないが...

以上より先日のCSS追加項を、以下の様に書き直した。
b0174191_1355070.jpg
注1)タグ件数とリンクを「文字色」と「文字の大きさ」で区別することが出来たので、フォントの「Tahoma」指定を無くした。指定が無いので、BODY全体に準じたデフォルトの「VERDANA」に戻っている。
注2)「MNBODY」の行間隔はフォントサイズを小さな「xx-small」としたので、そのままではリンク文字どうしの行間が詰まってしまう。「line-height: 200%」は、リンク文字に適当な行間隔にするための指定。
注3)「MNBODY」エリア内だけリンク文字のサイズを「small」と指定し、「MNBODY」全体に指定された「xx-small」の影響を受けない様にしている。
b0174191_11532966.jpg

[PR]
by Ataron | 2009-08-10 00:19 | スキン等の覚書き | Comments(0)

ダットサイト改造編

2009年 08月 09日
ダットサイトをフィールドに持ち出すと、屋外の明るい場所ではポインターの輝度不足を感じた。高輝度と称したり、ポインターの形を選べるダットサイトもあるから、そういうのにすべきだったかも。しかし、再購入はもったいないし、小型を選んだのには理由があるから、現在のものの改造を試みることにした。

+

b0174191_7545553.jpg
電池交換時にダットサイトの底板を外すと左の様に内部が露出する。ボタン電池の底の基板は固定されておらず、細いドライバーで取り出したのが右側だ。
B: 基板(電池フォルダーを兼ねる)
R: 基板の裏側を筐体からシールドするためのラバーシート。 電池圧着の役割もある。
P: LEDを保持するプレート。 これを平行移動してポインター照準の調節をする。
H: Pの水平方向の位置調節をするネジ
C: Pの水平方向の調節を助けるスプリング
V: Pの垂直方向の位置調節をする大きなツバ付きのネジ
S: 照準調節後にPの位置を固定するネジ

以下は、照準調節の構造を表した模式図だ。
b0174191_834936.jpg
L: LEDは小基板に実装され、基板はPに小ネジで固定されている
W: LED光を外のハーフミラーに導く窓。
固定ネジSを両方とも少し緩めると、筐体に押付けられていたPは可動となる。Pにはオレンジ色で示した細い溝があり、これに調節ネジVのツバが噛んでいる。Vの上下でPの垂直方向の位置が調整される。また、PはスプリングCで押されていて、調節ネジHにより水平方向の位置を調節する仕組みだ。
b0174191_15354518.jpg
電気的な要素は単純だ。3vのリチューム電池CR2032でLEDを点灯しているが、3KΩの抵抗で電流を1mA程に抑えている。これを換えるか、並列に抵抗を追加して電流量を増せば照星を明るく出来るが、電池の持ちとバーターとなる。抵抗の代わりにCdsをかませれば外光の明るさで自動調整も出来るが、やはり持ちが悪くなる。そういう電気的改造は避けて、照星の大きさが不必要に小さいタイプなので、星の径を大きくして見易く明るくする事を考えた。

+

下図はLED基板のクローズアップだ。
b0174191_16131312.jpg
LEDは小型実装型を小さな基板に取り付け、リード線を引き出している。ダークグレイの樹脂をLEDの上に遮光のために塗布し、ピンホールを穿った単純なものだった。写真はこの樹脂の上面を細かいペーパーで削った後で、LEDペレットの四角い形が露出している。さて、後はこの上にピンホール径の少し大きいカバーを取り付ければ良いだけなのだが、けっこう微細作業だと、壊してから判った ^^;

下の写真は、改造の経過だ。①は最初の状態で、写真を撮ってなかったのでCGイメージ。②が樹脂面を削り取ったペレット剥き出しの状態。これだけの明るさを封じていたわけだ。凹面ハーフミラーで小さなペレット像が拡大され、このままではさすがに使えない。ミラー周囲の枠まで照らしている。③は、フイルム片に細針でピンホールを空けたものをペレット前面に貼ったところ。径は0.6mm程度で、これでも少し大き過ぎて光芒が周囲に伸びている。
b0174191_16452057.jpg
③の径で装着テストすると、1000mmの望遠であってもポイント精度は充分だった。明るい所では光芒も気にならないが、もう少し小さな径を工作するつもりだ。



[PR]
by Ataron | 2009-08-09 08:35 | 撮影機材/技術 | Comments(0)

アートする陽炎

2009年 08月 02日
望遠も1000mmとなると気流の乱れが意識される様になる。ちょっとしたテスト目的で撮影していたが、日射が強くなりだすとやたら陽炎が沸き立つ。超望遠はフォーカス合わせにやっきになるもんだが、視点を変えればこれはアートだなぁと思ってしまった。

最初のは、晴れたり曇ったりの日。背景の遠方の空は未だ雲り空だが、この送水塔には午後の陽があたっている。フォーカスはトリミングでカットされているが、右側ずいぶん手前の電柱にあり、塔は外してます。
b0174191_915115.jpg

こちらは、後日の曇った日に撮影。陽炎がなければどの位「良く」見えるのかと思って、同条件で撮ってみたのだ。やはりピントはこの塔にはありませんが、かなり上とは違う。
b0174191_9194270.jpg


動画だと、このユラギも絵になるなぁなんて考えた。
[PR]
by Ataron | 2009-08-02 09:27 | 撮影機材/技術 | Comments(0)