観光地タイトル1
観光地の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。
まず2カラムを囲むブロックとして、
<main>
を、
<main class="column">
に変更し、その中にメインコンテンツの
<div class="main-contents">
と、サブコンテンツ
<div class="sub-contents">
を作って下さい。
具体的には以下のような形になります。
<main class="column">
<div class="main-contents">
※ここにメインコンテンツの内容を入れます。
</div>
<div class="sub-contents">
※ここにサブコンテンツの内容を入れます。
</div>
</div>
sub-contentsを右側にもってきたい場合は、cssフォルダのstyle.cssの、
/*2・3カラム(main-contents、sub-contents設定)
の中にあるorderの数字を入れ替えて下さい。
orderは数字の小さな順に並びます。
sub-contentsを2つ入れることで、自動的に3カラムにもなります。
ただ、中央コンテンツが狭くなるので、中央ブロック用のパーツを調整する必要が出てきます。
1カラムの時のように単純にsectionにclassを指定してまうと、左のメニューに背景画像がおよばないので、main-contentsの外側に1つdivタグを追加し、そこにbg3を追加して下さい。
<div class="bg3">
<main class="column">
〜〜
</div>
</div>