【Blogger】ソートできるリスト型HTMLサイトマップ【カスタマイズ編】

今回は、ソートできるリスト型HTMLサイトマップのカスタマイズ方法を紹介します。ヘッダーの文字色がそのままでは変わらなかったので、対処法も併せて記載します。

前回の記事で、ソートできるリスト型HTMLサイトマップの設置方法を説明しました。未設置の方はこちらからどうぞ。

【Blogger】ソートできるリスト型HTMLサイトマップ【設置編】

前回の最後の段階では、私の画面は以下の画像の状態でした。ヘッダー部分（リストの一番上）の配色がとても見にくいですね。今回はそこをブランドカラーに変更していきます。

この記事でわかること

1. ヘッダー部分の背景色を変更する方法
2. 文字色を変更する方法
3. 文字色が変わらない時の対処方法

環境

ブログ：Blogger
テンプレート：QooQ

背景色変更手順

テーマのバックアップ

前回同様、テーマに変更を加えるので忘れずにバックアップを取っておきましょう。

ヘッダー背景CSS変更

サイトマップ用CSS内のヘッダー部分の背景色指定を探して変更する、という手順です。

固定値で色が設定されているのでこれを好みの色に変更していきます。今回はブログのブランドカラーに変更する方法を紹介します。

カラーコード探索

ダッシュボードの「テーマ」→「カスタマイズ」横のボタンから「HTMLを編集」に進みます。前回サイトマップ用のCSSを貼り付けた箇所から以下のコードを探してください。

.toc-header-col1,
.toc-header-col2,
.toc-header-col3 {
	background:#9E9E9E;
}

意味は「クラスtoc-header-col1, 2, 3の背景色をまとめて灰色にするよ」です。

クラスなどの考え方はこちらを参考にさせていただきました。

【必修知識】id と class の違いと使い分け方の基本 - Jill Tone Blog

カラーコード変更

今回は直接指定ではなく、ブランドカラーに自動的に変わるようにします。

#9E9E9E

を

$(brand.color)

に変更してください。これによりブランドカラーが自動反映されるようになります。もちろん直接カラーコードを指定してもOKです。

.toc-header-col1,
.toc-header-col2,
.toc-header-col3 {
	background:$(brand.color);
}

動作確認

サイトマップのページを確認してみましょう。私の場合はリンク色もブランドカラーと同じにしているので、下の画像のように完全に背景色と文字が一体化してしましました。

文字色変更方法

次に文字の色を変更していきます。背景色同様、色指定部分を探して変更、という手順です。

先頭番号と更新日(リンク以外)の文字色変更

私はリンクやタグの色がブランドカラーになるように設定されています。したがってここの変更により影響を受けるのは日付部分のみになります。

カラーコード探索

CSS貼り付け個所から以下のコードを探してください。貼り付けた先頭にあるはずです。

#bp_toc {
    color: #666;
    margin: 0 auto;
    padding: 0;
    border: 1px solid #d2d2d2;
    float: left;
    width: 100%;
}

#bp_toc {
    color: $(font.color);
    margin: 0 auto;
    padding: 0;
    border: 1px solid #d2d2d2;
    float: left;
    width: 100%;
}

ヘッダーの文字色変更

最後にヘッダー部分の文字色をブランドフォントカラーに変更します。

挿入位置

CSS貼り付け個所から以下のコードを探してください。真ん中あたりに位置しています。

.toc-header-col1 a:link,
.toc-header-col1 a:visited,
.toc-header-col2 a:link,
.toc-header-col2 a:visited,
.toc-header-col3 a:link,
.toc-header-col3 a:visited {
    font-size: 13px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
}

カラーコード変更

ヘッダー背景色をブランドカラーに変更したので、文字もブランドフォントカラーにします。

color: #fff;

を

color: $(brand.font);

に変更します。

.toc-header-col1 a:link,
.toc-header-col1 a:visited,
.toc-header-col2 a:link,
.toc-header-col2 a:visited,
.toc-header-col3 a:link,
.toc-header-col3 a:visited {
    font-size: 13px;
    text-decoration: none;
    color: $(brand.font);
    font-weight: 700;
    letter-spacing: 0.5px;
}

動作確認

もともと白色が直接指定されていたにもかかわらず、文字色は最初からブランドカラーのターコイズでした。したがってここで変更してもやはり効き目はありませんでした。以下の画像の状態です。

そこでこの設定が正しく反映されるように、次の項目で調整します。

文字色が変わらない時の対処法

処理の優先度を変えてやります。

優先度について

今回のようにclassセレクタで色を指定しても、idセレクタやstyleなどより優先度が高いほうで色が指定されている場合、そちらが適用されます。

こちらのサイトが参考になります。

!importantはもう使わない！CSSの優先順位をおさらいしよう

優先度の変更方法

今回のリンク部の文字色に処理優先権を与えます。文字のカラーコードの後に

!important

を入れます。優先度最強だからヨロシク！という意味です。

しかしこれは最終奥義なので、本来は正しく優先順を見直し、極力使わないほうが良いです。といいつつ、共同作業するわけではないので使っちゃいます。

.toc-header-col1 a:link,
.toc-header-col1 a:visited,
.toc-header-col2 a:link,
.toc-header-col2 a:visited,
.toc-header-col3 a:link,
.toc-header-col3 a:visited {
    font-size: 13px;
    text-decoration: none;
    color: $(brand.font)!important;
    font-weight: 700;
    letter-spacing: 0.5px;
}

動作確認

ヘッダーの文字色が狙い通りになりました。

最後に

いかがでしたか。

皆さんのBloggerカスタマイズの参考になれば幸いです。ご質問、アドバイス等はお気軽にコメント欄からどうぞ。