【SANGO】カテゴリーラベルの位置を変える方法【3つのパターンを紹介】

と調べている人もいるでしょう。

そこで、この記事では下記の内容を解説します。

この記事で分かること

「SANGO」では、投稿一覧の時にアイキャッチ画像の左上にカテゴリーラベルが表示されるんですよね。

ただ、カテゴリー名が長かったりすると画像内の文字と被ることがあるので、ラベルを動かしたいという人も多いかもしれません。
 

そこで、「SANGO」のカテゴリーラベルの位置を変える方法を 3 パターン紹介します。

SANGO のカテゴリーラベルの位置を変える方法

SANGO のカテゴリーラベルの位置は、CSS を追加するれば簡単に変えられます。

ここで紹介する CSS を、「カスタマイズ → 追加CSS」へコピペしちゃってください。

カテゴリーラベルの位置を少し変える方法

カテゴリーラベルの位置を左側で位置を変える場合には、以下の CSS を基本にして調整してみてください。

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

この例では top が -10 で left も -10 となっているので、デフォルトより左上に離れていく感じになります。

もし下に表示させたい場合は top をプラスに増やして、右に表示させたい場合は left をプラスに増やしていけば OK です。

カテゴリーラベルの位置を右揃えにする方法

カテゴリーラベルを左側ではなく、右揃えで表示させたい場合は以下の CSS を基本にして調整してみてください。

.cat-name { left: auto; right: 10px;
}

もし上下の位置も調整したい場合は、最初の方法を参考に top の部分を追加すれば OK です。

カテゴリーラベルを中央の下に表示する方法

僕の個人ブログ（副業ベース）などでは、カテゴリーラベルをアイキャッチ画像の中央下に表示しています。
 

このようにする場合は、以下の CSS を基本にして調整してみてください。

.cat-name { top: 200px; left: 50%; transform: translate(-50%, -50%); white-space: nowrap;
}

もし文字の大きさやラベルの丸みを変更したい場合は、

 border-radius: 3px; font-size: 13px;

を追加して調整をしてください。

そもそもカテゴリーラベル消したい場合

色々試してみたけど、そもそもカテゴリーラベルはいらないという結論に達した場合は、以下の CSS を追加してみてください。

.cat-name { display:none!important;
}

SANGO のカテゴリーラベルの位置上手に変えよう

SANGO のカテゴリーラベルは、わりと強調されてしまうので好き嫌いが別れるかもしれないです。

そのため、場所を少し移動したいなってときは、この記事で紹介した CSS を基本にして調整してみるといいでしょう。