自分で組み立てるテンプレート

footer1

フッターメニューの他、ロゴやSNSアイコン入り。

<div>
<p class="logo"><img src="images/logo_white.png" alt="SAMPLE COMPANY"></p>
<p>東京都XXX区XXXXビル１F<br>
03-0000-0000</p>
<ul class="sns1-parts">
<li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-line"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>

<div>
<div class="menu">
<ul>
<li><a href="#">ここにメニューを入れます</a></li>
<li><a href="#">ここにメニューを入れます</a></li>
<li><a href="#">ここにメニューを入れます</a></li>
<li><a href="#">ここにメニューを入れます</a></li>
<li><a href="#">ここにメニューを入れます</a></li>
</ul>
<ul>
<li><a href="#">ここにメニューを入れます</a></li>
<li><a href="#">ここにメニューを入れます</a></li>
<li><a href="#">ここにメニューを入れます</a></li>
<li><a href="#">ここにメニューを入れます</a></li>
<li><a href="#">ここにメニューを入れます</a></li>
</ul>
<ul>
<li><a href="#">ここにメニューを入れます</a></li>
<li><a href="#">ここにメニューを入れます</a></li>
<li><a href="#">ここにメニューを入れます</a></li>
</ul>
</div>
<small>Copyright© SAMPLE COMPANY All Rights Reserved.</small>
</div>

</footer>

html

/*フッター
---------------------------------------------------------------------------*/
#footer1-parts * {margin: 0;padding: 0;}
#footer1-parts ul {list-style: none;}

/*フッターボックス全体*/
#footer1-parts {
	font-size: 0.8rem;	/*文字サイズ80%*/
    padding: var(--content-space-s);	/*ボックス内の余白。theme.cssのcontent-space-sを読み込みます。*/
    background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
    color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*ロゴの最大幅*/
#footer1-parts .logo {
	max-width: 400px;
}

/*フッター直下のdiv（２つのブロックそれぞれ）*/
#footer1-parts > div {
	display: flex;
	flex-direction: column;	/*縦積み*/
	gap: 1rem;	/*要素間に空けるスペース。１文字分。*/
}

/*2つ目（右側）ブロック*/
#footer1-parts .menu {
    display: flex;	/*フッターメニューを横並びに*/
    gap: 2rem;		/*メニュー（ul）同士の間に空けるスペース。２文字分。*/
    align-items: flex-start;
}

/*画面幅900px以上の追加指定*/
	@media (min-width: 900px){
	
	/*フッターボックス全体*/
	#footer1-parts {
		display: flex;	/*横並びにする*/
		justify-content: space-between;
		gap: 2rem;	/*左右のボックスの間に空けるスペース。２文字分。*/
		align-items: start;
	}
	
	/*1つ目（左側）ブロック*/
	#footer1-parts > div:nth-of-type(1) {
		flex: 0 0 30%;	/*幅を30%。お好みで。*/
	}

}/*追加指定ここまで*/

/*Copyright部分*/
#footer1-parts small {
	display: block;
	text-align: right;	/*右寄せ*/
}

/*SNSアイコン
---------------------------------------------------------------------------*/
.sns1-parts {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;		/*アイコン同士のマージン的な要素。１文字分。*/
}

.sns1-parts i {
	font-size: 30px;	/*アイコンサイズ*/
}

css

footer2

Google Mapと週間tableとSNSアイコン入り。病院、ショップ、飲食店などに。

<div>
<p class="logo"><img src="images/logo_white.png" alt="SAMPLE COMPANY"></p>
<p>東京都XXX区XXXXビル１F<br>
03-0000-0000</p>
<ul class="sns1-parts">
<li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-line"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
<table class="ta-week2-parts">
<tr>
<th>受付時間</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
<th>日</th>
</tr>
<tr>
<td>9:00 - 12:00</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>×</td>
</tr>
<tr>
<td>14:00 - 18:00</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>△</td>
<td>○</td>
<td>×</td>
<td>×</td>
</tr>
</table>
<p class="r">△は予約専門です。×は休診日です。</p>
</div>

<div>
<h3>アクセス</h3>
<p><a href="https://template-party.com/file/pickup_googlemap.html">GoogleMapの地図を変更する方法はマニュアルをご覧下さい。</a></p>
<div class="others-iframe1-parts">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.0448418561778!2d139.74267721573196!3d35.675897837870934!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b89b2e1c8b1%3A0x59a123e3d5ac5ab6!2z44CSMTAwLTAwMTQg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65rC455Sw55S677yR5LiB55uu77yX4oiS77yR!5e0!3m2!1sja!2sjp!4v1545036128899" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<small>Copyright© SAMPLE COMPANY All Rights Reserved.</small>
</div>

</footer>

html

/*フッター
---------------------------------------------------------------------------*/
#footer2-parts * {margin: 0;padding: 0;}
#footer2-parts ul {list-style: none;}

/*フッターボックス全体*/
#footer2-parts {
	font-size: 0.8rem;	/*文字サイズ80%*/
    padding: var(--content-space-s);	/*ボックス内の余白。theme.cssのcontent-space-sを読み込みます。*/
    background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
    color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*ロゴの最大幅*/
#footer2-parts .logo {
	max-width: 400px;
}

/*フッター直下のdiv（２つのブロックそれぞれ）*/
#footer2-parts > div {
	display: flex;
	flex-direction: column;	/*縦積み*/
	gap: 1rem;	/*要素間に空けるスペース。１文字分。*/
}

/*2つ目（右側）ブロック*/
#footer2-parts .menu {
    display: flex;	/*フッターメニューを横並びに*/
    gap: 2rem;		/*メニュー（ul）同士の間に空けるスペース。２文字分。*/
    align-items: flex-start;
}

/*画面幅900px以上の追加指定*/
	@media (min-width: 900px){
	
	/*フッターボックス全体*/
	#footer2-parts {
		display: flex;	/*横並びにする*/
		justify-content: space-between;
		gap: 2rem;	/*左右のボックスの間に空けるスペース。２文字分。*/
		align-items: start;
	}
	
	/*1つ目（左側）ブロック*/
	#footer2-parts > div:nth-of-type(1) {
		flex: 0 0 50%;	/*幅を50%。お好みで。*/
	}

/*2つ目（右側）ブロック*/
	#footer2-parts > div:nth-of-type(2) {
		flex: 1;
		min-width: 0;
	}

}/*追加指定ここまで*/

/*Copyright部分*/
#footer2-parts small {
	display: block;
	text-align: right;	/*右寄せ*/
}

/*SNSアイコン
---------------------------------------------------------------------------*/
.sns1-parts {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;		/*アイコン同士のマージン的な要素。１文字分。*/
}

.sns1-parts i {
	font-size: 30px;	/*アイコンサイズ*/
}

/*Google Map用
---------------------------------------------------------------------------*/
.others-iframe1-parts {
	width: 100%;
	aspect-ratio: 16 / 9;	/*マップのアスペクト比。お好みで。*/
	position: relative;
	overflow: hidden;
}
.others-iframe1-parts iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

/*テーブル（ta-week2-parts）
---------------------------------------------------------------------------*/
/*テーブルブロック設定*/
.ta-week2-parts {
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
	border: 1px solid var(--border-color);	/*テーブル外側の線の幅、線種、varは色の指定でtheme.cssのborder-colorを読み込みます。*/
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*受付時間の幅*/
.ta-week2-parts th:first-child,
.ta-week2-parts td:first-child {
	width: 25%;
}

/*各曜日の幅*/
.ta-week2-parts th:not(:first-child),
.ta-week2-parts td:not(:first-child) {
	width: calc(75% / 7);	/*受付時間で25%とっているので残りの75%を7で割る*/
}

/*th(曜日)とtd(時間)*/
.ta-week2-parts th,
.ta-week2-parts td {
	padding: 1rem 0;	/*ボックス内の余白。上下に１文字分、左右は0。*/
	text-align: center;	/*テキストをセンタリング*/
	border-bottom: 1px solid var(--border-color);	/*下の線の幅、線種、varは色の指定でtheme.cssのborder-colorを読み込みます。*/
	border-right: 1px solid var(--border-color);	/*右の線の幅、線種、varは色の指定でtheme.cssのborder-colorを読み込みます。*/
}

/*th(曜日)とtd(時間)のそれぞれ最後の右側の線を消す*/
.ta-week2-parts th:last-child,
.ta-week2-parts td:last-child {
	border-right: none;
}

/*最後の行の下線を消す*/
.ta-week2-parts tr:last-child td {
	border-bottom: none;
}

/*１行目。th(曜日)の追加指定*/
.ta-week2-parts th {
	background: var(--light-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*２行目以降。*/
.ta-week2-parts td {
	border-bottom: 1px solid var(--border-color);	/*下の線の幅、線種、、varは色の指定でtheme.cssのborder-colorを読み込みます。*/
}

css

footer3

SNSアイコンと少なめフッターメニュー。

html

css

footer4

フッターメニュー。メニュー数が多いサイト向け。

html

/*フッター
---------------------------------------------------------------------------*/
#footer4-parts * {margin: 0;padding: 0;}
#footer4-parts ul {list-style: none;}

/*フッター全体を囲むブロック*/
#footer4-parts {
	font-size: 0.8rem;	/*文字サイズ80%*/
    padding: var(--content-space-s);	/*ボックス内の余白。theme.cssのcontent-space-sを読み込みます。*/
    background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
    color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*リンクの下線を出さない*/
#footer4-parts a {
	text-decoration: none;
}

/*フッターメニュー*/
#footer4-parts .menu-parts {
	margin-bottom: 2rem;	/*下に２文字分のスペースをあける*/
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));	/*メニューを2列*/
	gap: 2rem;	/*メニュー同士の間に空けるスペース。2文字分。*/
}

/*メニューリンク*/
#footer4-parts .menu-parts a {
	opacity: 0.6;	/*色を60%だけ出した状態*/
}

@media (min-width: 900px){
	
	/*画面幅900px以上の追加指定*/
	#footer4-parts .menu-parts {
		grid-template-columns: repeat(4, minmax(0, 1fr));	/*メニューを4列*/
	}
	
	}/*追加指定ここまで*/

/*Copyright部分*/
#footer4-parts small {
	display: block;
	text-align: center;	/*センタリング*/
}

/*SNSアイコン
---------------------------------------------------------------------------*/
.sns1-parts {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;		/*アイコン同士のマージン的な要素。１文字分。*/
	justify-content: center;
}

.sns1-parts i {
	font-size: 30px;	/*アイコンサイズ*/
}

css

フッター用パーツ

フッター専用パーツ

フッター専用パーツ一覧

footer1

footer2

footer3

footer4

自分で作る
テンプレート

下準備

パーツ選択

旧パーツコーナー

下準備

パーツ選択

旧パーツコーナー

フッター用パーツ

フッター専用パーツ

フッター専用パーツ一覧

footer1

footer2

footer3

footer4

自分で作るテンプレート

下準備

パーツ選択

旧パーツコーナー

下準備

パーツ選択

旧パーツコーナー

自分で作る
テンプレート