Helsinki（ヘルシンキ）＆ カスタマイズ ～ おすすめ♪

【 Helsinki（ヘルシンキ）の基本情報 】

参考までに、当サイトはJimdoのHelsinki（ヘルシンキ）を選択して作成しています。

管理人も気に入っているオススメ・レイアウトのひとつです。

枠線内のコンテンツ幅・ナビゲーション幅が広く、ヘッダー画像もかなり横長のサイズまで利用することができます。

また、全体的なレイアウトも派手ではありませんので、一般的な会社はもちろん、法律事務所（弁護士などの士業）、ネットショップ、加えて信頼・誠実・堅実さをアピールしたいHPや普通のブログサイトにも適したテンプレートだと思います。（どの業種にも向いてますよ♪）

ちなみに今回のサンプルサイトでは、リフォームも行う不動産会社をイメージして作成してみました。他にも、建築事務所などにもフィットしそうな雰囲気があります。

ということで、このHelsinkiは特に初期デザインから手を加えなくても充分使えるとは思いますが、ここではCSSの勉強のためにも、少しカスタマイズをしてみましょう！

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

【2016.4.20 追記】

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

旧バージョンでは、ヘッダー画像下のページタイトルは「a・H1」扱いでした。

しかし、「新しいバージョンのヘルシンキ」では、このページタイトルが「a・span」扱いになりました（他のレイアウトでもおそらく同様かと）。

これにより、各ページに配置する大見出しの重要度が増すので、SEO的に見ても少しは改善されたのではないでしょうか。

さて、ここからはレスポンシブ対応の新・Helsinkiを選んだ場合のカスタマイズ方法をご紹介します。

ここでは、テンプレートの最上部と最下部に背景画像（背景色）を表示させないで、かつナビゲーション下側の見かけ上の余白エリアを小さくします。

つまり、1つのCSSで一度に三か所のエリアを同時に調整することになります。

早速、下記のCSSを「基本設定」＞「ヘッダー編集」にコピペ＆保存ボタンをクリックしたら、どんなデザインになるかプレビューで確認してみて下さい♪

<style type="text/css">

.cc-content-parent { margin-top: 0 !important; margin-bottom: 0 !important; }

</style>

前述の活用例にて、コンテンツとサイドバーエリアに使われている大見出しのデザインをご紹介します。フォントカラーやサイズは、基本機能の「スタイル」からそれぞれ変更ができます。

下記CSSは、上記style間の空行などに挿入して使用します。

.jtpl-content h1 {

padding: 15px 15px 8px;

border-top: 3px solid #6db553;

border-right: 1px solid #c9c9c9;

border-bottom: 1px solid #c9c9c9;

border-left: 1px solid #c9c9c9;

border-radius: 0 0 5px 5px;

background: #ededed;

}

.jtpl-sidebar h1 {

padding: 10px 10px 5px;

border-left: 5px solid #009944;

background: #ededed;

}

「#6db553」の部分は「rgb(109, 181, 83)」で指定しても同じカラーになります。

2種類の大見出しに使用しているフォントカラーと同じ色です。

メインナビゲーションの背景色は、基本編集機能の「スタイル」から簡単に選択・入力ができます。

【全体の背景】

#009944、または、rgb(0, 153, 68)のどちらを記述しても同色になります。

リンクボタンで使っても良い感じになるかと思います♪

【アクティブ時の背景】

#ededed、または、rgb(237, 237, 237)のどちらを使っても同じカラーになります。大見出しの背景色とも同じです。

下記リンク先のページでは、当サイトで現在使用中のデザインも公開していますので、宜しければそちらもご覧ください。

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

テンプレート上部の背景画像をなくして（隠して）、ヘッダー上部にボーダー（水平線・罫線）を付けてみます。

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

<style type="text/css">

#wrap { margin-top: 0 !important; }

#kopfzeile { border-top: solid 5px #00a968 !important; }

</style>

「#00a968」はボーダー色を指定する部分です。お好きなカラーを指定しましょう。

ヘッダー上部にこんなアクセントがあってもいいかも知れません。

さらに、テンプレート下部の背景画像も消したい場合は、

#wrap { margin-bottom: 0 !important; }

の1行も追加しましょう！

Helsinkiでは、ヘッダー、ナビゲーション、サイドバー、メインコンテンツ、フッターの全てを含んだ領域になります。

ヘッダー部分を表すID名です。ちなみに、kopfzeileはヘッダーを意味するドイツ語です。Jimdoがドイツ生まれなのも妙に納得できる気がします。

ナビゲーションの下余白（コンテナの上余白）を少し詰めてみます。

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

.container { margin-top: 20px !important; }

コンテナ（.container）の上余白を微妙に詰めた状態です。画像のサイドバーで分かるように、文字1行分ほどが上に詰められました。

少なくともメインコンテンツとサイドバー部分が含まれている領域となります。

メインコンテンツの横幅を750pxまで広げ、サイドバーの横幅を250pxまで縮小させてみましょう。

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

.content { width: 750px !important; }

#sidebar { width: 250px !important; }

こんな感じになります。各横幅は10pxほどの微調整をしながら、満足のいく数値を見つけ出してください。

メインコンテンツ部分を表すクラス名になります。

サイドバー（サイドコンテンツ）部分を表すIDになります。

プリセットでサイドバーが左側のレイアウトがありません。

そこで、ご希望の方はCSSで右側のサイドバーを左側に移動してみましょう。

（メインコンテンツ部分とサイドバー部分の配置を左右入れ替えてみます）

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

.content { float: right !important; }

#sidebar { float: left !important; }

画像では4列カラムっぽく見えますが、サイドバーを左側に移動させています。いかがでしたか？