JimdoのTOKYOレイアウト、活用していますか？私は、ほぼこれ一択といって良いくらいに気に入っているので、立ち上げるサイトはほとんどTOKYOレイアウトで作っています。
そんなTOKYOレイアウトの特徴のひとつが、ホームのデザインと下階層のデザインが異なっていて、ホームではメインビジュアルが表示され、下の階層はメインビジュアルが無いシンプルなもの。ホームは入口のページでもあるので、メインビジュアルで目を引かせたいけれど、その下の階層はビジュアルまでは必要ないというニーズは結構多くあるかと思います。そんなニーズも加味されたTOKYOレイアウトなので、ほとんどいじる必要がないくらいだったりしますが、下層ページの各カテゴリトップだけはメインビジュアルを入れたいなんて思うことがあるかもしれません。
今回は、そんなニーズを形にするTips。
メインビジュアルは背景画像を指定
TOKYOレイアウトのホームページにあるメインビジュアルのエリア。ここは、背景画像を表示しているエリア。ビジュアルの指定は、背景から行います。
特定のページへCSSを指定するのは「ヘッダー部分の編集」を活用
Jimdoで作っているサイトに、追加でCSSを加えたり、既存のセレクタを上書きして別のプロパティを再定義するには、「基本設定」の「ヘッダー編集」を使います。
「Webサイト全体」タブに書くと、サイト全体で適用され、「サブページもしくはブログ記事」タブ（有料版のみの機能）で特定のページを指定してスタイルを再定義することができます。
HTML上では、<head>〜</head>内に記述されるため、この要素内に内包することができる要素のうち、base、link、meta、style、scriptの各要素を記述することできます。
下層ページにメインビジュアルエリアを表示させる方法は、たった１つのプロパティを上書きするだけ
.jqbga-container{display: block;}このコードを、メインビジュアルを表示させたいページのヘッダーに書き加えて、保存をクリックすることで、特定のページにもメインビジュアルのエリアが表示されるようになります。具体的には、「.jqbga-container」が適宜されている要素を表示させる「display:block:」ことで可能になります。これにあわせて、ページの背景画像も別途指定することで、カテゴリのイメージに合わせたメインビジュアルを見せることができるようになるというわけです。
ちょっとだけ気にしておくと良いこと
メインビジュアル表示のタイムラグ
下層ページのメインビジュアルのエリアですが、元々表示をさせないようになっているものを無理矢理表示させていることもあり、そのページを開いたあとに画像が表示されるまでに一瞬タイムラグがあります。
キャッチコピーは全ページ共通
このメインビジュアルのエリアにはキャッチコピーを入れることができますが、この部分は個別に内容を変えることはできません、したがってホームのメインビジュアルの部分にキャッチコピーを入れていると、下層の特定のページでこのおまじないを使ってメインビジュアルのエリアを表示させていると、同様のコピーが表示されてしまいます。
既存のレイアウトを上手く使いつつ過度なカスタマイズはしないようにするのがベスト
Jimdoは、オリジナルレイアウト機能という、自分たちでデザインしたデザインで作ることもできますが、もともとがコーディングの作業をなくしてサイト制作ができるサービスなので、そこに力を注ぐのは時間がもったいないかなと思っていたりします。
現在提供されているレイアウトが、どれも特徴的でかつ汎用性に富んだものでもあるので、基本骨格はレイアウトにまかせつつ、ほんの一部だけをこのようにスタイル変更で調整することで制作時間もほとんど掛からずにサイトを作ることができます。
次回は、Tokyoレイアウトの特徴をうまく活用したマルチリンガルなサイトを作ってみることをご紹介しようと思います。
