2010
Apr
19

Jimdo(ジンドゥー)の独自レイアウトでCSSカスタマイズする場合の簡単な解説

Jimdoの独自レイアウトでCSSカスタマイズする場合の簡単な解説
Jimdo(ジンドゥー)


最近Jimdo(ジンドゥー)のCSSカスタマイズで検索してくる人が結構いたので、Jimdoの独自タグとその中身にあるCSSについて、簡単な解説を少ししたいと思います。

Jimdo(ジンドゥー)の独自レイアウトの反映方法

まずJimdoの自分のページにログインして右上の「レイアウト」の項目を選び、さらにそこから「独自レイアウト」を選びます。

Jimdo 独自レイアウト
するとこのように独自レイアウトの編集画面が出てくるので、とりあえず左下の「保存」を押すと、

Jimdo 独自レイアウト
設定された内容の独自レイアウトがサイトに反映されます。
(注意:レイアウトを変更したくない場合は保存を押さないで下さい。)

Jimdoの独自タグとその中身について

Jimdoではナビゲーションやサイドバー、コンテンツ、フッター、といった部分にそれぞれ独自のタグが使われています。
そして独自タグの中身のhtmlは変更できません。
つまり独自タグ内のCSSを新たに指定するくらいの変更しかできないようになっています。
※コードの表示がこのブログの幅の問題で見にくいので「<>」このマークを押してもらえば別窓でコードが表示されます。

navigation[1|2|3]:ナビゲーション。サイトのナビゲーション部分の独自タグ
Jimdoの独自タグ navigation[1|2|3]
navigation[1|2|3]

navigation[1|2|3]の中身(階層なし)


navigation[1|2|3]の中身(階層あり)


という構造になっています。
ちなみにページの階層の上限は決まっていて、3階層までが限界となっているようです。


sidebar:サイドバー。jimdoの広告と各種ウィジェット等を入れれる部分の独自タグ
Jimdoの独自タグ sidebar
sidebar

sidebarの中身
 

Hey Visitor!


とこのような構造になっています。
基本的にウィジェットやhtmlなどを入れる部分は絶対に 「n」というクラスに囲まれます。
一応注意:jimdoの広告はvisibility:hidden !important;等で消せますが、規約違反なので絶対に広告は消さないようにしましょう。


content:コンテンツ。文章やブログの記事、イラストギャラリー等を入れる部分の独自タグ
Jimdoの独自タグ content
content

contentの中身

Jimdoページを作成しましょう!

youtubeや記事等様々なコンテンツ

こちらもサイドバーと同様に各種コンテンツ部分は必ず「n」というクラスで囲まれます。

footer:フッター。概要、印刷用、ログイン等を入れる部分の独自タグ
Jimdoの独自タグ footer
footer






フッターはこのような構造ですね。
おおまかに「leftrow」と「rightlow」というクラスにわかれています。

長くなりましたが独自タグの中身については大体こんな感じですね。
それぞれ部分別に分けて解説しただけですが、
よければjimdoで独自レイアウトをする時の参考にして頂ければと思います。

さらにいろいろいじりたいと言う方には
Hiromitz @ Jimdo ブログ」さんの記事でおもしろいのがありますのでそちらをどうぞ。

Jimdoのページでトップページにだけ画像を表示させる方法
JimdoへのJQueryのインストール

★月々263円からオンラインショップを運営!
高機能カート・クレジット決済が簡単導入


MTOSやXOOPSを簡単ワンクリックインストール!
マルチドメイン対応レンタルサーバー【シックスコア】
タグ:Jimdo Web制作
posted by トネリコ at 15:36 | Comment(0) | TrackBack(0) |
カテゴリ:Web制作のツール・ソフト | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。