Siriusテーブル(表)を横スクロールさせてみよう!

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


スマホ画面上の表示です

PC画面上の表示です


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


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


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


 

PoPoはせいぜい多くても3列から5列が観やすいんじゃないって思う。ってことで3列にしてます。


商品の数や好み、デザインによりますよね。



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


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


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

Siriusテーブル横スクロールの表示がでます

デザインモードでは左上にテーブルの横スクロールと表示がでます


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


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


簡単にできますよ。


設定はマウス右クリックで横スクロール選択で簡単にできます


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

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


Sirius通常モードの場合


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


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

<!-- ★テーブルタグここから★ -->
<div class="scroll_table">
<table class="ritm col3">
<tbody>


 

スマホで見てみると下のようにスクロールバーが表示され見やすい見やすい



スマホ画面でスクロールバーが表示されています


横スクロールの解除

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


 

<div class="scroll_table"></div>のタグ部分を削除するとスクロール解除ができます。



<!-- ★テーブルタグここから★ -->
<div class="scroll_table">
--------------------------------
--------------------------------
--------------------------------
</div>
<!-- ★テーブルタグここまで★ -->


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


まとめ

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


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


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


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


 

読んでくれてありがとうww。Sirius横スクロールまとめでしたぁー