【THE THOR】アイキャッチ左上のカテゴリの編集方法 【非表示・色変更など】

こんにちは、キジトラのコムギです。

このブログではTHE THORのカスタマイズ方法やプログラミングについてまとめています。

このブログでは、カテゴリラベルを角丸にして透過させています。

アイキャッチ上のカテゴリラベルを編集する方法を以下の4つのパターンで解説します。

1. カテゴリラベルを非表示にする方法
2. カテゴリラベルの色を変更方法
3. カテゴリラベルの形を変える方法
4. カテゴリラベルを透過させる方法

カテゴリラベルを非表示にする方法

アイキャッチ上のカテゴリラベルのせいでアイキャッチの文字やデザインが隠れてしまう場合は、非表示にする方法があります。

カテゴリラベルは以下の３箇所があります。

1. TOPページの記事一覧のアイキャッチ上
2. 各投稿ページのアイキャッチ上
3. アクセスランキングのアイキャッチ上

それぞれの非表示方法を解説していきます。

TOPページの記事一覧のアイキャッチ上

TOPページにある記事一覧のカテゴリラベルを非表示にする方法は、現在のところ以下の１つだけです。

• CSSのコードを貼り付けて非表示にする

CSSを貼り付ける場所は２箇所ありますが、基本的に以下の場所でOKです。

モバイル版だとアイキャッチ画像がほどんど隠れてしまうので、モバイルのみ非表示にしたい場合は以下のコードを貼り付けます。

各投稿ページのアイキャッチ上

投稿ページの一番上に表示されるアイキャッチにもカテゴリラベルが付きますが、こちらはボタン一つで簡単に表示／非表示を切り替えることができます。

ダッシュボード画面から以下の手順で進みます。

アクセスランキングのアイキャッチ上

ランキングを表示させている場合は、こちらのカテゴリラベルもボタン一つで簡単に表示／非表示を切り替えることができます。

ダッシュボード画面から以下の手順で進みます。

「記事ランキング設定」の画面まで進めたら、下の方にあるチェックボックスを変更するだけです。

カテゴリラベルの色を変更する方法

カテゴリラベルの色を変更する方法は２つあります。

1. THE THORのカスタマイズから色を変更する
2. CSSのコードを貼り付けて色を変更する

カスタマイズからだとテーマカラーを変更する必要があるので、他の２箇所も色が変更されます。(後述)

CSSを貼り付けるとカテゴリラベルの色のみ変更できます。

THE THORのカスタマイズから色を変更する

ダッシュボードから以下の手順で設定に進みます。

この場合、カテゴリラベルの他に以下の２箇所の色が変わります。
※現在確認できる箇所です

CSSのコードを貼り付けて色を変更する

カテゴリラベルの色のみ変更したい場合は、CSSを貼り付けます。

CSSを貼り付ける場所は２箇所ありますが、基本的に以下の場所でOKです。

カテゴリラベルの形を変える方法

カテゴリラベルはデフォルトで四角ですが、角丸にすることも可能です。

以下のCSSを貼り付けます。

カテゴリラベルを透過させる方法

カテゴリラベルの色を変更する方法を説明しましたが、透過させて後ろが透けるようにすることもできます。

テーマカラーからの変更はできないので、CSSで以下のコードを貼り付けます。

モバイルのカテゴリは非表示の方がいい

アイキャッチ上のカテゴリラベルはあってもなくてもいいですが、モバイル版だけは非表示にすることをお勧めします。

なぜなら、アイキャッチがほとんど隠れてしまうから。

PCで更新していると気付きにくいので、カスタマイズするときはモバイル表示も確認するようにすると、離脱者が減るのではと思います。

他にも「これが知りたい！」というカスタマイズがあれば、お気軽にコメントやお問い合わせをお待ちしております。