Xwriteのカード型レイアウトでは、アイキャッチ画像の左上にカテゴリーラベルが表示されます。
ただし、少し内側に余白があり、画像の縁から離れているのが気になることはありませんか？
この記事では、その余白をなくし、画像の縁にぴったり配置する方法を解説します。
変更前の状態
- カテゴリーは左上に表示されている
- しかし、上下左右に余白がある
- デザイン的に少し浮いて見える
ミニマル寄せのデザインにしている場合、この数pxが意外と気になります。
やりたいこと
カテゴリーラベルをアイキャッチ画像の縁にぴったり寄せる
追加するCSS
「外観 → カスタマイズ → 追加CSS」に、以下を貼り付けてください。
/* アイキャッチ画像内のカテゴリー表示位置 */
.articleList.type-card .article-category,.xw-block-post-list.type-card .article-category,.xw-block-post-list.type-slider .article-category{
top:0;
left:0;
}なぜこれで余白が消えるのか？
Xwriteでは、カテゴリーラベルにあらかじめ top と left に数値が設定されています。
その値を 0に上書きすることで、縁ピッタリに配置されます。
少しだけ余白を残したい場合
完全に0だと詰まりすぎる場合は、以下のように微調整できます。
top: 4px;
left: 4px;サイト全体の余白設計に合わせて調整してください。
投稿リストブロックにも対応
このコードは、
- 通常の記事一覧（カード型）
- Xwriteの投稿リストブロック（type-card）
- Xwriteの投稿リストスライダー表示
に適用されます。
まとめ
たった数行のCSSですが、
- デザインの引き締まり
- 視認性の向上
- ミニマル感の強化
につながります。
Xwriteは細部を整えるだけで、完成度が一段上がります。
余白が気になっていた方は、ぜひ試してみてください。