Taro-Jimdoで作るオリジナルデザ

Transcription

1 アートシステムコンサルティング 福 田 浩

2 1 始 めに Jimdo は 誰 にでも 軽 に しかも 無 料 で 分 のホームページを 作 ることの 出 来 る 魅 的 なツールです これだけで 十 分 な 機 能 を 持 ったホームページを 実 現 することが 出 来 ます 実 際 に Jimdo で 作 られたサイトをご 覧 ください 通 常 この 種 のサービスで これだけのオリジナリティのあるホームページを 作 ることのできるものはなかなかありません Jimdo には すぐに 使 えるデザインが 幾 つも 用 意 されています 有 料 版 を 使 うことで さらに 多 くのデザインから 選 ぶことも 出 来 ます ヘッダー 等 を 変 更 することで イメージはずいぶん 変 わります 私 は 通 常 のホームページであれば これで 十 分 事 足 りると 思 っています しかし やはりオリジナルなホームページを 作 りたいという 要 求 があることも 確 かです Jimdo の 魅 の つに 独 自 レイアウト を 使 うことで 非 常 に 柔 軟 なデザイン を 実 現 できることがあります この 機 能 を 使 うことで プロでも 分 の 能 を 発 揮 できる お 仕 着 せでないホー ムページを 実 現 できます 本 稿 では たまにしかホームページをデザインすることのない デザインが 苦 手 な 普 通 の 人 が Jimdo でオリジナルなデザインを 楽 しむことができることを 目 標 にしています CSS や HTML についての 最 限 の 知 識 は 必 要 ですが あまり 肩 肘 を 張 らずに 分 か らないところがあればネットや 書 籍 で 調 べるという 姿 勢 で 十 分 です - 1 -

3 2 Jimdo が 向 いていないサイト Jimdo は とても 便 利 で 簡 単 なツールですが どんなサイトにでも 使 えるというわ けではありません 小 規 模 で 単 純 なサイトを 安 く 作 るのには Jimdo は 最 適 です さまざまなコンテンツを 組 み 合 わせることで とても 簡 単 に 度 な 仕 組 みを 作 るこ とも 出 来 ます 個 人 や 小 規 模 な 事 業 主 にとっては ほとんど 満 足 のいくサイトを 作 ることが 出 来 る はずです ところが メニューの 階 層 が 複 雑 だったり コンテンツの 数 が 増 えてくると Jimdo ではとたんに 難 しくなります 簡 単 な 仕 組 みであるだけに 妥 協 を 強 いられたり 無 理 に 実 現 しようとするとかえ って 作 業 が 増 えることもあります 次 のような 場 合 は wordpress など 他 の 仕 組 みを 検 討 してください 1.2 階 層 以 上 のコンテンツが 複 数 有 る 場 合 Jimdo のナビゲーション(メニュー)は 今 のページと 同 じ 階 層 及 び 子 階 層 しか 出 してきません ですから 他 の 項 の 階 層 を ることは 出 来 ません 結 果 として 複 雑 な 構 成 のサイトではどこにどんなコンテンツがあるのか 渡 す ことが 困 難 になります 特 に ヘッダー 部 にメニューを 配 置 し プルダウンさせると 言 ったことはまず 思 ったように 出 来 ません 2.コンテンツの 階 層 が 深 い 場 合 先 ほどと 同 じ 理 由 で 通 しが 悪 くなりますので 避 けた が 良 いと 思 います また Jimdo では 3 階 層 以 上 の 階 層 を 持 たせることは 出 来 ません もちろん メニューを 自 分 で 作 ったり パンくずを 作 ったりして 少 しでも 分 か り 易 くすることは 出 来 るでしょうが そのための 特 別 な 機 能 はありません Wordpress などの 機 能 が 充 実 した 仕 組 みを 使 う が 良 いでしょう 3.カテゴリごとにデザインを 変 えたい 場 合 テンプレートや CSS ファイルを 複 数 作 ることは 出 来 ません カテゴリごとにデザインを 変 えると 言 ったことは とても 困 難 です できるだけ 手 を 出 さない 方 が Jimdo の 簡 易 性 を かすことになると 思 います 4. 問 い 合 わせを 独 自 のものにしたい 場 合 自 社 サイトを 作 る 場 合 問 い 合 わせには 一 工 夫 したいと 言 ったケースがあります そのような 場 合 Jimdo の 問 い 合 わせの 仕 組 みは そのまま 使 うには 少 し 物 足 り ないです 他 のサービスを 利 して Jimdo に 貼 り 付 けると 言 った 解 決 方 法 はあります - 2 -

4 3 独 自 レイアウト Jimdo への 登 録 や 操 作 については 本 稿 では 省 略 します Jimdo の 登 録 及 びコンテンツ 作 成 の 詳 細 につきましては 私 の 0 円 からでき る! 法 律 事 務 所 ホームページ 構 築 の 引 き をご 覧 ください 法 律 事 務 所 以 外 の にも 応 できる ホームページの 考 え や 画 像 の 作 り デ ザインの 仕 方 を 書 いています もちろん 無 料 でダウンロードできる PDF ファイルも 用 意 しておりますので 是 ご 利 ください では さっそく 独 レイアウトを てみましょう ログインした 後 レイアウト 続 けて 独 自 レイアウト をクリックします HTML CSS 及 び ファイル をクリックしてみましょう それぞれ HTML,CSS ファイル( 画 像 Javascript)をメンテナンスすることが 出 来 ることが 分 かります 保 存 ボタンをクリックして 独 自 レイアウトを 適 用 しておきましょう - 3 -

5 さらに ヘルプ をクリックすると 簡 単 な 説 明 が 出 てきます スタート ビデオ 様 々なテンプレート CSS ファイル と 順 に 目 を 通 してください これだけで 基 本 的 な 情 報 は 概 ね 得 られます - 4 -

6 4 最 初 の 設 定 を 分 析 する Jimdo は まず 最 初 に 設 定 されている 内 容 があって それを 修 正 変 更 すること でいろいろなことが 実 現 されていくという 形 を 取 ります 独 自 レイアウトでも その 考 え 方 は 踏 襲 されています 4.1 HTML では 最 初 に 設 定 されている 内 容 を 確 認 してみましょう 独 自 レイアウト HTML で 設 定 されている HTML を てみます <div id="container"> <div id="header"> <img src="header.jpg" alt="" /> </div> <div id="navigation"> <var>navigation[1 2 3]</var> <div id="sidebar"> <var>sidebar</var> </div> </div> <div id="content"> </div> <var>content</var> <div id="footer"> <div class="gutter"> <var>footer</var> </div> </div> </div> これを 実 際 のホームページと べてみます - 5 -

7 header navigation sidebar content footer container このように 非 常 にシンプルな 枠 組 みで 出 来 ています <var>タグ 以 外 は 普 通 の HTML です HTML を 書 き 換 えたり 書 き 加 えることで 配 置 を 変 更 したり ヘッダーやフッターを 夫 すると ったことが 出 来 ます もちろん id 名 も CSS に 合 わせて 自 由 に 設 定 できます 画 像 ファイルの 位 置 は 通 常 は 画 像 をどこかのディレクトリに 纏 めて 管 理 すると ころですが Jimdo ではそういう 考 え 方 はありません - 6 -

8 4.2 テンプレート HTML の 中 で <var>タグに 囲 まれた 部 分 があります これは テンプレートと 呼 ばれる 部 分 で ここにコンテンツが 入 ります CSS を る 前 に テンプレートを ておきましょう 独 自 レイアウトのヘルプから 様 々なテンプレート を てください ここに 各 テンプレートの 詳 細 が 説 明 されています 以 下 ヘルプから 転 載 ( 一 部 修 正 )します <var>content</var> メインコンテンツの 部 分 です <var>sidebar</var> サイドバー 部 分 です このサイドバーはすべてのサブページにも 配 置 されます この 部 分 には Jimdo-box(Jimdo ロゴとドロップダウンメニュー 付 )が 挿 入 されま す <var>navigation[1 2 3]</var> ナビゲーション 部 分 の 挿 入 です この 部 分 を 使 って 新 しいページを 作 成 消 去 メ ニューの 名 前 の 変 更 などを います <ul id="mainnav1"> <li><a href="/">page 1</a></li> <li><a href="/page-2/">page 2</a></li> <li><a href="/page-3/" class="current">page 3</a></li> <li> <ul id="mainnav2"> <li><a href="/page-3/subpage-1/">subpage 1</a></li> <li><a href="/page-3/subpage-2/">subpage 2</a></li> </ul> </li> <li><a href="/page-4/">page 4</a></li> <li><a href="/page-5/">page 5</a></li> </ul> <var>footer</var> Jimdo のフッター 部 分 です 例 えばログインへのリンクなどが 表 されます 4.3 CSS では CSS の も てみましょう それほど 難 しい 項 目 や 属 性 は 使 っていませんので CSS の 基 本 的 な 知 識 があれば スラッと 読 めると 思 います - 7 -

9 /* Typo 文 字 の 設 定 */ a:link, a:visited text-decoration: underline; color:#ec4413; a:active text-decoration: underline; a:hover text-decoration:none; h1 font:bold 18px/140% "Trebuchet MS", Verdana, sans-serif; h2 font:bold 14px/140% "Trebuchet MS", Verdana, sans-serif; p font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif; /* Layout レイアウトの 設 定 */ body background: # url(bg.gif) no-repeat top left; /* 背 景 色 画 像 */ padding:35px 0 0 0; margin:0; font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif; #container /* コンテンツ 全 体 */ margin:0 auto; width:834px; /* ページ 幅 */ background:white; #header /* ヘッダー */ padding:17px; #header h1, #header a padding:0; font-family:"helvetica","lucida Sans Unicode",Tahoma,Verdana, Arial, Helvetica, sans-serif; font-size:30px; font-weight:normal; text-decoration:none; line-height:1.3em; color:#666666; text-align:right; - 8 -

10 #header a:hover text-decoration:none; #navigation /* メニュー */ float:left; width:220px; padding:17px; #sidebar /* サイドバー */ padding-top:10px; #content /* コンテンツ */ float:right; width:530px; padding:17px; #footer /* フッター */ clear:both; margin-top:10px; background:url(footer-bg.gif) repeat-x top; height:65px; #footer.gutter height:30px; padding:35px 15px 0 90px; /* Navigation メニュー */ ul.mainnav1, ul.mainnav2 margin:0; padding: 0; ul.mainnav1 li, ul.mainnav2 li display: inline; - 9 -

11 margin: 0; padding: 0; ul.mainnav1 li a, ul.mainnav2 li a font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; display: block; color:#333; border-bottom:1px solid #CCC; ul.mainnav1 li a padding:4px 4px 4px 4px; /* メニュー 階 層 の 位 置 調 整 */ ul.mainnav2 li a padding:4px 4px 4px 14px; ul.mainnav3 li a padding:4px 4px 4px 24px; ul.mainnav1 a:hover background:#eee; color:black; a.mainnav1 a.current font-weight:bold; /* 現 在 表 示 しているページ */ どうでしょうか だいたい 理 解 できましたでしょうか ここで 気 をつけないといけないことは Jimdo のテンプレートが 生 成 する ID 及 び クラスです つまり Navigation 部 分 については 階 層 ごとの mainnav1 mainnav2 mainnav3 の 3 つの ID と 現 在 ページを 表 す current クラスを 用 意 する 必 要 があります もちろん コンテンツには ウィジェット/ HTML はもちろんには 文 章 な ど HTML を 書 くことが 出 来 るものがあります そこでは もちろんクラスを 使 うことも 出 来 ます 表 にはクラスを 設 定 することができるようになっています そのようなクラスは 自 由 に 設 定 しても 構 いません

12 5 Jimdo の 既 存 デザインを 独 自 レイアウトに 移 す 独 自 レイアウトを 考 える 方 は おそらく 2 つのパターンがあると 思 います 一 つは Jimdo のレイアウトを 使 ってみたのだけれども ちょっと 物 足 りない もう 一 つは 今 までと 同 じ 方 法 で DreamWeaver などでホームページをデザインし それを Jimdo に 移 したい 本 稿 では 最 初 のケース Jimdo にすでにあるレイアウトを 独 自 レイアウトに 移 す ことを 考 えてみます Jimdo に 用 意 されているレイアウトでホームページを 作 ってみて ここに CSS やで きたら JavaScript を 追 加 できないかと 思 いませんか 既 存 のものをアレンジする CSS を 書 き 加 えることが 出 来 れば 出 しや 表 の 体 裁 ナビゲーションもかなり 凝 ったものが 出 来 ます コンテンツとして HTML を 書 けるわけですから クラスさえ 設 定 できれば 例 えば 段 組 のようなことも 出 来 ます 私 は いずれ Jimdo にこのような 機 能 が 追 加 されるだろうと 思 っています 今 はまだ そういうものが 無 いようです まず 取 り 組 んでみましょう 5.1 HTML を 取 り 出 す HTML ソースの 取 りだし 方 は ご 存 じでしょうか IE8 では メニューから 表 示 ソース または マウスで 右 クリックし ソース の 表 示 をクリックします Firefox では メニューから 表 示 ページのソース または マウスで 右 クリックし ページのソースを 表 示 をクリックします では 元 になるレイアウトを 決 めましょう 本 稿 では 右 のレイアウトにしました そしてプレビューにして HTML の 中 から<BODY>タグに 囲 まれている 部 分 を 取 り だしてください 5.2 CSS を 取 り 出 す 次 に CSS を 取 り 出 します 先 ほど 取 り 出 した HTML のヘッダー 部 分 に CSS の 記 述 があります この 中 で layout.css が 今 回 私 たちが 設 定 する CSS です main.css は Jimdo ボックス 等 の 設 定 font.css は 文 字 通 りフォントについての 設

13 定 です フォントの 大 きさや 色 等 については Jimdo メニューの 中 のスタイルで 設 定 することになっています layout.css の 内 容 は 次 のようになっていました /* Jimdo Template 4009 Phonak 2 jm */ /* Layout レイアウト */ body text-align:center; padding:0px 0px!important; div#cc-tp-container width: 850px; margin: 0 auto; padding:0px; text-align: left; margin:0 auto; top:-0px; border:0px solid #FFFFFF; div#cc-tp-emotion width: 850px; margin: 0 auto; div#cc-tp-wrapper width:100%; background: url( right top repeat-y white; border-top: 1px solid #32554B; div#cc-tp-content width: 650px; float: left; div#cc-tp-sidebar width: 200px; float: left;

14 div#cc-tp-footer clear: both; color: white; background: #32554B url( 0 0 repeat-x; /* Fixierte Schrift */ div#cc-tp-footer a color: white; div#cc-tp-footer a:hover color: #8CA36B; /* Innenabstaende パディングの 調 整 */ div#cc-tp-content.gutter padding: 40px; div#cc-tp-sidebar.gutter padding: 10px; div#cc-tp-footer.gutter padding: 10px; /* Navi メニュー */ ul.mainnav1 text-align: left; padding:0; margin:0; ul.mainnav2, ul.mainnav3 text-align:left; margin:0; padding:0; list-style-type:none; ul.mainnav1 li, ul.mainnav2 li, ul.mainnav3 li display:block; margin:0; padding:0; text-decoration:none; border-bottom: 1px solid white; background: #32554B url( 0 0 repeat-x;

15 /* Fix Navi Admin Panel */ ul.mainnav1, ul.mainnav2, ul.mainnav3 overflow:hidden; * html ul.mainnav1, * html ul.mainnav2, * html ul.mainnav3 height:1%; overflow:visible; ul.mainnav1 li a, ul.mainnav1 li a:visited, ul.mainnav2 li a, ul.mainnav2 li a:visited, ul.mainnav3 li a, ul.mainnav3 li a:visited display:block; outline:none; text-decoration:none; color: white; ul.mainnav1 li a, ul.mainnav1 li a:visited padding:8px 10px; ul.mainnav2 li a, ul.mainnav2 li a:visited padding:8px 10px 8px 30px; ul.mainnav3 li a, ul.mainnav3 li a:visited padding:8px 10px 8px 40px; ul.mainnav1 li a:hover, ul.mainnav2 li a:hover, ul.mainnav3 li a:hover color: #7C7F7F; ul.mainnav1 li a.parent, ul.mainnav1 li a.parent:visited, ul.mainnav2 li a.parent, ul.mainnav2 li a.parent:visited, ul.mainnav1 li a.current, ul.mainnav1 li a.current:visited, ul.mainnav2 li a.current, ul.mainnav2 li a.current:visited, ul.mainnav3 li a.current, ul.mainnav3 li a.current:visited font-weight:bold; color:white; background: none #65886D; 5.3 テンプレートを 組 み 込 む 場 所 を 確 認 する では HTML にテンプレートを 組 み 込 む 場 所 をチェックしておきましょう layout.css と HTML を べて HTML にテンプレートを 組 み 込 んでいきます テンプレートは 以 下 のものでしたね <var>content</var>

16 <var>sidebar</var> <var>navigation[1 2 3]</var> <var>footer</var> このレイアウトの HTML は シンプルでとても 分 かり 易 いです また コメントがしっかりしていますね /* Layout */ と 書 かれているところを ると 下 記 のような 対 応 になっていることが 分 かります <var>content</var> div#cc-tp-content <var>sidebar</var> div#cc-tp-sidebar <var>navigation[1 2 3]</var> div#cc-tp-sidebar <var>footer</var> div#cc-tp-footer さらに.gutter( 隙 間 溝 )というクラスでパディングの 調 整 をしていることが 分 かります この ID の 内 側 にテンプレートを 適 用 すれば OK です 5.4 画 像 を 取 りだしておく 独 自 レイアウトを 適 用 すると 今 の 画 像 は 消 えてしまいます もちろん 分 で 画 像 を 意 すれば 良 いのですが ここではデザインを 移 すと う ことですので 今 の 画 像 のまま 再 現 するために 画 像 を 取 りだして 再 設 定 すること にしましょう HTML 及 び CSS に 記 述 されている 画 像 のうち あなたの Jimdo ドメイン( 私 の 場 合 artsystem.jimdo.com)の 下 にある 画 像 の URL から 画 像 をダウンロードしておき ます 5.5 画 像 をアップロードする Jimdo メニューから レイアウト 独 自 レイアウト ファイルを 開 きます ここから 先 ほど 取 りだした 画 像 をアップロードしておきます これらの 画 像 を HTML および CSS を 指 定 するときは ファイル 名 だけを 記 述 して ください であれば bg-nav.png と 記 述 します なお いずれ 修 正 されると 思 いますが ファイルをアップロードしたときに _ が - に 大 文 字 が 小 文 字 に 変 わってしまうバグがあるようです

17 5.6 HTML を 設 定 する では HTML を 設 定 しましょう Jimdo メニューから レイアウト 独 自 レイアウト HTML を 開 きます ここに 取 りだしておいた HTML を 貼 り 付 けてください 先 ほど アップロードした 画 像 の URL をファイル 名 だけに 変 更 します 次 に チェックした 位 置 にテンプレートを 組 み 込 みます 該 当 する 部 分 を 選 択 し それぞれエディター 上 部 の content sidebar navi footer をクリックするとその 部 分 にテンプレートが 入 ります 最 後 に xhtml をクリックすると した 内 容 に 問 題 がないかチェックされます できたら 保 存 してください

18 <div id="cc-tp-container"> <div id="emotion"> <div id="emotion-header" data-action="emoheader" style="background: #eeeeee;width: 850px; height: 170px;"> <img src="emotionheader.jpg" id="emotion-header-img" alt=""/> <strong id="emotion-header-title" style="left: 9%;top: 5%;font:normal 35px/120% 'Courier New', Courier, monospace;color: #000000;">Artsystem Consulting</strong> </div> </div> <div id="cc-tp-wrapper"> <div id="cc-tp-content"> <div class="gutter"><var>content</var></div> </div> <div id="cc-tp-sidebar" class="altcolor"> <var>navigation[1 2 3]</var> <div class="gutter"><var>sidebar</var></div> </div> </div> <div id="cc-tp-footer"> <div class="gutter"> <var>footer</var> </div> </div> </div> 5.7 CSS を 設 定 する 最 後 に CSS を 設 定 します Jimdo メニューから レイアウト 独 自 レイアウト CSS を 開 きます ここに 取 りだしておいた latout.css を 貼 り 付 けます HTML と 同 様 に 画 像 ファイルの URL をファイル 名 だけに 変 更 してください これで 保 存 すれば レイアウトの 移 は 完 了 です

19 - 18 -

20 6 CSS を 追 加 する CSS を 追 加 修 正 し 既 存 のデザインをカスタマイズする 環 境 が 出 来 ました では 独 自 デザインの CSS を 編 集 していきましょう ここで 一 つ 注 意 していただきたいことがあります 私 たちが 設 定 する 対 象 となる CSS ファイルは layout.css です 私 の Jimdo サイトのソースを ると CSS の 設 定 は 下 記 のようになっています <link href=" rel="stylesheet" type="text/css"/> <link href=" rel="stylesheet" type="text/css"/> <link href=" rel="stylesheet" type="text/css"/ > <link href=" rel="stylesheet" type="text/css" media="all"/> <link href=" rel="stylesheet" type="text/css" media="print"/> <link href=" rel="stylesheet" type="text/css"/> layout.css の 後 に 幾 つかの CSS ファイルがあることに 気 付 きます 具 体 的 には 下 記 のような 点 に 気 をつけなければなりません font.css Jimdo メニューの スタイル で 設 定 する 文 字 属 性 を 設 定 しています web.css 出 しの padding 等 の 初 期 設 定 を っています この 2 つの CSS がせっかく 設 定 した layout.css の 設 定 を 上 書 きしてしまうことがあ ります そこで Jimdo のサポートに 下 記 の 二 点 を 問 い 合 わせました 1. 既 存 レイアウトに 追 加 する CSS を 設 定 できる 仕 組 みを 作 ってくれないか 2.layout.css を CSS の 最 後 に 持 ってきてもらえないか しばらくして Jimdo から 丁 寧 な 回 答 をいただきました 1. 現 在 検 討 している 2. 順 序 を 変 えることは 出 来 ないが 上 書 きされるスタイルについては!important で 対 応 して 欲 しい!Important について 少 し 解 説 します 通 常 スタイルが 重 複 した 場 合 後 から 定 義 したものが 優 先 されます

21 そこで!important ルールを 使 うことでスタイルを 優 先 させることができます 例 えば 後 にある font.css で 設 定 されている 文 字 色 よりも layout.css で 設 定 した 文 字 色 を 優 先 したい 場 合 layout.css で 下 記 のように 設 定 します h1 color: #ffffff!important; プロパティ: 値 の 後 に 半 スペースで 区 切 り!importan を 配 置 します ただし プロパティ: 値 ごとに 指 定 する 必 要 があります 6.1 背 景 を 設 定 する 背 景 を 入 れてみましょう ページの 中 にある 色 を 使 うと 無 難 にまとまります FireFox の Rainbow というアドインを 使 うと ページ 上 の 色 を 簡 単 に 抽 出 すること が 出 来 ます ここでは 下 記 のように 入 れてみます Jimdo メニューのレイアウトから 独 自 レイアウト CSS を 選 んでください CSS を するエディタが 出 てきますので 直 接 書 き 込 みます body background-color:#7b8407; text-align:center; padding:0px 0px!important; div#cc-tp-container width: 850px; margin: 0 auto; padding:0px; text-align: left; margin:0 auto; top:-0px; border:0px solid #FFFFFF; background-color:#ffffff;

22 これで 背 景 に 色 が 付 きました どうでしょうか 少 しクッキリと 締 まった 感 じがするのではないでしょうか 少 しグラデーションを 付 けてみましょう グラデーションを 付 けることで 閲 覧 者 の 視 線 を 自 然 と 動 かすことが 出 来 ます ただ 多 用 しすぎると 閲 覧 者 が 迷 ってしまいます グラデーションは 付 けすぎないように 複 数 付 ける 場 合 は 方 向 を 揃 えるように 注 意 してください

23 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ 上部を濃くし 徐々に背景色に戻る 右のようなグラデーション 画像を用意しました 実際には 画像を軽くするために横幅を 1px にします この画像を Jimdo の独自レイアウト ファイルからアップロー ドします ファイル名は小文字で そして _ は - に変わることに注意 してください ここでは ファイル名を body-back.png としました CSS を下記のように修正します body background-color:#7b8407; background-image: url(body-back.png); background-repeat: repeat-x; background-position: right top; text-align:center; padding:0px 0px!important; このとき ファイル名を "" で囲まないようにしてください ファイルを認識しなくなるようです これでグラデーションが掛かりました

24 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ 6.2 メニューを設定する メニューが少し重たい印象なので もう少し軽い感じのメニューにしましょう 現在 メニューはこんな感じです CSS は下記のようになっています 少しコメントを書き加えてみました /* Navi */ /* リストのデフォルトスタイルのクリア */ ul.mainnav1 text-align: left; padding:0; margin:0; ul.mainnav2, ul.mainnav3 text-align:left; margin:0; padding:0; list-style-type:none; /* メニューの基本の形 */ ul.mainnav1 li, ul.mainnav2 li, ul.mainnav3 li display:block; margin:0;

25 padding:0; text-decoration:none; border-bottom: 1px solid white; background: #32554B url(bg-nav.png) 0 0 repeat-x; /* Fix Navi Admin Panel */ ul.mainnav1, ul.mainnav2, ul.mainnav3 overflow:hidden; * html ul.mainnav1, * html ul.mainnav2, * html ul.mainnav3 height:1%; overflow:visible; ul.mainnav1 li a, ul.mainnav1 li a:visited, ul.mainnav2 li a, ul.mainnav2 li a:visited, ul.mainnav3 li a, ul.mainnav3 li a:visited display:block; outline:none; text-decoration:none; color: white; /* 文 字 の 配 置 */ ul.mainnav1 li a, ul.mainnav1 li a:visited padding:8px 10px; ul.mainnav2 li a, ul.mainnav2 li a:visited padding:8px 10px 8px 30px; ul.mainnav3 li a, ul.mainnav3 li a:visited padding:8px 10px 8px 40px; /* カーソルを 載 せたときの 表 示 */ ul.mainnav1 li a:hover, ul.mainnav2 li a:hover, ul.mainnav3 li a:hover color: #7C7F7F; /* 現 在 表 示 しているページとその 親 メニュー */ ul.mainnav1 li a.parent, ul.mainnav1 li a.parent:visited, ul.mainnav2 li a.parent, ul.mainnav2 li a.parent:visited, ul.mainnav1 li a.current, ul.mainnav1 li a.current:visited, ul.mainnav2 li a.current, ul.mainnav2 li a.current:visited, ul.mainnav3 li a.current, ul.mainnav3 li a.current:visited font-weight:bold; color:white; background: none #65886D;

26 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ では 順に手を加えていきましょう まず CSS で定義されているメニューの状態を整理しましょう リンクの状態は CSS の疑似クラスとして幾つか用意されています 今回は 既存の CSS を意識して 下記の状態をサポートしてみましょう 1 通常 2 マウスを載せたとき :hover 疑似クラス 3 現在のページ.current Jimdo が設定するクラス 背景画像 現在の CSS では 通常の状態では下記のような設定が われています /* メニューの基本の形 */ ul.mainnav1 li, ul.mainnav2 li, ul.mainnav3 li display:block; margin:0; padding:0; text-decoration:none; border-bottom: 1px solid white; background: #32554B url(bg-nav.png) 0 0 repeat-x; メニューについては CSS や JavaScript を使ったさまざまな方法がたくさん紹介さ れています css メニュー で検索すれば たくさんの情報が得られるでしょう また メニュー素材と CSS を生成するジェネレーターもあります 今回は あまり凝ったことをせずに CSS だけで実現する一般的な方法をご紹介し ます サイドバーの幅は 200px でした div#cc-tp-sidebar width: 200px; float: left; 今回は 3 つの状態を作ります 背景画像を使って 3 つの状態を作りたいのですが 画像を れ替える時に若 もた ついた感じがすることがあります

27 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ そこで 1 つの画像に 3 つの状態を作り 位置をずらすことで 3 つの画像があるよ うに せます ここでは,下記のような画像 bg-nav.jpg を作りました 200px ごとに 1 通常 2 現在のページ 3 マウスを載せた状態 を表現します これを jimdo メニューから レイアウト 独自レイアウト ファイルを選択し アップロードします 次に CSS を修正しましょう 修正するポイントは 以下の通りです 1 先頭のマーカーの分だけ 左に余白を作る 2 字 を にする 3 背景画像を設定し 状態によって位置をずらす では 実際に修正するポイントを説明します 通常の状態は下記の CSS で表現できます 背景画像を 赤字のような形で設定します ul.mainnav1 li, ul.mainnav2 li, ul.mainnav3 li display:block; margin:0; padding:0; text-decoration:none; border-bottom: 1px solid white; color: black; background: #FFFFFF url(bg-nav.jpg) 0 center no-repeat; カーソルが載っている状態は 下記のように設定します このとき 背景画像を-400px ずらしています ul.mainnav1 li a:hover, ul.mainnav2 li a:hover, ul.mainnav3 li a:hover font-weight:bold;

28 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ background: #FFFFFF url(bg-nav.jpg) -400px center no-repeat; 現在 表示されているページ 及びその親ページは 下記のように設定します このとき 背景画像を-200px ずらしています ul.mainnav1 li a.parent, ul.mainnav1 li a.parent:visited, ul.mainnav2 li a.parent, ul.mainnav2 li a.parent:visited, ul.mainnav1 li a.current, ul.mainnav1 li a.current:visited, ul.mainnav2 li a.current, ul.mainnav2 li a.current:visited, ul.mainnav3 li a.current, ul.mainnav3 li a.current:visited font-weight:bold; background: #FFFFFF url(bg-nav.jpg) -200px center no-repeat; 最後に 先頭のマーカー分の字下げを います ul.mainnav1 li a, ul.mainnav1 li a:visited padding:8px 10px 8px 20px; ul.mainnav2 li a, ul.mainnav2 li a:visited padding:8px 10px 8px 30px; ul.mainnav3 li a, ul.mainnav3 li a:visited padding:8px 10px 8px 40px; このようなメニューになりました 背景画像を入れ替えるだけで,イメージの違ったメニューを実現できます

29 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ 6.3 見出しを設定する 出しをデザインしてみましょう Jimdo では これは Jimdo メニューからスタイルを選び ここで設定するようにな っています スタイルで設定した内容は layout.css の後に設定されている font.css に反映され ます Jimdo では 出しは h1 h2 が用意されていますが もちろん HTML を記述する ことで h3 以降も使うことが出来ます とりあえず ここでは h1 と h2 をデザインしてみましょう まず font.css の 字属性を設定している部分を てみましょう 私の場合は 下記のようになっていました body, p, table, td font:normal 13px/150% "Times New Roman", Times, serif; color:#000000; h1 font:bold 20px/140% "Times New Roman", Times, serif; color:#333333; h2 font:bold 16px/140% "Times New Roman", Times, serif; color:#090079; さらに font.css の後に設定されている web.css には 次の記述があります body,p,h1,h2,h3,h4,h5,h6margin:0;padding:0 ここで設定されているフォントに関する項目 及び margin padding に関する項目 については 上書きされてしまいます そこで これらの項目について設定したい場合は!Important を使います ここでは 背景画像を敷くパターンとボーダーで飾るパターンを試してみます 見出し 1 の設定

30 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ 少し派手になりますが 背景画像を敷いてみましょう 背景画像には 下図(h1.gif)を用意しました 下記の CSS を Jimdo メニューから独自レイアウト CSS を開き 追加しました div#cc-tp-content h1 background: url(h1.gif) left center no-repeat black; color: white!important; font-weight: bold!important; padding: 5px!Important; padding-left: 15px!Important; border: solid 1px black; ここで color font-weight padding の設定には!Important を使って属性が上書きさ れないようにしていることに注意してください 下図のようなデザインが実現できました 見出し 2 の設定 出し 2 は 画像を使わないで設定してみましょう 出し 1 と同様に CSS にこのようなスタイルを追加をしてみました div#cc-tp-content h2 color: black!important; font-weight: bold!important; padding: 5px!Important; padding-left: 0px!Important; margin-top:10px; margin-bottom:10px; border-bottom: solid 1px black;

31 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ div#cc-tp-content h2:before content:" "; margin-right:3px; このようなスッキリしたデザインになりました 6.4 表を飾る 表を飾ることは CSS の重要な役割です Jimdo で CSS を活 して表を作るためには 独 レイアウトが便利です では テーブルに CSS を設定してみましょう テーブルの CSS の例は インターネットで検索するとたくさん出てきます 最初は なかなか良いデザインが思い浮かばないものです サンプルを参考に調整 すると良いと思います ここでは table01 というクラス名で下記の CSS を用意しました table.table01 margin-top: 0.2em; margin-bottom: 1em; border-collapse: separate; border-spacing: 2px;

32 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ table.table01 caption margin-top: 1em; text-align: right; table.table01 th, table.table01 td padding: 4px 6px; table.table01 th border-bottom: solid 1px #B2B2B2; border-right: solid 1px #B2B2B2; background: #FFD9F3; text-align: center; white-space: nowrap; table.table01 td border-bottom: solid 1px #B2B2B2; border-right: solid 1px #B2B2B2; background: #F3F3F3; text-align: left; white-space: nowrap; いつものように Jimdo メニューから独自レイアウト CSS を選び CSS の末尾に 追加してください 次にテーブルを作ってみます Jimdo で作るコンテンツ 表 と書か れている項目があります ここをクリックすると 表を編集する ことができるようになります いつものようにサンプルが出てきます ので 書き換えていくという方法は Jimdo の他の機能と同じです 枠の体裁や色など さまざまな設定が 出来るのですが ここではあらかじめ 用意されているスタイルを使います スタイルを使うことで サイト全体で 統一されたイメージを作ることが出来ます

33 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ クリックすると こういう表示が出てきました HTML をクリックすると 下図のようにポップアップが開きます これが Jimdo の生成する HTML です もちろんここで直接 HTML を書き込むこと が出来ます では この表にクラス table01 を設定します もちろん この HTML エディターで<table>タグに class=table01 と書き加えても良

34 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ いのですが ここでは 表の挿入 編集 を使います 表をクリックして選択し 表の挿入/編集 をクリックします 下図のようなポップアップが開きます ここで ボタンが 更新 となっていることを確認してください 挿 になっている場合には 新しい表が追加されます 度キャンセルして 対象となる表をクリックしてください クラスのところがドロップダウンメニューになっています (value)を選ぶと できるようになります ここで設定するクラス名 table01 と し 更新ボタンをクリックします

35 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ 6.5 段組をする Jimdo の簡単さ メンテナンスのしやすさを考えると あまり凝ったことはするべ きではないように思います とは っても 特にトップページのように 幾つかの項 を 度に せたい場合な どは 段組をしたくなることもあるでしょう そこで CSS を使って段組をしてみましょう ここまで来ると ほとんど HTML を書くようなものですが 覚えておくと Jimdo ら しからぬ普通のサイトが出来ます 段組の仕方はたくさんありますが ここでは 下記の CSS を用意しました 分かり易いように ボックスごとに を付けています /* Columns */ div.column border: solid 1px; background-color: gray; div.column:after content: "."; display: block; height: 0px; clear: both; visibility: hidden; div.column div.leftbox float: left; width:230px; padding: 10px; margin: 10px; background-color: yellow; div.column div.rightbox float: right; width:230px; padding: 10px; margin: 10px; background-color: green;

36 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ いつものように Jimdo メニューからレイアウト 独自レイアウト CSS を選択し CSS を追加してください では このスタイルを使ってみましょう まず Jimdo で 文章 を追加してください この CSS では 左右に 2 段に分けます 左右に分ける 章を続けて してくださ い 次に エディターの HTML をクリックし HTML エディターを表示します ここから HTML を直接書き込むことが出来ます クラス column で全体を囲み さらに leftbox rightbox で左右のコンテンツを囲み ます <div class="column"> <div class="leftbox"> <p>左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左< /p> </div> <div class="rightbox"> <p>右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右

37 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ 右右右右右右右右右右右右右右</p> </div> </div> 更新ボタンをクリックすると スタイルが反映されます ここからは HTML を使わなくてもコンテンツを修正することが出来ます 保存をクリックすると 綺麗に段組が出来ました

38 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ これでは 少し使い物になりませんので 背景を付けてみましょう 全体を囲んでいるクラス column に背景を付けることで 左右のコンテンツの高さ が違っていても 自然な背景にすることができます 背景画像として 下図を用意しました column1.jpg column2.jpg これらのファイルを Jimdo メニューから 独自レイアウト ファイルでアップロ ードします そして 新しいクラス column1 を作ります div.column1 border: solid 1px; background: url(column1.jpg) left top no-repeat; div.column1:after

39 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ content: ""; display: block; height: 10px; clear: both; background: url(column2.jpg) left bottom no-repeat; div.column1 div.leftbox float: left; width:230px; padding: 10px; margin: 10px; div.column1 div.rightbox float: right; width:230px; padding: 10px; margin: 10px; おなじコンテンツに column1 を適用してみましょう 下図のようになりました

40 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ 最後に Jimdo の独自レイアウトを使うことで CSS を有効に活 できることがご理解いた だけたかと思います もちろん CSS にはもっと大きな可能性があります CSS3 に対応するブラウザも増え これまでは画像を使わなければいけなかったよ うなものでも CSS で実現できるようになってきました 本来 Jimdo は簡単なサイトを簡単に作るための優れた仕組みだと思います ただやはり デザインがもう少し と思われる方も多いのではないでしょうか 私も その一人です 特に 出しの素っ気なさには すこし物 りないものを感じていました フリーのブログシステムや CMS などに良くあるように 独自レイアウトの HTML CSS 及び画像のセットをフリーで提供する人やサイトが出てくるのではないかと思 います そういう環境が出来れば Jimdo の可能性ももう少し広がるのではないでしょうか 私も 微 ながら Jimdo をもっと気軽に楽しめるような情報発信をしていきたい と思っています About Me アートシステムコンサルティング 福田 浩 神 在住 元システムエンジニアとして 幅広いシステム開発に従事 10 年ほど前にベンチャーのインキュベーションに関わったことから 多くの起業 家や中小企業から商品販売 ビジネスプランなどの相談を受けるようになる 現在は インターネット活 を中 とした中 企業のサポートを う しゃべるだけではなく ちゃんと形にするのが信条で 福田さんに出会った人は 夢が叶っている と言われたことが誇り 座右の銘は サラリーマン時代の会社の社訓 経営は先知

41 Jimdo で 作る オ リ ジ ナ ル デ ザ イ ン ホー ム ペ ー ジ