昨年夏に刷新されたJimdoのレイアウトは、そのまま使ってもきれいなサイトを作ることができますが、オリジナリティのあるデザインにしたい、そういうニーズも少なからずやあるかと思います。
先日、私が管理しているECサイトのキャンペーンサイトを急遽作ることになったのですが、更新性などを考えて誰でも扱えるようにしたほうが、私が不在の時でもスタッフが更新や新規ページの作成を行えると思い、Jimdoを選択しました。
ただし、ブランドイメージを損ないたくなく、現在運用中のECサイトのデザインを取り込めないモノか考えました。そこで考えたのが、Jimdoのレイアウトのスタイルを上書きする形をとって、運用中のECサイトのデザインに近づけることができないか？ということでした。
そして、実際にできあがったサイトがこちらです。
このデザインの元になったレイアウトは、Maragaというレイアウト。
Maragaは、シングルカラムのレイアウトで、ヘッダーにロゴエリアとナビゲーションバーがあるタイプのもの。次の画像は、Jimdoで新規サイトを登録し、レイアウトをMaragaに変更したもの。ヘッダーとコンテンツ、フッターの各エリアがどこかわかりますか？
このレイアウト Maragaは、ヘッダー、コンテンツエリア、フッターとエリアがわかりやすく分かれているので、スタイルの調整でいろいろとカスタマイズがしやすいレイアウトだと踏みました。
今回のカスタマイズのポイントは、ヘッダー部分を現行ECサイトのヘッダーと同じものにするのと、コンテンツエリアの角丸、フッター部分をECサイトに合わせること。そして最も大事なのが、Jimdoの管理画面で行える「スタイル」変更は、Jimdoに任せると言う点。
Jimdoは、独自レイアウト機能を使うことで、デザイナーがデザインしたオリジナルのデザインでの構築が可能になりますが、そのトレードオフとして、管理画面でのスタイル変更に制限がかかります。デザインを完全にコントロールしたいということであれば、スタイル変更をできなくするというのは1つの選択肢ではあるものの、スタイル変更に任せてしまえるところは任せるというスタンスも1つかなと思います。例えば、フォントのカラーやレイアウトエリアの背景色など。
そんなことで、今回は独自レイアウトではなく、Maragaのカスタマイズということを行ったわけですが、これを実現させるのに最初に行うのが、変更したいエリアの要素の確認と定義されているスタイルの確認です。それを行うのに活用したのがFirebug。実際にカスタマイズする際に、どの部分にどのスタイルがあたっているのかを知る必要があります、ヘッダーエリア、コンテンツエリア、フッターエリアの要素をFirebugで拾ってスタイルをいじっていきます。
そうしていじったスタイルの例が、コンテンツエリアの角丸部分のスタイル。こんな感じになります。
.wrap {border-radius: 5px;}たったこれだけ。
コンテンツエリアは、wrapというclassが定義されているdiv要素で、この部分は背景色の設定がJimdo側でできます。なので、background-colorの指定はせず、角丸だけを指定しています。
Firebugで調整したいエリアの要素を拾ってそのスタイルを上書き、追加していくだけの簡単作業。Web制作に精通している人、特にCSSを十分理解している人であれば、既存のレイアウトの見た目を、別の見た目に変えることは、そう難しくないのではないのかなぁというのが、今回カスタマイズしてみた感想。
かくいう私は、Maragaのレイアウトをキャンペーンサイト用の見た目に変えるのに、要素を拾ったりすることを含めて2〜3時間で行いました。
肝心の上書きスタイルは、設定画面の「ヘッダー部分を編集」から書き加えます。サイト全体で共通のイメージを設けるのであれば、ホームページ全体タブを選んで、ここに直接スタイルを書いていきます。Style要素はオススメできないのですが、構築中は、細かな調整も必要になってくるので、一旦Style要素で書いていくのが最も効率がよいです。
スタイル調整が完了したら、それを外部CSS化して、link要素で読み込ませるといいかも。今回はECサイト側にCSSファイルがあるので、そこに書き加えて、そこのURLを指定しました。
とここまで書くととても順調にできたと思われがちですが、ちょっとだけ苦労した点を。Maragaなのですが、コンテンツエリアとヘッダーの間の距離が離れすぎています。そのままのデザインを使う分には全く問題ないのですが、ヘッダー周りをカスタマイズしていくと、図のようにかなり距離が出てしまいます。
ここを詰める必要があったのですが、どこをいじってもうまく詰まってくれません。サイト公開まで時間も無く、こまかな調査ができないまま進めていたこともあって、今回は無理矢理コンテンツ側を上に持ってくることでヘッダーの部分との距離を詰めました。
#container {margin-top: -100px;}角丸にしたコンテンツエリアwrapの親要素はdiv#containerで、ヘッダーバーを形成するdiv.topbarに続く要素。.topbarのエリアは、Jimdoのスタイル設定で背景色の指定ができるところなのですが、ここの背景を透明にして.topbarで背景画像をECサイトから引っ張ってきました。その関係で、どうしてもコンテンツエリアとの距離を詰めたかったので、無理矢理マイナスマージンでコンテンツエリアを持ち上げた格好になりました。
企画から公開まで1週間も無い中で作成したこともあって、Maragaのスタイルやページ構成要素を細かく調査する時間が無かったため、無理矢理レイアウトを整えた部分もありますが、Jimdoの使い勝手を損なうこと無く、既存のレイアウトをカスタマイズすることは十分可能だなぁと言うのがよくわかりました。
こちらは、先に紹介したMaragaレイアウトに今回のカスタマイズで使ったCSSを書き加えただけのもの。
コンテンツエリアの背景やテキストカラー、ナビゲーションバー内のリンク背景、フッターエリアのテキストカラーなどはJimdoのスタイルで変更しています。また、サイトの背景画像をグレーの小さな画像にしてパターン表示にしています。
もともと、ベースとなったECサイトのデザインがかなりシンプルと言うこともあって、少ないコードで実現できたといっても過言ではないものの、各エリアの骨格を「ヘッダー部分を編集」でレイアウトスタイルを書いて、他の部分の変更はJimdoのスタイルにすることで、スタイルの競合であわあわすることないかもなぁと思います。カスタマイズ系で一番厄介なのがスタイルの競合なんですよね…（笑）
機会があったら、他のレイアウトでもカスタマイズに挑戦してみようと思います。
