TM_BBのHTML | 1カラムに加工

2019/06/04

このテンプレートは、トップページ(index.html)は３カラムのみのサイドバー無しで、サブページ(subpage.html)は左サイドバーがデフォルトとなっています。
わたしは、全ページでサイドバー無しの１カラムで利用したかったので改造を加えました。

style.css を加工する

加工例

下図のように『PC用』の『#main』の下に『#main2』を追加します。

style.css 記述

『#main2』の記述は以下です。

	/*  トップページの1カラム  */
	#main2{
	float:right;
	width:930px;
	padding-right:15px;
	}

使用例：トップページ

トップページ表示例

下図のように『ピンク枠』を追加してみました。

トップページ(index.html)

下図のように『』と『』の間にマーカー部分を追加するのが一番簡単です。

index.html 記述

『マーカー部分』の記述例は以下です。

   <div id="main2">
<h3 class="heading">自然との調和を目指す企業です</h3>
<p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。<br>
革新的な技術で世の中を動かす企業を目指します。
</p> <br>
    </div>

使用例：サブページ

サブページもサイドバー無しの１カラムにする場合です。サイドバーを使用する場合はこれ以降の作業は不要です。

サブページ(subpage.html)

下図のようにピンクマーカー部分を変更します。
『<section id="main">』→『<section id="main2">』
『<img src="images/mainImg2.jpg" width="709" height="140" alt="">』→『<img src="images/mainImg2.jpg" width="922" height="140" alt="">』

幅を709から922に変更しただけでは高さは140ではなく182になります。
次項のフォント・文字サイズ変更を採用する場合は、高さ140の画像にするとスローガン(div class="slogan")がスマホサイズで画像からはみ出しました。高さ182の画像と差し替えると上手くいきました。

サブページ(subpage.html) 続き

下図のように『』と『』の間のマーカー部分を削除します。

これだけでサブページも１カラムで作成できます。

1カラムに加工