jekyll で作成したサイトにサイドバー広告つけてみた
目次
はじめに
このサイトは beautiful-jekyll-master のテンプレートから作成されています。 こちらですね beautifuljekyll
しかし、テンプレートを見て貰えばわかるのですが、左右に広告やコンテンツ情報を載せるには自分で html と css をいじる必要があります。 とても簡単に実装できるので参考に慣ればと思います。
完成形
今見ているこのページの両サイドに広告が表示されていると思います。
このような形で作成できます。
コードをいじる
_layout/post.html
post.html の row クラスを以下のように書き換えます。 コメントアウトしている箇所に好きに広告やコンテンツを埋め込みましょう。
<div class="main-row">
<div class="left-container">
<!-- サイドバー右 -->
</div>
<div class="center-container">
<!-- メインコンテンツ -->
</div>
<div class="right-container">
<!-- サイドバー左 -->
</div>
</div>
assets/css/beautifuljekyll.css
以下を付け加えます。
.main-row {
display: flex;
}
.left-container {
width: 200px;
min-width: 100px;
padding-right: 2.25rem;
}
.right-container {
width: 200px;
min-width: 100px;
padding-left: 2.25rem;
}
.center-container {
flex: 1;
min-width: 0;
}
/* 幅が狭いとき、サイドバー非表示 */
@media (max-width: 900px) {
.right-container {
display: none;
}
}
@media (max-width: 1200px) {
.left-container {
display: none;
}
}
おわりに
その他の記事もぜひご覧ください！
お問い合わせ: hiromacha1116@icloud.com
