オリジナルスキンの作成は基本的に通常のHTML作成と同様です。ご自身でHTMLを記述されている方なら簡単に作成できますが、逆にHTMLの知識がない方には難しいと思われます。インターネット上には様々なサイトでHTMLやホームページ作成について解説しているので、まずはそちらでHTMLの勉強をされてから取り組んでください。以下の解説はホームページを作成できる程度のHTMLの知識があるという前提で行っています。
1.デザインの決定
まずはどのようなデザインにするかを決めなければなりません。スキンデザインにはカテゴリーなどを表示する「メニュー部分」とリンク先のバナーやサイトサムネイルなどを表示する「メイン表示部分」が必要となります。それ以外は特に制約はありません。ご自身のホームページに合わせたデザインにするなどすでに決まっていれば問題ありません。また、タイトルに画像を使用するなどの場合は予め用意しておいてください。
サンプルスキン(クリックすると拡大します)
2.サンプルスキンの仕組み
サンプルスキンの仕組みは特定の記述をCGIで置き換えて出力しています。具体的には
「$categorymenu_position」がカテゴリーメニューに、「$navimenu_position」がナビゲーションバーに、「$contents_position」がメイン表示部にそれぞれ置き換わります。また、相対パスとして記述する場合は
「$xdirx/」を、画像ディレクトリを指定する場合は「$imgdirx」を、トップページのアドレスと置き換える場合は「$toppage」を記述する必要があります。
3.HTMLの書き換え
一からオリジナルのスキンを作成してもかまいませんが、ここではわかりやすいようにサンプルスキンを利用して作成します。まずはskinフォルダ内にあるサンプルスキンをコピーして、任意の名前に書き換えてください。
DOCTYPE宣言は普段お使いの形式でかまいません。ただし、CGIスクリプトの文字コードはUTF-8で記述しているので、スキンHTMLも文字コードはUTF-8を宣言してください。タイトルはお好きにどうぞ。
CSS(スタイルシート)へのパスです。相対パスで記述する場合は必ず先頭に「$xdirx/」を付けてください。CSSはスキンのあるディレクトリではなく、実際に出力されるページと同じ場所に設置しているのでお間違いなく。なお、Skin_BaseStyle.cssはすべてのサンプルスキン共通の基本的なスタイルしか記述していません。各サンプルごとのスタイルは直接スキンに記述しています。HTML内の記述が気になる方はSkin_BaseStyle.cssに移すなり、外部スタイルシートにするなりしてください。
JavaScriptの記述です。<script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript">google.load("jquery", "1.6");</script>の2行はポップアップを表示用のJQueryライブラリを利用するための指定です。「HELPのONOFF」はナビゲーションバーの使い方をポップアップさせる記述です。必要なければ削除してかまいません。「メイン紹介文の表示非表示」はリンク先サイトの紹介文をポップアップさせるための記述です。ポップアップさせなければ必要ありませんが、その場合はスタイルの「.maincontents_inner p」内にある「display: none;」の記述を削除しないと紹介文が表示されません。また、紹介文はポップアップを前提としていますので、デザインが崩れる可能性があります。
スキン毎の個別スタイルを記述しています。HTML内に記述したくなければSkin_BaseStyle.cssに移す、もしくは外部スタイルシートにする(当然リンクを張る必要があります)等してください。なお、ここで記述しているスタイルの大半はCGIスクリプトによって出力されるものです。従って、HTML上では確認できませんので、別項として解説します。
ボディは通常のHTMLと同様に記述していただければかまいませんが、ポイントとして「$categorymenu_position」「$navimenu_position」「$contents_position」の置換えタグはできるだけDIVなどのブロック要素内に入れるようにして、その横幅に注意してください。例えば設定ファイルでカテゴリーメニューの横並びの数を10にしているのに、$categorymenu_positionを置いたブロック要素の横幅が10pixelでは到底表示できません。その場合、横幅を広げるか横並びの数を減らす必要があります。
4.スタイルシートの記述
CGIから出力されるHTMLに含まれるスタイルシートの内容は以下の通りです。
.categorymenu カテゴリーメニュー全体のブロック要素。
.categorymenu_table カテゴリーメニューのTABLE。
.categorymenu tr カテゴリーメニューのTR。
.categorymenu_td_left カテゴリーメニューのTDの左端。
.categorymenu_td カテゴリーメニューの左端以外のTD。
.categorymenu_onpage 選択中のカテゴリーメニューの修飾。
.navigationmenu ナビゲーションバー全体のブロック要素。
#helparea ナビゲーションバーHELPのID。
.navigationmenu_radiobutton ナビゲーションバーの表示形式切替フォーム。
.navigationmenu_submit ナビゲーションバーのリロードボタン。
.maincontents メイン表示部全体のブロック要素。
.maincontents_titleblock 人気順・新着順のタイトル部分。
.maincontents_titledata タイトル内のデータ部分。
.maincontents_titleupdate タイトル内の更新日時部分。
.maincontents_table メイン表示のTABLE。
※表示部分のブロック要素の幅を変更した場合、ここのwidthの指定も書き換えてください。
.maincontents_inner 登録サイト毎のブロック要素。
.icon_new 新着アイコンの修飾。
.icon_sogo 相互リンクアイコンの修飾。
.icon_osusume オススメアイコンの修飾。
.prevnext ページ送りのブロック要素。
.entryform_msg 新規登録画面のメッセージ表示部。
.entryform_form 新規登録・確認画面のフォーム部。
.dbadmin_listhead 管理画面の検索結果上部。
.dbadmin_lista(b) 管理画面の検索結果。交互に適用されます。
5.設定ファイルの書き換え
スキンが完成したら設定ファイル(daw_linknavi_p(n)_setting.cgi)をエディタなどで開き、$baseskinhtmlを作成したスキン名に書き換えてください($skindirから記述する必要があります)。また、横並び数や段落数などもスキンに合わせて設定してください。