Siriusの表を横スクロールしレスポンシブ対応

スマホ横スクロール有りとPC画面スクロールなし

Siriusのテーブル設定で横スクロールが意外に簡単にできました。上記画像がスマホ画面うえが横スクロール変更後で下が変更前です。

レスポンシブテンプレートで商品を３列に並べてPC画面ではちょうど良いのですがスマホでみると縦長になり横が詰まっています。

WordPressサイトで良く見かけるのが１０商品も横に並べてるけれど…Siriusでどうやるの？って思いつつも１０商品も並べたらユーザーストレスにならない？

Siriusレスポンシブでも自動で横スライドとはいかないようです。

簡単な設定ですからやってみてください。

SIRIUSにコメント機能が追加できますね

Siriusでテーブルを設定する場合デザインモードで行うかたが多いのではないでしょうか…。

通常モードhtml編集画面でも簡単です、カーソルをテーブルにあて右クリックしてみてください。

簡単にできますよ。

1. デザインモードでテーブル選択
2. テーブル上でマウス右クリック
3. 横スクロール選択

これだけ！です、保存とアップロードを忘れずにしましょう。

Sirius通常モードの場合

Sirius通常モードでの横スクロール設定もいっしょでテーブルコードを全部選択したら右クリックでテーブル横スクロールを選んでください。

htmlのコードは次のようにscroll_tableと表記されています。

横スクロールの解除もタグを削除するだけでOK！です

WordPressでのアフィリエイトサイトではあたりまえにみる横スクロール商品表示ですがSiriusサイトでもできたんですね。

Siriusサイトのテーブル横スクロールについて記載してきましたが、個人的な感覚でまとめます。

アフィリサイトもいろいろ観て研究してますが、よく見るのが１０～２０商品も横スクロールのあるサイト、おまけに縦にもスクロールしないと表や商品の詳細がわからない…なんて事ありませんか？

PoPoはそのようなサイトは離脱します（笑）だって見ずらいからね！

スマホでのユーザーが8割の時代にスマホチェックって大切ですねぇ～Siriusの設定に慣れないうちはありがちなバランスのとりかたPoPoもまだまだ研究中です。