カエレバ・ヨメレバの見た目をすべて縦並びで整えてみました。

この投稿をInstagramで見る

mitamura hiro(@mitamurahiro)がシェアした投稿

CSS

.cstmreba {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px;
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}

.kaerebalink-box, .booklink-box {
  text-align: center;
  width: 100%;
}

.kaerebalink-image, .booklink-image {
  margin-bottom: 10px;
}

.kaerebalink-info, .booklink-info {
  text-align: center;
}

.kaerebalink-name a, .booklink-name a {
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.kaerebalink-powered-date, .booklink-powered-date {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

/* ボタンを常に縦並び */
.kaerebalink-link1, .booklink-link2 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  width: 100%;
}

.kaerebalink-link1 a, .booklink-link2 a {
  display: block;
  text-align: center;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  background: #ffcc00;
  border-radius: 5px;
  text-decoration: none;
  width: 100%;
}

.kaerebalink-link1 a:hover, .booklink-link2 a:hover {
  background: #ffdb4d;
}

また、以下はPCでは横並び、SPでは縦並びの例です。

.cstmreba {
  display: flex;
  flex-wrap: wrap; /* 必要に応じて折り返し */
  flex-direction: row; /* PCでは横並び */
  justify-content: space-between;
  align-items: center;
  max-width: 600px; /* PC時の幅調整 */
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}

.kaerebalink-box, .booklink-box {
  display: flex;
  align-items: center; 
  width: 100%; 
  justify-content: space-between;
}

.kaerebalink-image, .booklink-image {
  margin-right: 10px; /* PC時の画像間隔 */
  width: 30%; /* 画像の幅調整 */
}

.kaerebalink-info, .booklink-info {
  text-align: left; 
  width: 65%; /* 情報部分の幅を調整 */
}

.kaerebalink-name a, .booklink-name a {
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.kaerebalink-powered-date, .booklink-powered-date {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

/* ボタン：PC時の調整 */
.kaerebalink-link1, .booklink-link2 {
  display: flex;
  flex-direction: row;
  gap: 10px; /* ボタン間の余白を広げる */
  margin-top: 10px;
}

.kaerebalink-link1 a, .booklink-link2 a {
  display: block;
  text-align: center;
  padding: 10px 15px; /* ボタンの内側余白を少し増加 */
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #e47fb0;
  border-radius: 5px;
  text-decoration: none;
  flex-grow: 1; /* ボタンを均等に広げる */
  min-width: 120px; /* 必要に応じて最低幅を設定 */
}

.kaerebalink-link1 a:hover, .booklink-link2 a:hover {
  background: #ffdb4d;
}


/* スマホ用メディアクエリ */
@media (max-width: 768px) {
  .cstmreba {
    flex-direction: column; /* 縦並び */
    max-width: 300px;
  }

  .kaerebalink-box, .booklink-box {
    flex-direction: column; /* 画像・テキスト・ボタンを縦並びに */
    align-items: center;  /* 中央寄せ */
    text-align: center;
  }

  .kaerebalink-image, .booklink-image {
    margin-bottom: 10px; /* 画像の下にスペースを追加 */
    width: 100%; /* 幅を100%に */
  }

  .kaerebalink-info, .booklink-info {
    width: 100%; /* テキストも100%幅に */
  }

  .kaerebalink-link1, .booklink-link2 {
    flex-direction: column; /* ボタンも縦並びに */
    width: 100%;
  }
}