2016年4月16日

ヘッダー画像やロゴ画像が、スマホ表示で真ん中にならない時は。CSS指定。

スポンサードリンク

 WordPressテーマを変えたら、
モバイルのロゴ画像が真ん中表示されなくなってしまいました。

何かしら他の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ヘルプを参照下さい。


 ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)


スポンサードリンク