WordPress Twenty Sixteen カスタマイズ 5「リンクの色」ソースコード編

ごけたです。既にメタキーワードが苦手になっています。

はじめに

WordPress Twenty Sixteen カスタマイズ その5
今回は「リンクの色」をソースコードで入力設定してみるです。

本来は「Wordpress Twenty Sixteen カスタマイズ 4
「色」ソースコード編」で続けて書く内容でしたが、
変更箇所が多くなりすぎましたので、新規で行っています。

※文中に「親」という言葉が度々出てきます。
ここでの「親」とは「子テーマ」ではない、
元々のTwenty Sixteenの各ファイルのことです。
カスタマイズは「子テーマ」で行っているので、
その対比として「親」、「親テーマ」と呼んでいます。

ページ構成
OSはWindows、ブラウザーはchrome、レンタルサーバーはエックスサーバーです。
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。

1:「リンク」の色指定のソースコードを確認してみる

WordPressは文字やパーツの色指定同様にリンクの色指定も多いです。

実際に親の「style.css」ファイルを見ていくと、文字やパーツの色指定の下に
「hover、focus、active」疑似クラスと呼ばれるリンク用のソースコードがあります。
ここにカラーコードを設定してリンクの色指定をしています。

文字やパーツの色指定、その下にリンクの色指定、
これを「1セット」と考えてソースコードを設定すると
変更箇所がまとまって見やすくなります。

a:hover,
a:focus,
a:active {
	color: #xxxxxx;
}

主にこの部分です。
文字やパーツのリンクの色指定を含むソースコードです。

リンク設定の「hover、focus、active」とは。
「hover(ホバー)」は、マウスのカーソルがリンク文字の上にある時、
「focus(フォーカス)」はTabで文字が選択された時、
「active(アクティブ)」はリンク文字が選択実行中の時の色指定です。
ちょっとややこしいですが、実際にマウスをリンク文字に合わせてみてください。

初期設定では「サイトタイトル」、「記事タイトル」、
「メニュー」、「検索」は「青色」に設定されています。
「投稿者 投稿日 カテゴリー コメントの色指定」、「サブのテキストの色指定」は
「青色に下線が入る」に設定されています。
「ウィジェット」は「黒系」に設定されています。

これら全てを「紫に近い青色」に変更設定してみたいと思います。
下線も非表示に設定したいと思います。

変更は「Wordpress Twenty Sixteen カスタマイズ 4「色」
ソースコード編 カラーコード」内の順番で行っています。
リンクに関係のない2-1、-2、-3、-6、-12、-12-1は飛ばしています。

2-4:「サブのテキストの色指定」をソースコードで入力してみる
2-5:「サイトタイトルの色指定」をソースコードで入力してみる
2-8:「記事タイトルの色指定」をソースコードで入力してみる
2-9:「投稿者 投稿日 カテゴリー コメントの色指定」をソースコードで入力してみる
2-10:「メニューの色指定」をソースコードで入力してみる
2-11:「ページナビの記事タイトル文字」をソースコードで入力してみる

もちろん、ここだけの設定をすればリンクの色指定の変更ができます。

1-1:「サブのテキスト(コピーライト)のリンク」の色指定をソースコードで入力してみる

/* サブのテキストの色指定 */
.site-info {                /* 2426-2432行目前後 */
	color: #686868;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.6153846154;
}

.site-info a:hover,        /* 2437-2440行目前後 */
.site-info a:focus {
	color: #007acc;
}

「サブのテキスト(コピーライト)のリンク」の色指定のソースコードは
親の「style.css」ファイルの「/* サブのテキストの色指定 */」の
2426-2431行目前後の下にある2437-2440行目前後にあります。

※「指定タイトル」と「指定タイトルのリンク」は1セットの考えなので、
xxxx目前後の下にあるxxxx行目前後にあります。と書いています。
.site-info a:hover,
.site-info a:focus {
	color: #0000ff;
}

ここでのリンクの色指定に当たる「color: #007acc;」の
「#007acc;」を「#0000ff;」へと変更しました。

こちらのソースコードを「/* サブのテキストの色指定 */」の下にコピペします。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

これまでにならって、「.site-info a:hover,」の上に
「/* サブのテキストのリンクの色指定 */」 
といったタイトルを付けるかはお好みで。ここでは付けていません。

「サブのテキスト(コピーライト)」の名称は、
「外観」→「カスタマイズ」の「色」での名称に合わせています。
一般的には「コピーライト、クレジット」と言った名称になります。

「コピーライト、クレジット」はフッターにあるので、

/**
 * 11.6 - Footer
 */

の項目内にソースコードがあります。

※リンクの色は変更できましたが、
このリンクは文字にマウスのカーソルを合わせると
下線が入る初期設定になっています。

次で下線を非表示にする設定をしてみました。

1-2:「サブのテキストのリンク」の「下線を消す方法」をソースコードで入力してみる その1

.site-info a:hover,
.site-info a:focus {
	color: #0000ff;
}

「/* サブのテキストのリンク */」の色指定の「color: #0000ff;」の下に
「box-shadow: none;」を入力するだけで下線は非表示になります。

.site-info a:hover,
.site-info a:focus {
	color: #0000ff;
   box-shadow: none;
}

こちらを「 /*サブのテキストの色指定 */」の下にコピペすれば、
リンクの色指定と下線の非表示の変更がいっぺんに出来てます。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。


管理画面左上の「サイトの表示」をクリックして、
「サブのテキスト(コピーライト)」にマウスのカーソルを合わせて
リンクの色が変更され、下線は非表示になったか確認します。

1-3:「サブのテキストのリンク」の「下線を消す方法」をソースコードで入力してみる その2

上記の「その1」の方法はサブのテキストのリンクの下線「だけ」を消す方法です。
他の下線もなるべくまとめて非表示にしたいのでやってみました。

/* 9個のリンクの下線を非表示にする */
.entry-content a,
.entry-summary a,
.taxonomy-description a,
.logged-in-as a,
.comment-content a,
.pingback .comment-body > a,
.textwidget a,
.entry-footer a:hover,
.site-info a:hover {
    box-shadow: 0 1px 0 0 currentColor;
}

9個の下線を非表示に出来るソースコードは
親の「style.css」ファイルの757-767行目前後にあります。

ここでの下線指定に当たる「box-shadow: 0 1px 0 0 currentColor;」の
「1px」を「0px」に変更すれば、下線は非表示になります。

/* 9個のリンクの下線を非表示にする */
.entry-content a,
.entry-summary a,
.taxonomy-description a,
.logged-in-as a,
.comment-content a,
.pingback .comment-body > a,
.textwidget a,
.entry-footer a:hover,
.site-info a:hover {
    box-shadow: 0 0px 0 0 currentColor;
}

このソースコードをWordpressの管理画面のメニューから「外観」→「テーマの編集」の
「style.css」ファイルの一番下にコピペします。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

もし順番通りになさっていれば「4」の
「/* ページナビの前・次の文字の色指定 */」の下にコピペします。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

これまでにならって、「.entry-content a,」の上に
「/* 9個のリンクの下線を非表示にする */」のタイトルを
新規設定なので付けています。

.site-info a:hover,
.site-info a:focus {
	color: #0000ff;
   box-shadow: none;
}

「/* 9個のリンクの下線を非表示にする */」をコピペしたら、
「その1」の下線を消すソースコード「box-shadow: none;」を削除して
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

「その1」のリンクのソースコード「site-info a:hover」は
「/* 9個のリンクの下線を非表示にする */」にも含まれているので、
「その1」の下線を消すソースコード「box-shadow: none;」を削除しました。


この「/* 9個のリンクの下線を非表示にする */」には
これから色指定する、
「/* 投稿者、投稿日、カテゴリー、コメントのリンク */」の下線や、


ウィジェットの「検索ボタン」を「検索欄」を「空欄」でクリックして表示される
投稿画面の「続きを読む」の「リンク」の下線の非表示も含まれています。

管理画面左上の「サイトの表示」をクリックして、
「投稿者、投稿日、カテゴリー、コメントのリンク」や「続きを読む」の
リンクの下線が非表示なったか確認します。

1-4:「サイトタイトルのリンク」の色指定をソースコードで入力してみる

.site-branding .site-title a:hover,
.site-branding .site-title a:focus {
	color: #007acc;
}

「サイトタイトルのリンク」の色指定のソースコードは
親の「style.css」ファイルの「サイトタイトルの色指定」の
1611-1613行目前後の下にある1615-1618行目前後にあります。

/* サイトタイトルの色指定 */
.site-branding .site-title a {
    color: #1a1a1a;
}

.site-branding .site-title a:hover,
.site-branding .site-title a:focus {
	color: #0000ff;
}

ここでのリンクの色指定に当たる「color: #007acc;」の
「#007acc;」を「#0000ff;」へと変更して
「サイトタイトルの色指定」の下にコピペします。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

これまでにならって、「.site-branding .site-title a:hover,」の上に
「/* サイトタイトルのリンクの色指定 */」 といったタイトルを
表示するかはお好みで。ここでは付けていません。

管理画面左上の「サイトの表示」をクリックして、
「サイトタイトル」にマウスのカーソルを合わせてリンクの色が変更されたか確認します。

1-5:「記事タイトルのリンク」の色指定をソースコードで入力してみる

.entry-title a:hover,
.entry-title a:focus {
	color: #007acc;
}

「記事タイトルのリンク」の色指定のソースコードは
親の「style.css」ファイルの「記事タイトルの色指定」の
1712-1714行目前後の下にある1716-1719行目前後にあります。

/* 記事タイトルの色指定 */
.entry-title a {
    color: #dd8500;
}

.entry-title a:hover,
.entry-title a:focus {
	color: #0000ff;
}

ここでのリンクの色指定に当たる「color: #007acc;」の
「#007acc;」を「#0000ff;」へと変更して、
「記事タイトルの色指定」の下にコピペします。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

これまでにならって、「.entry-title a:hover,」の上に
「/* 記事タイトルのリンクの色指定 */」 といったタイトルを
表示するかはお好みで。ここでは付けていません。

管理画面左上の「サイトの表示」をクリックして、
「記事タイトル」にマウスのカーソルを合わせてリンクの色が変更されたか確認します。

1-6:「投稿者、投稿日、カテゴリー、コメントのリンク」の色指定をソースコードで入力してみる

.entry-footer a:hover,
.entry-footer a:focus {
	color: #007acc;
}

「投稿者、投稿日、カテゴリー、コメントのリンク」の色指定のソースコードは
親の「style.css」ファイルの「投稿者、投稿日、カテゴリー、コメントの色指定」の
1996-2002行目前後の下にある2004-2007行目前後にあります。

/* 投稿者、投稿日、カテゴリー、コメントの色指定 */
.entry-footer a {
    color: #0b6617;
}

.entry-footer a:hover,
.entry-footer a:focus {
	color: #0000ff;
}

ここでのリンクの色指定に当たる「color: #007acc;」の
「#007acc;」を「#0000ff;」に変更して、
「投稿者、投稿日、カテゴリー、コメントの色指定」の下にコピペします。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

これまでにならって、「.entry-footer a:hover,」の上に
「/* 投稿者、投稿日、カテゴリー、コメントのリンクの色指定 */」 と
いったタイトルを表示するかはお好みで。ここでは付けていません。

管理画面左上の「サイトの表示」をクリックして、
「投稿者、投稿日、カテゴリー、コメント」にマウスのカーソルを合わせて
リンクの色が変更されたか確認します。

1-7:「リンクのリンク」の色指定をソースコードで入力してみる

順番としては「メニュー」なんですが、非常に複雑でして一旦飛ばして、
「リンクのリンク」の色指定をします。

a:hover,
a:focus,
a:active {
	color: #686868;
}

「リンクのリンク」の色指定のソースコードは
親の「style.css」ファイルの「リンクの色指定」の
733-740行目前後の下にある742-746行目前後にあります。

/* リンクの色指定 */
/**
 * 6.1 - Links
 */
 
a {
    color: #ff0000;
}

a:hover,
a:focus,
a:active {
	color: #0000ff;
}

ここでのリンクの色指定に当たる「color: #686868;」の
「#686868;」を「#0000ff;」へと変更して
「/* リンクの色指定 */」の下にコピペします。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

これまでにならって、「a:hover,」の上に
「/* リンクのリンクの色指定 */」 といったタイトルを
表示するかはお好みで。ここでは付けていません。


管理画面左上の「サイトの表示」をクリックして、
「リンクのリンク」にマウスのカーソルを合わせてリンクの色が変更されたか確認します。

1-8:「検索ボタンのリンク」の色指定をソースコードで入力してみる

次はちょっと細かい箇所ですが、右列の一番上に表示している
ウィジェットの「検索」の「検索ボタン(ルーペマーク)」のリンクの色指定です。

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: #007acc;
}

「検索ボタンのリンク」ソースコードは親の「style.css」ファイルの

/**
 * 5.0 - Forms
 */

内の614-623行目前後にあります。

/* ウィジェット検索マークのリンクの色指定 */
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: #0000ff;
}

ここでのリンクの色指定に当たる「background: #007acc;」の
「#007acc;」を「#0000ff;」へと変更して、
「/* リンクのリンクの色指定 */」の下にコピペします。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

これまでにならって、「button:hover,」の上に
「/* ウィジェット検索マークのリンクの色指定 */」のタイトルは
新規設定なので付けています。


「ウィジェット検索マークのリンクの色指定」を変更した画像がこちら

1-9:「ページナビの記事タイトル文字のリンク」の色指定をソースコードで入力してみる

/* ページナビの記事タイトル文字のリンク */
.post-navigation a:hover .post-title,
.post-navigation a:focus .post-title {
	color: #007acc;
}

これは記事を単体で表示させた時の下部に表示されるナビゲーションの1つで、
「前の記事タイトル、次の記事タイトル」部分のソースコードは
親の「style.css」ファイルの1063-1067前後の下の1093-1096行目前後にあります。

「#007acc;」を「#0000ff;」へと変更して、
「/* ページナビの前・次の文字の色指定 */」の下にコピペします。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

これまでにならって、「.post-navigation a:hover .post-title,」の上に
「/* ページナビの記事タイトル文字のリンク */」といったタイトルを
表示するかはお好みで。ここでは付けていません。

1-1x:「メニューのリンク」の色指定をソースコードで入力してみる

一旦飛ばした「メニューのリンク」の色指定をソースコードで入力してみる」なんですが、
さすがにページが長すぎではないかと。

ですので、「メニュー」に関しては色指定以外にも
画面サイズの表示違いなどもありますので、まとめて別途で設定できればと思っています。

さいごに

Wordpessのリンクの初期設定は
オフィシャルテーマ全てで「青」に設定されています。
マウスのカーソルを合わせると「下線表示」も設定されています。
Google、FireFox、Internet Edge、Yahooも
マウスのカーソルを合わせると「下線表示」になっています。

その一方で「Wordpress リンク 下線 非表示」といった
検索表示を多数見かけます。
リンクのクリック間違えを避ける下線は重要かも知れませんが、
不要と思っている方も多いのかも知れませんね。

最後までお合い下さいまして有難うございました。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク