管理メニュー レイアウト
Jimdoで用意されているレイアウトの適用、テンプレートを自身で作成する独自レイアウトの設定をおこなうメニューです。
レイアウトの適用
適用できるレイアウトは5つの分類に分けられています。
登録したプランによって適用できるレイアウトは異なります。
レイアウトの種類
- レイアウト:Free,Pro,Businessプランで適用できます
- JIMDO PROレイアウト:Pro,Businessプランで適用できます
- JIMDO BUSINESSレイアウト:Businessプランのみ適用できます
- 独自レイアウト:Free,Pro,Businessプランで適用できます
- スペシャルレイアウト:Free,Pro,Businessプランで適用できます
※レイアウトによって編集できる項目が異なるので注意してください
Jimdoで用意されているレイアウトの適用方法
![](https://image.jimcdn.com/app/cms/image/transf/dimension=650x10000:format=png/path/s3f7ae2addc437d26/image/i345e5aaf8b58db12/version/1385094651/image.png)
「レイアウト」「JIMDO PROレイアウト」「JIMDOBUSINESSレイアウト」「スペシャルレイアウト」から任意のタブをクリックすると、レイアウトのサムネイルの一覧が表示されます。
サムネイルの表示方法
レイアウトメニュー画面上部のボタンを切り替えることで、サムネイル表示方法は変更することができます。
![ボタン](https://image.jimcdn.com/app/cms/image/transf/none/path/s3f7ae2addc437d26/image/i4557b5dfde90e5a5/version/1385095252/image.png)
左側のボタンが「画像一覧」、右側のボタンが「詳細一覧」です。
画像一覧の表示
![](https://image.jimcdn.com/app/cms/image/transf/dimension=650x10000:format=png/path/s3f7ae2addc437d26/image/ief944322247619f6/version/1385094980/image.png)
サムネイルの画像をクリックすると、選択したレイアウト適用した場合のプレビュー画面へ移行します。
レイアウト詳細をクリックすると、編集できる項目を確認できる画面へ移行します。
詳細一覧の表示
![](https://image.jimcdn.com/app/cms/image/transf/dimension=650x10000:format=png/path/s3f7ae2addc437d26/image/i7991a3a97d6f0ffd/version/1385095427/image.png)
緑色のチェックマークが付いているのが設定できる項目です。
好みのレイアウトが見つかったのなら、レイアウトを選択ボタンをクリックします。
選択したレイアウト適用した場合のプレビュー画面へ移行します。
プレビュー画面では以下のような画像が表示され、レイアウトを適用するかどうかの確認をおこないます。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=650x10000:format=png/path/s3f7ae2addc437d26/image/i61e603fe6890add6/version/1385099723/image.png)
「はい」を選択するとレイアウトが適用されます。
「いいえ」を選択するとレイアウトは適用されません。
「戻る」を選択するとサムネイル一覧画面へ戻ります。
独自レイアウトの適用方法
「独自レイアウト」のタブをクリックします。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=650x10000:format=png/path/s3f7ae2addc437d26/image/iee259088a5fa0359/version/1385096510/image.png)
独自レイアウトメニュー
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s3f7ae2addc437d26/image/i5618506d8a15a8b2/version/1385096728/image.png)
HTML:HTMLの編集をおこないます
CSS:CSSの編集をおこないます
ファイル:独自レイアウトで使用する画像やJavascriptファイルをアップロードします
ヘルプ:独自レイアウトの助けとなる情報を確認できます
HTML
画像の利用:「ファイル」からアップロードしたファイルを一覧から選択し挿入できます
独自タグの挿入:2013年11月現在で挿入できる独自タグは7つです。
- content
- sidebar
- footer
- shopping cart
- navi(standard)
- navi(nested)
- navi(breadcrum)
xhtml:入力されたHTMLをXHTMLへ自動修正します
CSS
![](https://image.jimcdn.com/app/cms/image/transf/dimension=650x10000:format=png/path/s3f7ae2addc437d26/image/ie48ac15bb941360a/version/1385099187/image.png)
画像の利用:「ファイル」からアップロードしたファイルを一覧から選択し挿入できます
ファイル
![](https://image.jimcdn.com/app/cms/image/transf/dimension=650x10000:format=png/path/s3f7ae2addc437d26/image/if704e2a293130195/version/1385099287/image.png)
拡張子が.gif .png .jpgの画像と、Javascriptファイルのみアップロードできます
HTMLかCSSの「保存」ボタンをクリックするとプレビュー画面へ移行します。
プレビュー画面では以下のような画像が表示され、レイアウトを適用するかどうかの確認をおこないます。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=650x10000:format=png/path/s3f7ae2addc437d26/image/i1fd15b6764fbfcb6/version/1385096157/image.png)
「はい」を選択するとレイアウトが適用されます。
「いいえ」を選択するとレイアウトは適用されません。
「戻る」を選択すると「保存」ボタンをクリックした画面へ戻ります。
設定
選択しているテンプレートによって「設定」項目が表示されるか異なります。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=650x10000:format=png/path/s3f7ae2addc437d26/image/i2d9ad42a8bdcc659/version/1385534099/image.png)
画像の位置:
コンテンツの表示位置をブラウザに対して「左揃え」「中央揃え」「右揃え」に変更できます。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s3f7ae2addc437d26/image/i187e117ab87f32df/version/1385534290/image.png)
余白:
コンテンツの上下左右に余白を指定できます。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s3f7ae2addc437d26/image/i11839227335d8621/version/1385534452/image.png)
罫線:
コンテンツにを囲む罫線を指定できます。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s3f7ae2addc437d26/image/i927772d7e7a94f59/version/1385534675/image.png)
設定が終了したら「保存」ボタンをクリックします。
設定が終了したら「保存」ボタンをクリックします。プレビュー画面へ移行します。 プレビュー画面では以下のような画像が表示され、レイアウトを適用するかどうかの確認をおこないます。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=650x10000:format=png/path/s3f7ae2addc437d26/image/if5ed2af8a4429de0/version/1385534838/image.png)
「はい」を選択するとレイアウトが適用されます。
「いいえ」を選択するとレイアウトは適用されません。
「戻る」を選択すると「保存」ボタンをクリックした画面へ戻ります。
最後までお読みいただきありがとうございます!いかがでしたか?
このページが参考になったら、ぜひ左のボタンでFacebookかTwitterにシェアしていただけると嬉しいです!
![](https://www.magicalremix.com/toranomaki/images/piyo-surprised.png)
押してくれたらもっとこうしんするぴ!