記事タイトルの文字色や背景色などを変更する方法

記事タイトルの文字色や背景色などを変更する方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. 記事タイトルの装飾をいろいろカスタムする方法です。

  2. 記事ページ(URLがblog-entry-数字.html)内の記事タイトルは別途定義できます。

  3. CSSの編集だけです。HTMLの編集は特に必要無いです。

メリット

  1. デフォルトの青色や黒色から、テンプレートの配色に合った色に変更でき、全体のバランスを調整できます。

テンプレートのHTMLを編集

  1. 特にありません。

テンプレートのCSSを編集

  1. テンプレートのCSS内で次の部分を探します。

    
    /*記事 > タイトル(大見出し)*/
    #content h1 a{color:#222;cursor:default;}
    #content .entry-title{font-size:180%;margin-bottom:0.5em;border:0;text-shadow:2px 2px 5px #777;}
    
    customtemplate-110-article-title-1.png
  2. カスタムしやすいように、コピペで次のコードに入れ換えます。省略していたプロパティを書きだしたり、改行や説明を加えたりしています。

    
    /*記事 > タイトル(大見出し)*/
    .entry-title{
      font-size:180%;/*文字の大きさ*/
      background:default;/*文字部分と空き部分の背景色*/
      margin-bottom:0.5em;/*記事タイトル下部の余白*/
      border-bottom:0;/*下線*/
      text-shadow:2px 2px 5px #777;/*文字の影*/
    }
    .entry-title a{
      color:default;/*通常時の文字色*/
      background:default;/*通常時の背景色*/
    }
    .entry-title a:hover{
      color:default;/*ホバー時の文字色*/
      background:default;/*ホバー時の文字部分の背景色*/
    }
    
    /*記事 > タイトル(大見出し:記事ページ内での定義)*/
    #single .entry-title a{
      color:#222; /*通常時の文字色*/
      background:default;/*通常時の文字部分の背景色*/
      cursor:default;/*ホバー時のカーソル形状。デフォルトで指にならないように設定。*/
    }
    #single .entry-title a:hover{
      color:#222; /*ホバー時の文字色。*/
      background:default;/*ホバー時の背景色*/
    }
    /*
    ※ 記事ページ内での記事タイトルは、「記事ページ内での定義」(11行上辺りから)の部分で、
    ※ 他のページとは異なる定義にできます。
    */
    
  3. 上記コードをカスタムしたのが次のコードです。分かりやすいように、あえて原色を多く使って配色しました。下記コード内の赤文字がカスタムした部分です。コピペする場合は上のコードの方がいいかもしれません。

    
    /*記事 > タイトル(大見出し)*/
    .entry-title{
      font-size:180%;/*文字の大きさ*/
      background:pink;/*文字部分と空き部分の背景色*/
      margin-bottom:0.5em;/*記事タイトル下部の余白*/
      border-bottom:3px solid yellow;/*下線*/
      text-shadow:2px 2px 5px #777;/*文字の影*/
    }
    .entry-title a{
      color:red;/*通常時の文字色*/
      background:green;/*通常時の文字部分の背景色*/
    }
    .entry-title a:hover{
      color:yellow;/*ホバー時の文字色*/
      background:black;/*ホバー時の文字部分の背景色*/
    }
    
    /*記事 > タイトル(大見出し:記事ページ内での定義)*/
    #single .entry-title a{
      color:yellow; /*通常時の文字色*/
      background:black;/*通常時の背景色*/
      cursor:default;/*ホバー時のカーソル形状。デフォルトで指にならないように設定。*/
    }
    #single .entry-title a:hover{
      color:#222; /*ホバー時の文字色。*/
      background:yellow;/*ホバー時の背景色*/
    }
    /*
    ※ 記事ページ内での記事タイトルは、「記事ページ内での定義」(11行上辺りから)の部分で、
    ※ 他のページとは異なる定義にできます。
    */
    
  4. デモページで具体例を確認できます。

  5. お気づきの点などありましたら、ご指摘頂けますとありがたいです。

以上です。

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