Blogger TIPS

Googleのブログサービス「Blogger」のテンプレート・カスタマイズ・TIPSなどを紹介しています
On-The-Road

読了時間目安表示

Bloggerで「この記事は◯分で読めます」と自動表示する方法

READ MORE
Off-The-Road

ページネーション

Bloggerページネーションの決定版！厳選3パターン＋1

READ MORE

2026/02/21

event_note editBy まつゆう forumNo comments

1. デザインのタイプ

【ワイド・モダン・タイムライン】
ゆとりのある時刻表示とネオンのアクセントを組み合わせた、視認性の高いスケジュールデザインです。

Timeline Concept

  • 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">
  <h2 class="blg-timeline-title">Timeline Concept</h2>

  <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>
Read more

Bloggerデザイン : 左右交互のタイムライン

event_note editBy まつゆう forumNo comments

1. デザインのタイプ

【垂直タイムライン（バーティカル・タイムライン）】
中央に一本の軸を通し、左右交互にコンテンツを配置するスタイリッシュな履歴表示デザインです。

Read more
Read more »

Bloggerデザイン : レスポンシブ対応グリッドレイアウト

event_note editBy まつゆう forumNo comments

1. デザインのタイプ

【CSS Grid Responsive Card Layout】
CSS Gridの auto-fill と minmax を活用した、レスポンシブ対応のカード型オーソドックスなグリッドレイアウトです。

Read more
Read more »

Bloggerデザイン : 3Dレイヤー・フリップカード

event_note editBy まつゆう forumNo comments

1. デザインのタイプ

【3Dレイヤー・フリップカード】
カードが回転し、さらに文字が浮かび上がる立体的なカードデザインです。

matsu_U

遊び人

Say hello

2. デザインの特徴

  • 物理的浮遊感
    文字要素をZ軸方向に浮かせることで、奥行きのある3D効果を演出します。
  • スムーズな回転
    perspectiveとrotateYを組み合わせた、ブレのない滑らかなフリップアニメーション。

3. 紹介コード


<!-- Font Awesome -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css' rel='stylesheet'/>

<div class="flip-card-container">
  <div class="card">
    <div class="card-inner">
      <div class="front">
        <img class="img" src="画像URL"/>
        <div class="contents">
          <h2 class="title">Paolo Duzioni</h2>
          <p class="text">Web Developer</p>
        </div>
      </div>
      <div class="back">
        <div class="contents">
          <h3 class="subtitle">Say hello</h3>
          <ul class="socials">
            <li><a href="https://www.facebook.com/paoloduzioni" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
            <li><a href="https://twitter.com/PaoloDuzioni" target="_blank"><i class="fab fa-twitter-square"></i></a></li>
            <li><a href="https://www.instagram.com/paoloduzionidev/" target="_blank"><i class="fab fa-instagram-square"></i></a></li>
            <li><a href="https://www.linkedin.com/in/paolo-duzioni-a3162716a/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap");

.flip-card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    font-family: "Source Sans Pro", sans-serif;
}

.flip-card-container .card {
    background-color: transparent;
    width: 320px;
    height: 450px;
    margin: 1rem;
    perspective: 1000px;
}

.flip-card-container .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card-container .card:hover .card-inner {
    transform: rotateY(180deg);
}

.flip-card-container .front, 
.flip-card-container .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

.flip-card-container .front {
    background-color: #6200EA;
    color: white;
    z-index: 2;
    transform: rotateY(0deg);
}

.flip-card-container .front .img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    filter: grayscale(70%) brightness(40%);
    transform: translateZ(0);
}

.flip-card-container .back {
    background-color: #FF9E80;
    background-image: linear-gradient(-45deg, #ff774d, #FF9E80);
    color: white;
    transform: rotateY(180deg);
}

.flip-card-container .contents {
    position: relative;
    z-index: 3;
    transform: translateZ(80px); 
}

.flip-card-container .card .contents .title {
    font-size: 2.25em;
    color: #fff !important;
    margin: 0 !important;
}

.flip-card-container .card .contents .title::after, 
.flip-card-container .card .contents .subtitle::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    margin: 1rem auto;
    background: #fff;
}

.flip-card-container .card .contents .subtitle {
    font-size: 2em;
    color: #fff !important;
    margin: 0 !important;
}

.flip-card-container .card .contents .text {
    font-size: 1.125em;
    margin: 0 !important;
}

.flip-card-container .socials {
    list-style: none !important;
    display: flex;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
}

.flip-card-container .socials a {
    display: inline-block;
    margin: .5rem;
    font-size: 2em;
    color: #fff !important;
    transition: transform .3s;
}

.flip-card-container .socials a:hover {
    transform: translateY(-5px) translateZ(20px);
}
</style>
Read more

Bloggerデザイン : Border Animation Hover Card

event_note editBy まつゆう forumNo comments

1. デザインのタイプ

【Border Animation Hover Card】
画像がシネマティックに暗転し、時間差で四方から白い枠線が浮かび上がる、洗練されたホバーエフェクト・カードです。ギャラリーサイトやポートフォリオで目を引く、インタラクティブなグリッドレイアウトを採用しています。

Read more
Read more »

Bloggerデザイン : Expanding Flex Accordion

event_note editBy まつゆう forumNo comments

1. デザインのタイプ

【Expanding Flex Accordion】
Flexboxの伸縮性を最大限に活用した、インタラクティブな画像ギャラリーです。マウスを乗せたカードが滑らかに広がり、写真の全貌を映し出すモダンなレイアウトを採用しています。

Read more
Read more »

Bloggerデザイン : グリッドズームカード

event_note editBy まつゆう forumNo comments

1. デザインのタイプ

【Grid Hover Zoom Card】
洗練されたグリッドレイアウトを採用し、ホバー時にカードが滑らかに拡大しながら、詳細情報が浮かび上がるモダンなギャラリーデザインです。

Read more
Read more »