Bloggerデザイン : モダンタイムライン

1. デザインのタイプ

【ワイド・モダン・タイムライン】
ゆとりのある時刻表示で視認性の高いスケジュールデザインです。

• 12:30 - 1:00pm

  Registration

  Get here on time, it's first come first serve.

  Be late, get turned away.

• 2:30 - 4:00pm

  Opening Ceremony

  Get ready for an exciting event.

• 5:00 - 8:00pm

  Main Event

  This is where it all goes down.

• 8:30 - 9:30pm

  Closing Ceremony

  The winners bask in their own glory.

2. デザインの特徴

• ゆとりのある時刻表示
  左側の時間エリアを広く確保したことで、長めのスケジュール表記でも窮屈さがなく、高級感のあるレイアウトになっています。
• デバイスを選ばない美しさ
  パソコンで見るときは横幅を活かしたワイドな表示に、スマホで見るときは自動で縦一列に並び替わるため、どの画面で見ても美しさが崩れません。

3. 紹介コード

<div class="blg-timeline-wrapper">

  <ul class="blg-timeline">

    <li class="blg-event">
      <div class="blg-date">時刻</div>
      <div class="blg-content">
        <h3>タイトル</h3>
        <p>本文</p>
      </div>
    </li>

    <li class="blg-event">
      <div class="blg-date">時刻</div>
      <div class="blg-content">
        <h3>タイトル</h3>
        <p>本文</p>
      </div>
    </li>

    <li class="blg-event">
      <div class="blg-date">時刻</div>
      <div class="blg-content">
        <h3>タイトル</h3>
        <p>本文</p>
      </div>
    </li>

    <li class="blg-event">
      <div class="blg-date">時刻</div>
      <div class="blg-content">
        <h3>タイトル</h3>
        <p>本文</p>
      </div>
    </li>

  </ul>
</div>

<style>
/* 全体のコンテナ */
.blg-timeline-wrapper {
  max-width: 900px;
  margin: 80px auto;
  padding: 0 20px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.blg-timeline-title {
  text-align: center;
  font-size: 2.2em;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 60px;
}

/* タイムライン */
.blg-timeline {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 700px;
  position: relative;
}

/* 縦ライン：重複を統合（155pxを適用） */
.blg-timeline::before {
  content: "";
  position: absolute;
  left: 155px;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, #4298C3, rgba(66, 152, 195, 0.3));
}

/* 各イベント */
.blg-event {
  display: flex;
  margin-bottom: 60px;
  position: relative;
}

.blg-date {
  width: 120px;
  text-align: right;
  padding-right: 20px;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #888;
}

/* コンテンツカード */
.blg-content {
  flex: 1;
  padding: 25px 30px 25px 40px;
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.06);
  transition: all .3s ease;
}

.blg-event:hover .blg-content {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

/* ドット：重複を統合（-9pxを適用） */
.blg-content::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 5px;
  width: 11px;
  height: 11px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #4298C3;
}

/* 見出し */
.blg-event h3 {
  margin: 0 0 12px 0;
  font-size: 1.25em;
  font-weight: 600;
}

/* テキスト */
.blg-event p {
  margin: 0 0 10px 0;
  line-height: 1.7;
  color: #555;
}
</style>