デジタル生活を楽しもう

SIRIUS グローバルメニュー カスタマイズ サイト幅変更

サイト幅の変更

 

SIRIUSで作成しているサイトなんですが、グローバルメニューの項目を増やしました。
ところが、多くなるとメニュー欄が2段になってしまうんです。
これを何とか綺麗な1段に納めたいとカスタマイズに挑戦しました。

 

もちろんSIRIUSをよくわかっていない自分なので、ネット等でいろいろ検索。
いくつかヒットします。
style.cssを加工するものなんですが、私のSIRIUSは最新版?なのでネットで紹介されているstyle.cssの編集ページの項目が違うんです。
これがよく紹介されているスタイルシート編集画面です。
(勝手に画像を使っています。すみません。)
SIRIUS style.css

#topmenu span a{ を編集するように紹介してあります。

 

しかし、私のstyle.cssには#topmenu span a{という項目がなく項目トップメニューに「#topmenu li {」にある「width: 148px」という箇所を変更すればということでした。

SIRIUS style.css

 

とりあえず自分のメニュー項目に合うようにいろいろ変更してみました。
いくつか試して、プレビューを見ながら最終的に110pxがベターでした。
値を小さくすると、メニューのタイトルが2段になってしまいます。(これじゃ無意味ですから・・・そういう場合はタイトルを短くするように工夫が必要ですね。)

SIRIUS style.css

 

何とか今回は形になったのですが、変更しやすいのはデフォルトのテンプレートでサイトを作成した方が良いようです。
ただ、スマホでも見られるようにとレスポンシブテンプレートを選んでいるのですが、これから勉強してデフォルトテンプレートでスマホでも見られるようにできるようになりたいですね。

 

 

テンプレートからの変更

 

テンプレートを利用してSIRIUSサイトを作成すると、横幅やウェジェットの変更がとても簡単ですね。

 

利用する価値ありだと思います。

 

SIRUSの編集画面を立ち上げます。
SIRIUS編集画面

 

最上部の赤枠に囲んだテンプレートボタンをクリックします。

SIRIUSテンプレートボタン

 

テンプレートボタンをクリックすると、ダウンメニューは現れます。その中のテンプレート編集等を開いてカスタマイズします。

SIRIUSテンプレートプルダウンメニュー

 

とても簡単でした。

 

 

page top