グローバルメニューを中央に揃えたい

Simplicityの特徴 フォーラム Simplicityについての質問 グローバルメニューを中央に揃えたい

このトピックには17件の返信が含まれ、1人の参加者がいます。8 ヶ月、 2 週間前 やすっち さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #59264

    やすっち

    お世話になります。

    わいひらさんが2015年に
    グローバルメニューを中央に揃える方法として
    https://www.acky.info/tips/css/00011.html
    を見てやってみてください。
    との過去ログを見てやってみようと思ったのですが

    HTMLコードは具体的にどこに貼ればいいのか
    CSSコードは具体的にどこに貼ればいいのか
    分からなくて困っています。

    http://kusege.net
    WordPress 4.9.4
    Simplicity1.9.3
    OSはアンドロイド(多分最新版)

    ソースコードは、スタイルシートのどこをコピペすればよいのかわかりません。もしコピペの必要がありましたら、そこも指南いただければありがたいです。

    どうかよろしくお願いいたします。

  • #59265

    かうたっく

    ソースコードは、スタイルシートのどこをコピペすればよいのかわかりません。もしコピペの必要がありましたら、そこも指南いただければありがたいです。

    どの部分にソース(属性)を付けたいのか不明ですが、 <div id="navi-in">だとすれば親テーマのnavi.phpで
    大丈夫だと思います。

    違う場合は、以下の通りになりそうです。

    テンプレートタグ/wp nav menu|WordPressCodex日本語版

    もう更新しないであろうSimplicityの前のバージョンなので。CSSはstyle.cssです。モバイルだけでなくPCビューでも、すべての環境でスタイルが反映するからです。

    ※もし万が一PCだけで表示したければ、PCビューの何px以上のときだけ反映されるような書きかた、『メディアクエリ』と検索して、条件にあったモノを付ける感じです。

    ざっくりこんな感じだと思われます。

  • #59266

    かうたっく

    もう更新しないであろうSimplicityの前のバージョンなので。

    上記は、下記の『親テーマでも良い理由』について言ってます。※通常更新されるであろう今のSimplicity(2の方)なら、更新で上書きされるので、テンプレートファイルは子テーマに導入する感じ。

    どの部分にソース(属性)を付けたいのか不明ですが、<div id="navi-in">だとすれば親テーマのnavi.phpで
    大丈夫だと思います。

  • #59267

    やすっち

    かうたっくさん、ありがとうございます。

    ソースコードは、スタイルシートのどこをコピペすればよいのかわかりません。もしコピペの必要がありましたら、そこも指南いただければありがたいです。

    実は、この文は「私が質問するときに、現時点でのCSSがどう書かれているか、回答のためにコピペが必要な部分がありましたら教えてください」という意味だったのです。分かりづらい質問をしてしまい申し訳ありません。

    私の希望は、全ページのグローバルメニューに「中央寄せ」の属性を付けたい。です。

    (1)https://www.acky.info/tips/css/00011.html
    中に、HTMLタグとCSSタグがでているのは、両方必要だという意味ではなく、HTMLorCSSどちらかを書き込めばいい、ということでしょうか。

    (2)HTMLであれば、全ページにコードをベタ打ちする、ということになりますでしょうか。

    (3)近いうちに「simplicity2」に移行したいと思っています。その場合、CSSコードは子テーマに導入する方が良いでしょうか。

    初心者過ぎて、細かい質問で申し訳ありません。どうかよろしくお願い致します。

  • #59270

    かうたっく

    1.2について。そのページのどの部分をやりたいのかよく分かりません。

    (3)近いうちに「simplicity2」に移行したいと思っています。その場合、CSSコードは子テーマに導入する方が良いでしょうか。

    導入して反映するのか、simplicity・simplicity2のCSS(HTMLを装飾するタグの)指定方法が変わっているのかは実際やってみないと分かりません。

    多少変わった部分・変わってない部分・ご自身で変更している部分もあるかもしれないですし。不安でしたらテーマ変更からカスタマイズまで、お友達かプロに頼むと早いと思いますよ^^

  • #59271

    かうたっく

    HTMLコードは具体的にどこに貼ればいいのか
    CSSコードは具体的にどこに貼ればいいのか
    分からなくて困っています。

    上記引用と、以下質問1の引用について

    HTMLタグとCSSタグがでているのは、両方必要だという意味ではなく、HTMLorCSSどちらかを書き込めばいい、ということでしょうか。

    ページをサクッと見た感じですが、HTMLを触る必要が無いように思います。style.cssに追記するだけでOKですが、CSSの指定方法を#navi ulなどにすれば対応できると思います。※メディアクエリでPCのみ表示させる必要があるかもです?スマホビューを後で確認してください

    ちなみに、リンク先は沢山の方法を紹介されているので、どのカスタマイズをしようとしているのかが不明です。

    実は、この文は「私が質問するときに、現時点でのCSSがどう書かれているか、回答のためにコピペが必要な部分がありましたら教えてください」という意味だったのです。分かりづらい質問をしてしまい申し訳ありません。

    そういう事でしたか、今やっとわかりました。URLを確認したらCSSは確認できる感じです。

    バタバタ返信したのを、今こんな感じでまとめてみました。※送信前にアレコレと追記した部分がわけわからなくなってたので・・・…

  • #59277

    Akira

    以下の CSS を子テーマとして使われている kusege の style.css に追加すれば、ご希望のカスタマイズはできると思います。

    @media screen and (min-width: 1110px) {
      #navi ul {
        display: flex;
        justify-content: center;
      }
    }
  • #59308

    やすっち

    かうたっくさん、Akiraさん、ありがとうございます。

    子テーマのstyle.cssを修正しようとしたところ

    このファイルを更新する前に1個のエラーを修正する必要があります。
    サイトを壊してしまうかもしれませんが、それでもアップデートしますか ?

    という怖いメッセージが出ました(^^;

    @media screen and (max-width: 740px)
    #main {
    width: auto;
    padding-left: 0;
    padding-right: 0;
    border-width: 0;
    padding: 10px;
    padding-top: 0px;
    }

    の2行目のmainの前の#がエラーのようなのですが、どう直していいのか教えていただけませんでしょうか。

    どうぞよろしくお願いいたします。

  • #59311

    かうたっく

    #59308
    以前の事はどうなりました???笑

    流れ的がっ…。。
    例えば、日本にいると思ったらオーストラリアに居たのか!?位ぶっ飛んでて面白い^^

    @media screen and (max-width: 740px) {
    /*ここに#main { ~中略~ }のくだりが入る*/
    }

    CSSでぶっ壊れたりしませんけど、スタイルがオカシイな…。なんか反映しないな…。位な事が起きるミスと思いますよ。

    ※新規質問は、新スレッドをたてるんですが、コチラは新スレ立てにくそうなので

  • #59327

    やすっち

    かうたっくさん、ありがとうございます。

    実は新規質問ではなく「グローバルメニューの中央寄せ」の続きです(^^;

    「グローバルメニューの中央寄せ」について教えていただいたので、教えていただいたとおりにkusege の style.css を修正しようとしたところ、あの怖いメッセージが出たわけです(^^;

    よって、「グローバルメニューの中央寄せ」に取りかかる前に、kusege の style.css のエラーを修正する必要があったのです。分かりづらくて申し訳ございません。

    style.css のエラー修正ですが、具体的には

    @media screen and (max-width: 740px)
    {#main {
    width: auto;
    padding-left: 0;
    padding-right: 0;
    border-width: 0;
    padding: 10px;
    padding-top: 0px;
    }}

    で合っていますでしょうか?

    style.css のエラー修正ができましたら、「グローバルメニューの中央寄せ」を再度やりたいと思います。

    どうぞよろしくお願い致します。

  • #59333

    かうたっく

    成形すればこんな感じです。

    @media screen and (max-width: 740px) {
    	#main {
    		width: auto;
    	}
    }
    padding-left: 0;
    padding-right: 0;
    
    padding: 10px;
    padding-top: 0px;

    内側余白の左右を0
    内側余白の上下左右を10px
    内側余白の上を0

    結果内側余白の下・左右は10pxとなりますよ。

    border-width: 0;

    ボーダーの左右を消したいのかと思われますが、おそらく存在しない書きかたなのでエラーが出るかもしれません。

    追加したpadding・border-widthの項目は不要で、box-sizing: border-box;をいれたらOKです。

    ※上記で提示されたソースコードのみチェックしたまで。となります。

  • #59462

    やすっち

    かうたっくさん、ありがとうございます。
    とりあえず、style.css のエラー修正できました!

    Akiraさんに教えていただきました

    @media screen and (min-width: 1110px) {
    #navi ul {
    display: flex;
    justify-content: center;
    }
    }

    をstyle.cssに書き込んでみましたが、エラーが4つでてしまったのでやめました。

    引き続き、グローバルメニューの中央寄せを頑張ってみます!
    難しくて苦戦中です(^^;

  • #59463

    Akira

    エラーが出るような CSS ではないですよ。

    試しにやってみましたが、エラーは出ませんでした。

    エラーの内容はどのようなものでしたか?

  • #59465

    やすっち

    Akiraさん
    今、

    @media screen and (min-width: 1110px) {
    #navi ul {
    display: flex;
    justify-content: center;
    }
    }

    上記を、再度貼り付けてみたところ、エラーは出ませんでした!
    昨日はどうなっちゃっていたのか・・・
    ありがとうございます!!

    ただ、貼り付け後もグローバルメニューは左寄せのまま、ピクリとも動きません(^^;
    何がいけなかったのでしょうか・・・

  • #59466

    Akira

    中央寄せになっています。 9 つもメニューが横並びになっているので、それ以上は中央には寄せられません。

  • #59468

    やすっち

    Akiraさん
    ありがとうございます。
    数を減らしてみましたが、やはり左寄せのままのようです(^^;

    なにがいけなかったのでしょうか・・・

  • #59469

    Akira

    私には以下の画像のように見えています。

    http://netakiri.net/uploader/src/up0423.png

    もし、画像とは異なる場合には、ブラウザのキャッシュを削除されてください。

  • #59487

    やすっち

    Akiraさん
    ブラウザのキャッシュを削除したら、中央に寄りました!
    ありがとうございました。

トピック「グローバルメニューを中央に揃えたい」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)