2018.04.30スポンサーリンク桃太郎こんにちは、桃太郎です。ヘッダー画像を変えてみました!現在(2018/3/15)ATLASっていうワードプレスのテーマを使用しているんですが、ロゴを中央揃えにする機能がないみたいで、苦労してやっとCSSで中央揃えにしました。ロゴは簡単にロゴメーカーかなんかで作成しようとしたのですが、なかなか保存がうまくいかず結局手作りに。ちなみにバンビ?のイラストと当サイトは一切関係ありません。(真顔)この記事ではATLASでのロゴの中央揃えの仕方を解説しますが、うまく応用すれば他の中央揃えが出来ないテーマでも応用できるかもしれません。失敗2:親要素が小さいまとめATLASでのロゴを中央揃えにした方法このように設定すればOKです。100%;}CSSだけではなく、順序立って知りたい方。なったのか?が知りたい方は下記をお読み下さい。ロゴを設定するまず、外観→カスタマイズ→全体設定で、ロゴの所に画像を入れます。すると、こんな風に左のほうに表示されます。桃太郎これをなんとかして中央揃えにしたい!中央揃えにする失敗1:text-align:centerの場所これに苦戦しました(・・;)初めは、headerに直接text-align:centerの指定をすればいいやろ!って思ってたんですが、画像みたいになってしまいました。わかります?全体の真ん中に配置されるのではなく、メインコンテンツ?部分の真ん中に来ちゃってます。いうidにtext-align:centerを設定しました。center;}を設定する。これだけだとまだ綺麗な真ん中ではありません。それの原因が失敗2の部分になります。失敗2:親要素が小さい私もそこまでcssとか詳しくないんですが検索したり、ネットで調べたり、ググったりしていたらこちらの記事にたどり着きました。サルワカ:CSSで中央寄せする9つの方法(縦・横にセンタリング)上記の記事を読みすすめていくと、こう書かれてある所があります。あっ、コレだ・・・!完全一致ということで、この親要素を伸ばします。100%;}これでキチンと真ん中に表示されました。パソコンはうまくいったんですが、スマホではロゴが左に寄ったままです。100%;text-align:center;}の追加でスマホページのロゴが真ん中に来ました。aだけの指定だとトップページのロゴは真ん中にきたのですが、記事ページに移動すると左寄せのままになっていたんです。aも一緒に指定をするとトップページと記事ページの両方でロゴが中央揃えになりました。※検証機能まとめ一応、中央揃えにはなったけど、はたしてこれで本当に良かったのだろうか・・・?本当にサルワカさんのブログは、私のような初心者にも分かりやすく書かれてあるので、良かったです。本日のスペシャルサンクスサルワカ:CSSで中央寄せする9つの方法(縦・横にセンタリング)スポンサーリンクTweetShareGoogle+HatenaPocketfeedlyこちらの記事もオススメですワードプレスで大きいアイコンで吹き出しを表示させる方法エックスサーバー契約しました^^SEO対策にSEOチェキ!競合ブログを解析してみよう。名前もアイコンも男っぽいですが、女です。好奇心旺盛で、やりたいと思ったことに色々手を出したりするので、このブログも色々なジャンルを書いています。コメントをキャンセルメールアドレスが公開されることはありません。事務の仕事って大変?事務に転職する前に知りたい事務のアレコレ初めていくなら見てほしい!八幡東区のシーサードスパ温泉情報。プロフィール桃太郎こじらせ女子。色々なことに興味を持ち、手を出すのでさまざまなジャンルに詳しくなる。それを生かして、得た知識をブログで公開中。杉乃井ホテルに宿泊する人が行く前に確認しておきたい事。セルカレンズでケラレが出る!解決法を写真を使って解説します。おすすめの自撮り棒を紹介。viewお出掛け初めて杉乃井ホテルに宿泊する人が行く前に確認しておきたい事。viewカメラセルカレンズでケラレが出る!解決法を写真を使って解説します。きび団子よりもみたらし。