THE THOR ザ・トール アイキャッチ画像のカテゴリーをカスタマイズ

アイキャッチ画像の上に表示されているカテゴリーをカスタマイズしました。

• カテゴリー表記のサイズを少し小さく
• 位置を好みの位置に変更
• カテゴリーの枠を半透明化
• アイコンの削除

THE THOR ではカテゴリーの非表示機能が追加されたので現在ではあまり必要のないカスタマイズかも知れません。

 

※当サイトは ワードプレスのテーマ【 THE THOR 】を使用しています。

THE THORはこちら

 

これは以前実際に採用していたカスタマイズです。

いまは？・・・変形を繰り返してよくわからない状態になっていますw

 

このカスタマイズで出来ること

 

カテゴリーを少し小さくして位置を変更します。その理由などは詳しくはこちらに記載しています。

 

後述するcssを適用すると以下のアイキャッチ画像のカテゴリー表記が以下のようになります。

 

もともとのカテゴリー表記↑

 

カスタマイズしたカテゴリー表記↑

 

サンプル画像はPC表示です。

このサンプルだけを比較すると大差がない、もしくはもともとのアイキャッチ画像のほうが良く感じるかも知れません。

スマホ表示やカードレイアウトでのアイキャッチ画像になると印象は変わります。

好みで編集しましょう。※カスタマイズは自己責任でお願いします。

 

アイキャッチ画像のカテゴリーをカスタマイズするcss

 

追加cssを利用してコードを挿入します。

挿入するcssは以下の通り

/* アイキャッチ画像のカテゴリー表記カスタマイズ */
.eyecatch__cat  {
position: absolute;
top: initial; /* 上からの位置を指定 */
right: initial; /* 右からの位置を指定 */
left: 1%; /* 左からの位置を指定 */
bottom: 2%; /* 下からの位置を指定 */
border-radius: 2px; /* カテゴリーの枠を角丸にする */
}
 /* カテゴリーの色を指定 */
.eyecatch__cat {
background-color: rgba(25, 25, 25, 0.6); /* 0.6が透明度 */
}
/* 枠サイズを指定 */
.eyecatch__cat a {
padding: 4px 20px;
}
/* カテゴリーの前に表示されているアイコンを削除 */
.eyecatch__cat a::before, .the__category a::before {
content: "";
margin-right: 0px;
}

以上です。

 

数値を変更すればカテゴリーの表示位置は自由です。

カテゴリーの位置を右下にする場合

top: initial;/* 上からの位置を指定 */
right: 1%;/* 右からの位置を指定 */
left: initial;/* 左からの位置を指定 */
bottom: 2%;/* 下からの位置を指定 */

 

カテゴリーの位置を左上にする場合

top: 2%;/* 上からの位置を指定 */
right: initial;/* 右からの位置を指定 */
left: 1%; /* 左からの位置を指定 */
bottom: initial;/* 下からの位置を指定 */

 

カテゴリーの位置を中央に大きく表示する場合

top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
margin: auto;


.eyecatch__cat a {
 padding: 10%;
}

 

※角丸やアイコンの変更が不要であれば削除してください。アイコンを変更する場合はcontent: “”;の””の中にコードを挿入。
例content: “\e9db”;

 

問題点

THE THOR ではカテゴリのカラーを設定できます。

カテゴリー毎に設定したイメージカラーのまま透明度を変更することができません。このcssでカラーを設定する場合はカラーが統一されますのでご注意ください。カテゴリーの位置だけ変更したいときはカラー設定の行を削除してください。

※参考
カラーを指定している部分のcssを削除してopacity: 0.6;を挿入するとイメージカラーを保ったまま半透明にすることもできますが文字も同様に半透明になります。

 

あとがき

 

当サイトの現状ではアイキャッチ上でのカテゴリー表記はこのカスタマイズとは違うモノになっています。

迷走しています。

初期の頃はアイキャッチ画像上のカテゴリー表記が大きくて気になっていました。

ところが最近はアイキャッチ画像自体を大きく表示、余計な部分にはカテゴリーを表示しない等の対策でほとんど気にならなくなってきました。むしろ当サイトでのアイキャッチ画像上のカテゴリー表記は大きくなっていますw

アイキャッチ画像上のカテゴリー表記はまだまだ検討の余地がある項目です。