2015　0101
シリウスリバースメニューカスタマイズ　微調整

 

前頁までの解説で　以下スタイルになりましたけど　まだいまいちと
感じられますね
もう少し　ステップしてみましょう

 

---

 

メニュー背景を消してみる

 

サイドメニュー＆フリースペース５　６の灰色背景が　バランス悪いので
消してみましょう

 

 

テンプレートフォルダを開いて　以下画像ファイルを

 

 

削除してしまうか

 

もしくは　グレーカラーをホワイトに編集してください

 

 

どちらでも　見た目は同じになります

 

 

 

---

 

メニュー説明は　以降右左の名称で進めます

 

 

右メニューを　もう少し右へ移動する
もう少し　外側に移動する場合は
レイアウト差分へ移動

 

 

 

/* レイアウト差分 */

 

#contents {
padding-left: 10px;
padding-right: 10px;

 

}

 

 

書き換え後

 

#contents {
padding-left: 0px;
padding-right: 1px;

 

}

 

 

数値を0px;　1px;にしてください

 

 

---

 

左右ともメニューの高さを同じにする

 

メニューのたかさに違いがありますね

 

高さを同じにするには　スタイルシート

 

360番の数値を1px;にしてください

 

０でもよいのですが　1にとどめます
スタイルシートによって多少の順位違いはあります

 

 

#menu {
float: left;
width: 180px;
padding-top: 10px;　ここです
padding-bottom: 10px;
}

 

 

ほとんど同一の高さになります

 

 

---

 

左右のメニューの隙間が空きすぎですね

 

これを　狭くしてみますが　今度はスタイルシートではありません

 

操作画面より　テンプレート選択

 

横幅設定で

 

メインカラムの横幅を510にしてみました
メインカラムを広げると　左のメニューを右横に押し出してくれるんですね

 

 

 

以下が変更後です
メニュ同士の幅も縮小され　良い位置になりました

 

メインカラムの右どまり位置は　ボックス枠右と　同地点です

 

 

 

もっとステップアップ

 

リバースメニューにしてみて　
どうにもシリウスのデフォルトのカテゴリーページを表すサイトメニューが

 

気に入らん

 

という方はサイトメニューを非表示にする方法もあります　
実行すればブログ等とほぼ同様のサイトスタイルが表現できますよ

 

サイトメニューを非表示にした場合　ページメニューをフリースペースで
一つずつ自分で作らねばなりませんが　それでもワールドプレスで
ヴィジェットにページリンク先設定するよりは楽ちんです

 

サイトページメニューを削除する方法はこちらでご確認ください
3カラムのページメニューを消してみると　さらにハイクラス

 

また　新しい情報が発見出来れば追記いたします

 

スポンサーリンク

 

 

リバースメニューの微調整
シリウスサイドメニュー縦2列　リバースメニューへ変更
シリウスカスタマイズ