ブログ

【Cocoon】アイキャッチ画像のカテゴリーラベルのカスタマイズ【CSS】

WordPressの無料テーマ「Cocoon」のカスタマイズです。

今回は、記事のアイキャッチ画像の左上に表示されるカテゴリーラベルのデザインのアレンジです。

スポンサーリンク

カテゴリーラベルのデザインを変える方法

アイキャッチ上のカテゴリーラベルのデザインはCSSで行います。

WordPressの管理画面の「外観」から「テーマエディター」を選び、

こちらの「Cocoon Child: スタイルシート (style.css)」の中にコードを書きこんでいきます。

/*必要ならばここにコードを書く*/ と書いてあるところの下にコピペか打ち込みでコードを記入し、画面下にある更新ボタンを押せば完了です。

初期デザイン

Cocoonの初期デザインはこんな感じ。

この画像の左上の部分ですね。

文字の背景色は、管理画面のカテゴリーのページからカテゴリ―の編集を選び、編集画面の中にある「カテゴリ色」の欄で選択した色が反映されます。

カスタマイズ後のデザイン

こうなりました。

アイキャッチの画像の上にこう、付箋のような紙を乗せて挟んでいるような、そんなデザインです。

CSSは以下の通り。

.cat-label {
border: none;
top: 0;
left:6px;
padding: 3px 5px 2px 5px;
margin: -5px 0 0 0;
border-radius: 0px 0px 5px 5px;
overflow: visible;
}
.cat-label::after { 
position: absolute;
content: '';
top: 0;
right: -4px;
border: none;
border-bottom: solid 5px #81717a; 
border-right: solid 4px transparent;
}

こちらのコードをコピペして貼り付ければ同じデザインになります。

ラベルを非表示にする方法

カテゴリーラベルは非表示にすることもできます。

記事中のアイキャッチ画像

投稿記事中の冒頭に表示されるアイキャッチ画像のラベルを消したい場合は、管理画面のCocoon設定から変更できます。

画像タブ → アイキャッチの表示から「アイキャッチラベルを表示する」のチェックを外すことでラベルが非表示になります。

その他の画面で表示されるアイキャッチ画像

上記以外の、エントリーカードなどの表示でのラベルも消したい場合はCSSを使います。

以下のコードを張り付ければOKです。

.cat-label {
display: none;
}

終わりに

カテゴリラベルの表示をいじってみました。

元々のデザインもいいと思うのですが、デフォルトのままではなく自分でデザインを変えてみると意外と愛着がわいてくるものです。

細かいですがかなりの頻度で目にする部分なので、自分好みに手を加えてみることをおすすめします。

タイトルとURLをコピーしました