おちゃのこ通信 Vol.362 - デザイン道場 - おちゃのこネットメールマガジン

このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。

皆さん、こんにちは。おちゃのこネットの刑部です。

今回のデザイン道場は、フッター上部自由記入欄に横幅100%でショップ情報を入れる方法をご紹介します。
左にショップ情報、右に写真を入れることができます。
HTMLタグ挿入とスタイルシート編集が必要です。

	https://cafe-responsive.ocnk.net/

HTMLタグを挿入する

配置/画像/コメント設定のフッター上部自由記入欄に下記のHTMLタグをコピーして貼り付けてください。それぞれ、タイトルや内容を変更してください。
必要ない項目は行を削除してください。

<div class="footer_info">
<div class="inner_footer_info">
<div class="shop_info_box">
<div class="inner_shop_info_box">
<div class="shop_info_data_box">

<div class="shop_info_data shop_info_name">Ochanoko Design</div>
<div class="shop_info_data shop_info_open"><span class="shop_info_label">OPEN:</span><span class="shop_info_desc">9:00-17:00</span></div>
<div class="shop_info_data shop_info_close"><span class="shop_info_label">CLOSE:</span><span class="shop_info_desc">土日祝</span></div>
<div class="shop_info_data shop_info_adress"><span class="shop_info_label">ADRESS:</span><span class="shop_info_desc">〒651-0096 神戸市雲井通7-1-3 ミント神戸</span></div>
<div class="shop_info_data shop_info_tel"><span class="shop_info_label">TEL:</span><span class="shop_info_desc">078-000-0000</span></div>
<div class="shop_info_data shop_info_fax"><span class="shop_info_label">FAX:</span><span class="shop_info_desc">078-000-0000</span></div>

</div>
</div>
</div>
</div>
</div>

スタイルシートを編集する

デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けてください。
※貼り付け位置は最下部にお願いします。
#inner_footer_free_top
のbackground-colorが帯の背景色となります。

.shop_info_box::after
のbackground-imageが、表示される写真画像となります。

.inner_shop_info_box
のcolorが文字色となります。

#inner_footer_free_top {
max-width: 100%;
background-color: #000000;
}

.inner_shop_info_box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}

.shop_info_box::after {
content: "";
display: block;
width: 100%;
min-height: 250px;
background-image: url(https://cafe-responsive.ocnk.net/data/cafe-responsive/image/4774525_m.jpg);
background-size: cover;
background-position: left top;
}

.inner_shop_info_box {
color: #FFFFFF;
font-size: 14px;
letter-spacing: .2em;
}

.shop_info_data_box {
padding: 40px 20px;
}

.shop_info_data {
margin: 3px 0px;
}

.shop_info_desc {
display: inline-block;
}

.shop_info_name {
font-size: 20px;
font-weight: 700;
}

.shop_info_label {
font-size: 12px;
}

@media screen and (min-width:600px) {
.shop_info_box {
display: flex;
flex-wrap: wrap;
}
.inner_shop_info_box,
.shop_info_box::after {
width: 50%;
}
.shop_info_box::after {
min-height: 500px;
}
}

なお、お問い合わせは下記ページからお願い致します。

https://www.ocnk.net/contact/index.php