Studio TA Subsite の案内とお知らせ

<   2009年 07月 ( 4 )   > この月の画像一覧

Test Post Field (5) 投稿文内のHTML表記

2009年 07月 30日
Test Post Field を読み返している内に、表示崩れが生じていることが判った。投稿文内にHTMLを引用すると、システムやブラウザが誤判断して、表示崩れが生じる可能性があるとは思っていたが...

それで、Test Post Field に関しては「HTML不使用」をチェックしていた。
b0174191_1248691.jpg
これはおそらく投稿内容をHTML解釈せずにTextとして解釈処理してくれるスイッチだと考えていた。投稿後も別に表示崩れなどなく、これで良いのだと思っていたので、昨日は投稿文中のHTMLを実行しているらしい表示に出会ってびっくり。

2009年7月27日付けで、Exblog事務局が障害報告を出していて、「表示の際、改行を「br」に変換する処理に不具合が発生した為、改行が反映されずに表示された(PCのみ)」とあり、このシステム障害の結果が影響したのだろうか?

いずれにせよ、やはり投稿文中に直接HTML文を入れるのは問題含みだと思った。というわけで、急遽HTML部分は「プレビュー画面」のハードコピーを撮り、画像として投稿文に載せる様に書き換えた。要するに「HTMLタグとして有効な文字列」には一応用心しとくにこしたことはない様だ。

読者の方がコピペして利用しようとする際には不便だが、決して意地悪しているわけではないのです。写真に名前等を刷り込んで、著作権利意識をひけらかす奇妙な行為とは意味が違うのであります。
[PR]
by Ataron | 2009-07-30 12:54 | スキン等の覚書き | Comments(0)

Test Post Field (4) ページスイッチを2個所配置

2009年 07月 20日
Exブログで提供されているスキンを色々探したが、「前のページ」「次のページ」のスイッチがページの下方のみに配置されているものばかりだった。ブログに対する考え方、またブログに書き込む内容の量などによっては、この仕組みで充分なのかもしれないが、当方の発想ではちょっと不便な気がした。 書き込み内容がくどいし^^; 写真も大きくてなかなかページ底の「前のページ」「次のページ」に行きつけない。そんなスイッチがある事さえ気付かない人もいるかもしれない。とりあえずチャラッと下まで見てもらわないと先へ行けませんよというのも、なんか嫌味だ。

一方、「カテゴリ」分けから関心のある記事を選択すると、1ページに表示される記事数ごとのページに分けられ、これを「前のページ」「次のページ」で選択閲覧することになるが、やはり下方まで距離がありすぎ。More機能を使えば改善するが、実はあまりこれが好きでない。他の人のページを見ていて、よほど関心のある所でないと、Moreを押す気になれないからだ。一番望ましいと思うのは、月別のリストの様な表示が、カテゴリ選択からも表示されたら良いのだが、これは出来ない。

どういう機能を求めているかというと、記事の記憶が曖昧な場合に、素早くその記事に辿りつけることで、そんな策の一つとして「前のページ」「次のページ」のスイッチを上の方にも置くことに到った。これで少し探すのが便利になり、1ページに表示される記事数を最小にすれば、見落とす事はなくなる。

+

「前のページ」「次のページ」のスイッチは、Test Post Field (2)の図で紹介しているが、HTML上では<$prepage$>と<$nextpage$>で記述されている。オリジナルスキンでは、置かれている場所は「LEFT」ブロック内の<$post$>の後で最後だが、この前方にも同様の記述を置き、上方のスイッチを実現した。書き換えた「LEFT」ブロックのHTMLが以下です。
b0174191_2253551.gif
b0174191_3125698.gif

[PR]
by Ataron | 2009-07-20 01:43 | ブログスキンのアレンジ | Comments(0)

Test Post Field (3) 「編集/削除」スイッチ

2009年 07月 16日
Test Post Field (1)で、既投稿文の「編集」「削除」のスイッチの書き換えをしたが、このスイッチ周囲のデザインが、いまいち不明確なので少しアレンジすることにした。

「HTML編集」の「本文」を選択すると、本文のHTML構成が表示されるが、元の記述の最初の方を引用すると、当方のスキンでは以下の構造が記述されていた。(選択したスキンにより異なる)
b0174191_2364860.gif
本文のタイトルのある行の構成で、先ず「$postsubject$」(投稿文の題)を表示するブロック「POST_TTL」を行の幅80%のセルに割り当て、残り20%のセルに「$postadmin type=1$」(「編集」「削除」のスイッチ)が右詰めで記入されている。

このままでは、CSSでデザインし難いので、スイッチのあるセルを「POST_ADM」というブロック名に昇格させた。又、セル幅の比率を85%と15%にして、スイッチは英文字表記となる「2」に指定したものが以下だ。
b0174191_2374423.gif
+

後はCSS側で、「CLASS=POST_ADM」に対応した修飾項を書き加えた。
b0174191_2382221.gif
注1) 「COLOR : #ACD6F4; 」は、「EDIT」「DEL」の間の「|」の色にのみ効く。これは、背景と同じにして見えなくしている。

注2) 「LINE-HEIGHT : 210%;」は、左のタイトルの縦幅に文字背景色の幅を揃えるために設定。

注3) 「MARGIN: 0PX 0PX 0PX 5PX; 」で、文字背景色の位置をタイトルから少し右へ離して隙間を作っている。

注4) 「background-color: #ACD6F4;」は、文字背景色の色指定。

注5) 「white-space:nowrap;」は、IEウインドウを小さくしたり、IEの表示文字の大きさの設定を「最大」などにすると、スイッチの文字が行あふれして2行に改行される場合があるので、これを抑止する指定。

注6) 上記の指定をすると、関係する左の「投稿文の題」のブロック「DIV.POST_TTL」でも「white-space:nowrap;」を明示的に指定しないと、行送りが目だって来る様だ。

+

以上のプチ書き換えで、「EDIT」「DEL」周囲のデザインが納得できるものとなった。ログインした当人にしか見えないので、ハードコピーを示します。
b0174191_1154222.jpg

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

Test Post Field (2) 「トップ/ログイン」スイッチと最上段

2009年 07月 14日
HTML編集の全体を調べると、当方の選択していたスキンでは、おうよそ以下の構造になっていた。

画面の最上段の「TOP」ブロックには、「HEADER」「URL」の二つのブロックが配置されていて、その下は左右に「LEFT」「RIGHT」のブロックが配置され、「RIGHT」ブロックの先頭に「USERMENU」ブロックが配置されていた。

しかし、「RIGHT」ブロックは幅が狭く、英文字表示にすると余計に狭くなる。これは不都合だし、デザイン上のバランスも悪いので、「USERMENU」を「TOP」ブロックに配置しなおしている。
b0174191_11193292.jpg

以下が書き換えた「TOP」ブロックのHTMLだ。
b0174191_253443.gif
+

「TOP」の縦幅はもっと広くとっても良かったが、初見でインパクトがあっても、内容に関心を持って読む人や、再訪する人には邪魔なだけと思う。元のより少し幅のある背景画に描き換えた。書き換えでは、グラディエーション、立体的な影、透過画、などを隠し味に。

苦労したのは、「HEADER」「URL」「USERMENU」のブロックを狭い縦幅内に納める点。
先ず「SPACER」という改行だけのブロックを「DIV~/DIV」でHTML上で追加しCSS側で調整。要点は「DIV~/DIV」の各ブロックはいやでも改行して表現されるので、各区画の縦位置を「MARGIN 」指定で調整しているところ。「-22PX」など、マージンの負の値で区画を重ねている。
b0174191_2562774.gif
注1) IEのウインドウ幅を狭めた場合、文字が行送りされて「TOP」ブロックが崩れるので、「white-space:nowrap;」を入れている。

注2) 「LINE-HEIGHT : 100%;」の指定は、全体の指定が本来「150%」の改行幅に最初の方で指定されているので、これらのブロックでは個別に行間隔は「0」となる様に指定して、「MARGIN 」による調節を使い易くしている。「LINE-HEIGHT」が100%以外では、文字縦位置の表現結果は複雑で予想し難い場合が良く生じる。

注3) 「USERMENU」だけは「TEXT-ALIGN : RIGHT;」により右詰めにした。

注4) 最初の書き換えは、HTMLで、「SPACER」「HEADER」「USERMENU」「URL」の順にブロックを指定し、CSSで、「SPACER」、その下に「HEADER」、上に戻り「USERMENU」、その下に「URL」とマージン指定(=行配置指定)としていた。
これは、IEの解釈の癖のためか、「USERMENU」が押せなくなる現象に気付いた。少しIEウインドウ幅を触ると再描画されるためか押せる様になるが、とにかく「行を上に戻させて配置した行」に置かれた要素に、この現象が生じるらしい。
このため、HTMLの表記順を改め、「SPACER」「USERMENU」「HEADER」「URL」の順とし、「SPACER」、その下に「USERMENU」、上に戻り「HEADER」、その下に「URL」、とCSSでデザインしている。 当ページの「HEADER」は、少々押し難いのはそのためだ。

注5) 「USERMENU」だけ「COLOR: #ACD6F4;」の文字色指定をしている。これは、メニューの「Top」「Add Link」などのスイッチの間にある「|」の色だけに効いている。この色を背景画の色に近づけて見え難くしている。

注6) CSSの実際は、「DIV.HEADER」「DIV.URL」のそれぞれの項の後には「LINK,VISITED,HOVER」の挙動表現のデザインが付く。(付けないと、最初の方で指定された全体の指定に従ってしまい、見苦しい) 現在は、以下の様に、わざと機能のない文字に見える様にデザインしている。 LINKスイッチが無意味に多いのは好かない。
b0174191_302557.gif
+

以上のつまらない苦労をして、現時点での「TOP」ブロックがデザインされているが、参考にして戴ければ幸いです。

ただ、他ブラウザの環境でも思った様に表現されるかは疑問。 特に、トリッキーな行戻りは心配。要素が普通に並ぶ「TOP」ブロックの縦幅をとってデザインするに越したことはないと思うしだいです。.
[PR]
by Ataron | 2009-07-14 02:25 | スキン等の覚書き | Comments(0)