CSSで操作性向上を実現する方法（戻るボタン文字、続きを読む表示・横スクロール｜YouTube・関連記事）

/************************************
  Cocoon関連記事を横スクロール化（Rev5）
************************************/

/* 親コンテナ（関連記事全体） */
.related-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 15px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}

/* カード本体（1記事分） */
.related-entry-card-wrap {
    flex: 0 0 250px !important; /* 横幅固定 */
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* Cocoon の関連記事レイアウトを完全無効化 */
.related-list .related-entry-card,
.related-list .e-card,
.related-list .cf,
.related-list .related-entry-card-thumb,
.related-list .related-entry-card-content,
.related-list .related-entry-card-snippet,
.related-list .related-entry-card-meta,
.related-list .column {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    box-sizing: border-box;
}

/* スクロールバーのデザイン */
.related-list::-webkit-scrollbar {
    height: 8px;
}
.related-list::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

/* 横スクロール全体 */
.scroll-box {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 15px;
    padding-bottom: 10px;
}

/* 各動画カード（figure）を横並びにする */
.scroll-box figure.wp-block-embed {
    flex-shrink: 0;
    min-width: 260px;
    max-width: 80%;
    box-sizing: border-box;
}

/* WordPress のアスペクト比構造は壊さない */
.scroll-box .wp-block-embed__wrapper {
    width: 100%;
}

/* iframe の高さは WordPress に任せる（ここが重要） */
.scroll-box iframe {
    width: 100%;
    height: 200px !important;/*高さを固定  */
}

/* 戻るボタンにマウスを乗せると文字を表示させる */
/* PC：TOP文字を表示 */
#go-to-top .go-to-top-button::after {
  content: "TOP"; /* 表示したい文字 */
  position: absolute;
  top: -15px; /* ボタンの上に表示 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #333;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#go-to-top .go-to-top-button:hover::after {
  opacity: 1; /* ホバー時に文字を表示 */
}

/* スマホ：TOP文字を非表示 */
@media (max-width: 768px) {
  #go-to-top .go-to-top-button::after {
    content: "";
    opacity: 0 !important;
  }
}

/* 内部リンクカード・外部リンクカードの右下に「続きを読む」を表示 */
.internal-blogcard,
.blogcard {
  position: relative; /* 疑似要素の基準を作る */
}

.internal-blogcard::after,
.blogcard::after {
  content: '続きを読む \00bb';
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  font-size: 70%;
  background-color: #6495ED;
  padding: .4em 3em;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
  z-index: 2;
}