Prague（プラーグ、プラハ）＆ カスタマイズ
【 Prague（プラーグ、プラハ）の基本情報 】
| ヘッダー画像サイズ | 最大値は「横幅870px・縦幅191px」程度か。 |
|---|---|
| ヘッダー見出しH1 | 新バージョンではヘッダー画像の上側にサイト説明文を記入できる。 |
| 背景画像 | テンプレート周辺 |
| ナビゲーション(第一階層) | ヘッダー画像の下側に横並び |
| ナビゲーション(第二階層以下) | プルダウンメニュー |
| サイドバー | プリセットの第1番目では、フッターの上側 |
| その他 | 第二階層以下は、パンくずリストが表示。プリセットでサイドバーが右側のレイアウトを選択可 |
Pragueは、ナビゲーションボタンが角丸で、両端には水平線があるという、ちょっぴりオシャレなデザインのテンプレートです。この左右の水平線は、親ページ数が増えるごとに段々と短くなっていきます。
また、プリセットでは右サイドバー付きバージョンを選ぶことが出来ますので、ブログ記事をメインとしているサイトにも向いているかもしれません。
さて、全体のレイアウトですが、日本式ホームページに見慣れている方の中には、ナビゲーションの上下余白に少し違和感がある、という方もいらっしゃるかと思います。
そこで、このページでは余白幅の調整方法などもあわせてご紹介したいと思います。
※カスタマイズをはじめる前に、ご利用にあたっての注意事項を最初にお読み下さい。
【2016.4.20 追記】
「Prague」がレスポンシブWebデザイン対応になりました♪
「新しいバージョンのプラハ」は、メインナビゲーション・ボタンの左右の背景色も指定できますので、Verona同様にナビ全体を帯状に表示することもできます。
（旧バージョンの時でもこれは可能だったのかな？）
ところで、ヘッダー画像の上側にある「ページタイトル」は、編集画面で削除した方が見栄えが良くなりますよ♪
新・Prague用のカスタマイズ
レスポンシブ対応の新・Prague向けのカスタマイズ方法をご紹介します。
プリセットで「右サイドバー付きバージョン」を選んでもご利用になれます。
メインナビゲーション周りの余白を調整する
初期デザインでは、メインナビゲーション上下の余白面積が広すぎると思いますので、この余白を調整することで全体のバランスを整えてみました。
余白の数値(px)は、お好みによって微調整しましょう。
では、下記CSSを「基本設定」＞「ヘッダー編集」にコピペ＆保存をクリックしたら、どんなデザインになるかプレビューで確認してみて下さい。
<style type="text/css">
.jtpl-navigation {
padding-top: 15px !important; padding-bottom: 15px !important;
}
.jtpl-breadcrumb { margin-bottom: 5px !important; }
</style>
テンプレート上下の背景エリアを隠す
さらに、テンプレート最上部と最下部の背景エリアを隠したい場合は、下記の一行も空行に付け加えましょう。
.cc-content-parent { margin-top: 0 !important; margin-bottom: 0 !important; }
コンテンツ・大見出しのデザイン
メインコンテンツ用の大見出しのデザインです。日本では見出しを装飾しているサイトがとても多いと思います。
.jtpl-content h1 {
padding: 15px 15px 8px;
border-radius: 5px;
background: #5cbf98;
color: #ffffff !important;
font-size: 24px !important;
}
「#5cbf98」の代わりに「rgb(92, 191, 152)」を記述しても同色になります。
サイドバー・大見出しのデザイン
サイドバー大見出しのデザインも変えられます。
.jtpl-sidebar h1 {
padding: 5px 10px 3px;
border-bottom: 2px dotted #5cbf98;
color: #5cbf98 !important;
font-size: 18px !important;
}
旧・Pragueのカスタマイズについて
以下、1から3まで解説しているカイスタマイズ方法は、レイアウト変更前のPrague用に執筆した記事です。
そのため、新Pragueに使えるものとそうでないものがあります。
1. 横並びナビゲーションの上下余白を詰める
横並びナビゲーションの上下余白が広すぎて気になる方へ。
この余白をもう少し詰めていきましょう。
まずはJimdoの管理画面で、「基本設定」→「ヘッダー編集」を開き、下記のCSSをコピーしてそこへ貼り付けます(コピペします)。次に「保存」をクリックして「キーボードのF5ボタン」を押します。
<style type="text/css">
.navigation-wrapper { padding-top: 12px !important; padding-bottom: 12px !important; }
.tpl-breadcrumb { margin-bottom: 3px !important; }
</style>
上記のうち「padding-top」と「padding-bottom」の値(px)は両方とも同じ数値にしましょう。
好みにもよりますが、異なる数値だとナビゲーション左右にある水平線の位置が見かけ上、ずれて表示されます。
こんな感じで、ナビゲーション上下の余白が気にならなくなりました。
.navigation-wrapper
ナビゲーション部分を表すクラス名です。
.tpl-breadcrumb
パンくずリストの部分を表すクラス名です。
2. ヘッダー画像をテンプレートの最上部に配置する
ヘッダー画像をテンプレートの最上部に配置してみたいと思ったことはありませんか？
ここでは、テンプレート上側の背景を消して、ヘッダー画像を最上部に配置する方法をご紹介します。
まず最初に、編集画面でヘッダー画像の上側に位置する「コンテンツ（ページタイトル）」を削除します。（形式的に削除されるだけで、何度でもページタイトルの編集ができますのでご安心を。）
そして「ヘッダー編集」を開き、記述済みの<style type="text/css">と</style>の間のどこかを改行して、下記のCSSをコピペで付け加えます。
次に「保存」をクリックして「キーボードのF5ボタン」を押します。
最後に右下のプレビューをクリックして、Pragueの容姿を確認してみましょう。
.cc-content-parent { margin-top: 0 !important; }
最初の1画面内に、できるだけ多くの情報を表示したい！
つまり、インパクトのあるファースト・ビューにしたい、という方におすすめのカスタマイズ方法です。
.cc-content-parent
ヘッダー、ナビゲーション、メインコンテンツ、サイドバー、フッターの全てを含んだ領域になります。
3. テンプレート下側の背景も無くしてみる
ここまでくると、テンプレート下側の背景も無くしてみたくなるものです。
次に記述すべきCSSは、もうお分かりかと思います。
そうです、「margin-top」の反対、「margin-bottom」を記述します。
「ヘッダー編集」を開き、記述済みの<style type="text/css">と</style>の間のどこかを改行して、下記のCSSをコピペで付け加えます。次に「保存」をクリックして「キーボードのF5ボタン」を押します。
.cc-content-parent { margin-bottom: 0 !important; }
では、変更前と後の様子を下のスライドショーで見てみましょう。
