このサイトのデザインを気に入ってくださった方、ありがとうございます。
このブログは、有料のテーマ【トール】を、カスタマイズしています！
このブログに使っているテーマ【トール】に追加したCSSをご紹介します。
初めに【トール】とCSSの超基本をざっくり説明していますが、この辺は分かってるよって方は目的のCSSまで目次からスキップしちゃってください！
コードや設定を変更するときは、必ず先にバックアップをとって、自己責任で行ってください。
CSSの超基本 知ってる人は飛ばしてね
CSSって何ぞ？
CSSっていうのは、デザインをほにゃららするコードのことです。
これを書き加えることで、【トール】の標準のカスタマイズ機能からはいじれなかったパーツもデザイン変更ができるようになります。
コードを追加していくと、どんどん理想の見た目に近づけることができますよ！
CSSの追加方法
すでに【トール】をインストールして、ガチャガチャやってる皆さんはもうご存知だと思いますが、【トール】へのCSSの追加方法をご説明します。
ワードプレスのダッシュボードメニューから、【外観】→【カスタマイズ】→【追加CSS】から行います。
また、それとは別に、FTPソフトを使って子テーマ（the-thor-child）にstyle-user.cssファイルをアップロードする方法でも行えます。
前者の方法が、デザインの変更を目視で確かめながら行えるので、やりやすいかもしれません。
（※ただし、バックアップの意味でも、別途ファイルに残しておいたほうが良いです。大幅に変更した後にやっぱり戻そうとなると、大変です）
それでは、執筆時に標準のカスタマイズ機能では変更できなかったパーツについて、デザインを変更するためのCSSをご紹介します。
パンくずのCSS
パンくずリストの背景色と文字色を変えるコードです。
お好きな色で調整してください。
/*パンくずの背景色*/
.breadcrumb {
background: #fff;
}
/*パンくずの文字色*/
.breadcrumb__item {
color:#777;
}
アイキャッチ画像のカテゴリーラベルのCSS
デフォルトでは、アイキャッチ画像の右上にカテゴリーのラベルが表示がされています。
このカテゴリーラベルの色は、各カテゴリー毎に変更することができますが、一括で同じ色にもできます。
一括設定する際のCSSのコードです。
/*アイキャッチ画像の上の
カテゴリーラベルについて*/
.eyecatch__cat {
background-color:#fcf594; /*ラベル背景色*/
}
.eyecatch__cat a {
padding: 4px 10px; /*ラベル内側の縦横余白*/
font-weight:bold; /*文字の太さ*/
color:#444444; /*文字色*/
}
カテゴリー別にラベルの色を設定することもできます。
その場合は、個別に行った色設定が上書きされてしまいますので、上記コードのうちのラベル背景色のコードは使用できません。
カテゴリー別のラベル色はこちらから設定します。
ワードプレスのダッシュボードメニューから、【カテゴリー】→【ラベル色を設定したいカテゴリー名をクリック】→【イメージカラー】
アイキャッチ上のカテゴリーラベルは【トール】のカスタマイズメニューから消す（非表示にする）こともできます。
ワードプレスのダッシュボードメニューから、【外観】→【カスタマイズ】→【アーカイブページ設定】→【記事一覧リスト設定】→【アイキャッチ上のカテゴリを非表示にする】から非表示にできます
まとめ
【トール】はどんどんアップデートされていますので、ここでご紹介しているCSSも、【トール】標準のカスタマイズ機能で変更ができるようになるのかもしれません。
今後もユーザーの声を吸い上げて、どんどん便利に進化していってほしいと思います！