Xwrite トップページの自動で流れ...
 
通知
すべてクリア

Xwrite トップページの自動で流れるデザイン例

3 投稿
2 ユーザー
0 Reactions
528 表示
Mail_Info
(@mail_info)
投稿: 35
Trusted Member
トピックスターター
 

Xwriteのトップページにデザイン例がゆっくりと左から右に移動する機能が知りたいです。

該当するアップデート情報や機能を探しましたが、見つけることが出来ず質問となります。

Xwriteバージョン
4.0.0
WordPressバージョン
6.8.3
PHPバージョン
8.3
ガイドラインへの同意
フォーラムガイドライン」に同意します。
個人情報の記載に関する確認
個人情報の記載がないことを確認しました。

 
投稿済 : 2025年11月26日 11:42 AM
hamada(XWRITE開発)
(@hamada)
投稿: 323
Reputable Member Moderator
 

@mail_info さま

ご質問いただきましてありがとうございます。
返答が遅くなり申し訳ございません。

ご質問いただいた部分については、
「カスタムHTML」と「インラインCSS」を組み合わせて調整を行っております。
詳しくは添付のサンプルコードをご確認ください。

以下の手順でご利用いただけますので、ぜひお試しください。

1.ソースコードをコピー
2.カスタムHTMLブロックを挿入
3.カスタムHTMLブロック内に1でコピーしたものをペースト
4.右上縦3点リーダー(︙)をクリックして「ブロックへ変換」を選択

行っていることとしては、CSSの無限ループスライダーを実装している形です。

テーマ標準の機能として同様の表現ができるブロックを追加できないか、今後の開発にて検討させていただきます。

 

ソースコード

<div class="infinite-slider">
  <div class="slider-track">
    <a href="#" target="_blank" rel="noreferrer noopener"><img src="https://picsum.photos/900/1600?random=1" alt=""></a>
    <a href="#" target="_blank" rel="noreferrer noopener"><img src="https://picsum.photos/900/1600?random=2" alt=""></a>
    <a href="#" target="_blank" rel="noreferrer noopener"><img src="https://picsum.photos/900/1600?random=3" alt=""></a>
    <a href="#" target="_blank" rel="noreferrer noopener"><img src="https://picsum.photos/900/1600?random=4" alt=""></a>
    <a href="#" target="_blank" rel="noreferrer noopener"><img src="https://picsum.photos/900/1600?random=5" alt=""></a>
    <a href="#" target="_blank" rel="noreferrer noopener"><img src="https://picsum.photos/900/1600?random=6" alt=""></a>
    <a href="#" target="_blank" rel="noreferrer noopener"><img src="https://picsum.photos/900/1600?random=7" alt=""></a>
    <!-- ↓ 無限ループ用に同じ内容をもう一度繰り返す -->
    <a href="#" target="_blank" rel="noreferrer noopener"><img src="https://picsum.photos/900/1600?random=1" alt=""></a>
    <a href="#" target="_blank" rel="noreferrer noopener"><img src="https://picsum.photos/900/1600?random=2" alt=""></a>
    <a href="#" target="_blank" rel="noreferrer noopener"><img src="https://picsum.photos/900/1600?random=3" alt=""></a>
    <a href="#" target="_blank" rel="noreferrer noopener"><img src="https://picsum.photos/900/1600?random=4" alt=""></a>
    <a href="#" target="_blank" rel="noreferrer noopener"><img src="https://picsum.photos/900/1600?random=5" alt=""></a>
    <a href="#" target="_blank" rel="noreferrer noopener"><img src="https://picsum.photos/900/1600?random=6" alt=""></a>
    <a href="#" target="_blank" rel="noreferrer noopener"><img src="https://picsum.photos/900/1600?random=7" alt=""></a>
  </div>
</div>

<style>
.infinite-slider {
  /* サイトの表示幅内に収める場合は以下のoverflow: hidden;を有効にしてください */
  // overflow: hidden;
  width: 100%;
}

.slider-track {
  display: flex;
  width: max-content;
  animation: scroll-right 60s linear infinite;
}

.slider-track img {
  width: 300px; /* スライドの幅を調整 */
  margin-right: 20px;
  border-radius: 8px;
  transition: transform 0.3s ease;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.1);
}

/* レスポンシブ対応 ご自身のページに合わせて数値を調整してください */
@media (max-width: 782px) {
  .slider-track img {
    width: 200px;
  }
}

.slider-track img:hover {
 transform: scale(1.05);
}

.infinite-slider:hover .slider-track {
   animation-play-state: paused; 
}

@keyframes scroll-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
</style>

 
投稿済 : 2025年12月2日 6:54 PM
Mail_Info
(@mail_info)
投稿: 35
Trusted Member
トピックスターター
 

詳細なお返事ありがとうございます。

>テーマ標準の機能として同様の表現ができるブロックを追加できないか

是非、期待しております!

これは欲しいと思うユーザーさんも多いと思います。


 
投稿済 : 2025年12月9日 2:18 PM
共有: