第二版
2007/05/10
相互リンクシステム
【デザイン変更マニュアル】
１．サイトデザインに関係するフォルダ
【 【【
【相互相互相互リンクサイト相互リンクサイトリンクサイト】リンクサイト】】】は、をお使いのサーバーの「link」というフォルダに導入した場合、以下のようなフォルダ構成 となりますが、デザイン変更に関係のあるフォルダは、「./link/css/」「./link/form/templates/」「./link/img/」の３ つのみです。これらのフォルダの中のファイルを編集することで、デザインの変更を行います。 スタイルシート サイトのテンプレート 画像ファイル 赤枠以外のフォルダの内容については、変更し ないようにしてください。相互リンクサイト全体 が動作しなくなる恐れがあります。 ! その他のファイル・フォルダは システムの動作に関わるもの （＝変更不可） デザイン関連フォルダ
２．レイアウトの簡易変更
【【【
【相互相互相互相互リンクサイトリンクサイトリンクサイトリンクサイト】】】】では、テンプレートファイルを差し替えることで、左側にリンク一覧のメニューが付いた「２カラム 型」と、メニューの無い「1カラム型」の2種類の基本レイアウトの切替を行うことができます。
./link/form/templates/のフォルダに、「1col」「2col」２つのフォルダがございます。これらが、それぞれ「1カラムテンプカラムテンプカラムテンプカラムテンプ レート レート レート レート」「２２２２カラムテンプレートカラムテンプレートカラムテンプレートカラムテンプレート」の元ファイルが格納されています。 1カラム⇔２カラムのレイアウトを変更する場合は、それぞれのフォルダ内の全てのファイル（５つ） を./link/form/templates/上のファイルに上書きすることで行えます。 切替 1カラムもしくは2カラム のテンプレートフォルダ いずれかのフォルダの ファイル一覧 Templatesフォルダの同名 ファイルにすべてコピー 2カラムデザイン １カラムデザイン
３．スタイルシート・テンプレート編集について
【 【【 【相互相互相互相互リンクサイトリンクサイトリンクサイトリンクサイト】】】】では、スタイルシートやテンプレートを直接テキストエディタなどで編集していただけますが、以 下の点について、ご注意下さいませ。①：文字コード「euc-jp」対応のエディタで編集してください
Windows付属の「メモ帳」などで、スタイルシートファイル・テンプレートhtmlを開いた場合、 日本語で記載された箇所が文字化けしてしまいます。 編集する場合は、必ずeuc-jp形式の文字コードを扱うことのできるエディタをご使用下さい。②：テンプレートファイルは、htmlソースを直接編集してください。
Windows付属「メモ帳」 euc-jp未対応 euc-jp対応テキストエディタ 一般的なホームページ作成ソフトは、ページの 実際のデザインを確認しながら、デザインを直接 作成することが出来ますが、【【【【相互相互相互リンクサイト相互リンクサイトリンクサイト】リンクサイト】】】 のテンプレートファイルは、システム情報やカテゴ リ・リンクの一覧を表示するための特殊な記述を しております。 左図は、あるホームページ作成ソフトの「デザイ ン」確認画面ですが、デザインを確認しながらの 変更作業は、かえって難しくなります。 テキストエディタをご使用になるか、ホームペー ジ編集ソフトのhtmlソース編集機能にて、直接編 集してください。 テンプレートファイルを ホームページ編集ソフトのデザイン確認機能で 表示した場合 テンプレートファイルの編集箇所によっては、システムが 正常に動作しなくなる可能性もございます。編集に当たっ ては自己責任にてお願いいたします。 !２ ２ ２ ２カラムカラムカラム : 2col.cssカラム ● ● ● ●ページタイトルページタイトルページタイトルページタイトル 26行目の#header a のcolor項目を変更します。 ● ● ● ●各各各ページ各ページページ見出ページ見出見出し見出ししし 92行目のh2 のcolor項目を変更します。 ● ● ● ●大大大カテゴリ大カテゴリカテゴリカテゴリ 115行目の#sub dt のcolor項目を変更します。 ● ● ● ●小小小カテゴリ小カテゴリカテゴリカテゴリ 125行目の#sub dd にcolor項目を追加します。 ● ● ● ●小小小カテゴリ小カテゴリカテゴリ（カテゴリ（（（選択状態選択状態選択状態選択状態）））） 134行目の#sub span.page_active のcolor項目を変更します。 ● ● ● ●リンクリンクリンク一覧リンク一覧一覧：一覧：：：サイトサイトサイトサイト名名名名 233行目の#main #list dt にcolor項目を追加します。 ● ● ● ●リンクリンクリンク一覧リンク一覧一覧：一覧：：：サイトサイトサイトサイト説明文説明文説明文説明文 228行目の#main #list dt にcolor項目を追加します。 ● ● ● ●フッターフッターフッターフッター部部部部
４．サイト上の文字色の変更
サイト上の文字色を変更する場合は、スタイルシート内の文字色の指定することで変更することができます。 1カラムの場合は、「1col.css」、 2カラムの場合は「2col.css」を編集します。 ./link/css/内内内内 各文字色や、背景色を変更する場合、16進数によるカ １ １ １ １カラムカラムカラムカラム ：：：： 1col.css ● ●● ●ページタイトルページタイトルページタイトルページタイトル 26行目の#header a のcolor項目を変更します。 ● ●● ●各各各ページ各ページページ見出ページ見出見出し見出ししし 84行目のh2 のcolor項目を変更します。 ● ●● ●大大大カテゴリ大カテゴリカテゴリカテゴリ265行目の#main #top dt.list
にcolor項目を追加します。 ● ●● ●小小小カテゴリ小カテゴリカテゴリカテゴリ 264行目の#main #top dd のcolor項目を変更します。 227行目の#main #list dt にcolor項目を追加します。 ● ●● ●リンクリンクリンク一覧リンク一覧一覧一覧：：：：サイトサイトサイトサイト名名名名 ● ●● ●リンクリンクリンク一覧リンク一覧一覧一覧：：：：サイトサイトサイトサイト説明文説明文説明文説明文 227行目の#main #list dt にcolor項目を追加します。 ● ●● ●フッターフッターフッター部フッター部部部 313行目の#footer p のcolor項目を変更します。 以下に、ページを構成する代表的な要素の色変更の方法を紹介します。
５．画像の差し替えによるデザインの変更
【【【
【相互相互相互相互リンクサイトリンクサイトリンクサイトリンクサイト】】】】では、./link/img/フォルダ内の画像ファイルを変更することで、サイトのデザインを容易に変更 することが出来ます。ここでは画像の一覧と差し替えの説明を行います。
arrow1.gif arrow2.gif arrow3.gif
● ● ● ●小小小小カテゴリカテゴリカテゴリカテゴリのののの背景矢印背景矢印背景矢印背景矢印 16××××16ピクセルピクセルピクセルピクセル arrow1は通常時、arrow2はオンマウス 時、arrow3は選択状態時の画像です。 ● ● ● ●登録登録登録登録フォームフォームフォームフォームなどのなどのなどの背景などの背景背景背景 back_001.gif 50×××50ピクセル× ピクセルピクセルピクセル 相互リンク登録フォームの背景や、相互 リンク編集時の認証画面の背景画像です。 ● ● ● ●2カラムレイアウトカラムレイアウトカラムレイアウトカラムレイアウトののの背景の背景背景背景 content_back.gif 800×××50ピクセル× ピクセルピクセルピクセル 2カラムレイアウトの背景です。左側のメ ニュー部のみ青色です。（両端に灰色ライ ン） ● ● ● ●1カラムレイアウトカラムレイアウトカラムレイアウトのカラムレイアウトののの背景背景背景背景 content_back_simple.gif 800××××50ピクセルピクセルピクセルピクセル 1カラムレイアウトの背景です。白色のみ の単色背景です。（両端に灰色ライン） ● ● ● ●ページフッターページフッターページフッターページフッター部部部の部のの背景の背景背景背景 footer_back.gif 800××××80ピクセルピクセルピクセルピクセル ページフッター部の背景です。画像の下 部を丸くし、透過gifにしています。 ● ● ● ●ページヘッダーページヘッダーページヘッダーページヘッダー部部部の部のの背景の背景背景背景 header_back.gif 800×××80ピクセル× ピクセルピクセルピクセル ページヘッダー部の背景です。画像の上 部を丸くし、透過gifにしています。 ● ● ● ●登録登録登録登録フォームフォームフォームフォームのののの補足補足補足補足アイコンアイコンアイコンアイコン message.gif 16××××16ピクセルピクセルピクセルピクセル 登録フォームにて、入力項目の説明文の 欄に表示されるアイコンです。 ● ● ● ●大大大カテゴリ大カテゴリカテゴリカテゴリ見出見出見出し見出し（しし（（（２２２カラム２カラムカラムカラム）））） ● ● ● ●大大大大カテゴリカテゴリカテゴリカテゴリ見出見出見出見出しし（しし（（（１１１１カラムカラムカラム）カラム））） parent_back.gif 22×××30ピクセル× ピクセルピクセルピクセル ２カラムレイアウトでの、大カテゴリの見 出し画像です。 parent_back_1col.gif 24×××24ピクセル× ピクセルピクセルピクセル １カラムレイアウトでの、大カテゴリの見 出し画像です。 ● ● ● ●相互相互相互相互リンクリンクリンクリンク登録登録バナー登録登録バナーバナーバナー ●●●●相互相互リンク相互相互リンクリンクリンク登録登録登録登録バナーバナー（バナーバナー（（（オンマウスオンマウスオンマウスオンマウス）））） 相互リンク登録用のバナー画像です。 相互リンク登録用のバナー画像です。オンマウス時の画像となります。 regist_back.gif regist_back_hover.gif 180×××60ピクセル× ピクセルピクセルピクセル 180××××60ピクセルピクセルピクセルピクセル 画像 画像画像 画像ファイルファイルファイル一覧ファイル一覧一覧一覧 ./link/img/ 画像や文字のサイズを変更したり、表示位置を変更する ためには、html及びスタイルシートの編集が必要となりま す。詳しい編集方法は書籍などをご参照ください。 ! ./link/img/上の同名ファイル に上書き保存し、表示を 確認する。 デザインを変更したい画像の サイズと同じ大きさの画像を 作成する。 作業前に、元の画像ファイル のバックアップを取っておく。 手順 手順 手順 手順１１１１ 手順手順手順手順２２２２ 手順手順３手順手順３３３ 完了 完了 完了 完了
