Lima（リマ）＆ カスタマイズ

【Lima（リマ）の基本情報】

Limaは、ヨガ、ベリーダンスなどの教室系や、美容室・音楽・ファッション等をテーマにした、おしゃれ系サイトにも似合いそうな雰囲気のテンプレートです。ここではサロン向けの制作例を挙げてみました。

デフォフトでは、中央部分にスペースが大きく表示されますので、サイト訪問者にオリジナル背景画像を強烈にアピールすることが出来ます。「普通とは違うデザインにしたい。背景画像を特に目立たせたい。」という方や、少々派手なサイトが好きな方には向いているかもしれません。

また一方では、海外向けの凝ったデザインなのかメインとサイドエリアが離れすぎていて、このままでは一般的に使いづらいという方もいらっしゃるかと。

そこで、レイアウトの配置を変えて日本向けのホームページとしても普通に利用できるようにしていきます。 

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

【2016.4.24 追記】

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

新リマのメニュー・アイコンは、スマホ画面でスクロールしても常に目に付く場所に固定表示されますので、お勧めです。（他にはHelsinkiも同様）

レスポンシブ対応の新・Limaを選んだ場合のカスタマイズについて解説しています。

「Lima」の「初期カラー」はなかなか良い感じで、気に入っているという方もいらっしゃることでしょう。（私もです♪）なので、ここでは配色をあまり変えずにレイアウトの横幅や配置の変更を中心に見ていきます。

なお、見出しのデザインを調整したいという方は「.jtpl-content」と「.jtpl-sidebar」というクラス名が利用できます。調整方法については、当サイトでご紹介している他のテンプレートなども参考にしてもらえると嬉しいです。

では、メディアクエリーを使い、横幅が1000px以上のタブレットやPCからのアクセスがあった場合、メインコンテンツとサイドエリアを画像のように、中央寄りの配置で表示してみます。

そして同時に、やや狭い感じがするコンテンツエリア（.jtpl-content）の横幅も少し拡げましょう。直下のフッターエリアもコンテンツと同じ横幅にしています。

早速、下記の7行を「基本設定」→「ヘッダー編集」にコピペ 後、保存ボタンをクリックしてプレビューにて確認してみて下さい。

<style type="text/css">

@media screen and (min-width: 1000px) {

#cc-inner { width: 1000px; margin: auto; }

.jtpl-content { width: 710px; }

.jtpl-footer__container { width: 710px; }

}

</style>

これで中央部分の背景エリアが目立たなくなります。そして、16pxの文字で約5文字分、メインコンテンツ幅が広がりました。

サイドとメイン間の背景は「.jtpl-content」と「.jtpl-footer__container」の数値を微調整してお気に入りの幅にしましょう。

このままでは、使用している背景画像の色によっては、フッターエリアの見栄えが不自然になってしまいます。そこで、フッターエリアの色を完全透明にすることにより、背景画像を際立たせてみます。

「管理画面 ＞ スタイル」からフッター内の左側をクリックした後、rgba内を下記の数値に変更します。

rgba(0, 0, 0, 0)

こんな感じで、背景画像がフッターにもしっかりと表示されています。

さらにこの状態から、メインコンテンツ真下のフッター背景（background）だけを「半透明」にしてみました。リンク文字等の体裁がやや不格好になりますので、内余白（padding）も同時に指定しています。下記のCSSを「ヘッダー編集」内の別行に追加します。

<style type="text/css">

.jtpl-footer__container {

padding: 10px;

background: rgba(0, 0, 0, 0.2) !important;

}

</style>

このような表示になります。文字色も、お使いの背景に合うよう、なるべく読みやすいカラーに調節しましょう！

【全体】

rgb(252, 229, 203)

【アクティブ時】

rgb(210, 31, 88)

※「Lima」のデフォルトカラーです。

【ヘッダータイトル】

Abril Fatface

※コンテンツ大見出しと同色にしています。

【コンテンツの大見出し】

Alfa Slab One

※ナビゲーション（アクティブ時）と同色にしています。

※中見出し・その他の文字には、日本語フォントの「ゴシック」を検索＆選択しています。

基本編集機能の「スタイル」を使うだけでも、中央エリアをある程度は縮めることができます。

この場合は、前述の「中央配置にするCSS」をすべて削除してから実行するようにして下さい。

【変更手順】

1. 「スタイル」で背景画像の中央あたりを任意にクリック
2. 「レイアウト配置」で「右」をクリック
3. 「横の余白」を「200」にして保存
4. 最後にプレビューで確認します

この方法でメインコンテンツとサイドエリアの位置を少しだけ変更できますが、サイドエリアが左端に表示されます。

ログアウト後に私のPC画面で確認しましたところ、サイドとメイン間の背景エリアが約5.8センチ幅にまで縮小されるのを確認しています。このレイアウト配置は、人によっては好き嫌いが分かれるところかも知れませんね。

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

中央の余白(背景画像部分)だけでかなりの面積を使っているという、大胆なレイアウトですね。

ここでは、メインコンテンツとサイドバーを中央方向に移動させて、メインコンテンツの横幅を750px、サイドバーの横幅を220pxまで広げてみます。

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

<style type="text/css">

.wrapper { width: 1050px !important; }

.content-options { width: 750px !important; }

.tpl-sidebar { width: 220px !important; }

</style>

カスタマイズにより、かなり見応えが良くなりました！これなら3列カラムも普通に表現できそうです。

各数値(px)は納得できるところまで微調整をしていきましょう。

サイドバーとメインコンテンツ部分を含んだ領域のクラス名です。

メインコンテンツ部分（フッター部分を含む）になります。

サイドバー部分です。Limaでは、ヘッダー・ナビゲーション・サイドコンテンツ部分を含んだ領域になります。

左側のサイドバーを右側に配置したバージョンのほうがいいという方へ。

サイドバー部分とメインコンテンツ部分の配置を左右入れ替えてみましょう。

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

.content-options { float: left !important; }

.tpl-sidebar { float: right !important; }

テンプレートの配置が他の人気レイアウト、「Dublin（ダブリン）」に似た感じになりました。