JetpackのMobile themeをCustomize(CSS変更)

2014年6月10日2014年6月11日iPad/iPod/iPhone,WordPress,モバイル

Jetpackのモバイルテーマの、CSS(色などのスタイル)のカスタマイズ方法に付いて、もう少し詳しく書きます。

Jetpackのモバイルテーマのカスタマイズ[追記あり] | プラスα空間 (2014年5月18日)
Jetpackのモバイルテーマをカスタマイズ(フッタを追加) | プラスα空間 (2014年6月3日)

Jetpackのモバイルテーマのスタイルシートは、次の物です。これを参考にカスタマイズします。

wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/style.css

最初、どこから手をつけて良いのかわからなかったのですが、次の記事を参考にさせていただきました。ありがとうございます。

WordPressのJetpackモバイルテーマをカスタマイズする方法 | 驚異の趣味人

モバイルテーマのカスタマイズの基本的な方法が、公式サイトで公開されています。

Customize the Jetpack Mobile Theme — Jetpack for WordPress

また、基本的な色の設定は、フォーラムで取り上げられています。

WordPress › Support » JetPack Mobile Theme – Change Color Scheme

まず、CSSのカスタマイズ機能を有効にしておく必要があります。私の場合、すでに有効化してあるので、左端に青い線が表示されています。有効化されていなければ、右端の有効化で有効化してください。

その後、CSSのカスタマイズは、ダッシュボード→外観→CSS編集で、モバイルテーマにもこのCSSを適用するにチェックを入れておきます。

私がカスタマイズしているモバイルテーマの一部です。

/* Jetpack Mobile Theme */
/* リンク文字色 */
.mobile-theme #site-generator a,
.mobile-theme a {
	color: blue;
}

/* メニュー背景色 */
.mobile-theme .menu-search {
	background: magenta;
}

/* 検索窓背景色 */
.mobile-theme .search-form #s {
	background: pink;
	color: rgba(255,255,255,0.9);
	font-weight: bold;
}

/* 検索窓背景色 */
.mobile-theme #respond input#submit {
	background-color: pink;
	color: rgba(0,0,0,0.9);
}

/* サイトタイトル背景色 */
.mobile-theme #branding {
	background-color: orange;
}

/* サイトタイトル文字色 */
.mobile-theme #site-title a {
	color: white;
	font-weight: bold;
	text-shadow: black 0 0 2px;
}

/* サブタイトル文字色 */
.mobile-theme #site-description {
	color: white;
	font-weight: bold;
	text-shadow: black 0 0 2px;
}

/* 前へ、次へ背景 */
.mobile-theme .nav-previous a,
.mobile-theme .nav-next a {
	color: white;
	background: navy;
}