piano 1.0 - ポエツ | poets

Logs

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
■05.7.18 piano 1.0
自家用スキン「piano」について、スキン自体は随時更改してしまうので、現在の状態のキャプチャから説明します。
全体はこんなかんじです。



■1クリック→開 2クリック→閉 が基本
custom_pn02.jpg

■ドロップダウン
まず上部プルダウンメニューです。
もともと「onmouseover/outで切り替えるプルダウン」のサンプルスクリプトを参考にしています。しかしこのイベントハンドラでは、マウスが乗るだけで開閉してうるさいので、そのまま安直に「onmousedown」に変えました。

閉じるためにはダブルクリックしなければならないという、ちょっと(かなり)不便なものです。開ー閉が同じ動作でないのは不自然かもしれません…
つーか不良品だよ(*´∀`)

私でもいじれるカンタンなスクリプトだったので使っていますが、biscoさんのところの開閉スクリプトをお借りすれば、まともなメニューになると思います。

□新着記事
6つのメニュー項目のうち、少し特別なのは「新着記事」です。
これは各記事への頭出しアンカーとなっています。固定リンク(個別記事)では一般的な「リーセントエントリ」に変わります。
□カテゴリ
各カテゴリにカラーを設定しています。これはカテゴリ名をクラス名にしているだけのことです(なので雑記を「zakki」としている)。未設定やクラス名にならないカテゴリ名はデフォルト色になります。
□文法違反
ドロップダウン部のHTMLは<a><li>●</li></a>となっていますが、
<li><a>●</a></li>の記述が正しいようです。

■エントリ(記事)
いわゆるフレーム形式です。ヨコ幅は、上のメニューの境目と合わせて算出、タテは可変にしようと思ったのですが、height○%だとブラウザによって映らなくなる回避措置が分からなかったので固定。

□記事タイトル
カテゴリカラーを設定しているので、ぱっと見でカテゴリの見分けがつきます。
本文にドロップダウンと同じ(クリックー開/ダブルクリックー閉)のスクリプトが入っています。実際、読む上で開閉できるメリットはあまり感じられません。
★ちなみに本文全体がスイッチになっているので、どこをダブルクリックしても記事が閉じられてしまいます。
custom_pn03.jpg


□同月アーカイブリンク
「投稿カテゴリ」には、同カテゴリアーカイブへのリンクがかかっているのだから、「投稿年月日」には「同月アーカイブ」へのリンクがあって然るべきと考えました。スクリプトオフで閲覧した場合、ドロップダウンが開かなくなることへの対応でもあるのですが、投稿カテゴリ/投稿年月日で片方だけ同アーカイブへのリンクがかかっているのは、バランス的に不均衡と感じていたからです。

□コメントプレビュー
コメントリストを同じスクリプトで強引に仕込んでみました。開閉が同じイベントハンドラと言うのは不便です。というかムチャクチャです。
コメントがついた時すぐ読めることも含めて、記事より上に展開してもいいのではと考え、この場所設置されています。要再考。

□追記プレビュー
コメントリストと合わせて、「ページ遷移を抑制し、1画面で済ませる」がコンセプトなので、追記も表示されます。トップページに表示されてしまうと「追記」にする意味がないかもしれませんが…。プレビューできれば充分なので、小窓で表示されるようにしました。固定リンクへ行けば展開表示されます。

□文頭・文末アンカー▲▼
「サイトトップ/ボトム」へ移動するアンカーは一般的なのですが、そんなに大幅に跳んでも、あまり便利に感じなかったので一記事ずつ昇降できるアンカーにしました。事実上、次の記事への頭出しに使えます。一番下にのみページトップへ返るアンカーがあります。
小さいスクロール枠にエントリをいれてしまったので、文頭・文末アンカーの便利さはあまり発揮されてない気がします。だいたいSafariではcssスクロール内でのアンカーは利かないようですし。
フレームに入れずにこの「文頭・文末アンカー」を使ってみるとかなり便利です。次のテーマはスクロールフレームからの開放ですね。

■各モード
custom_pn04.jpg

□月別アーカイブ
もっとも表示数が多くなるので、タイトル一覧を表示。もちろんそのまま開閉可。カテゴリカラーで、どの部門の記事か一覧して分かります。

□カテゴリ他
200字サマライズを表示。そのまま開けたい記事をクリックすればフル表示に変わります。

■不具合
MacIEでは、「overflow」で表示を隠すことはできるのですが、不完全な状態です。ブラウザのスクロールバーの長さを見ると、エントリ(記事)の高さが全部読まれています。

これは私のマシン個体の問題か不明ですが、Safari1.2では、cssでつけたスクロールバーを動かしていると、スクロールがフリーズする現象がありました。1.3にアップデートしたところ改善されましたが、cssのスクロール内のアンカーは機能しないらしく、「文頭・文末アンカー」「記事頭出しアンカー」は使えません。

■懸案項目
・解像度800×600で閲覧すると見切れるので、ひとまわりコンパクトに。
・〈sameday〉への対応。
・本文中に絵文字を入れるとずれるらしい。使った事がないのでわからない。

[カテゴリ]*blog-logy*自家用デザイン

trackback

用FC2,寫部落格日誌也都簡單阿!

検索語抽出

ポップアップ・コメント

poets designed

Ajax検索
AD

台湾留学 完全サポート

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。