タイトル: Bootstrapで両サイドを固定して広告を表示させる方法
SEOタイトル: 【CSS】 Bootstrapで両サイドを固定して広告を表示させる方法
この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。
<table border="1" cellpadding="1" cellspacing="1" style="width:750px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff"> <div class="row"><br />
<!-- 左サイドの広告 --><br />
<div class="col-lg-2 col-md-3 d-none d-md-block"><br />
<div class="ad-left"><br />
<!-- ここに左側の広告コードを追加 --><br />
</div><br />
</div></span></p>
<p><span style="color:#ffffff"> <!-- メインコンテンツ --><br />
<div class="col-lg-8 col-md-6"><br />
<div class="main-content"><br />
<!-- ここにWebサイトのメインコンテンツを追加 --><br />
</div><br />
</div></span></p>
<p><span style="color:#ffffff"> <!-- 右サイドの広告 --><br />
<div class="col-lg-2 col-md-3 d-none d-md-block"><br />
<div class="ad-right"><br />
<!-- ここに右側の広告コードを追加 --><br />
</div><br />
</div><br />
</div><br />
</div></span></p>
<p> </p>
<p><span style="color:#ffffff"><style><br />
.ad-left, .ad-right {<br />
position: fixed; /* 広告を固定する */<br />
padding-top: 10px;<br />
padding-bottom: 10px;<br />
top: 50%; /* 画面の縦方向の真ん中に広告を配置 */<br />
transform: translateY(-50%); /* 広告自体の縦方向の真ん中を基準にする */<br />
}</span></p>
<p><span style="color:#ffffff"> .ad-left {<br />
left: 0; /* 画面の左側に広告を配置 */<br />
}</span></p>
<p><span style="color:#ffffff"> .ad-right {<br />
right: 0; /* 画面の右側に広告を配置 */<br />
}</span></p>
<p><span style="color:#ffffff"> .main-content {<br />
padding: 20px;<br />
}<br />
</style></span></p>
</td>
</tr>
</tbody>
</table>