Border

Grid Layoutでデザインしたモバイルファーストに最適化したユーザーフレンドリーなborderのみのシンプルなデザイン構成です。
どんな大きさの画面でも見やすく、ヘッダー画像もレスポンシブデザインに対応しています。
iPhone iPadの縦向きは1カラム、PC iPadの横向きは2カラムレイアウトになります。

記事一覧アーカイブページカテゴリーページ最新記事ページ有料会員用トップページはPCは3列のカード型、iPadは2列のカード型になります。

質問などはこちらのコメント欄にお願いします。
質問などお問い合わせ
 今すぐ直接書く場合はこちら

はてなブログ用CSSエントリー記事一覧
はてなブログ用CSS

CSS用変換ツールエントリー記事一覧
CSS用変換ツール

テキスト⇒画像コンバーターエントリー記事
テキスト⇒画像コンバーター

テーマBorderにグローバルナビを設置する場合は
「デザイン」→「カスタマイズ」→「ヘッダ」→「ブログタイトル下」に以下のコードをコピペしてURLと書いている部分とリンクタイトルを変更してください。これで設置は完了です。

<!-- Bootstrap 5 ナビゲーションバー（軽量版）HTML -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <!-- トグルボタン -->
    <button class="navbar-toggler" type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="メニューを切り替え">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- ナビメニュー -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="/">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="URL">プロフィール</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="URL">アーカイブ</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="URL" role="button" aria-expanded="false">
            カテゴリー
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="URL">子カテゴリ1</a></li>
            <li><a class="dropdown-item" href="URL">子カテゴリ2</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="URL">リンク</a>
        </li>
      </ul>

      <!-- 🔍 検索フォーム -->
      <form class="d-flex" role="search" action="/search" method="get">
        <input class="form-control me-2" type="search" name="q" placeholder="検索..." aria-label="検索" id="searchInput" required="">
        <button class="btn btn-outline-light" type="submit">検索</button>
      </form>
    </div>
  </div>
</nav>

<!-- Bootstrap 5 ナビゲーションバー（軽量版）Vanilla JS -->
<script>
/* ============================
   ナビ開閉（.is-open 対応）
   ============================ */
document.addEventListener("DOMContentLoaded", function() {
  const toggler = document.querySelector(".navbar-toggler");
  const nav = document.querySelector("#navbarSupportedContent");
  toggler.addEventListener("click", function() {
    nav.classList.toggle("is-open");
  });
});
</script>

完成イメージ

ヘッダー画像を設定した場合の例

テーマBorderのMarkdownモードで書いたコードブロックの背景色を変更したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペして好みのスタイルに変更してください。

/* Markdownモードで書いたコードブロックの背景色を変える */

.entry-content pre.code {
    background-color: #333;
    color: #69f;
}

.entry-content pre.code::before {
    display: block;
    height: calc(.875rem + .5rem);
    width: 100%;
}

完成イメージ

テーマBorderのサイドバーの注目記事のランキングカウンターを消したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。

/* ランキングカウンターを消す */

.entries-access-ranking li::before {
    background-color: transparent;
    content: none;
}
.entries-access-ranking .urllist-date-link,
.entries-access-ranking .urllist-title-link {
    margin-left: 0;
}

テーマBorderのサイドバーのタイトルを左寄せにしたい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。

/* サイドバーのタイトルを中央寄せにする */

.hatena-module-title {
    text-align: center;
}

テーマBorderのサイドバーのボーダーラインを消したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。

/* サイドバーのボーダーラインを消す */

.hatena-module-title::before,
.hatena-module-title::after {
    background-color: transparent;
    display: inline-block;
    height: initial;
    padding-inline: 0;
    position: initial;
    width: initial; 
}