＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
スマホ画面の横幅とボタンの見た目の関係に注意しよう
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

症状：スマホ実機表示で上下スクロールすると画面が横に揺れることがある
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

スマホで HAIKページを表示し上下にスクロールしてみると、画面が左右にフワフワと動いてし
まうことがありませんか？（指でスワイプする関係上、左右にも動かしていると思われる。）

何かが左右にはみ出している予感・・・レスポンシブでこれはないわ・・・

それが落ち着いたと思ったら、画面全体が少し左に寄って見えたり。

これに関しては 「HAIK編集メニュー/プレビュー/様々なサイズの端末」ではわかりません。実
機のスマホでしか出せない症状です。

こうなる原因として、ページ内に設置した「ボタン」が邪魔をしていることが多いです。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ボタン書式
&button(URL,オプション){表示文字};
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
マニュアル参考ページ
http://manual.haik-cms.jp/index.php?button

このボタン書式で {表示文字} の所に、ユーザーが実際の画面で見る文言を入れます。

例）&button(買い物ページ,info){○○○○○の買い物ページはこちら};

このような長い文言を入れて、プレビューや実機のスマホで見てもそのボタンの横幅は画面幅に
十分に収まっているとします。（まだ余裕があるようにさえ見える）

ところが！

実機での上下スクロールでは画面が左右に揺れることありあり。
（プレビューだけではわかりませんよ、実機でしか出せない症状です。）

このような時には「長い名前をつけたボタン」を疑ってください。
＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾

見た目には左右幅に十分収まっているボタンが、内部的にははみ出していることになっている感
じです。

この時の対処として、入れる文言を切り詰めれば良いですが・・・他に
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
・ボタンのオプションに「small」を指定する
例）&button(買い物ページ,info,small){○○○○○の買い物ページはこちら};

・表示文字の途中に改行 &br; を入れる
例）&button(買い物ページ,info){○○○○○の&br;買い物ページはこちら};
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

これらの工夫でボタンの左右幅を詰めてみてください。スマホ表示での左右揺れが治ること請け
合います。

横に長くて「怪しいボタン」があるなら試してみると良いですよ。

見た目は構造を再現していないということですが・・

このボタンですがeコマース系で物販をしているとすごい多用します。私の場合、今までに千個
は使ったでしょうか。