リンクの色を変えてみる：WordPress簡単カスタマイズ その１

Webサイトで、リンクの色を変えるのは、簡単にできて効果的なカスタマイズです。

特に背景が白地でシンプルなデザインほど、よく映えて、雰囲気作りに役立ちます。

初心者でも比較的簡単にできるので、おためしください。

いうまでもないことですが、自己責任で！

以下、Webの専門家ではない筆者が自分で実際にやっているやり方をご紹介します。くわしくは専門家が詳細にやり方を書いているWebページなどを参考にしてください。

できればカスタマイズの前に「子テーマ」を設定して、そちらをカスタマイズするようにすると、テーマがバージョンアップしたときにもカスタマイズの内容が反映されて、管理が楽です。

【参考】
自分でカスタマイズしよう！WordPressでcssを編集する方法 – TechAcademy magazine
子テーマ – WordPress Codex 日本語版

リンク文字の色の変え方

１．管理画面の「ダッシュボード」＞「外観」＞「テーマの編集」＞「スタイルシート（style.css）」を見る。

「スタイルシート（style.css）」は、ウェブページのスタイルを指定するための言語。サイト全体のデザインを決める内容が記述されています。

CSSとは、Cascading Style Sheet （カスケーディング・スタイルシート）の略。

いわば、デザイナーがブラウザに「こう表示してね」という指示書きの集まりです。知らない人が見ると怖く見えますが、アルファベットと数字から成り立っているので、よーく見ていくと意外と素人でも理解できます。

ブラウザでの表示を左右するメインの「プログラムの記述」と、スタイルシートを見る人のためにわかりやすく説明する「メモ」が、まじっています。

これをイチから組み上げていくのには、専門知識が必要ですが、書いてあることの一部を変更するぐらいなら、初心者にも可能です。

私が現在使っているMinimal WPのテーマは、メモ書きが日本語で入っているので、初心者が見てもわかりやすく、カスタマイズしやすくなっています。

以下は、Minimal WPのテーマ「Slauson」を例に、記述します。

２．念のため、スタイルシートの内容を、「すべて選択」→「コピー」→「ペースト」で、Wordやメモなどに保存しておく。

もし、以下のカスタマイズがうまくいかなかった場合は、このテキストをスタイルシートにコピペして、元の状態に戻せば、手を加える前の状態に戻せます。

保険のようなものです。

３．「リンク」と書かれた箇所を見て、データを書き換える。

color:#45AAB8;

などと書かれた箇所を見つけて、
これを、好みのリンクカラーに変更します。

たとえば、私はグリーンにしたかったので、

color:#008000;

と書き換えました。

４．ほかの同じ色の設定のところを、すべて同じように書き換える。

ページ内検索をかけて、「45AAB8」をすべて「008000」に書き換えます。

これで、デザイン上、ほかにこの色で設定されている箇所を、すべて自分の希望する色に変えることができます。

５．「ファイルを更新」ボタンを押す。

ページの一番下にある「ファイルを更新」ボタンを押して、変更を確定します。必要な作業はここまでです。

６．ブログ（サイト）を表示して、リンク色が変わっているかどうかを確認する。

もし変わっていない場合は、記述にミスがあります。
よくある間違いは、コピペのときに「#」「;」などの文字を削ってしまっていたり、不要な半角スペースが入っている場合です。注意深く見直しましょう。

うまくいかない場合は、一旦、３でバックアップしておいた元のCSSに戻して、「ファイルを更新」しましょう。これで、カスタマイズ前の状態に戻ります。

Webカラーの基本知識

基本的に、

#ffffff　←白（white）
#eeeeee　←薄いグレー
#333333　←濃いグレー
#000000　←黒（black）

というふうに、ゾロ目の数字は、モノトーンの色を表します。

#fff

と、省略して3ケタで表示されていることもあります。

これがわかっていると、変更すべき色の記述がどこにあるか、見つけやすくなります。

【参考】
WEBカラーリファレンス　-　HTMLクイックリファレンス

文字色の選び方

〈！〉薄い色はおすすめしません。

細い線の小さいフォントに使うと、色見本で見たときより、色は薄く感じます。

また、あなたのパソコンでは読める文字でも、見る人の環境によっては、薄い色が見づらく感じる場合もあります。

デザインがどんなにオシャレでも、文字が読みづらくては本末転倒です。

「どうしようかな」と迷ったら、少し濃いめの色を選ぶようにしてみてください。

〈！〉微妙な色はおすすめしません。

くりかえしますが、見る人の環境によって、画面の色はかなり変わります。
あなたが「おしゃれだ」と思って選んだ中間色は、単ににごった暗い色に見えるかもしれません。

以下のWebセーフカラー216色か、カラーネーム140色から選ぶといいでしょう。

【参考】
WEBセーフカラー216色　-　HTMLクイックリファレンス
カラーネーム140色　-　HTMLクイックリファレンス

注意

この方法は、リンクカラー以外はすべてモノトーン（白、黒、グレーなどの無彩色）の、シンプルなテーマ（WordPressでのいい方。他ブログでは「テンプレート」など）で、特に効果的です。

△複数の色を絶妙に取り合わせてあるテーマ
△色の変更のきかないイラストや画像と組み合わせてあるテーマ

上記のようなテーマでは、一部の色のみを変えることで、全体の色のバランスが崩れますので、素人が色をいじるのは避けたほうがいいでしょう。

カスタマイズは小さな一歩から。

以上の方法は、Wordpress以外のレンタルブログでも、直接CSSを編集することができるブログであれば、可能です。

あくまで、CSSの全体はきちんと理解していない初心者レベルの、対処療法的なやり方なので、できればきちんとCSSを勉強して、全体を理解されることをおすすめします。

とはいえ、ブログの見せ方を自分で設定できることを知るのは、とても楽しいですよ。

「自分のブログを、あと少し自分色にしてみたい！」という人は、ためしてみてくださいね。

 

【こちらもあわせてご覧ください】
・ブログをリニューアルしました。
・タイトルにフリーフォントを使ってみる：WordPress簡単カスタマイズ その２
・シルエット素材でアイコンを作成：WordPress簡単カスタマイズ その３
・背景画像でページにアクセントを：WordPress簡単カスタマイズ その４
・安全運転で楽しく。初心者がWordPressを始めるときの心得4つ

 

---

宮野真有ツイッター（お気軽にフォローどうぞ。基本フォロー返しします）
https://twitter.com/miyano_mayu

宮野真有のブログ　Facebookページ（「いいね！」をするとブログの更新情報がタイムラインに届きます）
https://www.facebook.com/miyanomayu

宮野真有の植物時間　Instagram
（★Instagram始めました。お気軽にフォローどうぞ。基本フォロー返しします）
https://www.instagram.com/miyanomayu/