モバイルのロゴ画像が真ん中表示されなくなってしまいました。
何かしら他のCSSが影響しているようです。
原因がわからないので、対処法をお知らせ。
WordPress：ヘッダーimgをセンター配置CSS
ヘッダーの画像や、ロゴ画像。
これらは、PCでは左に寄せてあります。
スマホ(モバイル)表示では、真ん中に置きたいです。
大体、こんなCSSでうまくいきます。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
header{
text-align: center;
width: 100%;
}
ついでに、
ロゴ画像の制作は私の過去記事を参考に。
フリーフォントを使いタイトルロゴを作成する。ヘッダーロゴ画像。
さて、なぜか
text-align: center;
では、画像がうまく真ん中にならない事があります。
理由は色々あって、よく分かりません(そこ追究しないタイプ)
詳しく載せてくださっているサイトがあります。
ご興味ある方はじっくり読んでみて下さい。
図解で分かりやすい！CSSで画像を中央寄せする方法
http://xn--eck9awc8j.biz/css-image-center/
文系の私には何がなんやら…。
サイコロを頭の中で展開できないタイプの人間には難しいです。
おそらく、
<p>の段落要素を使っている時は、
前後に改行が入りますよね。
その時に、width: px;を使ったら、
画像が真ん中にならない…みたいです。
違う？
子テーマでwidthを指定していなくても、
親テーマで指定されていたりするので、
そういうのが影響しているのでしょう…か。
私は曖昧な認識です。
画像が真ん中に表示されない時の裏ワザCSS
どうしても真ん中にならなかったので、
いい方法はないか何度も試してみました。
最終的に上手くいったCSSがこちらです。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
header img {
margin-left:auto;
margin-right:auto;
}
以上です。
考え方としては、
両サイドに同じ幅の余白＝margin
を持たせるという事なので、正しいですね。
CSSに指定した通り、
実現できないということは何度もあります。
圧倒的に多い理由は、「コードの記入ミス」
これをまず疑いましょう。
そして、親テーマや、同じセクションに影響する他のCSSが無いか探します。
にっちもさっちもいかない時は、
以下のコードも活用して下さい。
・回り込みを解除
p{
float:none;
}
または
・表示位置の設定を解除
p{
position:static;
}
色々見てみましたが、
やはり基礎のCSS知識が無い事が、
カスタマイズ苦戦の一番の原因でした。
もっと勉強しないと、と思うところです。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク