TOP

見出しとリスト覧の高さを変更する

見出しh3、h4、とリスト覧(サイトメニューのテキスト)の縦幅は、デフォルトですと
少し厚めでしょうか?
でも、お気に召さないなら、スタイルシートで調整すれば狭めることができます

 

さらに追従するリスト覧も(メニュー覧)も狭めることはできます

 

調整方法をご案内いたしますのでご覧ください

 

h2、h3見出しは、padding: 5px 0;の左数値を小さくすれば狭まります

 

/* 見出し
==================================================
*/
#main h2, #main h3 {
background-color: #00A5C5;
margin-bottom: 5px;
padding: 5px 0; ここです
}

 

 

 

 


 

サイドメニュー、h4見出し、リスト覧の縦幅調整

 

 

リスト覧は,

 

.menulist li {
background: none repeat scroll 0 0 transparent;
border-bottom: 1px solid #e6e6e6;
line-height:150%; 見出し縦幅 ここですの数値を小さくすると狭まります
padding: 0;
position: relative;
}

 

ご注意
リスト覧では、デフォルトサイズの場合、テキスト項目が2段になると文字が
重なります

 

対応は、サイト設定画面、メニュー上の表示で短縮する
もしくは、サイドメニューの横幅を拡張する...等です

 

 

 

h4見出しは、

 

#menu .title span, #rmenu .title span, #menu h4 span, #rmenu h4 span {
background-image: url(img/menu-h4.png);
background-position: left 11px;
background-repeat: no-repeat;
color: #fff;text-shadow: 0 0 1px rgba(255,255,255,.3);
display: block;
font-size: 16px;
padding: 14px 8px 14px 34px;
line-height:150%; 見出し縦幅 ここですの数値を小さくすると狭まります
}

 

 

 

==================================================
サイドメニュー
==================================================
*/
/* メニュー
==================================================
*/

 

#menu img{
max-width:100%;
height:auto;
}

 

#menu {
float: left;
overflow: hidden;
width: 250px; ここは横幅です
}
#menu ul#newEntry, #menu ul#entryarchive, #rmenu ul#newEntry, #rmenu ul#entryarchive {
background-image: url(img/menubox_bg.gif);
background-position: center bottom;
background-repeat: repeat-x;
padding: 0 0 5px 0;
}
#menu .rankbox {
border-bottom: 1px solid #E6E6E6;
font-size: 12px;
margin-bottom: 10px;
padding-bottom: 10px;
}
#menu .rankbox img {
width: 250px;
}
.menubox {
margin-bottom: 25px;
}
.menulist {
margin-bottom: 0 !important;
overflow: hidden;
}
.menulist ul {
margin-bottom: 25px;
padding: 0 0 5px 0;
}
.menulist li {
background: none repeat scroll 0 0 transparent;
border-bottom: 1px solid #e6e6e6;
line-height: 150%; リスト覧ここです
padding: 0;
position: relative;
}
.menulist li a {
background-image: url(img/);
background-position: 1px 17px;
background-repeat: no-repeat;
color: #333333;
display: block;
font-size: 14px;
padding: 12px 0px 12px 0px;
text-decoration: none;
}
.menulist li a:hover {
color: #FF0A0A;
text-decoration: underline;
}
.menulist .l2 a {
background-image: url(img/menu_bg2.png);
background-position: 15px 18px;
font-weight: normal;
padding-left: 26px;
}
.menulist .l3 a {
background-image: url(img/menu_bg2.png);
background-position: 30px 18px;
font-weight: normal;
padding-left: 41px;
}
#menu .title, #rmenu .title, #menu h4, #rmenu h4 {
background-color: #000000;
border-bottom: 2px solid #fafafa;
overflow: hidden;
position: relative;
text-shadow: none;
margin: 0;
}

 

#menu .title span, #rmenu .title span, #menu h4 span, #rmenu h4 span {
background-image: url(img/menu-h4.png);
background-position: left 11px;
background-repeat: no-repeat;
color: #fff;text-shadow: 0 0 1px rgba(255,255,255,.3);
display: block;
font-size: 16px;
padding: 14px 8px 14px 34px;
line-height:150%; 見出し縦幅 ここです
}

 

 

 


 

最新記事のリスト 縦幅を調整
(見出しは、h4が適用されるので調整不要)

 

line-height: 130%;の数値を小さくすると狭まります

 

 

 

/* 最新記事・アーカイブ
==================================================
*/
ul#newEntry li, ul#entryarchive li {
background: none repeat scroll 0 0 transparent;
border-bottom: 1px solid #E6E6E6;
font-size: 12px;
line-height: 130%; ここです
padding: 15px 10px;
}
@media screen and (max-width: 899px) {
ul#newEntry li:before, ul#entryarchive li:before {
background-color: transparent;
content: "";
height: auto;
left: auto;
position: static;
top: auto;
width: auto;
}
}

 

 


 

その他、気が付くことありましたら順次追記いたします

 

見出しh3、h4、メニューリスト枠の縦幅(高さ)の調整方法
サイト幅、メニュー幅、レイアウト、その他各種調整方法まとめ
トップページ

関連ページ

サイトサイズの拡張に伴うサイドメニュー、記事幅の変更方法
シリウスのレスポンシブサイトのレイアウトサイズは900Pxがデフォルトですが、CSS指定により拡張が可能で、それに伴うサイドメニュー、記事幅、その他付随する変更方法を解説
見出しh2.h3.h4の背景枠の角を丸くする
シリウスのデフォルト見出しは角角ですが、やさしさをのあるサイトイメージを演出するなら丸みをつけてみるのもひとつの手段