hamlet : production note - ポエツ | poets

Logs

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
hamlet (ver.1.0)
自家用スキン『ハムレット』は、エントリの表示形態を3種類に切り替え、各エリアでもっとも適切な表示形態に変形するよう設計されました。

…という出発点ならよかったのですが、実は結果的にそうなっただけです。
今回の設計の起点は次の2つでした。

1)
『sinoise』で固まった形態…上部に水平配置の流動ブロックメニュー、記事ボックスを2列に配置…を継承すること。
2)
アーカイブエリアで記事のサマライズ(要約)が使用されているスキンはいくつかありますが、トップ(インデックス)ページがそうなっている例は、共有テンプレに見られなかったので、それを採用すること。

トップページをサマライズ表示にしたことで、逆にアーカイブなどでの表示をどうするかが発生しました。
アーカイブの本来の目的は、「記事(ログ)をどのように(月別、カテゴリ別)に分類表示するか」ですが、『ハムレット』では「表示形態をどうするか」の選択にもなっています。
menu02.jpg

そのため、どのエリアでも〈表示形式〉のメニューがあります。これは『tabbox』のタブ部分に相当する内容です。


構成はおおまかに以下のようになります。

【トップページ/月別アーカイブ】
記事の要約付き一覧 → 任意の記事を個別に開く
【カテゴリ/検索】
複数ウィンドウ表示:
各記事が(スクロールバーのつく)独立したボックスで表示される。
【ページエリア】
新着順に「垂直積層表示」で記事を総覧する。

後のふたつの形態からも、記事の個別展開はできます。
次に各エリアの特徴について解説します。「メニュー:」各エリアで変化するナビゲーションの項目です。〈表示形式〉は常に表示されるので省略します。

■トップページ
メニュー:新着コメント/新着トラックバック
(フッターメニュー:カテゴリ/月別/ブックマーク)
hamlet_cap.jpg

『sinoise』のレイアウトを継承しています。
本体部分がすでに記事一覧の役割をするので「リーセントエントリ」を省いています。(記事表示を1件に設定している場合だと不便です)。

『sinoise』ではメニューリストは1列幅だったのですが、さすがに表示できる情報がすくないので、こちらは2列にしています。
外観としては『sinoise』のほうがかっこいいと思うのですが。
sinoise_menu.jpg

sinoise_menu.jpg

フッターメニューと「information(プロフィール)」はトップページでのみ表示されます。

コメントボックス
comlist.jpg

以前ブログのコメント機能で言及したことがあるのですが、「入り口はそれぞれで出口はひとつ」=各エントリにコメントできるけど、それをひとつにまとめて表示したい、を実現してみました。
各記事ごとに開かなくて済むのですが、利便性に関しては…

ブログの場合、やはり記事内容との対応性が強いので、コメント部分だけ読んでも分かりづらいです。
一応、親記事タイトルから個別ページを開けます。

■月別アーカイブ
メニュー:月別アーカイブ一覧

トップページと基本構成が同じです。
ブログタイトルの横にある「○月号」は、言わずもがな。
『atr_cal_daisy』の日付部分に「インスパイア」されて付けました。
でもデザインはイマイチ…。月ごとに色が変わります。


コメントボックスはトップページの倍の高さに拡張され、表示位置も上になります。コメントの量が少ないようなら、トップページと同じ高さに設定してもいいでしょう。

■カテゴリ
メニュー:コメントのある記事タイトル/カテゴリ一覧
hamlet_c01.jpg

『sinoise』のような2列ではありませんが、それぞれの記事のボックスが独立した「複数ウィンドウ」式です。
hamlet_c02.jpg

コメントリストは下部にまとめて表示されます。
ヘッダー部のメニューには「コメントのついている記事」が表示されます。
また各記事ヘッダーの「コメント」ステータスからも、コメントリストへ跳ぶことができます。
逆にコメントリスト部分からは、親記事を頭出しできるようになっています。

■ページエリア
メニュー:記事インデックス(同ページ内の文頭へ)

一般的なブログスタイルのように、エントリを単純に積み重ねた形で閲覧します。
必然的に(page=0は)新着記事順の表示になります。

このオーソドックスな(?)閲覧スタイルは、パーマリンクでは1件ずつしか見られない、あるいは各記事ボックスにスクロールがでる形態は煩わしい、といった不満を解消します。やはり比較的、気軽に読めるスタイルではないでしょうか。

メニューにはいわゆる「benri-navi」式の頭出し機能が表示されます。
『ハムレット』では、この表示形態のみコメントリストが表示されません。

■パーマリンク
メニュー:リーセントエントリ

記事幅はペ-ジエリアと同様です。文字を少し大きめに設定しています。

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

comment


  管理者にだけ表示を許可する

trackback

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

検索語抽出

ポップアップ・コメント

poets designed

Ajax検索
AD

台湾留学 完全サポート

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