「LION MEDIA」の子テーマを活用してちょっとだけカスタマイズです。
このサイトでは「LION MEDIA」というテーマを使用しています。
関連：テーマ「LION MEDIA」が無料とは思えないクオリティ！おすすめポイントと使い方
関連：高性能無料テーマ「LION MEDIA」がVer2.0.0になり使いやすさパワーアップ
簡単に綺麗なデザインのサイトを作れるのですが、少しだけ変更したいこともありますよね。
今回は、CSSを利用してリンクテキストの色をカスタマイズしていきます。
カスタマイズには子テーマを利用する
「LION MEDIA」では公式の子テーマも用意されています。
CSSなどのカスタマイズをする場合は、子テーマを利用するのが望ましいです。
関連：子テーマとは？カスタマイズに子テーマを使用すべき理由と使い方
子テーマを利用してカスタマイズをすることで、親テーマにアップデートがあったときにも元に戻ってしまう心配がないため安心です。
CSSやPHPの編集を行う場合は子テーマを利用する
「LION MEDIA」子テーマのCSS編集方法
子テーマも通常のテーマと同じ手順でCSSを編集することができます。
関連：CSSとは？CSSで出来ることとスタイルの追加・編集方法
「LION MEDIA」の子テーマは、編集して良い場所が分かりやすいようになっています。
それでは、CSSの編集手順を見ていきます。
まずは「外観」メニューの「テーマの編集」をクリックします。
右メニューの「スタイルシート（style.css）」を編集していきます。
「下記ユーザーカスタマイズエリア」の下に追記していきます。
このように「LION MEDIA」の子テーマは、使用者が編集して良い場所が明確に記載されているので、自分が追加したところが一目でわかるようになっています。
万が一上手くいかなかったときは、自分で追加した分を削除すれば元通りになるため、初心者でも安心して編集できます。
ただ、間違えて大切な部分を消してしまうと困るので、CSSの編集は念のためバックアップを取ってから行うようにしましょう。
関連：＜プラグイン＞UpdraftPlusでサイトのバックアップを取る
以上が「LION MEDIA」の子テーマを利用したCSSの編集方法です。
「LION MEDIA」のリンクテキストをカスタマイズ
「LION MEDIA」では、自分でテーマの色を決めることができます。選んだ色をもとに、リンクテキストの色も自動で設定されます。
これを、自分の好みに合わせてカスタマイズしていきます。
基本的には通常のリンクテキストのCSSとほとんど同じ内容です。
リンクテキストのデザインを変更するCSSの基本内容を知りたい方は以下のページをご覧ください。
関連：CSSを利用してリンクテキストのデザインを変更する方法（テンプレートあり）
しかし、上記のテンプレート通りにしてしまうと、ソーシャルメディアボタンの文字色が変わってしまったり、逆に文中のリンクテキストの色が変わらなかったりします。
「LION MEDIA」の場合はちょっとだけCSSを工夫しないといけないので、追加で紹介しておきます。
実際に使用しているCSS
それでは、具体的に見ていきます。
このサイトで使用しているリンクテキストのCSSは以下の設定です。
1 2 3 4 5 6 7 8 9 10 | .content a{ color:#0044CC !important; border-bottom:solid 1px; } .content a:hover { color:#ff0000 !important; border-bottom:solid 1px #ff0000 !important; } |
訪問前と訪問済みなどは特に区別しておらず、シンプルに色と下線だけ設定しています。
基本的には先ほど紹介したテンプレートがベースとなっています。
同じ部分の解説は以下のページをご覧ください。
関連：CSSを利用してリンクテキストのデザインを変更する方法（テンプレートあり）
それとは別に、LION MEDIA用に変更した部分を解説していきます。
「.content」の意味
CSSでは、タグを表す文字の前に「.xxxx」と入力することがあります。
この部分には、クラス名を入力します。
クラス名を記載することで、そのCSSデザインを適用する範囲を絞ることができます。
LION MEDIAでは、記事の本文を表すクラス名が「content」になっています。
「.content」を付けることにより、記事本文内のリンクテキストのみにデザインが適用されます。
付けなかった場合、ソーシャルメディアボタンやサイドバーのリンクなど、ありとあらゆるリンクの部分が変わってしまったため、記事内の本文にだけCSSを適用するようにしました。
CSSの最初にクラス名（.xxxの形）を入力し、CSSデザインの適用範囲を絞る
「!important」の意味
colorなどの後ろに「!important」というものを付けています。
「!important」を付けることで、デザインの優先度を高めることができます。
同じ項目に複数のCSSが設定された場合、「!important」が付いている方のCSSデザインが優先して適用されるようになります。
LION MEDIAでは、自分でテーマの色を設定することができ、選んだ色に応じてリンクテキストの色が決まるようになっています。
CSSを普通に設定したとき、テーマで決められた色の方が優先されてしまったため、「!important」を付けることで対応しました。
設定したデザインの行に「!important」を付けると、優先的に適用される
この2点が、LION MEDIA用にカスタマイズした部分です。
この他に編集してみたい点がある場合は、プログラミング専用質問サイト「teratail（テラテイル）」で質問してみると回答してくれる人がいるはずです。メールアドレスのみで登録でき、無料で使えるのでぜひ試してみてください。
関連：プログラム系質問サイト「teratail（テラテイル）」が初心者に優しすぎてスゴイ
今回のまとめ
LION MEDIAの子テーマを利用し、リンクテキストのデザインをカスタマイズしました。
LION MEDIAは無料とは思えないテーマで、とても綺麗なデザインのサイトを簡単に作れます。
子テーマも編集しやすいように配慮されているので、積極的にカスタマイズしてみましょう。
ただし、CSSを編集するとサイトのデザインが崩れる可能性があるため、念のためバックアップを取ってから編集することをオススメします。備えあれば憂いなしです。
関連：＜プラグイン＞UpdraftPlusでサイトのバックアップを取る
コピペでも使えますが、自分でカスタマイズする場合は基礎知識だけは持っておくのが望ましいです。
CSSの本やサイトは数多くありますので、自分に合ったところを探す必要があります。
初めてCSSを勉強するなら、動画講座サイト「ドットインストール」が便利です。無料で基本を学ぶことができます。1本の動画が短いため、空いた時間に進めやすいのが特徴です。
本の場合は「ああしたい、こう変えたいが手にとるようにわかるCSS基礎 」がオススメです。知識がない人にも理解できるようにかみ砕いて説明してあり、とても分かりやすかったです。
テーマごとに特徴があるため、そのテーマに合わせて微調整が必要なこともあります。
細かな内容に関しては、詳しい人に尋ねるのが一番です。
身近に詳しい人がいない場合は、質問サイト「teratail（テラテイル）」が初心者に優しく質問しやすいです。私も良く利用させていただいていますが、皆さん親切です。
関連：プログラム系質問サイト「teratail（テラテイル）」が初心者に優しすぎてスゴイ
いろいろなサイトや本を活用し、オリジナリティあふれるサイトが作れるといいですね！
私も努力を続けたいと思います！
ここまでお読みいただき、ありがとうございました。
関連：テーマ「LION MEDIA」が無料とは思えないクオリティ！おすすめポイントと使い方
