NP Log

タグ: twentyeleven

  • TwentyEleven – ヘッダー画像サイズのカスタマイズ

    今回は、ヘッダ画像の高さのみカスタマイズしてみます。
    デフォルト値 288px を 200px にする場合。
    ※TwentyElevenの子テーマが用意されていることを前提としています。

    修正ファイルは次の２つ

    • style.css
    • fuctions.php

    style.css の修正箇所

    section.feature-image.large {
border: none;
max-height: 200px; /*288px;*/
padding: 0;
width: 100%;
}

    functions.phpの修正箇所

    function twentyeleven_setup() {
/* (省略) */
require( dirname( __FILE__ ) . '/../twentyeleven/inc/theme-options.php' );
require( dirname( __FILE__ ) . '/../twentyeleven/inc/widgets.php' );
/* (省略) */
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 200 ) );
/* (省略) */
}

    require()の行は、子テーマから参照する場合の親テーマのパスに合わせます。

  • TwentyEleven のウィジェットの余白

    WordPressのデフォルトテーマ(TwentyEleven)でウィジェットを設置すると、
    縦方向に結構余白ができてしまいますので調整してみました。
    数値はお好みでどうぞ。

    対象ファイル：style.css

    【修正前】
.widget {
	clear: both;
	margin: 0 0 2.2em;
}
【修正後】
.widget {
	clear: both;
	margin: 0 0 0.4em;
}

  • TwentyEleven – テーマのカスタマイズ

    WordPressテーマの “TwentyEleven” を使っている場合。

    固定ページで親子関係を設定すると、子ページのタイトルがサブメニューとしてプルダウン表示されます。
    このとき、サブメニューのタイトルが長いと、複数行に折り返されてしまいます。
    この設定は、style.cssの中の次の部分です。

    #access ul ul {
	/*(省略)*/
	width: 188px;
	/*(省略)*/
}

#access ul ul a {
	/*(省略)*/
	width: 168px;
}

    この数字を大きくすることで調整できます。

    ここで念のため。

    デフォルトのテーマを直接編集するとバージョンアップで上書きされてしまいますので、子テーマを作ってからカスタマイズします。

    詳しくは、こちら。
    子テーマ – WordPress Codex