お困りのことはありますか?

独自レイアウト

もし独自のHTMLやCSSを使った編集をご希望の場合は、こちらからお客さま独自のレイアウトを作成することが可能です。HTMLやCSS、またJavaScriptであなただけのオリジナルのレイアウトの作成が自由に出来ます。

ここではその方法について、いくつかご案内します。

具体的な手順

独自レイアウトのツールバーでは、独自のHTMLやCSSをそれぞれの領域に挿入することができます。

 

  1. Jimdoへログインし、左上の管理メニューをクリック
  2. デザイン > 「独自レイアウト」をクリック
  3. 作成されたHTMLをコピーし、"HTML"のフィールドへ貼り付ける
  4. xhtmlをクリック(システムが自動的に不要なソースコードを削除します)
  5. 変更したいデザインのCSSをコピーし、 "CSS"のフィールドに貼り付ける
  6. レイアウトに必要な写真を"ファイル"からアップロード
  7. 保存をクリック

 

* JimdoはBody部分、タイトル部分が必要です。

* ファイルにはJavaScriptやご希望の画像のアップロードが可能です。

* 画像の保存先は固定ではないため、独自レイアウトの"ファイル"に保存しているファイルの「保存先URL」を指定せず、「ファイル名」を指定してください。

独自レイアウト設定画面

レイアウト

すべてのレイアウトは、いくつかの指定された構成パーツによって設計されています。テンプレートの構成パーツは、 Content、Navigation、Sidebar、Footerが必要です。独自のレイアウトを適用するには、独自レイアウトにこれらの構成パーツを含み、且つ詳細仕様に適応する必要があります。(この条件を満たしていない場合はシステムレイアウトとして認識しません)。そのため以下のJimdoのレイアウト構成パーツを構成してください。


var>content</var>

<var>sidebar</var>

<var>navigation[1|2|3]</var>

<var>footer</var>

コンテンツ部分

メインコンテンツ部分については、下記のように置き換えてください。


<var>content</var>
ヒント:置き換える部分をハイライトし、リスト上の"content"をクリックすると、自動的にJimdo用のレイアウトパーツとして置き換わります。

サイドバー部分

次に行う部分は、サイドバー部分です。この部分には、Jimdo-box(Jimdoロゴとドロップダウンメニュー付)が挿入されます。このサイドバーはすべてのサブページにも配置されます。


<var>sidebar</var>
ヒント:置き換える部分をハイライトし、リスト上の"sidebar"をクリックすると、自動的にJimdo用のレイアウトパーツとして置き換わります。

ナビゲーション部分

次にナビゲーション部分の挿入です。ここで新しいページを作成、消去、名前の変更などを行います。


<var>navigation[1|2|3]</var>

Jimdoが利用しているナビゲーションは以下のような形です。


            
<ul id="mainNav1">
  <li><a href="/">Page 1</a></li>
  <li><a href="/page-2/">Page 2</a></li>
  <li><a href="/page-3/" class="current">Page 3</a></li>
  <li>
  <ul id="mainNav2">
    <li><a href="/page-3/subpage-1/">Subpage 1</a></li>
    <li><a href="/page-3/subpage-2/">Subpage 2</a></li>
  </ul>
  </li>
  <li><a href="/page-4/">Page 4</a></li>
  <li><a href="/page-5/">Page 5</a></li>
</ul>
            
ヒント:置き換える部分をハイライトし、リスト上の"navigation"をクリックすると、自動的にJimdo用のレイアウトパーツとして置き換わります。

フッター部分

フッター部分には、たとえばログインリンクなどが表示されます。


<var>footer</var>
ヒント:置き換える部分をハイライトし、リスト上の"footer"をクリックすると、自動的にJimdo用のレイアウトパーツとして置き換わります。

CSS

CSS部分には、CSSをコピーします。サブカテゴリーのCSS例については下記をご参照ください。

ナビゲーションのCSS例


ul#mainNav1,
ul#mainNav2
{
    margin:0;
    padding: 0;
}


ul#mainNav1 li,
ul#mainNav2 li
{
    display: inline;
    margin: 0;  
    padding: 0;
}


ul#mainNav1 li a,
ul#mainNav2 li a
{
    font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-decoration: none;
    display: block;
    color:#333;
    border-bottom:1px solid #CCC;
}


ul#mainNav1 li a { padding:4px 4px 4px 4px; }
ul#mainNav2 li a { padding:4px 4px 4px 14px; }


ul#mainNav1 a:hover
{
    background:#EEE;
    color:black;
}

ul#mainNav1 a.current { font-weight:bold; }
            

背景画像がどう見えるかのCSSパス例


background-image: url(test.gif);
ヒント:画面左上のアイコンをクリックすることで、すでにアップロードされている画像を簡単に挿入できます。

ファイルアップロード

ファイルからアップロードする写真は、*.gif,*.png または*.jpgフォーマットのみアップロード可能です。

また、画像は下記のHTMLパスを含む必要があります。


<img src="test.gif"  />

アップロードしたJavascript(*.js)ファイルは自動的にHTML内へ挿入されます。 また、HTML内への記述は「設定>ヘッダー部分を編集」から追記編集することもできます。

Typesquare (モリサワ)フォント

JimdoProまたはJimdoBusinessをご利用のお客さまは、font-familyでモリサワフォントが使用できます。


一例
h1 { font-family: "GSanSerif-B",sans-serif,"typesquare"; }
使用できるモリサワフォントはプランによって異なります。スタイルから、使用できるフォントをご確認ください。サポートセンターでも各プラン事の使用可能なフォントを紹介しています。
日本語Webフォント(モリサワフォント)
サポートについて
独自レイアウト(個人的にカスタマイズしたレイアウト)に関してはサポート対象外となっております。恐れ入りますが、あらかじめご了承のうえ、ご利用ください。