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

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

  • このトピックには17件の返信、1人の参加者があり、最後にやすっちにより1年、 11ヶ月前に更新されました。
17件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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さん
      ブラウザのキャッシュを削除したら、中央に寄りました!
      ありがとうございました。

17件の返信スレッドを表示中
  • トピック「グローバルメニューを中央に揃えたい」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)