2年前のテーマなのででもサイトを確認するにとどめましたが、
サイドバーはマージンを切り詰めたデザインに思われました。
カスタムメニューに画像のURLを割り振られたということですので、
imgか カスタムメニューのリストが余白を指定されているままなのでしょう。
確かにサイドバーのマージンを詰めても意味がなかったです。
imgかカスタムメニューのマージンを詰めるという事でしょうか?
その場合修正するのはスタイルシートのどの部分になりますか?
回答の意味がすぐ理解できなくて申し訳ありませんm(_ _;)m
Black Skyline は2年前のテーマのままのようですから、今回はインストールして検証しませんでした。
styles.css でカスタムメニューや img が padding か margin で余白をとってあると思います。
スタイルシートのどの部分のimgなのかわかりません。
custom-menuで指定はありません。
imgのpadding・marginの指定はたくさんありますが、カスタムメニューのimg指定らしきものがどれかわかりません。
いくつか数値を変更してみましたが画像の幅は変わりませんでした。
お手数ですがよろしくお願いいたしますm(_ _)m
テーマのデモサイトを見たに過ぎませんが、
#navigation .menu ul li {padding-left:10px;}
となっていました。
実際にカスタムメニューを【要素の詳細を表示】などツールで確認するのが速道でしょう。
#navigation .menu ul li {padding-left:10px;}
この部分はヘッダーメニューの事ではないでしょうか。
この前後のpaddingやmarginの値はどれもヘッダーメニューの事でした。
ウィジェットでサイドに入れるカスタムメニューの値を触りたいです。
よろしくお願いいたしますm(_ _)m
ありがとうございます。
開発者ツールを使って調整してみたところ、下記の
font:1.1em Verdana,sans-serif; を
font:0em Verdana,sans-serif; にしたところ、カスタムメニューの画像の余白がなくなりました。
/*
General
——————————————————————- */
html {
font-size: 75%; /* reset 1em to 10px */
height: 100%;
}
body
{
font:1.1em Verdana,sans-serif;
margin: 0;
padding: 0;
color: #4c4c4c;
background: url(“design/baggrund.png”) repeat-x scroll 0 0 #535353;
}
/*
しかしこれではフォントが表示されなくなり、サイト全体がくずれてしまいました。
画像自体は
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
になっています。
カスタムメニューを画像にした場合に画像の余白を詰める事は
諦めた方がいいのでしょうか…
カスタムメニューを画像にした場合に画像の余白を詰める事は
諦めた方がいいのでしょうか…
闇雲に、スタイルの調整をしてはいけません。
カスタムメニューでWordPressが出力するhtmlは、コアが出力しているので、どんなテーマであっても基本は同じhtmlが出力されています。
リストを表示するul 要素には、
id="menu-メニューの名前"
または、id="menu-メニューの名前-数字"
がつきます。
なので、まずメニューの名前を半角英数にすること(日本語だとエンコードされたIDになりスタイルの指定が有効に働かないため)
そしてそのIDとその子要素に対してしっかりスタイルを書けば、大抵できます。
以下のサンプルは、メニュー名 download で、メニューのクラス欄に それぞれ、download-wp,download-git,priviewというクラスをそれぞれ割り当てています。
テーマは異なりますが、スタイルは以下のように書いています。
#menu-download li,
#menu-download{
margin:0;
padding:0;
border:none;
}
#menu-download{
border-top:1px solid #ccc;
}
#menu-download li{
background-size:cover;
height:100px;
border-bottom:1px solid #ccc;
}
#menu-download li a{
display:block;
width:100%;
height:100%;
text-indent:-9000px;
}
#menu-download li a:hover{
background:rgba(222,222,222,.3);
}
#menu-download .preview{
background:url(http://www.tenman.info/wp3/enough/files/preview.gif);
}
#menu-download .download-wp{
background:url(http://www.tenman.info/wp3/enough/files/download-wp.gif);
}
#menu-download .download-git{
background:url(http://www.tenman.info/wp3/enough/files/download-git.gif);
}
で出来上がった画像メニューが、
http://www.tenman.info/wp3/enough/
です。こんな感じでいいんですよね?
nobitaさんありがとうございます。
まさしくそんな感じにしたかったので、とても助かりました。
メニュー名も日本語にしていました。
メニュー名を指定して画像で作ったメニューだけを余白調整したかったので、
nobitaさんのcssを参考にスタイルシート下部に追記して解決しました。
アドバイスいただけた3名の方、開発者ツールなど知らない事も知れてとても参考になりました。ありがとうございましたm(_ _*)m