サポート » 使い方全般 » グローバルメニューの区切り線を消したいです

  • 解決済 takeuchi0709

    (@takeuchi0709)


    wordpress初心者です。
    ほとんど知識がありませんので、どうか皆様のお知恵をお貸しください。

    現在、Oxygenのテーマを使用してグローバルメニューの部分を編集しているところです。
    テキストではなく、Nav Menu Imagesというプラグインを使用して画像として表示させる予定なのですが、
    項目と項目の間の隙間と区切り線が消せなくて困っております。
    例としては下記のようなものです。

    ホーム / 店舗紹介 / お問い合わせ ・・・

    上記のような隙間と区切り線をなくして、画像同士がくっつくように配置したいと考えております。
    このような事例の解決方法がわかる方がいらっしゃれば、ぜひご教示いただけると幸いです。
    すみませんが、皆様どうぞよろしくお願いいたします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • Oxygenではその部分はCSSで背景画像を設定しているようです。
    WordPressの最新バージョン4.7から追加CSSという機能がコアに追加されていますので、プラグインを入れたりテーマをさわることなくCSSの追加ができるようになりました。
    外観—カスタマイズから「追加CSS」をクリックして、下記のようなCSSルールを入力したら表示区切り線自体は消えると思います。

    #menu-primary li {
      background: transparent;
    }

    より細かい調整が必要なときは、ブラウザのデベロッパーツールなどで適用されているスタイルを確認の上、上記のように上書きをしていくことができます。

    トピック投稿者 takeuchi0709

    (@takeuchi0709)

    ikaring様

    早速のご教示ありがとうございます!
    上記のテキストを「追加CSS」に追加したらすぐ区切り線を消すことができました!
    今後は教えていただいたように「外観→カスタマイズ→追加CSS」を使用して編集していきます。

    大変申し訳ないのですが、もう一点よろしいでしょうか?
    区切り線は綺麗に消せたのですが、画像と画像の間と余白を埋めることができません。
    下のように

    #menu-primary li {
    background: transparent;
    margin: 0;
    padding:0;
    }

    このように、marginとpaddingを追加しても、狭くはなったのですが、
    完全に余白を埋めることができませんでした。
    こちらも追加CSSにて編集をすれば解決できるものなのでしょうか?
    わからない事ばかりで大変恐縮ではございますが、
    何かお分かりでしたら教えていただければ幸いです。
    どうぞよろしくお願いいたします。

    #menu-primary liに設定されているもので余白に影響を与えるのはpadding-leftと縦方向についてmin-heightを考慮する必要があるかもしれません。
    横方向のpadding-leftについては上記padding:0;で打ち消すことができていると思います。

    もう1か所、li要素の中のリンク、#menu-primary li aについても、横方向でmargin-right、縦はline-heightの指定がありますので、必要に応じて調整してみてください。

    トピック投稿者 takeuchi0709

    (@takeuchi0709)

    ikaring様

    ご回答ありがとうございます。
    #menu-primary li aにmargin-rightを設定したら見事に余白を消す事ができました!

    区切り線も余白も的確なご指摘によりすぐに解決することができ、ikaring様には本当に助けていただきました。
    初心者の私でも親切に対応してくださって、感謝の言葉しかございません。

    まだまだ制作を始めたばかりで分からないことばかりですが、少しずつ頑張っていきます。
    本当にありがとうございました!

    良かったです👍

    先にも書きましたが、ブラウザのデベロッパーツールなどで適応されているCSSが簡単に確認できますので、既存のテーマのCSSを確認する際には重宝すると思います。

    今回は追加CSSで微調整をしましたが、慣れてこられたら「子テーマ」を使ったり、ご自身で一からテーマを作ったりすることにも挑戦してみてください。カスタマイズの幅がぐっと広がると思います。

    トピック投稿者 takeuchi0709

    (@takeuchi0709)

    ikaring様

    デベロッパーツールでいろいろなサイトを見てみましたが、とても便利そうですね!
    CSSと格闘する際には、いろいろと参照させていただきます。
    まだまだ始めたばかりなのでわからないツールばかりですが、
    ikaring様がおっしゃられたように、「子テーマ」を使った調整などができるよう、
    早く慣れるように精進していきたいです…!

    問題解決から今後のアドバイスまで本当にありがとうございました!
    今後ともどうぞよろしくお願いいたします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「グローバルメニューの区切り線を消したいです」には新たに返信することはできません。