新テンプレート「TOKYO(東京)」が遂にリリース!

Jimdoで制作したサイト見本:公認会計士の会計事務所
■ 新テンプレート「Tokyo」の活用例 ■

Jimdoの新しいテンプレート「Tokyo(東京)」が遂にリリースされましたね。

この「Tokyo」は日本発で日本人の方が独自にデザインされた新レイアウトだそうです。

日本の会社・企業などのビジネス用サイトで見かけるような、あのカッコイイ配置になっています♪

 

早速ですが、今回は会計事務所向けのサイトとして活用してみました。公認会計士や税理士など、経営コンサルティング業界に携わる方にも、ピッタリな雰囲気かと思います。

 

このレイアウトで特筆すべきは、ページタイトルに最初から「シャドウ(影)」がかけられていることです。このシャドウにより、ページタイトルが自然と背景画像(ヘッダー画像)に調和され、より美しい日本語を表示することができます。

 

全体的なデザインは、無料テンプレートみたいに、ヘッダー、ナビゲーション、フッター等のパーツがコンテナ外に表示されているので、メリハリ感や見栄えのあるBodyだと思いました。

もちろん、今ではすっかりおなじみの「レスポンシブWEBデザイン」にも柔軟に対応しております。

 

デザインはシンプルだけど、なぜか訪問者を飽きさせないつくり

そんな印象をも感じさせました。

 

また、メインコンテンツエリアの雄大なる横幅にも驚かされます。

PC画面で閲覧すると、約1000pxもあります!

4列で作成したカラムでも、その効果をいかんなく発揮できるのでは。

 

とにかく「TOKYO」は、ページ訪問者の目を釘づけにすること間違いなし!?

 

(「Gifu」在住の管理人は、羨ましい限りです^^;)

基本情報

ロゴ画像サイズ 最大値「横幅 230px・縦幅 73px」程度?
ヘッダー画像 背景画像を流用
親ナビゲーション ヘッダー右上に横並び
子ナビゲーション 親ナビの下に横帯表示。その下には孫ナビが表示される。
サイドバー ページ下部(フッターより上側)
パンくずリスト 第二階層目から表示

 

レイアウト選択時の注意点

現在、「Tokyo」のヘッダー画像はトップページにのみ表示できます。

 

この対策としては、他の重要なページの始めには画像を入れるなどして、擬似ヘッダー画像を利用するという方法も考えられます。

 

また、ヘッダー画像にページタイトルを記入したい場合は、最初に背景画像を表示させる必要があります。

 

手順は、管理メニュー画面の「デザイン」>「背景」にて背景画像(背景色)を指定すれば、晴れてページタイトルを入力することができます。

スタイル機能について

海外バージョンの「Tokyo」レイアウト
海外バージョンの「Tokyo」レイアウト

「Tokyo」のスタイル機能では、ロゴ画像とメインナビゲーションが配置されている長方形のヘッダーエリアの背景色を編集する事もできます。

 

加えて、メインナビの行配置が、上・中・下の3種類から選択できるので、これでデザインの幅がぐっと広がりますよね。

 


東京プチ・カスタマイズ

東京は既に日本向けテンプレートですので、なるべくなら原型を崩さずに使用したいものです。

なので、ここでのカスタマイズは水平線スタイルや見出し程度にとどめておきます。

レベル的には、プチ・デザインカスタマイズといったところでしょうか。

 


ページ最上部に水平線を表示する

それでは今流行り(?)の、ページ最上部に水平線を付けたデザインで表示してみます。

水平線カラーは、デフォルトでのサブナビゲーション(子ページナビ)の背景色と同じです。

 

【 ページの最上部にラインを表示 】
【 ページの最上部にラインを表示 】

下記スタイルを「基本設定」→「ヘッダー編集」にて指定します。

 

<style type="text/css">

 

body { border-top: solid 5px rgb(17,38,49); }

 

</style>

 

ヘッダー画像の下端に罫線を付けたい場合には、「body」を「.jtpl-content」に変更して利用します。

 


ヘッダーと大見出しを少し装飾する

今度はヘッダーとコンテンツエリアの境目あたりに仕切り線というか、薄い境界線を表示します。大見出しは帯付きに装飾してみました。前述の水平線スタイルは、ここでは一旦削除しています。

見出しの背景色は、デフォルトのサブナビゲーションカラーと同じになります。

 

下記のCSSを、先ほどのCSSが記述されている<style type="text/css">と</style>の間の空行に記述します。

 

.jtpl-header { border-bottom: solid 2px #ebebeb; }

.jtpl-content h1 {

padding: 15px 15px 10px;

background: rgb(17, 38, 49);

border-radius: 6px;

}

 

基本編集機能の「スタイル」から、見出しの文字色をホワイトに変更することも忘れないようにしましょう。

 

CSSを適用したトップページ以外のページ

こちらの画像は、トップページ以外でサブナビゲーションがないページのデザイン例です。

なお、トップページ以外でサブナビが表示されるページでは、この見出しより上側に画像を表示させた方が見栄えはグット良くなると思います。

 

プチ・カスタマイズされたトップページ

そのままトップページを表示させると、こんな感じのデザインにもなります。

 


いかがでしたか?上手くカスタマイズ出来ましたでしょうか?

 

これまでにご紹介したものや他のサイトなどを参考に、ご自身に合ったデザインやCSSを利用していくというのも良い方法かもしれませんね。

もちろん、「Tokyo」は初期状態のままでも充分使える、素晴らしいテンプレートだと思います。

今後の展望

現在、日本の都市名が使われているレイアウトは「Tokyo」と「Osaka」の2種類のみです。

 

今回のTokyoリリースが起爆剤となり、今後は、Yokohama・Nagoya・Kobe・Kyotoなど、新レイアウトの日本シリーズが続々と開幕していくことを切望したいところ。

 

個人的にはTokyoみたいなレイアウトをベースとして、ヘッダー上部の右側にサイト説明文や電話番号、ボタン、画像等を表示できるエリアがあれば、より日本人好みのデザイン・テンプレートに近づくかと思います。

 

また、Tokyoのプリセットでサイドバーエリアが右側にあるバージョンも選べたら最高かと。

 

ともあれ、ますます目が離せなくなってきたJimdo!その急成長にも注目です♪

 

「ホームページは、ジンドゥー!!」