Jimdoで出力されるHTML分析
Jimdoで独自レイアウトやカスタマイズをする場合Jimdoが書き出しているHTMLを分析します。今回、Jimdo研究所がJimdoの独自レイアウトやカスタマイズを行うために利用しているメモを公開いたします。この情報がJimdoで独自レイアウトを制作しなくてはならない方のための役に立てば幸いです。
body
トップページ閲覧時
<body class="body cc-page cc-page-index cc-indexpage cc-pagemode-default cc-content-parent" id="page-2338339792">
トップページのclass名
body
cc-page
cc-page-index (トップページのみ使用)
cc-indexpage (トップページのみ使用)
cc-pagemode-default (閲覧時のみ使用)
cc-content-parent
その他のページ
<body class="body cc-page cc-pagemode-default cc-content-parent" id="page-2338340192">
使用されているclass名
body
cc-page
cc-pagemode-default (閲覧時のみ使用)
cc-content-parent
管理画面にログイン中
<body class="body cc-page cc-content-parent" id="page-2338340292">
使用しているclass名(すべて共通)
body
cc-page
cc-content-parent
コンテンツエリア/サイドバー/フッターエリア
独自レイアウトを作る上で、もっとも基本となるエリアは4つある。ここでは、4つのうちの『コンテンツエリア』・『サイドバー』・『フッターエリア』を取り上げる。
『ナビゲーション』についてはとても複雑になるため別ページで取り上げることにする。
これら4つのエリアはワークフレームを作成する上でもっとも重要になる箇所である。
<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 id="cc-matrix-xxxxxxxxxx">
</div>
</div>
管理画面で保存する際に必要となると思われるID
cc-matrix-xxxxxxxxxx
<var>footer</var>
フッター部分は右側、左側、そしてFree利用時の際に表示される広告エリアに別れる。
レスポンシブWEBデザインの際、問題となるのが、『概要』『サイトマップ』の間にテキストとして表示されている『|』の文字。
なぜ、テキストで挿入されているのかが、最大の疑問。
※HTML推薦の表記方法で書くのであれば、リストで表示させるべき項目。
<div class="gutter">
<div id="contentfooter" data-container="footer">
■ログインとログアウト用エリア(左側)
<div class="leftrow">
<a rel="nofollow" href="URL">概要</a> | <a href="URL">サイトマップ</a>
</div>
■ログインとログアウト用エリア(右側)
<div class="rightrow">
<span class="loggedout">
<a rel="nofollow" id="login" href="Javascript', '2338789492');">ログイン</a>
</span>
<span class="loggedin">
<a rel="nofollow" id="logout" target="_top" href="URL">ログアウト</a>|
<a rel="nofollow" id="edit" 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>
<p class="pull-left">
<strong>あなたもJimdoで無料ホームページを。</strong>
<a id="fallback-ad-textlink" href=" URL" class="jimdolink">http://jp.jimdo.com</a>から登録するだけ
</p>
</div>
</div>
</div>
body {
height: 100%;
margin: 0;
padding: 0;
color: #333333;
font: 14px/140% Helvetica,Arial,sans-serif;
}
p {
margin: 0;
padding: 0;
color: #333333;
font: 14px/140% Helvetica,Arial,sans-serif;
}
a:link,
a:visited
a:hover{
color: #c34300;
text-decoration: underline;
font: 14px/140% Helvetica,Arial,sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
color: #333333;
font: 14px/140% Helvetica,Arial,sans-serif;
}
table,
td {
color: #333333;
font: 14px/140% Helvetica,Arial,sans-serif;
}
.c,
.cc-clear,
.clear {
clear: both;
}