ジンドゥー（jimdo）の独自レイアウトに挑戦する【超初級】
この度、jimdoの独自レイアウトに挑戦することに。ただし、大きな問題は…
ジンドゥーのもともとのテンプレートの質が高い⬅つまりテンプレートで十分と感じてしまいそうになる。
HTMLやCSSなどの知識が無いと結構つらい⬅これは勉強しないとどうしようもない部分…。
とりあえず私も今現在勉強中なのですがジンドゥーの独自レイアウトの基本からスタートさせて、自分の思った通りのホームページ作成を目指して行きたいと思います。
最終的にジンドゥーを使った完全オリジナルのホームページ作成ができるようになって「コーディング」の仕事にも手を伸ばすのが目標の一つです。同じようなことを考えておられる方や、ジンドゥーについてさらに知ろうとされている方の役に立てばと思います。
ジンドゥー独自レイアウトの基本
ジンドゥーの独自レイアウトについてまず知っておきたいのが「HTML」と「CSS」そして「ヘッダー編集」です。
- HTMLとCSSは別で記載する
- 「独自レイアウト（CSS）」は使用しない
- ヘッダー編集にて<head>部分を記載する＝CSSとほぼ同じ
HTMLとCSSは別記載です…これはサイト作成を本職でされる方には当然のことかと思われますが、ジンドゥーでももちろんそうなっています。
HTMLはサイトの骨格作りで、CSSで骨格に肉付け（装飾）を別々で行っていきます。
「独自レイアウト（CSS）」はスマートフォン用の編集画面となります。これが表記としてややこしいのですが、基本的には使いません。また別記事で解説しますが、この「独自レイアウト（CSS）」によってPC版とスマートフォン版のサイトを別で作るとスマホ版のデザインが崩れがちで、広告が消せない（消せるのかもしれませんが）です。
そのため「独自レイアウト（CSS）」は使用することなく、HTMLとCSSによってレスポンシブ対応のサイトつまり、PC・スマホどちらにも対応できるようなコードを書いていくのが良いです。
<head>部分への記載は「ヘッダー編集」で行います。通常のサイト作成では<head>～</head>の間に入る部分をここに記載するわけです。ここはCSSに書く場合と被る部分もあるのですが、その場合どっちに記載しても良い感じになっています。
HTMLとCSS
独自レイアウトのHTMLとCSSの記載方法
まず、HTMLとCSSの記載場所です。「管理メニュー」⇒「デザイン」⇒「独自レイアウト」から編集してゆきます。
「独自レイアウト」の中に「HTML」と「CSS」「ファイル」の3つに分かれていてそれぞれを使い分けてゆきます。
HTMLについて
使用しなければならないジンドゥー独自のコード
<var>content</var>
<var>sidebar</var>
<var>footer</var>
<var>navigation[1|2|3]</var>
これらのコードは確実に使用していかないといけないジンドゥー独自のコードです。独自レイアウトのHTML編集画面では上段に「画像の利用」「content」～「navi（breadcrumb）」までのコードを自動挿入できるボタンが用意されています。
それぞれをクリックしてみると自動的にjimdo独自のコードが書かれます。この機能も使えなくは無いですが、基本的にはこれらのコードは書いてある前提（shopping cartなどは無くても良い）ですので、機能として覚えておくと良いかなという程度です。
「画像の利用」は後述する、ファイルにダウンロードした画像を挿入できる機能で、ちょっとだけ便利ですね。
それぞれのコードの解説
「content」
コンテンツですね、読んだままです。通常編集画面にて「コンテンツ追加」と出てくる、メインの部分になります。
「sidebar」
これもそのままサイドバーですね。「content」の右か左にくるバーの部分になります。
「footer」
つまりフッター。スクロールして一番下にくる部分です。
「navigation[1|2|3]」
わかる通り、ナビゲーションの意味ですね。通常の編集画面で「ナビゲーション編集」を行えるあの部分のことです。ナビゲーションには[1|2|3]ではないバージョンもあります。
「navi（nested）」の部分をクリックすると「<var levels="1,2,3" expand="true" variant="nested" edit="1">navigation</var>」というコードが書かれ、これを用いてドロップダウンのメニューを実装することができるようになります。（メニューのすべての階層が表示されます）
「navi（breadcrumb）」はパンくずリストを実装する際に使えるコードです。
これらのコードを入れ込みつつ、うまいことサイトを構築していくことになります。これらのコードが残ることで、ジンドゥーの簡単な操作感を維持したまま、サイト全体の構成のみを編集することが可能なのです。
CSSについて
とても基本的なことなのですが、CSSはHTMLと完全に関係しあっていてCSSのみでは全く動きません。
この記事ではざっくりとした説明にとどめますが、HTML編集で記載したコードにCSSで形や色や配置などを定義していくというイメージですね。
HTMLとCSSについてはオンラインプログラミング学習ソフトの「progate」などでちょっと勉強すると大体のことがわかるようになってきます。アプリ版もとても扱いやすいので、無料の初級コースだけでもHTML、CSSを学ぶと書き方が見えてきます。
ファイルについて
ヘッダー編集について
ヘッダー編集は独自レイアウトでなくても編集ができる部分です。例えば「見出し」 の体裁を変更するためにコードを書くことですべてのページに反映される部分です。(有料プランであれば各ページで変更可能になります)
ヘッダー編集の方法
「管理メニュー」⇒「基本設定」⇒「ヘッダー編集」で可能です。
<script>、<style>、<meta>、<base>、<link>の5種類のタグを使用できます。
ここの編集はCSSの編集とほぼ同様のことが可能です。使い分けとしてはヘッダー編集にはレイアウトの変更後も変わらない要素を書きこんでおき、CSSのほうにはレイアウト要素のみにするとわかりやすくなります。
例えば「ヘッダー編集」部分にはJavascriptの記載を行って、スマホ版のメニューを作成するためのコードなどを書き込んだり、見出しの設定などをしておくことができます。
さらに、ヘッダー編集での記載のほうがCSSに書き込んだ内容よりも優先されるようになっています。
それで、CSSで書いたコードを上書きしてしまうこともできますし、CSSのHTMLの編集をしてしまう前に「ヘッダー編集」に書き込んでみて試しに変更してみるということもできます。（CSSの記載は長くなるのが普通ですので、探すのが面倒ですしね）
ジンドゥー独自レイアウト【超基本】まとめ
今回はジンドゥーでの独自レイアウトの基本的な部分のみを扱ってみました。これから実際にどんな具合で独自レイアウトを使ったオリジナルのホームページを作成していけるのかを書いていきます。
はじめに「ヘッダー部分」をカスタマイズしてヘッダーにナビゲーションを設置する方法を解説してゆきます。
