2015　0119
シリウスサイドメニューカスタマイズテーマ　見出しの縦幅拡張

 

デフォルトテンプレート対応

 

 

シリウスのサイドメニュー見出しはデフォルトで縦サイズが
ＣＳＳ指定されています

 

サイト形式で運営しているならこれでもよいかと思われますが

 

ブログ的イメージを打ち出す場合や　特殊的な意味合いを持たせる場合は

 

やや縦幅を拡張してみることもよいかと思われます

 

通常スタイルですね

 

スタイルシートでの変更箇所を御確認ください

 

 

/* サイドメニュー */

 

#menu ul,#rmenu ul {
list-style-type: none;
list-style-image: none;
margin-top: 0;
margin-right: 0;
margin-bottom: 0px;
margin-left: 0;
padding: 0px;
border: 1px solid #CCCCCC;
}

 

#menu li,#rmenu li {
list-style-type: none;
list-style-image: none;
margin: 0px;
display: block;
_display:inline;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E9E9E9;
padding: 0px;
}

 

#menu h4 ,#rmenu h4 ,.menutitle {
line-height: 30px;
background-image: url(img/menu_h4.jpg);
height: 30px;
font-size:14px;
color: #FFFFFF;
text-align: left;
padding-left: 20px;
overflow: hidden;
}

 

---

 

数値変更のみでサイズ指定ができます

 

line-height: 30px;
拡張した場合のフォント位置

 

height: 30px;
拡張サイズの指定

 

 

 

以下例50px;にしてみました

 

line-height: 50px;
ここの数値はheight: 50pxと同様にする必要があります

 

height: 50px;

 

 

 

拡張して確認してみると　シリウスでデフォルトで用意されている見出し
画像より枠が大きくなり　その空きスペースに画像の一部が連写される
という特性で明暗違いの箇所が表示されました

デフォルト画像は明暗が施してあるためのこのような表示になってしまいます

 

この対処は　シリウステンプレートフォルダの

 

ｈ４画像ファイルを編集でたて数値を大きな画像にすることで対処可能です

 

参考例

 

 

それ以外の画像をお探しの場合　どこかで画像を取り寄せなければなりませんが

 

参考として　テスクチャ画像から切り取ってみてはいかがでしょう

 

配布されている画像は　サイズが大きいですが一部だけツールで切り取り
ペイント内で編集すればよいだけです
背景用テクスチャ画像フリー配布サイトまとめ

 

 

また　見出しの角を角丸にする場合は　ＣＳＳの追加が必要です
同関連ページで変更手順詳細をご案内しております
シリウスサイトメニュー見出しをやさしくする角丸カスタマイズ

 

縦数値拡張に伴い横幅も拡張する場合は　
シリウス機能　テンプレートの横幅設定でサイズ指定します

 

スポンサーリンク

 

 

シリウスサイド見出しメニューの縦幅拡張カスタマイズ
シリウスサイドメニューの拡張　横幅を広げるカスタマイズの方法
シリウスカスタマイズトップ