サポート » テーマ » Twenty Elevenでロゴを中央に置く

  • Twenty Elevenの子テーマを作ってstyle.cssを編集してサイトタイトルの変わりにロゴを入れました。

    さて、入れたロゴを今度はセンタリングしたいのですが、どうしてもできません。
    みなさんはどうやってやりますか?

    ちなみにロゴは
    #site-title a に
    background-imageとして入れました。

    phpは素人ですのでお手柔らかによろしくおねがいします!

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • こんにちは

    background-position で 指定できると思います

    試してませんが、#site-title a ではなくてheaderなどに入れるといいかもしれないです

    このテーマは、レスポンシブデザインといって、ブラウザの幅によって タイトル(#site-title)の位置が変わるようになっているためです。

    http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position

    @nobitaさん
    ご返信ありがとうございます。
    リンクの例にならって
    headerにいれてみました。
    しかし、ロゴは真ん中には来てくれませんでした。(涙)

    他の可能性はありますか?
    一応site-titleとsite-descriptionを大きくdivでくくってそのマージンを0 auto;
    としてもやってみましたが、ちょっと右に動いただけで、真ん中に来ません。

    ということは、ヘッダーの右の部分になにか隠れたもコンテンツがあるんでしょうか?

    こんにちは、

    #site-titleのスタイルルールは、以下のようになっています。

    /* style.css line:510*/
    #site-title {
    margin-right: 270px;
    padding: 3.65625em 0 0;
    }
    
    @media (max-width: 650px) {
    ...
    /* style.css line:2410 */
    	#site-title {
    		padding: 5.30625em 0 0;
    	}
    ...
    }

    一応site-titleとsite-descriptionを大きくdivでくくってそのマージンを0 auto;
    としてもやってみましたが、ちょっと右に動いただけで、真ん中に来ません。

    PC用のブラウザで幅、1000pxぐらいで見た場合は、
    510行目のmargin-right のルールがあるので、#site-titleは、検索ボックスとの重複が出ないように左によっているので、センタリングしても ちょっと右によるという事になります。
    margin:0 200px;とかに変更する必要があります。

    @media (max-width: 650px) {
    次に、ブラウザ幅が、650px以下になると、

    padding: 5.30625em 0 0;
    が適用されます。

    これは、ページ幅が狭く表示された場合に、検索ボックスとタイトルがかぶらないように、
    検索ボックスの下側にタイトルを出すという指定です。

    この二つのスタイル設定に応じた必要があります。

    また、ブラウザ幅を、微調整しながらスタイルを確認する必要があります。

    レスポンシブデザインは、スタイルシートが複雑ですので、慣れが必要です。

    スタイルシートのカスタマイズを簡単に済ませようとすると、Twentyten等の固定幅レイアウトのほうが調整自体はし易いです。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「Twenty Elevenでロゴを中央に置く」には新たに返信することはできません。