JimdoのTOKYOレイアウトがリリースされましたね！待ちに待った方、多いのではないでしょうか？
先日、WordPressで作っていた個人サイト（T-STUDIO.COM）をJimdo Businessに移行したので、早速TOKYOレイアウトにしてみました。この新しいTOKYOレイアウトは、Jimdoエキスパートでもある、服部制作室の服部さんがデザインされました。日本語が美しく見えるようにつくられたレイアウトです。
サイトをTokyoレイアウトへ
このレイアウトのトップページの特徴は、左上がロゴエリアで右上がメインメニューのエリア、これらのエリアの下に横ぶち抜きのカラーバーがあり、そのカラーバーの下がメインビジュアルで、メインビジュアルの上にはキャッチコピーなどが書けるようになっていて、メインビジュアルの下がコンテンツエリアという、見た目のデザインとしては王道のデザインで、日本のサイトでこのパターンで作られたサイトが多いのではないかと思います。
TOKYOレイアウトの詳細については、別途他所にお任せするとして（笑）、早速このTOKYOレイアウトを少しばかりカスタマイズしてみたので、その辺りのお話を。
TOKYOレイアウトの中で、ひときわ目立つデザインは、ナビゲーションの編集で、第二階層以下のページを設定したときに現れる横ぶち抜きのカラーバーが敷かれたサブメニュー。このサブメニューのエリアは第二階層以下が設定されているページにのみ表示されます。TOKYOレイアウトを選ぶとき、プリセットとして3のカラーバーから選べます。
プリセットは基本以外に3種類（Asakusa,Ueno,Nihonbasi）
T-STUDIO.COMでは、ブラック（画像内では真ん中）をベースにサブナビゲーションエリアの背景色をダークレッドにスタイル設定で調整しています。
このカラーバーはサイト内で良い感じの締まりを与えてくれるので、常に表示させ続けたいのですが、第二階層以下が設定されていないページだと表示されません。
例えば、ホームの下にサブメニューを設定しないようなことって結構あると思うので、トップページにはこのバーが表示されないということが起こります。
サブメニューの構成がないとバーは表示されない
もちろん、この状態でも全然OKなのですが、せっかくなら常にカラーバー（サブナビゲーションエリア）を出し続けたいと思うかも知れません。カラーバーを自社のブランドカラーにしたり、ブルー系のバーにして堅実さを表したり、グリーン系のバーにしてナチュラルな雰囲気を醸し出したり、黒のバーにしてシックな雰囲気にしたり、色の組合せで悩むこと無く、ここのバーのカラーで自己主張をして他は極力色を使わないことで、全体の統一感を保つことができます。
ということで、このサブメニューエリアを第二階層以下が設定されていなくても常に出し続ける状態にするテクニックを紹介したいと思います。
.jtpl-subnavigation {min-height: 44px;}このコードをカスタマイズでお馴染みの、「設定」にある「ヘッダー部分を編集」をクリックして図のように書き込みます。
全てのページで出したいので、ここでは「ホームページ全体」に書き加えました。特定のページでランディングページのような使い方をする際にはこのバーは不要ということであれば、「個別ページ」で下の階層が無いページにのみ設定をしたほうがいろいろとラクです。
だたし、このテクニックを実現する上で条件と気にしておく点があります。この条件をクリアした場合にのみ、現時点では有効なテクニックだと思ってもらえればと。
条件：サブメニューの大きさは変更せずそのまま
サブメニュー部分は、バーの背景やメニューの文字の大きさ、色など、さまざまな設定をスタイルから行うことができます。この時、メニューの文字の大きさを大きくすると、このバーがそれに合わせて太くなります。
気にしておく点：第三階層のページ
TOKYOレイアウトは、第三階層のメニュー項目を、第二階層以下に表示させる仕様になっています。
このため、第三階層がある際は、このようにサブメニューバーの下にもう一段バーがでてくるので、そこだけは致し方なしと割り切って使うか、第三階層以下での階層設定はしないなどの工夫も必要ですね。
駆け足で解説しましたが、基本的にカスタマイズのやりようが無いくらい、クオリティの高いJimdoのレイアウトなので、あえていじる必要はないのですが、こうしたちょっとしたところだけいじって自己主張するのも一つかなぁって思います。
