追加CSSという機能でカスタマイズしてみました。

WordPressにて構築したブログのデザインをリニューアル。これまでのデザインも気に入ってましたが、10年以上おなじテーマを使うとさすがに古くさくなってきた。従来はPC用サイトがメインで、モバイル用には別デザインが適用されていたけれど、スマートフォンなどモバイルデバイスでのアクセスが増加してきたのでPC用と親和性をもたせたい。WordPress用にオフィシャルのテーマが公開されているいっぽう、個人で凝ったテーマも公開されている。ただ、個人公開のテーマはセキュリティ的な問題があるし、メンテナンスが継続する保障もない。あるていど信用できてアップデートも期待できるとなると、オフィシャルのテーマにせざるをえません。WordPressオフィシャルテーマとしてTwentyというシリーズがあるうち、『Twenty Fourteen』というテーマをカスタマイズすることにしました。

• Twenty Fourteen — 無料の WordPress テーマ

このままのデザインでも悪くはないですが、エントリーのタイトルフォントがでかすぎたり、サイドバーやエントリーの幅がせますぎたりと気になるところがある。テーマそのものを改造することもできるけど、それだとテーマがアップデートされると元にもどってしまうので、追加CSSという機能でカスタマイズしてみました。

追加CSSとは、テーマの標準設定を特定の部分だけ上書きできるもの。旧デザインの色遣いやレイアウトに近い感じで変更。『Twenty Fourteen』のスタイルシート（style.css）を調べて、変更したい箇所の設定を洗い出し、追加CSSに追記しました。新しいテーマはブラウザのウインドウサイズごとにレイアウトが最適化されるので、PCでもスマホでもいい感じで表示されるように。

ご参考までに、現時点での当サイトに適用されている『Twenty Fourteen』用追加CSSを公開。必要と思われる箇所のみなので、気になる場所があったら随時追加、変更するかもしれません。てか、こういう情報があまりなくて、トライ＆エラーでの解析が面倒でしたよ。

世界一わかりやすいWordPress 導入とサイト制作の教科書 (世界一わかりやすい教科書)

posted with カエレバ

安藤 篤史,岡本 秀高,古賀 海人,深沢 幸治郎 技術評論社 2017-06-17

Amazon

楽天市場

/**
 * Twenty Fourteen for Astronaut Custom ver1.2
 * -----------------------------------------------------------------------------
 */

/**
 * 1.0 Reset
 * -----------------------------------------------------------------------------
 * リンク色、選択色を変更
 */

a {
	color: #006699;
}

a:active,
a:hover {
	color: #FF5E06;
}

::selection {
	background: #099999;
}

/**
 * 2.0 Repeatable Patterns
 * -----------------------------------------------------------------------------
 * ボタンの色を変更
 */

/* Buttons */

button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: #006699;
}

button:hover,
button:focus,
.button:hover,
.button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background-color: #FF5E06;
}

button:active,
.button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	background-color: #099999;
}

/**
 * 3.0 Basic Structure
 * -----------------------------------------------------------------------------
 * メインコンテンツを中央寄せ
 */

.site {
	margin-left: auto;
	margin-right: auto;
}

/**
 * 4.0 Header
 * -----------------------------------------------------------------------------
 * ヘッダーの背景色変更、検索ボタンの色変更
 */

.site-header {
	background-color: #099999;
}

.site-title {
	font-size: 20px;
}


/* Search in the header */

.search-toggle {
	background-color: #006699;
}

.search-toggle:hover,
.search-toggle.active {
	background-color: #FF5E06;
}

.search-box {
	background-color: #006699;
}

/**
 * 5.0 Navigation
 * -----------------------------------------------------------------------------
 * メニュートグルの色変更
 */

.menu-toggle {
	background-color: #099999;
}

/**
 * 6.0 Content
 * -----------------------------------------------------------------------------
 */

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	max-width: 750px;
}

/**
 * 6.1 Post Thumbnail
 * -----------------------------------------------------------------------------
 * サムネイル画像の背景を無地に
 */

.post-thumbnail {
	background: #FFFFFF;
}

a.post-thumbnail:hover {
	background-color: #FFFFFF;
}

/**
 * 6.2 Entry Header
 * -----------------------------------------------------------------------------
 * エントリーの文字サイズ、色、幅を調整
 */

.entry-title {
	font-size: 22px;
	font-weight: 600;
	color: #006699;
	text-transform: none;
}

.entry-title a {
	color: #006699;
}

.entry-title a:hover {
	color: #FF5E06;
}

/**
 * 6.3 Entry Meta
 * -----------------------------------------------------------------------------
 * エントリーリンクの色変更
 */

.entry-meta a:hover {
	color: #FF5E06;
}

.entry-meta .tag-links a:hover {
	background-color: #FF5E06;
}

.entry-meta .tag-links a:hover:before {
	border-right-color: #FF5E06;
}

/**
 * 7.1 Widgets
 * -----------------------------------------------------------------------------
 * ウィジェットの色を変更
 */

.widget a:hover {
	color: #FF5E06;
}

.widget_calendar tbody a {
	background-color: #006699;
	color: #fff;
	display: block;
}

.widget_calendar tbody a:hover {
	background-color: #FF5E06;
}

/**
 * 8.0 Footer
 * -----------------------------------------------------------------------------
 * フッターの背景色変更
 */

.site-footer {
	background-color: #099999;
}

.slider-direction-nav a:hover {
	background-color: #FF5E06;
}

/**
 * 11.0 Media Queries
 * -----------------------------------------------------------------------------
 * 背景色を変更し、サイドバーの幅を260px、ウィジェットの幅を200pxに変更
 */

#secondary {
background-color: #099999;
}

.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
	background-color: #FF5E06;
}

@media screen and (min-width: 1008px) {
	.search-box-wrapper {
		padding-left: 260px;
	}
	.site-content {
		margin-left: 260px;
	}
	.site:before {
		background-color: #099999;
		width: 260px;
	}
	#secondary {
	width: 200px;
	}
}

@media screen and (min-width: 1080px) {
	#secondary {
	width: 200px;
	}
}