サポート » 使い方全般 » カスタムメニューの周りの余白を調節したい

  • 解決済 dk_64

    (@dk_64)


    サイドバーに画像付きのメニューを作りたくて、カスタムメニューを作りナビゲーションラベルに画像のURLを貼って画像のメニューを作ったのですが、
    画像の周りにできる余白をなくすにはどうすればいいでしょうか。
    画像と画像を隙間なく表示したいです。

    カスタムメニューを画像に変えるやり方は、下記サイトと同じやり方です。
    参考サイト→http://milkveil.com/archives/2029

    また、固定ページごとに違うメニューを使っている場合に、
    画像を使っていないメニューまで余白がなくなってしまうのはまずいので、
    画像のメニューだけ余白を変えたいです。

    テンプレートはBlack Skylineです。(http://wordpress.org/themes/black-skyline)

    WP初心者・CSS初心者でフォーラムも初めて使わせていただきました。
    質問内容で足りない情報などありましたらご指摘ください。
    よろしくお願い致します。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • 2年前のテーマなのででもサイトを確認するにとどめましたが、
    サイドバーはマージンを切り詰めたデザインに思われました。
    カスタムメニューに画像のURLを割り振られたということですので、
    imgか カスタムメニューのリストが余白を指定されているままなのでしょう。

    トピック投稿者 dk_64

    (@dk_64)

    確かにサイドバーのマージンを詰めても意味がなかったです。
    imgかカスタムメニューのマージンを詰めるという事でしょうか?
    その場合修正するのはスタイルシートのどの部分になりますか?

    回答の意味がすぐ理解できなくて申し訳ありませんm(_ _;)m

    Black Skyline は2年前のテーマのままのようですから、今回はインストールして検証しませんでした。
    styles.css でカスタムメニューや img が padding か margin で余白をとってあると思います。

    トピック投稿者 dk_64

    (@dk_64)

    スタイルシートのどの部分のimgなのかわかりません。
    custom-menuで指定はありません。
    imgのpadding・marginの指定はたくさんありますが、カスタムメニューのimg指定らしきものがどれかわかりません。
    いくつか数値を変更してみましたが画像の幅は変わりませんでした。
    お手数ですがよろしくお願いいたしますm(_ _)m

    テーマのデモサイトを見たに過ぎませんが、
    #navigation .menu ul li {padding-left:10px;}
    となっていました。
    実際にカスタムメニューを【要素の詳細を表示】などツールで確認するのが速道でしょう。

    トピック投稿者 dk_64

    (@dk_64)

    #navigation .menu ul li {padding-left:10px;}
    この部分はヘッダーメニューの事ではないでしょうか。
    この前後のpaddingやmarginの値はどれもヘッダーメニューの事でした。

    ウィジェットでサイドに入れるカスタムメニューの値を触りたいです。
    よろしくお願いいたしますm(_ _)m

    モデレーター gatespace

    (@gatespace)

    WordPressと関係ない話なのですが、
    cssの調整をやるなら、各種ブラウザの開発者ツールを使って、確認>調整してください。

    Firefox、Chrome
    http://www.aiship.jp/knowhow/archives/8270
    IE
    http://msdn.microsoft.com/ja-jp/library/ie/gg699337(v=vs.85).aspx

    トピック投稿者 dk_64

    (@dk_64)

    ありがとうございます。
    開発者ツールを使って調整してみたところ、下記の
    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/

    です。こんな感じでいいんですよね?

    トピック投稿者 dk_64

    (@dk_64)

    nobitaさんありがとうございます。
    まさしくそんな感じにしたかったので、とても助かりました。
    メニュー名も日本語にしていました。

    メニュー名を指定して画像で作ったメニューだけを余白調整したかったので、
    nobitaさんのcssを参考にスタイルシート下部に追記して解決しました。

    アドバイスいただけた3名の方、開発者ツールなど知らない事も知れてとても参考になりました。ありがとうございましたm(_ _*)m

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「カスタムメニューの周りの余白を調節したい」には新たに返信することはできません。