たまログ

んで、早速オリジナルをNucleus用に使ってみます。
オリジナルはこれ

ブログという側面からみれば結構ありがちなデザインと言えなくもないですね。
逆に言えば結構Nucleus用に変えやすいと思います。

 

他のブログやCMSでいうところのテンプレートはNucleusではSkin（スキン）と言います。で、通常配布されているスキンには、skinbackup.xmlというファイルがあって、スキンをアップロードして、Nucleusの管理画面からskinbackup.xmlを読み込むと、設定をよきに計らってくれるのですが、当然ないので、手作業で設定していきます。

あと、このスキンの作り方というか、設定の方法もいろいろあるのですが、たまこ的には、ファイルを分けてparsedincludeで外部ファイルを読み込む方法がスキなのでここでの説明もそれで行います。

で、まずはオリジナルのhtmlファイルのソースをエディタで開いて、要所要所でファイルに分けます。

たとえば、head.incとかbody.incとか自分の覚えやすい名前をつけて分けます。
分けるポイントですが、これまた自由にわけてもらって結構ですが、最終的には一枚のページになるので、わかりやすいところで分けるのが一番ですね。

たまこの場合、1行目から＜body＞のところをhead.incでわけて、ヘッダー部分をheader.inc、コンテンツ部分をbody.inc、メニューをsidebar1.incとsidebar2.incで分けて、最後のフッターは、footer.incで分けました。分けた状態が下記の感じ

オリジナルの画面のスクリーンショットを取って、横幅150pxにして、preview.pngとして保存しておくと、あとで管理画面を見たときプレビューがつくのでわかりやすいです。

フォルダ名は、そのままテンプレート名をとって、seashoreとしました。
イメージ類はimgフォルダを作ってそこにいれておきます。入れなくてもいいです。ま、入れておけば片づいて良いかもね。

で、FTPで所定の位置にアップロードします。アップロードしたら、パーミッションを777とかに変えておきます。Nucleusは、スキンファイルというプラグインがありますので、あとはFTPがなくても、ブラウザだけでファイル操作が可能になりますからね。

次は、管理画面のスキンの編集でスキンの設定をします。以前にも同じ設定をしたことがあるなら、それを複製して設定を変えるのが一番楽かもしれません。たまこも今回はそうしましたけど、設定は下記の通りです

これでOKすると、下記のようになります。

定義済みパーツのところは、まっさらから作ったら何も定義されていないかもしんないですね。たまこは以前のを複製していますので、最初から定義状態です。preview.pngを作ると、図のようにプレビューがでます。

まずは、この状態でページを見てみると、、、
NucleusはURLのあとに、スキンのIDを入れると、そのスキンの状態を確認できます。
たとえば、
http://www.yourdomin.com/?skinid=1000
とか・・・

で、今の状態をみると・・・

まあ、全く設定していませんので、こんな感じですよねー

あとは、HTMLのタグやcssのpathとかを調整して、レイアウトが正しく表示するように調整してみます。

で、とりあえず、＜div＞＜/div＞とCSSのPathを調整したら、Body部分が正常な位置にきました。

この時メニュー関係は、このbodyの下にありましたので、さらに、＜/div＞の位置を調整したら・・・


というわけで、今日はここまで、表示さえちゃんとできれば、あとはNucleus用のタグにうち変えたり、CSSを調整したりするだけなので、比較的楽（なはず）です。