ごけたです。
既にメタキーワードが苦手になっています。
目次
- はじめに
- 1:「リンク」の色指定のソースコードを確認してみる
- 1-1:「サブのテキスト(コピーライト)のリンク」の色指定をソースコードで入力してみる
- 1-2:「サブのテキストのリンク」の「下線を消す方法」をソースコードで入力してみる その1
- 1-3:「サブのテキストのリンク」の「下線を消す方法」をソースコードで入力してみる その2
- 1-4:「サイトタイトルのリンク」の色指定をソースコードで入力してみる
- 1-5:「記事タイトルのリンク」の色指定をソースコードで入力してみる
- 1-6:「投稿者、投稿日、カテゴリー、コメントのリンク」の色指定をソースコードで入力してみる
- 1-7:「リンクのリンク」の色指定をソースコードで入力してみる
- 1-8:「検索ボタンのリンク」の色指定をソースコードで入力してみる
- 1-9:「ページナビの記事タイトル文字のリンク」の色指定をソースコードで入力してみる
- 1-1x:「メニューのリンク」の色指定をソースコードで入力してみる
- さいごに
はじめに
WordPress Twenty Sixteen カスタマイズ その5
今回は「リンクの色」をソースコードで入力設定してみるです。
本来は「Wordpress Twenty Sixteen カスタマイズ 4
「色」ソースコード編」で続けて書く内容でしたが、
変更箇所が多くなりすぎましたので、新規で行っています。
ページ構成
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
リンクは予告なく削除される場合がございます。
OSはWindows、ブラウザーはchrome、
レンタルサーバーはエックスサーバーです。
※文中に「親」という言葉が度々出てきます。
ここでの「親」とは「子テーマ」ではない、
元々のTwenty Sixteenの各ファイルのことです。
カスタマイズは「子テーマ」で行っているので、
その対比として「親」、「親テーマ」と呼んでいます。
1:「リンク」の色指定のソースコードを確認してみる
WordPressは文字やパーツの色指定同様にリンクの色指定も多いです。
実際に親の「style.css」ファイルを見ていくと、文字やパーツの色指定の下に
「hover、focus、active」疑似クラスと呼ばれるリンク用のソースコードがあります。
ここにカラーコードを設定してリンクの色指定をしています。
文字やパーツの色指定、その下にリンクの色指定、
これを「1セット」と考えてソースコードを設定すると
変更箇所がまとまって見やすくなります。
1 2 3 4 5 | a:hover, a:focus, a:active { color: #xxxxxx; } |
主にこの部分です。
文字やパーツのリンクの色指定を含むソースコードです。
「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:「サブのテキスト(コピーライト)のリンク」の色指定をソースコードで入力してみる
1 2 3 4 5 6 7 8 9 10 11 12 | /* サブのテキストの色指定 */ .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行目前後にあります。
xxxx目前後の下にあるxxxx行目前後にあります。と書いています。
1 2 3 4 | .site-info a:hover, .site-info a:focus { color: #0000ff; } |
ここでのリンクの色指定に当たる「color: #007acc;」の
「#007acc;」を「#0000ff;」へと変更しました。
こちらのソースコードを「/* サブのテキストの色指定 */」の下にコピペします。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。
これまでにならって、「.site-info a:hover,」の上に
「/* サブのテキストのリンクの色指定 */」
といったタイトルを付けるかはお好みで。ここでは付けていません。
「外観」→「カスタマイズ」の「色」での名称に合わせています。
一般的には「コピーライト、クレジット」と言った名称になります。
「コピーライト、クレジット」はフッターにあるので、
1 2 3 4 | /** * 11.6 - Footer */ [/code] |
の項目内にソースコードがあります。
このリンクは文字にマウスのカーソルを合わせると
下線が入る初期設定になっています。
次で下線を非表示にする設定をしてみました。
1-2:「サブのテキストのリンク」の「下線を消す方法」をソースコードで入力してみる その1
1 2 3 4 | .site-info a:hover, .site-info a:focus { color: #0000ff; } |
「/* サブのテキストのリンク */」の色指定の「color: #0000ff;」の下に
「box-shadow: none;」を入力するだけで下線は非表示になります。
1 2 3 4 5 | .site-info a:hover, .site-info a:focus { color: #0000ff; box-shadow: none; } |
こちらを「 /*サブのテキストの色指定 */」の下にコピペすれば、
リンクの色指定と下線の非表示の変更がいっぺんに出来てます。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。
管理画面左上の「サイトの表示」をクリックして、
「サブのテキスト(コピーライト)」にマウスのカーソルを合わせて
リンクの色が変更され、下線は非表示になったか確認します。
1-3:「サブのテキストのリンク」の「下線を消す方法」をソースコードで入力してみる その2
上記の「その1」の方法はサブのテキストのリンクの下線「だけ」を消す方法です。
他の下線もなるべくまとめて非表示にしたいのでやってみました。
1 2 3 4 5 6 7 8 9 10 11 12 | /* 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」に変更すれば、下線は非表示になります。
1 2 3 4 5 6 7 8 9 10 11 12 | /* 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個のリンクの下線を非表示にする */」のタイトルを
新規設定なので付けています。
1 2 3 4 5 | .site-info a:hover, .site-info a:focus { color: #0000ff; box-shadow: none; } |
「/* 9個のリンクの下線を非表示にする */」をコピペしたら、
「その1」の下線を消すソースコード「box-shadow: none;」を削除して
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。
「/* 9個のリンクの下線を非表示にする */」にも含まれているので、
「その1」の下線を消すソースコード「box-shadow: none;」を削除しました。
この「/* 9個のリンクの下線を非表示にする */」には
これから色指定する、
「/* 投稿者、投稿日、カテゴリー、コメントのリンク */」の下線や、
ウィジェットの「検索ボタン」を「検索欄」を「空欄」でクリックして表示される
投稿画面の「続きを読む」の「リンク」の下線の非表示も含まれています。
管理画面左上の「サイトの表示」をクリックして、
「投稿者、投稿日、カテゴリー、コメントのリンク」や「続きを読む」の
リンクの下線が非表示なったか確認します。
1-4:「サイトタイトルのリンク」の色指定をソースコードで入力してみる
[code]
.site-branding .site-title a:hover,
.site-branding .site-title a:focus {
color: #007acc;
}
[/code]
1 2 3 4 | .site-branding .site-title a:hover, .site-branding .site-title a:focus { color: #007acc; } |
「サイトタイトルのリンク」の色指定のソースコードは
親の「style.css」ファイルの「サイトタイトルの色指定」の
1611-1613行目前後の下にある1615-1618行目前後にあります。
1 2 3 4 5 6 7 8 9 | /* サイトタイトルの色指定 */ .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:「記事タイトルのリンク」の色指定をソースコードで入力してみる
1 2 3 4 | .entry-title a:hover, .entry-title a:focus { color: #007acc; } |
「記事タイトルのリンク」の色指定のソースコードは
親の「style.css」ファイルの「記事タイトルの色指定」の
1712-1714行目前後の下にある1716-1719行目前後にあります。
1 2 3 4 5 6 7 8 9 | /* 記事タイトルの色指定 */ .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:「投稿者、投稿日、カテゴリー、コメントのリンク」の色指定をソースコードで入力してみる
1 2 3 4 | .entry-footer a:hover, .entry-footer a:focus { color: #007acc; } |
「投稿者、投稿日、カテゴリー、コメントのリンク」の色指定のソースコードは
親の「style.css」ファイルの「投稿者、投稿日、カテゴリー、コメントの色指定」の
1996-2002行目前後の下にある2004-2007行目前後にあります。
1 2 3 4 5 6 7 8 9 | /* 投稿者、投稿日、カテゴリー、コメントの色指定 */ .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:「リンクのリンク」の色指定をソースコードで入力してみる
順番としては「メニュー」なんですが、非常に複雑でして一旦飛ばして、
「リンクのリンク」の色指定をします。
1 2 3 4 5 | a:hover, a:focus, a:active { color: #686868; } |
「リンクのリンク」の色指定のソースコードは
親の「style.css」ファイルの「リンクの色指定」の
733-740行目前後の下にある742-746行目前後にあります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* リンクの色指定 */ /** * 6.1 - Links */ a { color: #ff0000; } a:hover, a:focus, a:active { color: #0000ff; } |
ここでのリンクの色指定に当たる「color: #686868;」の
「#686868;」を「#0000ff;」へと変更して
「/* リンクの色指定 */」の下にコピペします。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。
これまでにならって、「a:hover,」の上に
「/* リンクのリンクの色指定 */」 といったタイトルを
表示するかはお好みで。ここでは付けていません。
管理画面左上の「サイトの表示」をクリックして、
「リンクのリンク」にマウスのカーソルを合わせてリンクの色が変更されたか確認します。
1-8:「検索ボタンのリンク」の色指定をソースコードで入力してみる
次はちょっと細かい箇所ですが、右列の一番上に表示している
ウィジェットの「検索」の「検索ボタン(ルーペマーク)」のリンクの色指定です。
1 2 3 4 5 6 7 8 9 10 | 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」ファイルの
1 2 3 | /** * 5.0 - Forms */ |
内の614-623行目前後にあります。
1 2 3 4 5 6 7 8 9 10 11 | /* ウィジェット検索マークのリンクの色指定 */ 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:「ページナビの記事タイトル文字のリンク」の色指定をソースコードで入力してみる
1 2 3 4 5 | /* ページナビの記事タイトル文字のリンク */ .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 リンク 下線 非表示」といった
検索表示を多数見かけます。
リンクのクリック間違えを避ける下線は重要かも知れませんが、
不要と思っている方も多いのかも知れませんね。
最後までお合い下さいまして有難うございました。