Twenty Thirteenで記事の高さをカスタマイズ

デフォルトでは、サイドバーと記事の高さが思い通りに調整されていないと感じることがあります。「Twenty Thirteen」の記事の高さをカスタマイズします。

はじめに

「Twenty Thirteen」の記事の高さをカスタマイズします。

Javascriptの変更（functions.js）

functions.jsの記述を以下のように変更します。marginで、サイドバーが記事の右に位置している場合の記事の高さを調整し、margin2の変数で、サイドバーが記事の下に回り込んだ場合の高さを調整できるようにしました。

＜変更前＞

	/**
	 * Adds a top margin to the footer if the sidebar widget area is higher
	 * than the rest of the page, to help the footer always visually clear
	 * the sidebar.
	 */
	$( function() {
		if ( body.is( '.sidebar' ) ) {
			var sidebar   = $( '#secondary .widget-area' ),
			    secondary = ( 0 === sidebar.length ) ? -40 : sidebar.height(),
			    margin    = $( '#tertiary .widget-area' ).height() - $( '#content' ).height() - secondary;

			if ( margin > 0 && _window.innerWidth() > 999 ) {
				$( '#colophon' ).css( 'margin-top', margin + 'px' );
			}
		}
	} );

＜変更後＞
14行目の値を変えることでサイドバーが記事の右に位置している場合の記事の高さを調整し、17行目の値を変えることでサイドバーが記事の下に回り込んだ場合の高さを調整します。

	/**
	 * Adds a top margin to the footer if the sidebar widget area is higher
	 * than the rest of the page, to help the footer always visually clear
	 * the sidebar.
	 */
	$( function() {
		if ( body.is( '.sidebar' ) ) {
			var sidebar   = $( '#secondary .widget-area' ),
				secondary = ( 0 === sidebar.length ) ? -40 : sidebar.height(),
				margin    = $( '#tertiary .widget-area' ).height() - $( '#content' ).height() - secondary;
				margin2   = ( 0 === sidebar.length ) ? -40 : sidebar.height();

			if ( margin > 0 && _window.innerWidth() > 999 ) {
				// To add a height of content area, increase the value of margin.
				margin  = margin  - 20;
				$( '#colophon' ).css( 'margin-top', margin + 'px' );
			} else {
				// To add a height of content area, increase the value of margin2.
				margin2 = margin2 - 134;
				$( '#colophon' ).css( 'margin-top', margin2 + 'px' );
			}
		}
	} );

おわりに

「Twenty Thirteen」の記事の高さをカスタマイズして、サイドバーの見え方を調整しました。

関連記事（Twenty Thirteenの共通エリアの表示をカスタマイズ）

1. Twenty Thirteenのヘッダーをカスタマイズ
2. Twenty Thirteenのメニューをカスタマイズ
3. Twenty Thirteenのサイドバー（右）をカスタマイズ
4. Twenty Thirteenのサイドバー（下）をカスタマイズ
5. Twenty Thirteenのフッターをカスタマイズ
6. Twenty Thirteenで記事の高さをカスタマイズ

関連記事（目次）

1. インターネットで情報発信！