【Jimdo】トップとコンテンツページを違うデザインにする

備忘録としてのアップです。
Jimdoでも独自レイアウトで自由にサイトデザインが変えられるのですが、トップページとコンテンツページ
それぞれ別のデザインにしたい。と思うこともよくあることだと思います。
それをJimdoでは可能なのか?とでいろいろ試してみました^^

トップページはこのデザイン↓
top

コンテンツページはこのデザイン↓
main

こんな感じに。

Jimdo、無料でもかなりのものを作る事ができますし、なにより更新が本当に楽なんですよね。
でも、Jimdoの仕様上、独自レイアウトでも1つのhtml、cssで全てのページを設定する形になるので、
2つのデザインを共存させる事ができるのかな?というのがそもそもの問題。あと、独自タグも厄介。
というわけなのですが・・・。
あるお仕事で全く別のデザインにできないか?という質問が来たもので、それが事の発端でございます。

Jimdoで作成したトップページのHTMLの<body>タグはこのように記述されています。
<body class="body cc-page cc-page-index cc-indexpage cc-pagemode-default cc-content-parent" id="page-xxxxxxxxxx">

トップページには.cc-indexpage、各コンテンツページには#page-xxxxxxxxxxが必ず割り振られています。
このクラスorID属性を利用してCSSを書き換えることで、それぞれのページで違う設定ができるようになります。

(例)トップページのみ表示させない設定
#top-image{ width: 1024px;}
.cc-indexpage #top-image{ display: none;}

(例)指定したコンテンツページのみ設定
#page-xxxxxxxxxx #top-image{ width: 1024px;}

2つのデザインを1つのhtmlで書く事になるので、ソースがえらい感じに・・・;
うまくすれば重複不可なcontentとsidebarタグもそれぞれのデザインで動かす事ができます。

かなり強引な方法ではありますが、デザインを変えることは一応できました。ということでっ^^;

コメントを残す