08/02: INDEXページの作成
Category: nucleus
Posted by: visualsmaster
ホームページの顔となるインデックスページの作成です。
Nucleusのデザインでなく出来るだけオリジナルにしたい方の第一歩の作業です。
慣れてきたらどんどん弄って個性あるページにしてください。
私自身まだNucleusは初心者です。いろいろ試行錯誤して忘れないよう覚書として書いています。
Nucleusについては時間が有ればフォーラムを読みいろんな人の悩みやプラグインの情報なども収集できます。
また、登録をすれば分からない事の質問やログインしないと使えないプラグインもありますので登録して見ては!!
今回INDEXページの作成ではdefaultスキン（2カラム）での作業ですがNucleusにはいろんなスキンを配布しております。
そちらをダウンロードしてカスタマイズしても良いかと思います。
1.管理ホームメニュー-スキンの編集 defaultスキンから複製を作るとはじめてならclone_defaultと言う複製が出来上がります。
出来上がったclone_defaultを分かりやすくする為リネームします。
2.作成したclone_defaultの編集から一般設定フォーム
名前：clone_default から リネーム名 indexpage とします。（お好きな名前で「 a-z」）
説明：Index Page （お好きな名前で）
設定の変更ボタンで変更します。
3.管理ホームメニュー-新規Blogの作成 新しいBlogの作成のフォームからBlogの設定を行います。
Blogの名前：IndexPage（お好きな名前で）
Blogの短縮名：welcome （お好きな名前でOKですが、「a-z 」ファイル名になります。）
Blogの説明：Index My Page （お好きな名前で）ページタイトル名になります。
標準のスキン:indexpage 上記で作成したスキン名
作成ボタンで作成します。
4.新しいweblogが作成されました。
ローカルにてwelcome.php というファイルを作成して、中身に以下のコードを貼り付けindex.phpのあるトップフォルダにUPします。
ファイル作成時の注意、文字コードを間違えないように（貴方はUTF-８？それともEUC？）編集できるエデイタの使用！
<?php
$CONF['Self'] = 'welcome.php';
include('./fancyurls.config.php'); /*fancy URLを有効にしている場合*/
include('./config.php');
selectBlog('welcome');
selector();
?>
以上で作成環境が整えました。
ここからはインデックスページの中味の作成です。
最初はあまり良く解らないと思いますのでコンテンツ部分を作成します。
管理メニュー-スキンの編集 作成したindexpageの説明、メインの目次ページをクリックします。
メインの目次ページ編集フォーム、ここではコンテンツ部分とサイドバー部分を編集できます。
編集箇所
<!-- page content -->
<div id="container">
<div class="content">
<%blog%> /*ここを削除してこれから自分で作成する内容を記述します。*/
</div>
</div>
作成方法は、普通に記述しても良いし、HTMLを挿入しても良いです。またCSS（スタイルシート）が使える方は、内部スタイル style=""で記述してもOK!
また外部スタイルシートに記述できる方はそこに記述してもOKです。
外部スタイルシートへは、スキンファイル-スキンファイル管理-default（クリック）-default_right.cssです。
defaultですから全体に影響を与えます。元のCSSと自分のCSSを分かりやすく記述してください。
（ここまで出来る方は、独自にCSSを作成してヘッダー内から読み込んだ方が良いかも？）
HTMLで記述する場合の注意はヘッダー・フッターはすでに存在しているので<BODY>ここの部分</BODY>内部分を記述します。
最後にサイドバーの記述もここで出来ます。
スキンファイル-スキンファイル管理-sidebar.inc（クリック）中を見ていただければ大体分かると思います。
使いたいサイドバーメニューをメインの目次ページ
<!-- page menu -->
<h2 class="hidden">Sidebar</h2>
<div id="sidebarcontainer">
<dl class="sidebardl">
<%parsedinclude(sidebar.inc)%> /*ここを削除してこれから自分で作成する内容を記述します。*/
</div>
オリジナルのメニューを挿入する際sidebar.incを参考に作って見てください。
※ 作成方法は実際自分で行った作業です。間違いなどあるかも知れません、作業を行う場合は自己責任の元で、また間違い等あればご指摘ください。
Nucleusのデザインでなく出来るだけオリジナルにしたい方の第一歩の作業です。
慣れてきたらどんどん弄って個性あるページにしてください。
私自身まだNucleusは初心者です。いろいろ試行錯誤して忘れないよう覚書として書いています。
Nucleusについては時間が有ればフォーラムを読みいろんな人の悩みやプラグインの情報なども収集できます。
また、登録をすれば分からない事の質問やログインしないと使えないプラグインもありますので登録して見ては!!
今回INDEXページの作成ではdefaultスキン（2カラム）での作業ですがNucleusにはいろんなスキンを配布しております。
そちらをダウンロードしてカスタマイズしても良いかと思います。
1.管理ホームメニュー-スキンの編集 defaultスキンから複製を作るとはじめてならclone_defaultと言う複製が出来上がります。
出来上がったclone_defaultを分かりやすくする為リネームします。
2.作成したclone_defaultの編集から一般設定フォーム
名前：clone_default から リネーム名 indexpage とします。（お好きな名前で「 a-z」）
説明：Index Page （お好きな名前で）
設定の変更ボタンで変更します。
3.管理ホームメニュー-新規Blogの作成 新しいBlogの作成のフォームからBlogの設定を行います。
Blogの名前：IndexPage（お好きな名前で）
Blogの短縮名：welcome （お好きな名前でOKですが、「a-z 」ファイル名になります。）
Blogの説明：Index My Page （お好きな名前で）ページタイトル名になります。
標準のスキン:indexpage 上記で作成したスキン名
作成ボタンで作成します。
4.新しいweblogが作成されました。
ローカルにてwelcome.php というファイルを作成して、中身に以下のコードを貼り付けindex.phpのあるトップフォルダにUPします。
ファイル作成時の注意、文字コードを間違えないように（貴方はUTF-８？それともEUC？）編集できるエデイタの使用！
<?php
$CONF['Self'] = 'welcome.php';
include('./fancyurls.config.php'); /*fancy URLを有効にしている場合*/
include('./config.php');
selectBlog('welcome');
selector();
?>
以上で作成環境が整えました。
ここからはインデックスページの中味の作成です。
最初はあまり良く解らないと思いますのでコンテンツ部分を作成します。
管理メニュー-スキンの編集 作成したindexpageの説明、メインの目次ページをクリックします。
メインの目次ページ編集フォーム、ここではコンテンツ部分とサイドバー部分を編集できます。
編集箇所
<!-- page content -->
<div id="container">
<div class="content">
<%blog%> /*ここを削除してこれから自分で作成する内容を記述します。*/
</div>
</div>
作成方法は、普通に記述しても良いし、HTMLを挿入しても良いです。またCSS（スタイルシート）が使える方は、内部スタイル style=""で記述してもOK!
また外部スタイルシートに記述できる方はそこに記述してもOKです。
外部スタイルシートへは、スキンファイル-スキンファイル管理-default（クリック）-default_right.cssです。
defaultですから全体に影響を与えます。元のCSSと自分のCSSを分かりやすく記述してください。
（ここまで出来る方は、独自にCSSを作成してヘッダー内から読み込んだ方が良いかも？）
HTMLで記述する場合の注意はヘッダー・フッターはすでに存在しているので<BODY>ここの部分</BODY>内部分を記述します。
最後にサイドバーの記述もここで出来ます。
スキンファイル-スキンファイル管理-sidebar.inc（クリック）中を見ていただければ大体分かると思います。
使いたいサイドバーメニューをメインの目次ページ
<!-- page menu -->
<h2 class="hidden">Sidebar</h2>
<div id="sidebarcontainer">
<dl class="sidebardl">
<%parsedinclude(sidebar.inc)%> /*ここを削除してこれから自分で作成する内容を記述します。*/
</div>
オリジナルのメニューを挿入する際sidebar.incを参考に作って見てください。
※ 作成方法は実際自分で行った作業です。間違いなどあるかも知れません、作業を行う場合は自己責任の元で、また間違い等あればご指摘ください。
