サポート » テーマ » twentyeleven でタイトル文字を画像に変える方法

  • rodos

    (@rodos)


    twentyeleven のテーマでのタイトル文字を画像に変える方法についての質問です。
    現在、子テーマを使って style.css に以下のものを追記しています。

    #site-title a {
    height: 0px;
    display: block;
    overflow: hidden;
    width: 400px; /*画像の横幅*/
    padding-top: 100px; /*画像の高さ*/
    background: url(images/logo.png) no-repeat left top;
    margin-top: -45px; /* 画像を上に移動 */
    margin-left: -25px; /* 画像を左に移動 */
    }

    しかし、これだとスマートフォンなどでブログを見た際に
    タイトル部分の画像の大きさが変わりません。

    また、画像がブログの枠から左側にはみ出してしまい
    デザインが崩れてしまいます。

    デザインを崩さないように画像が自動的に縮小するように
    したいのですがどうしたらいいのでしょう?
    header.php の部分に直接埋め込むようにするのでしょうか?
    もうしそうだとすると、どのようにすればいいのでしょうか?

    教えていただけると助かります。よろしくお願い致します。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • nobita

    (@nobita)

    こんにちは、

    Twentyeleven の heder.phpのサイトタイトルのテンプレートを以下のような構造に変更します。
    a要素の外側にあるspan要素を、a要素の内側に移動します。

    <h1 id="site-title">
    	<a href="" rel="home"><span>Title</span></a>
    </h1>

    style.cssの末尾に以下をセットします

    #site-title{
    	background: url(http://example.com/images/example.jpg);
    	-moz-background-size:cover;
    	-webkit-background-size:cover;
    	-o-background-size:cover;
    	-ms-background-size:cover;
    	background-size:cover;
    	width:400px;
    	max-width:100%;
    	height:80px;
    	margin:4.285em 0 0!important;
    }
    #site-title a{
    	display:block;
    	height:100%;
    	width:100%;
    }
    #site-title a span{
    	display:none;
    }
    @media (max-width: 800px) {
    /*ディスプレイサイズ800px迄*/
    
    }
    @media (max-width: 650px) {
    /*ディスプレイサイズ650px迄*/
    
    }
    @media (max-width: 450px) {
    /*ディスプレイサイズ450px迄*/
    
    }
    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* 320px - 480pxまでの、ディスプレイサイズ*/
    
    }

    background-repeatなどの設定は、追加してください

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「twentyeleven でタイトル文字を画像に変える方法」には新たに返信することはできません。