SAMPLE IMAGE この画像は差し替えてご利用ください

021D 独自レイアウト

独自テンプレートとして、JimdoExpertの「Jimdoベネフィットサポーター」による無料テンプレートから「シンプル」レイアウトを使用する。

021D-1 Jimdo ベネフィットサポーターの独自レイアウト

サンプルページのレイアウト

レイアウトを、使用されている HTML の ID に関連付けして表示してみた。

jdg021_44:独自テンプレートのレイアウト(Jimdoベネフィットサポーター)
jdg021_44:独自テンプレートのレイアウト(Jimdoベネフィットサポーター)

サンプルページの HTML コード

HTML コードレイアウトとの関連を表してみた。

(クリックすると拡大表示、さらにF11を押すと全画面表示となる)

jdg021_45:独自テンプレートで見るHTMLコードとレイアウトの関連
jdg021_45:独自テンプレートで見るHTMLコードとレイアウトの関連

使用されている主な HTML タグの解説:

<div id="○○○">~</div>

div要素は、表示する要素をグループ化したユニットを示す。ユニット名は、id="○○○"で指定され、表示のされ方は、CSSコードで記述される。

<main id="◎◎◎">~</main> ------------------- ライン14~16

main要素は文書内の主要なコンテンツを表します。主要なコンテンツとは、Webサイト内の各ページで繰り返し使われるヘッダーやナビゲーション、検索フォームやフッター情報などを除いた、その文書内で主な内容となる部分を指します。

<aside id="△△△">~</aside> ------------------- ライン21~23

aside要素は、その部分が文書内における補足情報のセクションであることを示す際に使用します。

<footer id="□□□">~</footer> ----------------- ライン25~30

footer要素は文書やセクションのフッターを表します。著者情報や関連記事へのリンクを記述する場合によく利用されます。フッターというと、セクションの末尾に配置されているイメージがありますが、footer要素はセクションの最初に置いても問題ありません。

<var>~</var> --------------------------- ライン15、19、22、29

var要素は変数を表します。<var>~</var>で囲まれた部分が変数や引数であることを示します。

独自テンプレートに必要な構成パーツ

テンプレートの構成パーツは、ContentSidebarNavigationFooter が必要です。独自のレイアウトを適用するには、独自レイアウトにこれらの構成パーツを含み、且つ詳細仕様に適応する必要があります。HTMLコードでは以下のように記述する。

  • コンテンツ部分

<var>content</var>

  • サイドバー部分

<var>sidebar</var>

  • ナビゲーション部分

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

  • フッター部分

<var>footer</var>

021D-1 タイトルの変更

詳細は、023D 独自レイアウトを参照する。

021D-2 メインビジュアルの変更

詳細は、022D 独自レイアウトを参照する。

021D-4 スマホ要素にパソコン版のデザインを継承