Step2( 上 級 編 ) 1 TOPページに CSSで 少 しだけお 化 粧 する 本 書 での 実 践 は 前 項 (Step1-5)までで 終 わりなのですが この 項 では さらに 上 級 へ 進 みたいかた 向 けに Golive Photoshop を 連 携 しつつ かつ CSS というデザインテクニックを 使 う 応 用 編 をご 紹 介 します CSSのテクニックは ちょっと 難 しいです 必 須 の 知 識 ではありません パソコンの 知 識 がある 程 度 高 く トップページの 左 メニュー を 濃 い 色 の 背 景 白 色 反 転 テキストにしてメリハリをつけたい 方 はチャレンジしてみて ください とにかく 早 くホームページを 仕 上 げたい という 方 は 左 メニュー を 薄 い 色 の 背 景 普 通 のテキストで トップページを 作 ってください こちらのほうが 簡 単 です 左 メニューを 濃 い 色 の 背 景 と 白 色 反 転 テキストで 構 成 ちょっと 難 しい! 1
Topページ 左 側 メニューを CSSを 使 って 作 成! 左 側 メニューは トップページの 作 成 で 一 番 大 変 なところです 以 前 は 商 用 ホームページの 左 側 メニューというのは ロゴ 文 字 で 作 成 する のが 常 識 でした 典 型 的 な ロゴ 文 字 による 左 側 メニュー しかし 2002 年 ころから SEO( 検 索 エンジン 上 位 表 示 )が 大 変 集 客 に 影 響 があることがわかってきたため テキストによるメニュー 表 示 が 一 般 的 になりつつあります よい 例 が ヤフーや all about japan です 2
ヤフー トップのメニュー all about japan のメニュー いずれもリンクはテキスト( 文 字 )で 作 成 されている ヤフーや all about japan のように うすい 色 の 背 景 を 枠 で 囲 み 通 常 の 青 色 文 字 リンクテキストで シンプルに 作 成 する Step1-3でテンプレートを 使 って 実 践 したとおり 基 本 的 にはこれでOKで す しかし あなたのホームページのカラーが 濃 い 青 や 濃 い 赤 はたまた 黒 だ ったらどうでしょう 青 いリンクの 文 字 はほとんど 見 えなくなってしまいますよね このような 場 合 は リンク 文 字 を 白 色 反 転 テキストにし ロゴ 文 字 を 組 み 合 わせて 構 成 するのが 最 もよい 方 法 です 3
できあがりイメージ 背 景 を 濃 くし 白 色 反 転 文 字 で 目 立 たせる GIF のロゴ 文 字 を 乗 っけて メニュー 背 景 自 体 にドロップシャドウを 施 し プロ っぽく 仕 上 げます 以 下 の 手 順 で 作 成 ください とても 大 事 なところですから 詳 しく 説 明 して います 複 雑 で 最 初 は 時 間 がかかりますが 一 回 作 ってしまえば 終 わりです からがんばりましょう 左 側 メニューの 作 成 手 順 1.Photoshop で 下 敷 きの 画 像 をつくる 2.Golive のテーブルでメニューの 枠 をつり 下 敷 きの 画 像 とテーブル を 組 み 合 わせる 3. 白 色 のテキストを 挿 入 する 4.Photoshop で 背 景 色 と 同 色 のロゴ 文 字 をつくる 5.テキストリンクのルールを CSS で 特 別 に 定 義 する 4
1.Photoshop で 背 景 色 の 画 像 をつくる 1 まず Photoshop で ファイル 新 規 を 選 択 して 以 下 のような 画 面 を 呼 び 出 します そこで 幅 を 182pixel 高 さを 800pixel に 設 定 し OKを 押 してください(この 幅 と 高 さはご 自 身 の web にあわせて 適 当 に あとで 変 えてください) 2 縦 長 の 新 規 ページが 現 れましたね 5
3 ここに レイヤー( 画 像 要 素 )をひとつ 追 加 します レイヤーメニュー から 新 規 レイヤーを 作 成 をクリックします 4 新 規 レイヤーができましたね 次 に 左 のツールメニューから 長 方 形 選 択 ツール を 選 びます 6
5 マウスでドラッグして 少 し 右 側 に 隙 間 ができるように 縦 長 の 長 方 形 をつくります これがメニューの 背 景 の 基 礎 部 部 になります 隙 間 6 次 に この 長 方 形 を 背 景 色 で 塗 りつぶします まず 色 の 選 択 をするた めに 左 ツールメニューのカラーピッカーをクリックします すると カラーピッカーの 設 定 画 面 が 出 てきます カラーピッカー 7
7 これを あなたのwebのテーマカラーで 塗 りつぶします 反 転 白 色 の テキストを 乗 っけるので 塗 りつぶす 色 は 濃 い 色 になります Wans の 場 合 は 濃 い 緑 ですので これを 選 択 してOKとします 8 これで 色 が 選 択 されました 次 に 左 ツールメニューから 塗 りつぶし ツール を 選 択 して 長 方 形 の 中 でクリックすれば 長 方 形 選 択 の 部 分 が 選 択 した 色 で 塗 りつぶれます 塗 りつぶしツール 8
次 に 長 方 形 で 色 を 塗 りつぶした 背 景 色 にドロップシャドウで 影 をつけ て かっこよくします(これが 結 構 見 た 目 の 良 さに 効 くのです) まず レイヤーを 選 択 したまま レイヤーメニューの レイヤースタイ ル 追 加 をクリックします レイヤースタイルの 追 加 9 いろいろメニューがでてきましたね この 中 の 上 から 2 番 目 ドロッ プシャドウ を 選 択 します ドロップシャドウ 9
10 影 ができてかっこよくなりましたね 最 後 にこれを 別 名 で 保 存 から GIFファイル 形 式 で 名 前 をつけ て 保 存 して 終 了 です ファイル 名 は 暫 定 的 に sitajiki.gif としてくだ さい Photoshop ファイルとしての 保 存 はしなくてもOKです この sitajiki.gif の 画 像 は 後 で Golive で 呼 び 出 しますので 保 管 し た 場 所 をよく 覚 えておいてください これでようやく5つのステップのうちの 第 1 番 目 Photoshop で 背 景 色 の 画 像 をつくる が 完 了 しました 結 構 複 雑 な 手 順 を 踏 みますが 慣 れれ ば 2 分 くらいでできるようになりますので 安 心 してくださいね 2.Golive のテーブルでメニューの 枠 をつくり 下 敷 きの 画 像 とテーブ ルを 組 み 合 わせる 次 に この 画 像 を 下 敷 きにして ロゴ 文 字 とテキストを 挿 入 します 以 下 の 手 順 で Golive で 枠 をつくってください 10
1 まず Golive でトップページを 開 きます 例 として wans!direct のト ップページで 説 明 します 2 オブジェクトパレット の テーブル をドラッグ&ドロップします テーブル 11
3 次 に 1 つの 枠 の テーブル を 作 成 します 最 初 にテーブルをドラッ グ&ドロップすると 3 3の9つの 枠 ができてしまっていますので 9 つの 枠 全 体 を 選 択 して インスペクタ パレットの テーブル タブの 行 数 列 数 の 3 を 1 に 変 更 して 1 つの 枠 にします 4 次 はテーブルの 幅 と 高 さです これを Photoshop で 作 成 した 下 敷 き 画 像 よりちょっと 大 きめのサイズに 設 定 します 幅 183pixel 高 さを 900pixcel くらいでよいでしょう 単 位 を ピクセル に 変 えることに 注 意! 12
5さらに 外 枠 の 幅 が 1 になっているので これを 0 に 変 更 します 外 枠 の 幅 を 0 に 6これでメニューを 作 成 する 枠 (テーブル)ができました 13
7 次 に Photoshop で 作 成 した 下 敷 き 画 像 を 呼 び 出 します まず メニ ューを 作 成 する 枠 (テーブル)を 選 択 してから インスペクタタブの 背 景 画 像 にチェックを 入 れます 8 背 景 画 像 を 呼 び 出 すため 右 側 の 参 照 ボタンを 押 します ここから ステップ1で 作 成 した shutajiki.gif を 呼 び 出 します チェック 参 照 ボタン 14
9メニューを 作 成 する 枠 (テーブル)に shitajiki.gif がはまりました ここまででようやく 下 地 作 りの 完 了 です 次 は 文 字 の 挿 入 です 3. 白 色 のテキストを 挿 入 する 原 則 として 背 景 を 濃 くして 白 色 でテキストを 表 示 するのは トップペ ージの 左 側 メニューのみです トップページのメニューだけこのようにするのは トップページとしてのメ リハリ をつけて お 客 さんに 印 象 づける お 化 粧 の 意 味 あいです これ 以 外 のテキストはすべて 白 色 背 景 に 黒 色 テキストとしてください 15
1 まず メニューを 作 成 する 枠 (テーブル)に 直 接 テキストを 書 き 込 む 準 備 をします メニューを 作 成 する 枠 (テーブル)の ちょっと 内 側 を クリックします ちょっと 内 側 をクリック 2 この 時 インスペクタ パレットに セル タブが 以 下 のように 出 ていればOKです セル タブが 出 てこない 場 合 は うまく セル を 選 択 できていませんので やりなおしてください (これはちょっと 慣 れるまでコツが 必 要 です) 16
3 セル タブの 縦 方 向 配 置 と 横 方 向 配 置 が デフォルト( 標 準 ) のままで これでは 使 いにくいです 縦 方 向 配 置 は 上 揃 え に 横 方 方 向 配 置 は 左 揃 え へ 設 定 を 変 更 します 4 さらに テキストを 白 色 に 設 定 します テキストの 色 アイコンをク リックして 白 を 選 択 します テキストの 色 アイコン 17
5 テキストを 挿 入 してみましょう テーブル 内 をクリックしてから まずは 子 犬 の 出 産 情 報 と 書 き 込 みます 6 この 時 文 字 を 1 段 階 大 きさを 小 さくしたりすると メリハリがきい てメニューらしくなります 文 字 の 大 きさを 2 へ 変 更 18
7 いくつかメニューを 並 べ プレビュー タブで 見 てみましょう メリハ リが 利 いた 見 栄 えのよいメニューになりました プロっぽいですね プレビューで 確 認 したとき 右 側 に 余 計 な 線 が 入 っていたら テーブルの 幅 を 少 し 狭 めてください すっきりするはずです これだけで 構 成 しても 十 分 見 栄 えのよい 左 側 メニュー となりますが さらに ロゴ 文 字 を 追 加 するとよりプロっぽくなります 4.Photoshop で 背 景 色 と 同 色 のロゴ 文 字 をつくる こういうのを 作 ります 1 背 景 色 と 同 色 のロゴ 文 字 を Photoshop 作 成 するのは ちょっと 面 倒 です が 簡 単 ですのでさっさと 作 成 してしまいましょう まずいつものよう に ファイル から 新 規 をクリックしてください 幅 を 170pixel 高 さ を 28pixel モード は RGB カラー カ ンバスカラー は 白 を 選 択 してください 19
2 小 さいエリアができましたね 3 次 に 背 景 の 色 を 下 敷 き 画 像 と 同 じ 色 にします 前 回 と 同 じように カラーピッカーで 色 を 選 択 します カラーピッカー 20
4 このとき 下 敷 き 画 像 の 色 を 忘 れてしまった! という 場 合 は 下 敷 き 画 像 を 呼 び 出 して マウスのカーソルを 画 像 に 合 わせてみてください 情 報 タブに R: G: B: にそれぞれ 数 値 が 書 かれています ね ここでは R:31 G:64 B:29 です 5 この 数 値 を カラーピッカーにあてはめれば 同 じ 色 が 選 択 できます 21
6 色 を 選 択 できたら 左 側 の ツールパレット から 塗 りつぶし を 選 択 して 背 景 を 塗 りつぶします 7 次 に ここに 文 字 を 重 ねます 左 側 の ツールパレット から 横 書 き 文 字 ツール を 選 択 して 適 当 にマウスで 範 囲 をドラッグします この 時 自 動 的 にレイヤーが 追 加 されます 追 加 されたレイヤー 22
あとで 微 調 整 しますので 大 きさは 適 当 でいいです ここに Main menu という 文 字 を 書 き 入 れるために まず 文 字 の 設 定 をします 文 字 パレットを 選 択 し 書 体 を HG 丸 ゴシック M-PRO へ 大 きさを 16pt へ 変 更 します さらに プロっぽく 仕 上 げるために 太 字 と 下 線 そして シャープ を 付 け 加 えます 文 字 パレット 書 体 大 きさ 太 字 下 線 シャープ 23
8 さらに 文 字 色 のカラーは 反 転 色 にします ここでは 白 色 でもよいので すが テキストと 区 別 をつけるために 薄 い 黄 色 にします カラーピ ッカーと 同 じ 要 領 です 色 は 適 当 でよいです カラー 9 色 まで 設 定 したら Main menu と 書 き 込 みましょう 24
このとき 必 ずレイヤーパレットで 文 字 のレイヤー を 選 択 し ツール パレットで 横 書 き 文 字 ツール をしてから 記 入 してください 10 文 字 の 位 置 がいまいちでしたら ツールパレットの 移 動 ツール を 選 択 し 微 調 整 します このとき 同 じく 文 字 のレイヤー を 選 択 して いることに 注 意 してください また パソコンの 矢 印 キー を 使 うと 微 妙 な 調 整 ができます 移 動 ツール 25
位 置 が 決 まったら できあがり いつものように 名 前 を 付 けて 保 存 か ら GIF 形 式 を 選 択 して 名 前 を 付 けて 保 存 します 他 にもロゴ 文 字 をメニューに 入 れる 場 合 は Photoshop 形 式 でも 保 存 しておけば main menu のところを 別 の 文 字 に 入 れ 替 えるだけで 簡 単 に 作 成 できます 一 度 GIF で 保 存 してしまい Photoshop 形 式 で 保 存 し 忘 れると 入 れ 替 え 複 製 はできなくなりますので 注 意 しましょう 26
11 最 後 に Golive で 作 成 した Main menu の ロゴ 文 字 を 呼 び 出 して 左 側 メニューのテーブルに 呼 び 出 せば 完 了 です プレビューで 見 てみましょう だいぶプロっぽくなりましたね あとは 同 じ 要 領 で 白 色 テキストとロゴ 文 字 を 組 み 合 わせれば OKです 27
5.テキストリンクのルールを CSS で 特 別 に 定 義 する まず 左 メニューだけテキストを 記 述 してください リンクはまだ 貼 らずにい てください まだ 右 側 スペースのコンテンツ 部 分 には 記 述 しません リンクを 貼 っていない 状 態 で CSSの 設 定 をします まず CSSエディ タを 開 く をクリックします 1 こんな 画 面 が 出 てきましたね 28
2 ここからはちょっとややこしいのですが 指 示 通 りにやってみてくださ い まず CSSエディタ の 左 上 四 角 マークを 押 してください 1 メニューの 中 の 新 規 スタイル から a:link を 選 択 します 29
4 こんな 画 面 が 出 てきましたね CSS エディタに a:link が 追 加 され 右 側 の 窓 が CSS 設 定 の 画 面 に 変 わっています 5 A を 選 択 して カラー を 白 にします 30
6 さらに 装 飾 を 装 飾 なし にします 7 次 は a:visited の 設 定 です この 設 定 することにより 訪 問 後 でも 文 字 が 紫 にならず 白 のまま になります 先 ほどと 同 じ 要 領 で 新 規 ス タイル から a:visited を 選 択 します 31
8 先 ほどと 同 じように カラーは 白 にします そして 装 飾 もなしにしま す 9 最 後 に a:hover の 設 定 です この 設 定 することにより テキストに カーソルを 合 わせると 下 線 が 表 示 される ようになります 先 ほどと 同 じ 要 領 で 新 規 スタイル から a:hover を 選 択 します 32
10 先 ほどと 同 じように カラーは 白 にします そして 装 飾 は テキスト 装 飾 ( 下 線 ) にします これでCSS 設 定 は 終 わりです 右 上 の ボタンを 押 して 閉 じてく ださい この 後 各 メニューにリンクを 張 ってください 張 り 終 わったら プレビューでどのように 表 示 されるか 確 認 しましょう 33
11 次 に 右 側 のコンテンツ 部 分 の 記 述 をします このとき コピー&ペー ストはしないで 新 規 にテキストを 書 き 入 れてください さて ここで 違 った 問 題 が 発 生 します CSSで 自 分 のルールを 作 成 して 無 理 やりデザインしたリンク の 設 定 をしてしまいましたから メニュー 以 外 ページ 内 のリンク 表 示 が 出 なくなってしまいます(CSS はひとつの HTML ファイル 全 体 に 影 響 するため) 例 : たとえば 子 犬 お 探 しサービスへ 登 録 を! というテキストを 記 述 し リン クを 張 ったとします 当 然 リンクを 設 定 しても 青 文 字 にも 下 線 に もならずに CSS のルールどおり 白 で 表 示 されてしまいます これでは 誰 もクリックしてもらえません ( 白 い 背 景 に 白 いリンク 文 字 だから 見 えないのです) 34
ためしにコンテンツのテキストに リンクを 貼 ってみてください 白 文 字 に なってしまいますね そこで メニュー 以 外 のリンクテキスト を 手 動 で 青 文 字 & 下 線 のス タイルにします 12 文 字 列 を 選 択 した 状 態 で 文 字 色 を 青 にします 35
13 白 かったリンク 文 字 が 青 文 字 になりましたね 14 さらにスタイルを アンダーライン にします 36
これで 手 動 の 青 文 字 & 下 線 のリンク 表 示 が 完 成 です これを すべてのリンクに 設 定 していくわけです かなり 手 間 がかかりますが このような 作 業 をするのは TOP ページだけで す リンクは 青 文 字 & 下 線 リンク 済 みは 紫 & 下 線 というのはネット の 常 識 で これ 以 外 に 設 定 は 基 本 的 にすべきではありません ただし 商 用 ホームページでは どうしてもトップページでインパクトを 与 える お 化 粧 がどうしても 必 要 ですから やむを 得 ずこのような 手 をつか うわけです 白 抜 きCSS 設 定 をしなくてもいい 雛 型 もあるので(サポートサイト 内 ) うまくいか ない 人 はこちらを 利 用 してください 以 上 で 応 用 編 の 説 明 は 終 わりです 慣 れれば 簡 単 ですので ぜひ 実 践 して みてください! 37
終 わりに 本 マニュアルの 内 容 は 以 上 です たったこれだけの 知 識 ですが 間 違 いなくホームページを 自 分 の 思 うとお りに プロっぽく 作 成 することが 可 能 になるはずです 実 践 編 のネクストステップである フォームメール の 作 成 などのCGIプ ログラム Yahooへの 登 録 掲 載 キーワード 広 告 の 出 稿 方 法 SEO 対 策 などのマーケティング 情 報 は 隋 時 メールマガジンやニュースレター でお 知 らせしていきます ぜひ 多 くの 知 識 を 得 るという 投 資 をすることで あなたの 脳 に 大 きなレバレ ッジをかけてください ネットビジネスで 活 躍 できる 充 実 感 自 信 と 誇 りが 得 られるはずです(きっ と 多 くのキャッシュも) 信 じるのはあなたが 持 つ 能 力 です 足 りないのは 情 報 だけ 私 はその 情 報 を 皆 さんに 提 供 しているにすぎません 巨 人 の 大 ベテランピッチャー 工 藤 公 康 選 手 は あなたは40 歳 以 上 にもな りながら なぜいまだ 一 線 級 のエースとして 活 躍 できるのか? という 質 問 に 躊 躇 することなく こう 答 えました... 多 くの 人 は 自 分 で 自 分 の 限 界 を 勝 手 に 決 め込 んでいる 自 分 の 能 力 に 限 界 はないと 信 じれば どこまでもやれるはず きっとインターネットビジネスも 同 じでしょう メールマガジンでまたお 会 いいたしましょう! 滝 井 秀 典 38