【ワードプレス】ATLASのヘッダーロゴを中央揃えにする方法

桃太郎
こんにちは、桃太郎です。

 

ヘッダー画像を変えてみました!

現在(2018/3/15)ATLASっていうワードプレスのテーマを使用しているんですが、ロゴを中央揃えにする機能がないみたいで、苦労してやっとCSSで中央揃えにしました。

まず、ロゴは簡単にロゴメーカーかなんかで作成しようとしたのですが、なかなか保存がうまくいかず結局手作りに。

ちなみにバンビ?のイラストと当サイトは一切関係ありません。(真顔)

この記事ではATLASでのロゴの中央揃えの仕方を解説しますが、うまく応用すれば他の中央揃えが出来ないテーマでも応用できるかもしれません。

ATLASでのロゴを中央揃えにした方法

このように設定すればOKです。

  1. #logo {
  2. text-align: center;
  3. width: 100%;
  4. }
  5. #logo span a, #logo h1 a {
  6. text-align:center;
  7. width: 100%;
  8. }

CSSだけではなく、順序立って知りたい方。
なぜそうなったのか?が知りたい方は下記をお読み下さい。

ロゴを設定する

まず、外観→カスタマイズ→全体設定で、ロゴの所に画像を入れます。
サイズはお好みで。

ATLASロゴの入れ方

そうすると、こんな風に左のほうに表示されます。ATLASのロゴが左に寄っている

桃太郎
これをなんとかして中央揃えにしたい!

中央揃えにする

失敗1:text-align:centerの場所

これに苦戦しました(・・;)
初めは、headerに直接text-align:centerの指定をすればいいやろ!って思ってたんですが、画像みたいになってしまいました。

ロゴがメインコンテンツの真ん中にわかります?
全体の真ん中に配置されるのではなく、メインコンテンツ?部分の真ん中に来ちゃってます。

この表示自体は間違えてないんですけど、headerに直接するのはおかしいなと思い、#logo というidにtext-align:centerを設定しました。

Point
#logo {
text-align: center;
}
を設定する。

でもこれだけだとまだ綺麗な真ん中ではありません。

それの原因が失敗2の部分になります。

失敗2:親要素が小さい

私もそこまでcssとか詳しくないんですが検索したりネットで調べたりググったりしていたらこちらの記事にたどり着きました。

サルワカCSSで中央寄せする9つの方法(縦・横にセンタリング)

上記の記事を読みすすめていくと、こう書かれてある所があります。

親要素が小さい

あっ、コレだ・・・!

どうみても親要素が小さい

完全一致

ということで、この親要素を伸ばします。

Point #logo {
text-align: center;
width: 100%;
}

これでキチンと真ん中に表示されました。

いい感じにロゴが真ん中に

でも、なぜかパソコンはうまくいったんですが、スマホではロゴが左に寄ったままです。

スマホ表示

なぜかこれでスマホ表示がうまくいきました

検証機能を使用し、なんとかスマホ表示でもロゴを真ん中にできないかと試行錯誤をしていると

Point #logo span a, #logo h1 a {
width: 100%;
text-align:center;
}

の追加でスマホページのロゴが真ん中に来ました。

で、なぜか#logo h1 aだけの指定だとトップページのロゴは真ん中にきたのですが、記事ページに移動すると左寄せのままになっていたんです。

なので、検証機能を使って色々いじってみた結果、#logo span aも一緒に指定をするとトップページと記事ページの両方でロゴが中央揃えになりました。

検証機能

※検証機能

 

まとめ

一応、中央揃えにはなったけど、はたしてこれで本当に良かったのだろうか・・・?

本当にサルワカさんのブログは、私のような初心者にも分かりやすく書かれてあるので、良かったです。

本日のスペシャルサンクスサルワカ:CSSで中央寄せする9つの方法(縦・横にセンタリング)

桃太郎

名前もアイコンも男っぽいですが、女です。
好奇心旺盛で、やりたいと思ったことに色々手を出したりするので、このブログも色々なジャンルを書いています。
いわゆる雑記ブログ。

 COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です