jekyll で作成したサイトにサイドバー広告つけてみた

By taiyou July 21, 2025

はじめに

このサイトは beautiful-jekyll-master のテンプレートから作成されています。こちらですね beautifuljekyll

しかし、テンプレートを見て貰えばわかるのですが、左右に広告やコンテンツ情報を載せるには自分で html と css をいじる必要があります。とても簡単に実装できるので参考に慣ればと思います。

完成形

今見ているこのページの両サイドに広告が表示されていると思います。
このような形で作成できます。

今回のコードの github リンク
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

Tags: Jekyll