シリウスで構築したスマホiPhoneサイトのグローバルメニュー幅調整方法

ヒカルです(^-^)

ウエブサイト構築システムシリウスSIRIUSで構築したスマホiPhone用のグローバルメニューの幅調整がうまくいかず無残にもひどい状態になっていませんか？

ここではどのようにスマホiPhone用のグローバルメニューの幅調整方法として、CSSの編集方法をお伝えします。

シリウスSIRIUS愛用者はご参考ください。

パソコンだとグローバルメニューは正常なのに、スマホだと無残になるシリウス

ウエブ構築システム(CMS)のシリウスでグローバルメニューを設置した場合の外観を、ディバイスを変えてパソコンとスマホi Phoneで比べてみましょう。

デモサイト・ディバイスがパソコンの場合

デモサイト・ディバイスが iPhoneの場合

パソコンではグローバルメニューが６つありますが…

i Phoneで見ると、グローバルメニューが３つしかなく、他は横移動しようにも表示されません。

正直、シリウスで構築したサイトをスマホでみると、かなり無残な状態なんです汗

熊谷ヒカル

え？ナニコレ！( ﾟДﾟ)( ﾟДﾟ)

シリウスのグローバルメニューをパソコンでもスマホでもまともな状態にしたい！そんな時に試したい方法

上でご紹介したスマホのグローバルメニューは「どう頑張って見ても正常な状態」とは言えません。

少なくても正常な状態にしないと、話になりませんので、ここではそんな時に試したいグローバルメニューの幅調整方法・CSSの編集方法をお伝えします。

なお、以下の編集方法を試す前に必ずシリウスのバックアップを行い、万一の際にリカバリ・自己責任で行うようにしてください。

アップロードする前に１つの作業を行ったら必ずプレビュー画面で確認しながら作業を行う、といった流れで編集するのがおすすめです。

パソコンで見るときのグローバルメニューの幅調整・CSSの編集方法

デモサイト・ディバイスがパソコンの場合

こちらのグローバルメニューはシリウスのスタイルシート編集で以下のように指定しています。

パソコンの場合のシリウスのグローバルメニューの幅調整については、さまざまなサイトが上のように紹介してくれていて助かりました。

しかしシリウスで「スマホの幅調整」について正確に解説されているサイトを見たことがありません！

熊谷ヒカル

皆これで困ってないってことなの？と思いましたが、そうじゃないみたいなんですよね^^ スマホの場合のグローバルメニューの幅調整については下のようにするのがおすすｍです。

スマホi Phoneで見るときのグローバルメニューの幅調整・CSSの編集方法

それでは上の「スマホで見た場合のグローバルメニュー」を正常な形にするにはCSSをどのように指定すればいいのかをお伝えします。

まとめ

ウエブサイト構築システムシリウスは、レンタルサーバーの運用がかなり低コストで済みます。

ワードプレスの場合、「サブドメインを取得して同一レンタルサーバー契約内でサイトを構築する」くらいしか１契約のレンタルサーバーを使いまわす方法はありません。

けれど、サブドメインを取得するやり方があまりふさわしくない場合もあるはずで、かつ「ウエブサイトの構築にはワードプレスが一番！」といった見方をしていると、レンタルサーバーの契約は増える一方です。

シリウスはサブドメインを取得するまでもなく、１レンタルサーバーの契約に何個でもウエブサイトを構築できますから経済的でいいなと思える人は多いと思いますが、

上で解説したようなグローバルメニューのようなケースでサイト運用が思わしくないような場合はもっと経済的損失が大きいです。

参考にしてみてください^^

ご質問があれば以下で登録して何でも聞いてくださいね(^-^) 上で登録して下さった方にはECサイト初心者が「まず５万円稼ぐためのノウハウをまとめた無料プレゼント」を贈呈しています(^-^)

無料のメルマガ講座&プレゼントとは何か？

ご質問があればご遠慮なくどうぞ。