Jimdoで出力されるHTML分析

Jimdoで独自レイアウトやカスタマイズをする場合Jimdoが書き出しているHTMLを分析します。今回、Jimdo研究所がJimdoの独自レイアウトやカスタマイズを行うために利用しているメモを公開いたします。この情報がJimdoで独自レイアウトを制作しなくてはならない方のための役に立てば幸いです。

body

トップページ閲覧時

トップページのclass名
body
cc-page
cc-page-index　（トップページのみ使用）
cc-indexpage　（トップページのみ使用）
cc-pagemode-default （閲覧時のみ使用）
cc-content-parent

その他のページ

使用されているclass名
body
cc-page
cc-pagemode-default　（閲覧時のみ使用）
cc-content-parent

管理画面にログイン中

使用しているclass名（すべて共通）

body
cc-page
cc-content-parent

コンテンツエリア／サイドバー／フッターエリア

独自レイアウトを作る上で、もっとも基本となるエリアは４つある。ここでは、４つのうちの『コンテンツエリア』・『サイドバー』・『フッターエリア』を取り上げる。

『ナビゲーション』についてはとても複雑になるため別ページで取り上げることにする。
これら４つのエリアはワークフレームを作成する上でもっとも重要になる箇所である。

<var>content</var>

<div id="content_area" data-container="content">
<div id="content_start"></div>　←このタグが何のために利用されているのか解析中
<div id="cc-matrix-xxxxxxxxxx">

</div>

</div>

全体をマークアップするID
content_area

管理画面からコンテンツの保存時に必要になると思われるID

cc-matrix-xxxxxxxxxx

<var>sidebar</var>

<div data-container="sidebar">

</div>

</div>

管理画面で保存する際に必要となると思われるID

cc-matrix-xxxxxxxxxx

<var>footer</var>

フッター部分は右側、左側、そしてFree利用時の際に表示される広告エリアに別れる。
レスポンシブWEBデザインの際、問題となるのが、『概要』『サイトマップ』の間にテキストとして表示されている『｜』の文字。
なぜ、テキストで挿入されているのかが、最大の疑問。
※HTML推薦の表記方法で書くのであれば、リストで表示させるべき項目。

<div id="contentfooter" data-container="footer">

■ログインとログアウト用エリア（左側）

<div class="leftrow">

<a rel="nofollow" href="URL">概要</a> | <a href="URL">サイトマップ</a>

</div>

■ログインとログアウト用エリア（右側）

<div class="rightrow">

</span>

<a rel="nofollow" id="logout" target="_top" href="URL">ログアウト</a>|

</span>

</div>

■Freeの広告エリア

<div class="jimdo-free-footer-ad jimdo-kddi-footer">

<a class="jimdo-footer-branding pull-left" href=" URL">Jimdo</a>

<strong>あなたもJimdoで無料ホームページを。</strong>

<a id="fallback-ad-textlink" href=" URL" class="jimdolink">http://jp.jimdo.com</a>から登録するだけ
</p>

</div>

</div>

body {

height: 100%;
margin: 0;

padding: 0;

color: #333333;