dandelion

utf preview

Dandelion「たんぽぽ」です。
デザインは非常に単純ですが、幾つかのの試みを行っています。

Nucleusのページデザインカスタマイズはスキン&テンプレートを理解しないと難しいと言われています。
スキンとテンプレートそのものは、それ程難解ではないのですが、新しいデザインを作成する場合にどちらも同時に手を付けるのは面倒で手間のかかるものです。
Nucleus初心者ともなれば、このあたりで挫折してもおかしくないでしよう。
そこで、、、
このデザインカスタマイズ作業(ここでは便宜上スキン作成と呼びます)を少しでも簡潔に行う方法として、一先ずテンプレートのことを忘れる方法を取ります。

テンプレートを意識しなためには、どのようなデザインでも利用できる汎用性の高いテンプレートの存在が大切です。

スキンディレクトリィ /dandelion

/images   画像フォルダ
/images/nucleus   nucleusテンプレート画像フォルダ
jq-corner.js   角丸プラグイン
jquery-latest.js jquery本体
main.css   ページレイアウト用CSS
mod_head_links.inc   Nucleusヘッダ出力用
mod_navigation.inc   Nucleusタイトル出力用
mod_sidebar.inc   Nucleusサイドナビゲーション出力用
nicetitle.css   マウスオーバー・タイトルjs用CSS
nicetitle.js   マウスオーバー・タイトルjs
nucleus_general.css   Nucleusコンテンツレイアウト用CSS
preview.png ページ縮小画像
skinbackup.xml バックアップ用XML

Dandelionではこれらのパーツをdefaultスキンを元に作成しました。 内容の変更はあまり発生していませんが、defaultテンプレートをgeneral/indexとgeneral/itemという名前に変更することによって汎用のテンプレートであることを明示しています。
またNucleusのdefaultスキンのhead.inc、navigation.inc、sidebar.incを少し整理して汎用性を持たせ、mod_head_links.inc、mod_navigation.inc、mod_sidebar.incと名前を変えることによって、こちらも汎用のスキンであることを明示しています。
またCSSとしてnucleus_general.cssを設定しています。general/indexとgeneral/itemやsidebar.incから書き出されるCSSを整形するもので、default_right.cssからページレイアウト的要素を取り除いたCSSとなっています。

尚、Dandelionでは角丸実現のためにjqueryとプラグインのjq-corner.jsを利用しています。

dandelion

 

おすすめ