ブログタイトルの文字色を変更する方法(CSS編集だけで)

ブログタイトルの文字色をデフォルトの青色から別の色に変更する方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. CSS編集だけでブログタイトルの文字色を変更します。

  2. 今後のメンテナンス時にもすぐに分かる場所にCSSコードを追加します。

メリット

  1. ブログタイトルの文字色を控えめな色にすると、グローバルナビゲーションなどのハイパーリンクが相対的に目立ちます。

テンプレートのCSSを編集

  1. CSS編集で、#site-title を見つけます(下図参照)。

    customtemplate-120-site-title-color-1.png
  2. 上記コードの下に次のコードを挿入します(コードの書き換えではありません)。カラーコード(「#222」の部分)を変更することで文字色を調整できます。下図で反転している部分が挿入後のコードです。挿入箇所は必ずここである必要はありませんが、今後のメンテナンス時に最も分かりやすいと思えるので一応指定しておきました。

    #site-title a{color:#222;}
    customtemplate-120-site-title-color-2.png
  3. 上記挿入コードの #site-titlea の間に半角スペースが1つあります。#site-titleaではありません。

  4. 以上で編集は終了です。

  5. おまけ:ブログタイトルをマウスでホバーした際、通常はカーソルが「指」になりますが、これをデフォルトの「矢印」にする場合は次のコードの方を挿入します。赤文字部分が上記コードに追加した部分です。

    #site-title a{color:#222;cursor:default;}

#site-titlecolor を変更しても文字色が変わらない理由

  1. CSS編集で #site-title というIDを持つタグ(h1h2)の子孫要素に aタグがあります。

  2. 上記 h1h2 が、子孫要素なしでブログタイトルを表示していれば #site-title に指定する color が適用されます。

  3. しかし実際には子孫要素としてaタグがあり、かつ、aタグにスタイルが指定されているのでそのスタイルが適用されます。

  4. そこで上記 h1h2 の子孫要素の aタグに限定したCSSを追加したのです。ページ内にある他のハイパーリンクと区別し、ブログタイトル内のハイパーリンクだけに限定して、希望するスタイルが適用されるようにしたということです。詳細度を大きくして優先順位をあげたとも言えます。

  5. 上記説明内容は、正直なところ、とっつきにくいです。なんか面白そうだなと思われましたら、「CSS 詳細度」などで検索すると幸せになれるかもしれません。

参考:その他方法の一例

  1. ブログタイトル内のハイパーリンク(aタグ)にIDをつけ、そのIDにスタイルを設定する方法もあります。

今後のテンプレート改訂時には

  1. テンプレートの改訂時にこのページで述べたカスタムをデフォルトで採用する予定です。customtemplateはver1.2.1以降、valid-seoシリーズはver1.1.3以降ならこのページで述べたコードの挿入は不要になっているはずです。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)