Twenty Fourteen - Child03

子テーマのスタイルシートを使ってテキストリンクの文字色をカスタマイズ

Twenty Fourteen - Child03

Pocket

Twenty Fourteen のテキストリンクに関するカスタマイズ

記事のタイトルや記事本文中のテキストリンク、サイドバーのテキストリンクなど。数々のテキストリンクのスタイルが存在します。カスタマイズはスタイルシートである style.css という書類に記載して変更していきます。親テーマのスタイルシートをインポートした場合は追記していきましょう。または、親テーマをコピーした場合は該当箇所を上書きしましょう。

記事本文中のテキストリンクの色を変更する

記事本文中のテキストリンクに施される装飾はスタイル(Text Decoration)とカラーがあります。本文中のリンクを張った文字と一般の文字を区別するための <a> タグに関するスタイルとカラーの設定と、リンクを張った文字にマウスを重ねた場合に変化する <hover> によるスタイルとカラーの変化を設定します。

テキストリンクに施されるカラーに関する記載

テキストリンクに施されるカラーに関する記載は親テーマスタイルシートの該当箇所(119行目と134行目)のカラーコードを設定すればテキストリンクの色を変更することが可能です。

親テーマの style.css

a {
	color: #24890d;
	text-decoration: none;
}
a:active,
a:hover {
	color: #41a62a;
}

テキストリンクに施されるスタイルに関する記載

テキストリンクに施されるスタイル(Text Decoration)に関する記載は親テーマスタイルシートの該当箇所(1249行目以降)の text-decoration を設定すればテキストリンクのスタイルを変更することが可能です。

親テーマの style.css

.entry-content a,
.entry-summary a,
.page-content a,
.comment-content a {
	text-decoration: underline;
}

.entry-content a:hover,
.entry-summary a:hover,
.page-content a:hover,
.comment-content a:hover {
	text-decoration: none;
}

記事本文中のテキストリンクに施されるスタイルとカラーに関する追記方法

子テーマの style.css へ、記事本文中のテキストリンクに施されるスタイルとカラーの指定を追記します。

子テーマの style.css の入力例

/* 記事中のテキストリンクの文字色を変更する */

a {
	color: #336699;
}

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

/* 記事中のテキストリンクのスタイルを変更する */

.entry-content a,
.entry-summary a,
.page-content a,
.comment-content a {
	text-decoration: underline;
}

.entry-content a:hover,
.entry-summary a:hover,
.page-content a:hover,
.comment-content a:hover {
	text-decoration: none;
}

記事のタイトルの色を変更する

記事のタイトルの色指定は

  • .entry-title
    シングルページでリンクが張られていない状態
  • .entry-title a
    トップページやアーカイブページでリンクが張られた状態
  • .entry-title a:hover
    リンクが張られたタイトルにマウスが重なったとき

以上の三通りで指定します。

記事のタイトルの色に関する記載は親テーマスタイルシートの1059行目の 6.2 Entry Header という項目の中にあります。以下の該当箇所(1078行目と1082行目)のカラーコードを変更すればリンクが張られた記事のタイトル色を変更することが可能です。

親テーマの style.css

/**
 * 6.2 Entry Header
 * -----------------------------------------------------------------------------
 */

.entry-header {
	position: relative;
	z-index: 1;
}

.entry-title {
	font-size: 33px;
	font-weight: 300;
	line-height: 1.0909090909;
	margin-bottom: 12px;
	margin: 0 0 12px 0;
	text-transform: uppercase;
}

.entry-title a {
	color: #2b2b2b;
}

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

親テーマ「TwentyFourteen」そスタイルシートでは「シングルページでリンクが張られていない状態」のタイトル色は特に指定されていません。
子テーマの style.css に下記コードを追記するとインポートされた親テーマのスタイルシートの設定より優先されます。

子テーマの style.css の入力例

/* 記事のタイトルの色を変更する */

.entry-title {
	color: #808080;
}

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

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

このように記事のタイトルの色が変わります。
記事のタイトルの色を変更する

Featured Content のタイトルのみ白色にしておきたい場合は、タイトル色の指定の後に「Featured Content」の指定を行います。以下のように変更してください。

/* 記事のタイトルの色を変更する */

.entry-title {
	color: #808080;
}

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

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

.featured-content a {
	color: #fff;
}

このようにFeatured Content のタイトルのみ白色に変わります。
Featured Content のタイトルのみ白色に変わります

メインサイドバーのウィジェットの色を変更する

左側の「メインサイドバー」に表示されているウィジェットの文字の色を変更します。テキストにリンクが張られている箇所の文字色を変更する記載は親テーマスタイルシートの2067行目の 7.1 Widgets という項目の中にあります。以下の該当箇所(2086行目と2090行目)のカラーコードを変更すればリンクが張られたウィジェットの文字色を変更することが可能です。

親テーマの style.css

/**
 * 7.1 Widgets
 * -----------------------------------------------------------------------------
 */

/* Primary Sidebar, Footer Sidebar */

.widget {
	font-size: 14px;
	-webkit-hyphens: auto;
	-moz-hyphens:    auto;
	-ms-hyphens:     auto;
	hyphens:         auto;
	line-height: 1.2857142857;
	margin-bottom: 48px;
	width: 100%;
	word-wrap: break-word;
}

.widget a {
	color: #fff;
}

.widget a:hover {
	color: #41a62a;
}

子テーマの style.css へ、メインサイドバーのウィジェットの文字色を変更するカラーの指定を追記します。

子テーマの style.css の入力例

/* メインサイドバーのウィジェットの色を変更する */

.widget a {
	color: #336699;
}

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

このようにメインサイドバーのウィジェットの文字の色が変わります。
メインサイドバーのウィジェットの色を変更する

コンテンツサイドバーのウィジェットの色を変更する

右側の「コンテンツサイドバー」に表示されているウィジェットの文字の色を変更します。テキストにリンクが張られている箇所の文字色を変更する記載は親テーマスタイルシートの2461行目の 7.2 Content Sidebar Widgets という項目の中にあります。以下の該当箇所(2466行目と2470行目)のカラーコードを変更すればリンクが張られたウィジェットの文字色を変更することが可能です。
親テーマの style.css

/**
 * 7.2 Content Sidebar Widgets
 * -----------------------------------------------------------------------------
 */

.content-sidebar .widget a {
	color: #24890d;
}

.content-sidebar .widget a:hover {
	color: #41a62a;
}

子テーマの style.css へ、コンテンツサイドバーのウィジェットの文字色を変更するカラーの指定を追記します。

子テーマの style.css の入力例

/* コンテンツサイドバーのウィジェットの色を変更する */

.content-sidebar .widget a {
	color: #336699;
}

.content-sidebar .widget a:hover {
	color: #FA8072;
}

このようにコンテンツサイドバーのウィジェットの文字の色が変わります。
コンテンツサイドバーのウィジェットの色を変更する

ページネーションの色を変更する

トップページやアーカイブページで複数のページに分かれる時、最下部に現れるページネーションの色を変更します。ページネーションの色に関する記載は親テーマスタイルシートの1576行目の Paging Navigation という項目の中にあります。以下の該当箇所(1603行目と1607行目)のカラーコードを変更すればページネーションの色を変更することが可能です。

親テーマの style.css

/* Paging Navigation */

.paging-navigation {
	border-top: 5px solid #000;
	margin: 48px 0;
}

.paging-navigation .loop-pagination {
	margin-top: -5px;
	text-align: center;
}

.paging-navigation .page-numbers {
	border-top: 5px solid transparent;
	display: inline-block;
	font-size: 14px;
	font-weight: 900;
	margin-right: 1px;
	padding: 7px 16px;
	text-transform: uppercase;
}

.paging-navigation a {
	color: #2b2b2b;
}

.paging-navigation .page-numbers.current {
	border-top: 5px solid #24890d;
}

.paging-navigation a:hover {
	border-top: 5px solid #41a62a;
	color: #2b2b2b;
}

子テーマの style.css へ、ページネーションの色を変更するカラーの指定を追記します。

子テーマの style.css の入力例

/* ページネーションの色を変更する */

.paging-navigation .page-numbers.current {
	border-top: 5px solid #336699;
	color: #336699;
}

.paging-navigation a:hover {
	border-top: 5px solid #FA8072;
	color: #FA8072;
}

このようにページネーションの色が変わります。
ページネーションの色を変更する

Post Navigationの色を変更する

記事の個別ページ(シングルページ)で「前の投稿」や「次の投稿」へ移動するポストナビゲーションの色を変更します。ポストナビゲーションの色に関する記載は親テーマスタイルシートの1576行目の 6.7 Post/Image/Paging Navigation という項目の中にあります。以下の該当箇所(1573行目)のカラーコードを変更すればポストナビゲーションの色を変更することが可能です。

親テーマの style.css

/**
 * 6.7 Post/Image/Paging Navigation
 * -----------------------------------------------------------------------------
 */

.nav-links {
	-webkit-hyphens: auto;
	-moz-hyphens:    auto;
	-ms-hyphens:     auto;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	hyphens:         auto;
	word-wrap: break-word;
}

.post-navigation,
.image-navigation {
	margin: 24px auto 48px;
	max-width: 474px;
	padding: 0 10px;
}

.post-navigation a,
.image-navigation .previous-image,
.image-navigation .next-image {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding: 11px 0 12px;
	width: 100%;
}

.post-navigation .meta-nav {
	color: #767676;
	display: block;
	font-size: 12px;
	font-weight: 900;
	line-height: 2;
	text-transform: uppercase;
}

.post-navigation a,
.image-navigation a {
	color: #2b2b2b;
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7142857142;
	text-transform: none;
}

.post-navigation a:hover,
.image-navigation a:hover {
	color: #41a62a;
}

子テーマの style.css へ、ポストナビゲーションの色を変更するカラーの指定を追記します。

子テーマの style.css の入力例

/* ポストナビゲーションの色を変更する */
.post-navigation a:hover,
.image-navigation a:hover {
	color: #FA8072;
}

このようにポストナビゲーションの色が変わります。
ポストナビゲーションの色を変更する

送信ボタンの色を変更する

コメントを送信 などの送信ボタンの色を変更します。送信ボタンの色に関する記載は親テーマスタイルシートの502行目の Buttons という項目の中にあります。以下の該当箇所(509行目と529行目)のカラーコードを変更すれば送信ボタンの色を変更することが可能です。

親テーマの style.css

/* Buttons */

button,
.contributor-posts-link,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: #24890d;
	border: 0;
	border-radius: 2px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 10px 30px 11px;
	text-transform: uppercase;
	vertical-align: bottom;
}

button:hover,
button:focus,
.contributor-posts-link:hover,
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: #41a62a;
	color: #fff;
}

子テーマの style.css へ、送信ボタンの色を変更するカラーの指定を追記します。

子テーマの style.css の入力例

/* Buttonsの色を変更する */

button,
.contributor-posts-link,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: #FA8072;
}

button:hover,
button:focus,
.contributor-posts-link:hover,
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: #E49187;
	color: #fff;
}

このように送信ボタンの色が変わります。
送信ボタンの色を変更する