「Twenty Thirteenの共通エリアの表示をカスタマイズ」タグアーカイブ

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. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

Twenty Thirteenのフッターをカスタマイズ

「Twenty Thirteen」のフッターをカスタマイズします。

はじめに

「Twenty Thirteen」のフッターをカスタマイズします。

スタイルシート(style.css)を変更

・フッターの幅を調整します。

.site-info { padding: 10px  0 22px; }

・背景色/文字色/文字のサイズを変更します。

.site-footer { background-color: #c0c0c0; }
.site-footer { color: #606060; }
.site-footer { font-size: 14px; }

おわりに

「Twenty Thirteen」のフッターをカスタマイズしました。

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

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

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

Twenty Thirteenのサイドバー(下)をカスタマイズ

「Twenty Thirteen」のサイドバー(下)をカスタマイズします。

はじめに

「Twenty Thirteen」のサイドバー(下)をカスタマイズします。

スタイルシート(style.css)を変更

・フッターの幅を調整します。

.site-footer .sidebar-container { padding: 10px 0; }

・背景色を変更します。

.site-footer .sidebar-container { background-color: #ffffff; }

おわりに

「Twenty Thirteen」のサイドバー(下)をカスタマイズしました。

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

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

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

Twenty Thirteenのサイドバー(右)をカスタマイズ

「Twenty Thirteen」のサイドバー(右)をカスタマイズします。

はじめに

「Twenty Thirteen」のサイドバー(右)をカスタマイズします。
・スタイルシート(style.css)を変更

スタイルシート(style.css)を変更

スタイルシートで、サイドバー(右)をカスタマイズします。

<サイドバーの幅>
変更前は300pxですが、300x250pxの広告を入れるのと、そもそも幅が狭いためサイドバーの幅を広げます。

.site-main .widget-area {
    width: 340px;
}

<ウェジェット間の幅>
ウェジェットを一つにまとめたほうがデザインが落ち着くでしょうか。

.widget {
	background-color: rgba(225, 255, 205, 1);
	font-size: 12px;
	-webkit-hyphens: auto;
	-moz-hyphens:    auto;
	-ms-hyphens:     auto;
	hyphens:         auto;
	margin: 0;
	padding: 20px;
	word-wrap: break-word;
}

<ウェジェットの背景色と透明度>
ウェジェットの背景色を変更して、透明度をなしに設定してみました。

.widget {
	background-color: rgba(225, 255, 205, 1);
	font-size: 12px;
	-webkit-hyphens: auto;
	-moz-hyphens:    auto;
	-ms-hyphens:     auto;
	hyphens:         auto;
	margin: 0;
	padding: 20px;
	word-wrap: break-word;
}

<タイトルの文字のスタイル/サイズ/フォント>
タイトルの文字のスタイル等を変更します。

.widget .widget-title {
    font: 700 normal 14px Osaka-mono, "MS Gothic", monospace;
}

<リストの表示>
下線にしてみました。

.widget ul,
.widget ol {
	list-style-type: none;
	margin: 0;
	padding: 0 4px;
}

.widget li {
	border-bottom: 1px solid #d0d0d0;
	padding: 2px;
}

<リストのタイトル表示>
リストを下線にしたのに合わせて、タイトルを太い下線にしてみました。

.widget-title {
	padding       : 0 2px 3px 2px;
	border-bottom : 4px solid #d0d0d0;
}

おわりに

サイドバーの幅を広げると、ウィンドウサイズを変えたときにサイドバーが本文にかぶってしまう対応に苦慮しました。今回は、”width: 94%”で対応しましたが他にもにも方法はありそうです。

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

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

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

Twenty Thirteenのメニューをカスタマイズ

「Twenty Thirteen」のメニューをカスタマイズします。

はじめに

「Twenty Thirteen」のメニューをカスタマイズします。

メニューの高さを変更

スタイルシート(style.css)でメニューの高さを変更します。以下の例では、デフォルトの45pxから30pxに低くしています。

<変更後>

.main-navigation {
	clear: both;
	margin: 0 auto;
	max-width: 1080px;
	min-height: 30px;
	position: relative;
}

メニューのリンクの文字色を変更

メニューのリンクの文字色を変更します。

<変更後>

.nav-menu li a {
	color: #209020;
	display: block;
	font-size: 14px;
	font-weight: bold;
	line-height: 2;
	padding: 3px 10px;
	text-decoration: none;
	background-image: -moz-linear-gradient(top, #ccc 0%, #bbb 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(1, #bbb));
	text-shadow: 3px 6px 6px rgba(0,0,0,0.2), 0px -5px 16px rgba(255,255,255,0.3);
}

フォーカス時のメニューの背景色を変更

フォーカス時のメニューの背景色を変更します。

<変更後>

.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
	background-color: #209020;
	color: #fff;
	background-image: -moz-linear-gradient(top, #aaa 0%, #999 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(1, #bbb));
}

サブメニューのリンクの文字色を変更

サブメニューのリンクの文字色を変更します。

<変更後>

.nav-menu .sub-menu,
.nav-menu .children {
	background-color: #707070;
	border: 2px solid #f7f5e7;
	border-top: 0;
	padding: 0;
	position: absolute;
	left: -2px;
	z-index: 99999;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

サブメニューのリンクがフォーカス時の文字色を変更

サブメニューのリンクがフォーカス時の文字色を変更します。

<変更後>

ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover,
ul.nav-menu ul a:focus,
.nav-menu ul ul a:focus {
	background-color: #209020;
}

現在表示中のメニューのリンクの文字色を変更

現在表示中のメニューのリンクの文字色を変更します。

<変更後>

.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
	background-color: #209020;
	color: #ffffff;
	font-style: normal;
}

メニューの背景色を変更

メニュー(ナビゲーションバー)の背景色を変更します。

<変更後>

.navbar {
	background-color: #e0e0e0;
	margin: 0 auto;
	max-width: 1600px;
	width: 100%;
}

おわりに

「Twenty Thirteen」のメニュー(メインナビゲーション)をカスタマイズしました。

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

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

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

Twenty Thirteenのヘッダーをカスタマイズ

「Twenty Thirteen」のヘッダーをカスタマイズします。

はじめに

「Twenty Thirteen」のヘッダーをカスタマイズします。
・ヘッダーの高さを変更
・サイト名の表示を調整
・サイト説明(キャッチフレーズ)の表示を調整
・ヘッダーの背景画像を変更

ヘッダーの高さを変更

スタイルシート(style.css)で、ヘッダーの高さの変更を行います。以下の例では、230pxから130pxに狭くしています。

<変更後>

.site-header .home-link {
	color: #141412;
	display: block;
	margin: 0 auto;
	max-width: 1080px;
	min-height: 130px;
	padding: 0 20px;
	text-decoration: none;
	width: 100%;
}

サイト名の表示を調整

スタイルシート(style.css)で、サイト名の表示を調整します。サイト名ハイライト時の表示を、下線表示をありからなしにします。フォントサイズを60pxから32pxに変更し、表示位置も合わせて調整します。

<変更後>

.site-header .site-title:hover {
	text-decoration: none;
}

.site-title {
	font-size: 32px;
	font-weight: bold;
	line-height: 1;
	margin: 0;
	padding: 38px 50px 10px 0;
}

サイト説明(キャッチフレーズ)の表示を調整

スタイルシート(style.css)で、サイト説明(キャプション)のフォントサイズを24pxから14pxに変更します。表示位置も合わせて調整します。

<変更後>

.site-description {
	font: 300 normal 14px Osaka-mono, "MS Gothic", monospace;
	margin: 0;
	padding: 3px 4px;
}

ヘッダーの背景画像を変更

ヘッダー用の画像を1600×230のサイズで作成します。ヘッダー用の画像をアップロードし、WordPressの管理画面でヘッダーに設定します。表示する高さをCSSで130pxというように狭くした場合は、上部130px分が表示されます。

おわりに

「Twenty Thirteen」のヘッダーをカスタマイズしました。

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

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

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー