【SANGOカスタマイズガイド】カテゴリラベルの位置を変更～アイキャッチの邪魔にならない場所に移動～

記事一覧に表示される記事ごとのカテゴリーラベルの位置を調整する。デフォルトのままだとアイキャッチの重要部分が隠れてしまうことがあるので対応しておくのが無難。ラベルの位置を気にしてアイキャッチを作るのは難しいのでおすすめしない。アイキャッチは素材中心にデザインした方がよい。

カテゴリラベルの位置を変更

記事の一覧を表示した時に表示されるカテゴリーラベルの位置を変更する。デフォルトのままだとアイキャッチにかぶってしまい文字などが読めなくなったりポイントが見えなくなってしまったりする。好きな位置に変更できるのだがとりあえずアイキャッチの邪魔にならない場所に動かしておいた方がいい。これをやらないとアイキャッチ作成後に無駄な確認が発生する。

1. デフォルトの位置

デフォルトの位置はアイキャッチに大きくかぶっており、長いカテゴリー名になるとさらにアイキャッチ画像を覆い隠してしまう。記事一覧で表示されるカテゴリータグの位置を変更する。アイキャッチ画像の文字とカブることが多いのでこの作業はやっておいた方がいい。

2. スタイルシートで調整

カテゴリーラベルの位置はスタイルシートを使って調整する。子テーマのスタイルシートに以下のコードを追記する。これでラベルを左上にずらすことができる。

-10の値を変更するとアイキャッチにかぶった位置にもできる。

.cat-name {
    top: -10px;
    left: -10px;
}

3. 変更後の確認

X、Y座標を-10で調整したのでアイキャッチより外側にラベルがずれている。これでアイキャッチの文言とラベルがカブルことが少なくなる。

まとめ

じつは1年くらいアイキャッチにかぶるカテゴリーラベルを無視してきた。アイキャッチ作成時にラベルを意識するのも難しいので対応を先送りに。使用する画像によって文言を入れる位置が左上になったりするのでそこそこ致命的な案件。簡単な修正で対応できたのでもっと早めに対応しておけばよかった。

初心者の方はとりあえず設定しておいた方がいいです。