サイトのタイトルを中央に配置したい

  • 解決済 3mcdt

    (@3mcdt)


    3年、 6ヶ月前

    テーマはLightningで、トップページのサイトのタイトルを中央に配置し、その下にグローバルメニューを同様に中央に配置したいのです。

    グローバルメニューの方は、Vector,Incの「Lightning標準デザインのロゴとヘッダーメニューを中央に配置する　https://www.vektor-inc.co.jp/post/lightning-header-csscustomize/　」に従がったところ、タイトルの下に配置できましたが、かなり右寄りだったのでleft：を50%から15%に変更したら中央になりました。何故そうしなければならなかったのかを先ず知りたいです。因みにヘッダーロゴは設定していません。

    さて、本題のサイトのタイトルの方はどの様にすれば中央配置にできるでしょうか？

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • moyo55

    (@moyo55)

    3年、 6ヶ月前

    理由はカスタマイザーでcssに*{outline:1px solid #f00;}とでも追記すれば一目瞭然です。
    要するに、右側に配置されているグローバルナビをleft:50%で右にずらした上でtransform: translateを使って左にずらすという作業をやっているので綺麗に中央配置できないのです。
    left:15%で最初の右にずらす距離を小さくしたので中央配置ぽくなった。
    というわけです。
    あくまでもそれっぽくしただけなのでメニュー数が増えればズレます。

    私はLightningユーザーではないですが、この記述でいけると思います。

    @media (min-width: 992px){
    .navbar-brand {float:none;}
    .gMenu_outer {float:none;margin:auto;}
    .navbar-header {text-align:center;}
}

    記述の意味するところは
    navbar-brand（タイトルを包んでいる要素）とgMenu_outer（ul.gMneu ＝ グローバルナビを包んでいる要素）のfloat(位置指定)を解除する。
    gMenu_outerにmargin:autoを指定してグローバルナビを中央配置にする。(widthは親テーマのcssで指定されているので省略）
    タイトル部分（navbar-header）にtext-align:centerを指定して真ん中に配置。

    トピック投稿者 3mcdt

    (@3mcdt)

    3年、 6ヶ月前

    moyo55様
    教えて頂いたCSSを使ったところ、きれいにタイトルとメニューが上下２段で中央配置となりました。
    CSSの書き方は全く知りませんでしたが、詳しい解説を頂いたおかげでその仕組みを多少は理解することができました。今後ある程度はCSSを勉強して、より美しいサイトが出来るようにしたいと思います。丁寧なご回答を頂きありがとうございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「サイトのタイトルを中央に配置したい」には新たに返信することはできません。