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