Havana(ハバナ)& カスタマイズ

Jimdo NewUIの新レイアウト:Havana(ハバナ)
新バージョンのHavanaはナビゲーションの横幅がやや広くなりました

【 Havana(ハバナ)の基本情報 】

ヘッダー画像サイズ 最大値は「横幅900px・縦幅288px」程度か。
ヘッダー見出しH1 ヘッダー画像の下側にサイト説明文を記入できる
背景画像 テンプレート周辺
ナビゲーション(第一階層) 左サイドに縦並び
ナビゲーション(第二階層以下) 同じく左サイドに縦並び
サイドバー フッターの上側

 


Havanaは、ナビゲーションとサイドバー部分(フッター上部)が独特のデザインになっているという、面白いテンプレートです。サイドナビゲーション付き旧レイアウトから新レイアウトへ変更する方にも、人気があります。

 

ここでは洋菓子店をサイト作成例としてみました。他にも例えば、喫茶店・カフェなど配色次第では様々な飲食店にもしっかりと利用できることでしょう。

 

ただ、「旧バージョンのハバナ」では肝心のナビゲーション幅が狭いので、ここではナビゲーションの横幅を広げるカスタマイズ方法もご紹介しています。

 

※カスタマイズをはじめる前に、ご利用にあたっての注意事項を最初にお読み下さい。


【2016.4.20 追記】

「Havana」がレスポンシブWebデザイン対応になりました♪

「新しいバージョンのハバナ」は、デフォルトでの初期デザインが少し変更され、サイドナビゲーションの横幅が最初から広くなっています。

しかしナビタイトルは、相変わらず右寄せのままです(これは基本編集機能では変更できません)。

人がページを読むときは「左から右」が基本ですので、出来れば左寄せでのタイトル揃いが望ましいのですが・・。

ともあれ、今後のJimdoの新機能に期待したいですね!

新・Havana用のカスタマイズ

では早速、レスポンシブ対応の新・Havanaを選んだ場合のカスタマイズ方法をご紹介します。

Jimdoの「ハバナ」を使用して制作したサイトの一例:スイーツ・洋菓子店
【 デザイン完成例 】

レイアウト最上部の背景エリアをなくす

新・Havanaはレイアウトのトップエリアに背景部分が大きく表示されます。

 

これは、どのページでも重要なコンテンツの露出量が少なくなることを意味しますので、サイト訪問者の滞在率に多少なりとも影響を与えてしまいます。

 

この問題を少しでも解決する為に、レイアウト最上部の背景エリアを表示しないようにしてみます(テンプレート全体を上方向へ移動するようなイメージです)。

 

それでは、下記のCSSを「基本設定」の「ヘッダー編集」にコピペ&保存ボタンをクリック後、プレビューで確認してみましょう!

 

<style type="text/css">

 

.jtpl-container { margin-top: 0 !important; }

 

</style>

 


ナビゲーションタイトルを左寄せにする

ハバナの初期デザインでは、サイドナビゲーションのタイトルが右寄せになっていて読みづらくないですか?

ここでは、そのタイトルを左寄せ揃いにすると同時に、子ページと孫ページナビの開始位置をやや右にずらすことで読みやすくしました。

下記の二行を、<style type="text/css">と</style>の間の空行にコピペしてお使いください。

 

.j-nav-variant-nested li a { text-align: left !important; }

 

.j-nav-variant-nested ul ul li { padding-left: 5px !important; }

 


見出し大に使ったCSS

最後は、見出し大に使用したスタイルです。細部はお好みのデザインに変更しましょう。

 

.jtpl-content h1 {

padding: 15px 15px 6px;

border-bottom: 4px solid #eb3d41;

border-top: 1px solid #c9c9c9;

border-left: 1px solid #c9c9c9;

border-right: 1px solid #c9c9c9;

border-radius: 5px 5px 0 0;

background: #f7f7f7;

}

 

見出しの下線は「#eb3d41」ではなく「rgb(235, 61, 65)」を指定しても同じ色になります。

また、ナビゲーションと同じカラーでもあります♪

旧・Havanaのカスタマイズについて

以下、1から3まで解説しているカイスタマイズ方法は、レイアウト変更前のHavanaにしか使用できません。予めご了承ください。 

●旧バージョンの「Havana」:サイドナビゲーションの横幅が狭い
●旧バージョンの「Havana」:サイドナビゲーションの横幅が狭い

1. テンプレートの上側と下側の背景画像を隠す

はじめに、テンプレートの上側と下側に表示されている背景画像を隠してみましょう。

 

まずはJimdoの管理画面で、「基本設定」→「ヘッダー編集」を開き、下記のCSSをコピーしてそこへ貼り付けます(コピペします)。次に「保存」をクリックして「キーボードのF5ボタン」を押します。


 

<style type="text/css">

#cc-inner { padding-top: 0 !important; padding-bottom: 0 !important; }

</style>

 


それでは下のスライダーで、ビフォー・アフターを見てみましょう。


#cc-inner

ヘッダー、ナビゲーション、メインコンテンツ、サイドバー、フッターの全てを含んだ領域を表すID名です。

2. サイドナビゲーションの横幅を広げ、メインコンテンツの横幅を縮める

このレイアウト最大の特徴(?)である縦並びナビゲーションの横幅が、けっこう狭い感じがします。

 

そこで、サイドナビゲーションの横幅を260pxまで拡大させると同時に、メインコンテンツの横幅を670pxまで縮小してみます。

 

「ヘッダー編集」を開き、記述済みの<style type="text/css">と</style>の間のどこかを改行して、下記のCSSをコピペで付け加えます。次に「保存」をクリックして「キーボードのF5ボタン」を押します。


 

.tpl-navWrap { width: 260px !important; }

.tpl-content { width: 670px !important; }

 


ナビゲーション幅とコンテンツ幅のバランスが良い感じになりました。

 


.tpl-navWrap

縦並びナビゲーション全体を表すクラス名です。

 

.tpl-content

メインコンテンツ部分を表すクラス名です。

3. サイドナビゲーションのタイトルを左寄せにする

このままではナビゲーションのタイトルが右寄せされている状態なので、読みづらいですよね?

ですので、サイドナビゲーションのタイトルを左寄せにします。

 

でも、そのまま左寄せにしただけでは、どれが親ページ(子ページ)のナビなのかが判断できません。

そこで、子ページのナビタイトル文頭に、見かけ上で1文字分ほどの余白も同時に指定します。

 

「ヘッダー編集」を開き、記述済みの<style type="text/css">と</style>の間のどこかを改行して、下記のCSSをコピペで付け加えます。次に「保存」をクリックして「キーボードのF5ボタン」を押します。


 

.tpl-nav1 li a { text-align: left !important; }

.tpl-nav1 ul ul li { padding-left: 18px !important; }

 


これで、子ページのナビゲーション・タイトルも揃って見やすくなりました。

 


.tpl-nav1

ナビゲーション部分を表すいくつかのクラス名のうちの1つです。