WordPress Twenty Sixteen カスタマイズ 4「色」ソースコード編 カラーコード

ごけたです。交通系電子マネーのチャージ。
某駅で何故か私だけ毎回エラーが出ます。

はじめに

WordPress Twenty Sixteen カスタマイズ その4
今回は「外観 カスタマイズ 「色」編」を「カラーコード」で入力設定してみるです。

「外観 カスタマイズ 「色」編」で色指定を行いました。
そのままでよれけば一切の問題はございません。

ですが、色も追加や変更もしたくなります。
残念ながら、私の今の知識量では「外観 カスタマイズ 「色」編」での
色指定のままから追加や変更して色指定をすることが出来ません。

なので、各設定を子テーマの「style.css」ファイルに入力して、色指定してきます。
ついでに関連個所も追加で色指定していきます。

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

ページ構成
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
リンクは予告なく削除される場合がございます。
OSはWindows、ブラウザーはchrome、


事前準備

これから色指定をカラーコードで入力設定していきますが、
画面上はほぼほぼ初期設定の状態です。
説明に必要な幾つかを追加設定していきます。

事前準備 その1

「外観」「カスタマイズ」「色」で行った色指定の「カラーコード」を
テキストエディタのコピペします。
コピペが完了したら、「色」は全て「デフォルト」に戻します。


テキストエディタにカラーコードをまとめて表示するとこうなります。

/* 背景色 */ ←のようにタイトルをつけておくと分かりやすいです。
タイトルはご自分がいつも見ても分かれば何でも構いません。

※タイトルは /*半角スペース背景色半角スペース */ で入力します。


事前準備 その2

「投稿」から「カテゴリー」を幾つか作成します。

「カテゴリー」を作成するのは、
下記で説明する「リンクの色指定」の変化を確認するために、
「メニュー」を設定表示します。
「メニュー」の表示方法を幾つかあるのですが、
今回は「カテゴリー」を使用します。
そのために「カテゴリー」の作成が必要になります。



「カテゴリー」は管理画面のメニューから
「投稿」→「カテゴリー」を選択クリックします。

左側に「カテゴリータイトル」を入力、
その下に「カテゴリータイトル」の「スラッグ」を入力します。
入力が完了したら一番下の「新規カテゴリーを追加」をクリックします。


今回は「テスト」というタイトルで5つ作成しました。


事前準備 その3

「投稿」から記事を幾つか書いて「公開」ボタンをクリックします。
その際に「事前準備 その2」で作成した「カテゴリー設定」をします。
※「事前準備 その2」行った「カテゴリー作成」が
投稿記事画面の右列の「カテゴリー」内に反映されます。


管理画面のメニューから「投稿」→「投稿一覧」を選択クリックします。
右側に設定したカテゴリーが表示されます。
ここでは2つの投稿記事にカテゴリーを付けて公開しています。


事前準備 その4

「メニュー」を追加設定して「トップページ」に表示します。
管理画面のメニューから「外観」→「メニュー」を選択クリックします。

「メニュー画面」の上段中央の空欄に「メニュー名」を入力します。
※ここでは「Menu01」としています。
右隅の上下にある「メニューを作成」ボタンのどちらからをクリックします。

1:左列の「メニューを編集」タグから「カテゴリー」をクリックします。
2:「カテゴリー」枠内の「すべてを表示」をクリックします。
3:「事前準備 その2」で作成した「カテゴリータイトル」に全てチェックを入れます。
4:「カテゴリー」枠内の一番下の「メニューに追加」をクリックします。
「メニュー構造」設定に追加した「カテゴリータイトル」が表示されます。

5:「メニュー設定」の「メニューに位置:メインメニュー」にチェックを入れます。
「メニュー」をどこに表示するのかの設定です。
6:右隅の上下にある「メニューを作成」ボタンのどちらからをクリックします。


トップページで「投稿記事(カテゴリー含む)」、「メニュー」が
表示されているか確認します。事前準備はこれで完了です。


「カスタマイズ 「色」編」をソースコードで入力してみる

大変お待たせ致しました。
ソースコードを入力して色指定でございまいます。

親のtwenty sixteenの「style.css」ファイルのソースコードを元に、
カラーコード等を変更して、
Wordpressの管理画面の「メニュー」から「外観」→「テーマの編集」の
「style.css」ファイルにコピペしていきます。
順番は基本的には「事前準備 その1」で行い、それ以外を追加していきます。


「背景色」を

「背景色」のソースコードは親の「style.css」ファイルの465-468行目前後にあります。

ここでの色指定に当たる「background: #1a1a1a;」の「#1a1a1a;」を
「事前準備 その1」でテキストエディタにコピペしておいた「#0b6617;」に変更。
黒のカラーコード「#1a1a1a;」を緑のカラーコード「#0b6617;」に変更した。
となります。

変更したカラーコードを含めたソースコードを「style.css」ファイルにコピペします。

※「/* Fallback for when there is no custom background color defined. */」は
無くても構いせん。
ここでは削除しています。

※コピペする場所は「style.css」ファイル内の一番下です。
これまで「style.css」には「子テーマの指示」、
「スマホ画面でキャッチフレーズ表示」のソースコードが入力されています。
その下にコピペします。


「style.css」ファイルにソースコードをコピペしたら、
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

ここではソースコードの上に「/* 背景色 */」のタイトルを付けました。

管理画面左上の「サイトの表示」をクリックして、
「背景色」が変更されたか確認します。


「ページ背景色」を

「ページ背景色」ソースコードは親の「style.css」ファイルの
1534-1540行目前後にあります。
ここでの色指定に当たる「background-color: #fff;」の
「#fff;」を「#ededce;」へと「白」から「黄系」に変更しました。

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

ここではソースコードの上に「/* ページ背景色 */」のタイトルを付けました。

管理画面左上の「サイトの表示」をクリックして、
「ページ背景色」が変更されたか確認します。

「メインのテキストの色指定」を

色の順番に従えば「リンク」なのですが、内容が多いので一番最後にします。

「メインのテキストの色指定」ソースコードは親の「style.css」ファイルの
297-311行目前後にあります。
ここでの色指定に当たる「color: #1a1a1a;」の「#1a1a1a;」を「#dd8500;」へと
「黒系」から「オレンジ系」に変更しました。

色指定ではないソースコードは削除が可能です。

ここでは削除しています。

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

ここではソースコードの上に「/* メインのテキストの色指定 */」の
タイトルを付けました。

の箇所に色指定をするという設定です。

例えば、selectとtextareaを削除してから、ファイルを更新して、
サイトを表示してみると、どの箇所に影響変化が出るかが分かります。
※このような編集更新が気軽に出来るのも子テーマの良さでもあります。

管理画面左上の「サイトの表示」をクリックして、
「メインのテキストの文字色」が変更されたか確認します。


「サブのテキストの色指定」を

「サブのテキストの色指定」のソースコードは親の「style.css」ファイルの
2408-2410行目前後にあります。
ここでの色指定に当たる「color: #686868;」の「#6868;」を「#0b6617;」へと
「黒系」から「緑系」に変更しました。

色指定ではないソースコードは削除が可能です。
ここでは削除しています。

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

ここではソースコードの上に
「/* サブのテキストの色指定 */」のタイトルを付けました。

管理画面左上の「サイトの表示」をクリックして、
「サブのテキストの文字色」が変更されたか確認します。

※色指定していますが、表示を非表示への変更も可能ですので、
色指定するかは表示、非表示を決めてからでも構いません。
非表示、変更についてはいつか別途で。

「サイトタイトルの色指定」を

「メインのテキストの色指定」の箇所で既に「あれ?」と思った方も。
そうなんです、「サイトタイトルの色指定」は「メインのテキストの色指定」とは
別途に設定がされているので、「サイトタイトル」用の設定が必要になります。

「サイトタイトル」はソースコードは親の「style.css」ファイルの
1611-1613行目前後にあります。
ここでの色指定に当たる「color: #1a1a1a;」の「#1a1a1a;」を「#dd8500;」へと
「黒系」から「オレンジ系」に変更しました。

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

ここではソースコードの上に
「/* サイトタイトルの色指定 */」のタイトルを付けました。

管理画面左上の「サイトの表示」をクリックして、
「サイトタイトルの文字色」が変更されたか確認します。


「キャッチフレーズの色指定」を

「キャッチフレーズ」も「サイトタイトル」同様、別途に設定がされています。

「サイトタイトル」のソースコードは親の「style.css」ファイルの
1624-1632行目前後にあります。
ここでの色指定に当たる「color: #686868;」の「#686868;」を「#0b6617;」へと
「黒系」から「緑系」に変更しました。

色指定ではないソースコードは削除が可能です。
ここでは削除しています。

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

ここではソースコードの上に
「/* キャッチフレーズの色指定 */」のタイトルを付けました。

管理画面左上の「サイトの表示」をクリックして、
「キャッチフレーズの文字色」が変更されたか確認します。

「記事タイトルの色指定」を

「記事タイトル」のソースコードは親の「style.css」ファイルの
1712-1714行目前後にあります。
ここでの色指定に当たる「color: #1a1a1a;」の「#1a1a1a;」を「#dd8500;」へと
「黒系」から「オレンジ系」に変更しました。

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

ここではソースコードの上に
「/* 記事タイトルの色指定 */」のタイトルを付けました。

管理画面左上の「サイトの表示」をクリックして、
「記事タイトルの文字色」が変更されたか確認します。

「記事タイトルの色指定」を-1

カスタマイズ シリーズを順番通りになさっていた方は
「Twenty Sixteen カスタマイズ 2 サイトロゴ キャッチフレーズ「サイト基本情報」編」の
スマホ画面でキャッチフレーズを表示させる設定で、子テーマへのコピペを済ませています。
「display: block;」がスマホ画面でもキャッチフレーズを表示させる設定です。

ここでは色指定の「color: #686868;」の「#686868;」を「#0b6617;」へと
「黒系」から「緑系」に変更するだけです。

1つ上の「キャッチフレーズの色指定」では

ソースコードの上に付けていたタイトル「/* キャッチフレーズの色指定 */」を
カラーコードの横に半角英数でスペース2つ空けてと付けています。
もしくは
「/* スマホ画面でキャッチフレーズを表示 */」
「/* キャッチフレーズの色指定 */」と縦2列表示でも。

ここでは1つのの設定のままで進めています。


「投稿者 投稿日 カテゴリー コメントの色指定」を

「記事タイトル」のソースコードは親の「style.css」ファイルの
1996-2002行目前後にあります。
ここでの色指定に当たる「color: #1a1a1a;」の「#1a1a1a;」を「#0b6617;」へと
「黒系」から「緑系」に変更しました。

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

ここではソースコードの上に
「/* 投稿者、投稿日、カテゴリー、コメント色指定 */」のタイトルを付けました。

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


「メニューの色指定」を

またまた大変お待たせ致しました。
ここでようやく事前準備した「メニュー」の設定です。

「メニュー」のソースコードは親の「style.css」ファイルの822-828行目前後にあります。
ここでの色指定に当たる「color: #1a1a1a;」の「#1a1a1a;」を「#dd8500;」へと
「黒系」から「オレンジ系」に変更しました。

色指定ではないソースコードは削除が可能です。
ここでは削除しています。

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

ここではソースコードの上に
「/* メニューの色指定 */」のタイトルを付けました。

管理画面左上の「サイトの表示」をクリックして、
「メニューの文字色」が変更されたか確認します。


「リンク」を

「リンク」のソースコードは親の「style.css」ファイルの733-740行目前後にあります。
ここでの色指定に当たる「color: #007acc;」の「#007acc」を「#00ffff;」へと
「青系」から「赤系」に変更しました。
※この色変更は文字にリンク設定を行った場合のみの設定です。

色指定ではないソースコードは削除が可能です。
ここでは削除しています。

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

ここではソースコードの上に「/* リンクの色指定 */」のタイトルを付けました。

管理画面左上の「サイトの表示」をクリックして、
「リンクの文字色」が変更されたか確認します。

初期設定で、投稿記事やウィジェットのリンク設定が
「青色」の色指定されている箇所の色指定が変更されます。


「ページナビの記事タイトル文字」を

「ページナビのタイトル文字」とは記事ページ下部にある
前・次ページの記事タイトルのことです。

「ページナビの記事タイトル文字」のソースコードは
大元の「style.css」ファイルの1063-1067行目前後にあります。
ここでの色指定に当たる「color: #1a1a1a;」の「#1a1a1a;」を「#dd8500;」へと
「黒系」から「オレンジ系」に変更しました。

色指定ではないソースコードは削除が可能です。
ここでは削除しています。

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

ここではソースコードの上に
「/* ページナビの記事タイトル文字の色指定 */」のタイトルを付けました。

管理画面左上の「サイトの表示」をクリックして、
さらに記事を単体で表示して、
「ページナビの記事タイトルの文字色」が変更されたか確認します。

「ページナビの前・次の文字」を

こちらは1つ上の「ページナビの記事タイトル文字」の上に
小さく表示されている文字です。

「ページナビの前・次の文字」のソースコードは親の「style.css」ファイルの
1073-1081行目前後にあります。
ここでの色指定に当たる「color: #686868;」の「#686868;」を「#dd8500;」へと
「黒系」から「オレンジ系」に変更しました。

色指定ではないソースコードは削除が可能です。
ここでは削除しています。

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

ここではソースコードの上に
「/* ページナビの前・次の文字の色指定 */」のタイトルを付けました。

管理画面左上の「サイトの表示」をクリックして、
さらに記事を単体で表示して、
「ページナビの前・次の文字の色指定」が変更されたか確認します。

「ページナビの前・次の文字」を非表示にしてみる

「ページナビの記事タイトル文字」をクリックすると、
ページは前後のページに移動できます。
「前・次」を非表示にしても問題ないかやってみました。

「ページナビの前・次の文字を非表示する」ソースコードは
親の「style.css」ファイルの11069-1071行目前後にあります。


ページナビの「前」の文字をGoogle Chromeの「検証」で探してみると、
「meta-nav」が「span」で挟まれています。

「meta-nav」=「post-navigation」と考え、
「.post-navigation span」での表示指示は
「display: block;」なので、
表示の「block」を非表示の「none」に変更してみました。

こちらのソースコードを
「/* ページナビの前・次の文字の色指定 */」の下にコピペします。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

管理画面左上の「サイトの表示」をクリックして、
さらに記事を単体で表示して、
「ページナビの前・次の文字が非表示」に変更されたか確認します。

※ここでの「ページナビの前・次の文字の非表示 */」は
「表示」で続けていくので、ソースコードは削除しました。


さいごに

カラーカードの変更を含めたソースコードの入力で「外観」→「カスタマイズ」の
「色」では変更できなかったパーツの色指定も出来ました。
その分情報量が多くなってしまいました。

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

スポンサーリンク

シェアする

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

フォローする

スポンサーリンク