WordPress(Cocoon)でタグに色をつける

Cocoon

僕の覚え書きです。

WordPressのカテゴリには設定で色を付けることが出来ますが、タグには設定で色をつけることが出来ません。
そのため、色をつけるためにはCSSの編集が必要です。

CSSでの書き方

style.cssを開く

まずはstyle.cssを開きます。

子テーマをインストールしている場合は、子テーマのstyle.cssを開きましょう。
親テーマをアップデートしてもデータが残ります。

CSSを編集する

.tag-link, .tag-link:hover {
  color: white; /* 文字色を設定 */
  border: none; /* ボーダーラインを消す */
}
.tag-link[href*="tag /* タグの名前 */"] {
  background-color: black; /* タグの背景色を設定 */
}

style.cssにはこの様に書きます。

[href*=”tag”]の「tag」の部分は、色を変えるタグの名前。
「background-color」には設定したい色を書きます。

最後にファイルを上書き保存してアップロードすれば終わりです。

SASSでの書き方

前述の方法だと、タグの数だけCSSを書かなくてはいけません。

面倒くさいですよね?
楽したいですよね?

DRY(”Don’t Repaste Yourself”=同じことをするな)的にも良くはないです。
そう言う事で、SASSで自動化します。(CSSではこの方法は使えません)

// タグ名;背景色
$tag: (
  css: #2062AF,
  html: #E44D26,
  javascript: #F7DF1E,
);
// eachでタグを出力
#main .tag-link {
  // タグ全部に共通する項目はここに書く
  
  // マップを回す
  @each $key, $value in $tag {
    // keyでプロパティーを出力
    &[href*= "#{key}"] {
      // valueを背景色に指定
      background-color: value;
    }
  }
}

これで、このような形でCSSが出力されます。

#main .tag-link[href*="css"] {
  background-color: #2062AF;
}
#main .tag-link[href*="html"] {
  background-color: #E44D26;
}
#main .tag-link[href*="javascript"] {
  background-color: #F7DF1E;
}

仕組みはは単純です。

  1. 「タグ名」「背景色」を1セットでマップ(連想配列)に入れる。
  2. マップを「each文」で回してCSSを出力する。

これだけです。単純でしょ?

応用編

先ほどの応用編です。

前述の方法だと、マップにタグ名と背景色を入力するだけで良かったです。
しかし、この方法だと他のプロパティが設定できません

そう言う事で、こちらが改良版。

マップの「value」に単数または複数の値(配列)を入れて出力します。
要するに「マップの配列(マップの要素に配列)」です。

// タグマップ
// タグ名、背景色、文字色
$tag: (
  css: #2062AF,
  html: #E44D26,
  javascript: (#F7DF1E, black),
);

// タグを出力
#main .tag-link{
  // keyを取得
  @each $key, $value in $tag {
    // keyを格納
    &[href*= "#{$key}"] {
      // valueが複数の要素を持つ場合
      @if length($value) != 1 {
        // 1番目の要素は「背景色」
        background-color: nth($value, 1);
        // 2番目の要素は文字色
        color: nth($value, 2);
      }
      // 複数の要素がない場合
      @else {
        background-color: $value;
      }
    }
  }
}

発展編

先ほどの方法でも十分ですが、1つ問題点があります。

配列の並び順は一定です。つまり……

  • each文で設定するプロパティを間違う可能性がある。
  • 設定したいプロパティが増えると、each文も長くなるし、書き直しが必要になる。
  • 不要なプロパティを省くことができず、空の要素が存在する。

ソースで表すと……

// 背景色、ボーダーの太さ、ボーダーの色、文字色
$tag: (
  css: #2062AF
  // 空の要素が存在する
  html: (#E44D26, 1px, black, /* 文字色 */)
  javascript: (#F7DF1E, /* ボーダーの太さ */, /* ボーダーの色 */,black),
);

#main .tag-link{
  @each $key, $value in $tag {
    &[href*= "#{$key}"] {
      @if length($value) != 1 {
        // プロパティが増えるにつれ、行数が多くなる
        background-color: nth($value, 1);
        border-width: nth($value, 2);
        // プロパティを間違えてる(正解は「border-width」)
        color: nth($value, 3);
        // 添え字を間違えてる(正解は「0」)
        color nth($key, 3);
      }
      @else {
        background-color: $value;
      }
    }
  }
}

この問題点を解決したソースがこちら。

「マップの配列」が「マップのマップ」になっていることに注目!

// デフォルト値(プロパティがない場合)
$tag-default: backgroud-color;
// マップ
$tag: (
  css: #2062AF,
  html: #E44D26,
  // 値と同時にプロパティも設定。
  javascript: (background-color: #F7DF1E, color: black),
);

/* タグ */
// eachでタグを出力
#main .tag-link{
  color: $font-color;
  border: none;
  // keyを取得
  @each $base-key, $base-value in $tag {
    // keyを格納
    &[href*= "#{$base-key}"] {
      // valueが複数の要素を持つか
      @if length($base-value) != 1 {
        // プロパティと値を取り出す
        @each $key, $value in $base-value {
          // プロパティに値を代入
          #{$key}: $value;
        }
      }
      // 複数の要素がない
      @else {
        #{$tag-default}: $base-value;
      }
    }
  }
}

これでマップの配列より分かりやすく、スッキリします。

 

コメント

タイトルとURLをコピーしました