まずは、以下の画像をご覧ください。

b

 

自分の使っているテンプレートにおいて、
デフォルトのリンクの文字色が
茶色などであれば、青色に変更したいという場合が
でてきますよね。
※私の場合はtwenty thirteenというテンプレートを使っています。

今回はその方法について解説します。

<スタイルシート変更における注意事項>

まずは、ワードプレスの管理画面から
外観テーマ編集 と進み
以下のようにスタイルシートを表示させてください。

bb

このスタイルシートで、
文字の色の変更を指定していきます。

ここで1点注意事項があります。

これからスタイルシートの文字列を変更するので
変更前の状態を保存しておきます

スタイルシート内の文字列をすべて
選択して、コピーしてください。
※ctrl+Aでシート内の文字をすべて選択できます
そして、コピーした文字列を
ワードやメモ帳などに貼り付けてください。

次に、
「9-11スタイルシート リンクの文字色変更前」
などのタイトルをつけて、保存しておきます。

この理由は、
スタイルシートを変更する際
以下のような失敗をすることがあるからです。

自分が気づかないうちにスタイルシート内の
重要な文字列を誤って消してしまった
・自分の操作により、デザインが崩れてしまって
もとに戻せなくなった
・どこを、どのように変更したのか忘れてしまった

なので
あなたが、今後
スタイルシートの文字列を
変更する場合は、必ずバックアップを取っておいてください

そして、変更を加えた箇所は、後で自分が見て
わかるように、
いつ、どの文字列に変更を加えたのか
しっかりと記録しておいてください。

 

<文字色の変更方法>

さて、ここからは、
私が使っているテンプレートTwenty Thirteenを例に挙げて
実際にスタイルシートで文字の色を変更していきます。

まず、シートの右側にあるスクロールボタンを使い
下にスクロールしていくと
以下の画像のような文字列が出てきます。

cc

そして、画像に示した通り
記事本文の文字の色を表しているのは
color:#141412;
という文字列です。

ここで、#141412 という部分が
色を表しており、
この場合は、黒色であることを示しています。
※黒にも鉄黒、漆黒などのさまざま種類があるが、
#141412は目視ではほぼ 黒 といえる

例えば、青色に変更したいなら

#141412 → #0000FF に変更すれば
記事本文の文字の色は青色に変わります。

#141412や#0000FFなどの
色を示すコードがよくわからない
という方は こちら のサイトをご覧ください。

それぞれの色に対するコードを知りたい場合は
上記のサイトで色名検索してください。

 

<サイドバーのリンクの文字色変更>

さて、ここからが本題です。
まずは、サイドバーのリンクの色を変更していきます。
以下の画像をご覧ください。

dd

このように、サイドバーのリンクの文字の色を
青色に変更する方法を説明します。

スタイルシートのスクロールボタンで
以下の画像のような文字列が見えるまで
下にスクロールしてください。

ee

画像のように、
水色枠内の文字列がサイドバー(widget)の
リンクの文字の色を指定しています。

例えば、画像の場合だと
#0000FFなので
リンクの文字色を青色にしていますね。

色の指定を変更したら、
ファイルを更新 ボタンを押してください。

そして、トップページを確認すると
サイドバーのリンクの文字の色が
自分の指定した色に変更されているはずです。

 

<記事内のリンクの文字色変更>

次に、記事本文内にあるリンクの色
変更します。
以下の画像をご覧ください。

ff

まずは、スタイルシートをスクロールして
以下の画像に示した文字列を探してください。

o

上記画像のように、記述することで
記事本文の中にあるリンクの文字色が
青色に変わりました。

スタイルシートの ファイルを更新 を押して
自分の記事を確認してください。

 

<記事内タイトル下のリンクの文字色変更>

最後に
以下の画像のように
記事タイトルの下にある
タグなどのリンクの文字色を変更します。

gg

以下の画像のように、
スタイルシートで、記事タイトル下の部分の
リンクの色を青色に指定してください。

l

スタイルシートの ファイルを更新 を押して
確認してください。

これで完了です
長文を最後までお読み頂きありがとうございました。

あと、他にもワードプレスの使い方で
良くわからない点がある方は
こちら からお求めの情報をお探しください。

 

もし今回の記事が役に立ったなら、下のアイコンをクリックして頂けるとうれしいです


人気ブログランキングへ

ブログパーツ