THE THOR(ザ・トール)アイキャッチについているカテゴリーを非表示にする

THE THOR 記事一覧

THE THORのアイキャッチ右上についているカテゴリーが大きすぎて邪魔だと感じたことはありませんか?

この部分はずっと気になっていました。(そーいう場所がいっぱいあるw)

 

好みの問題かもしれませんが、画像サイズとカテゴリー表記のバランスが良くない。

特にアイキャッチに力を入れている場合はカテゴリー表記が邪魔で無くしてしまいたと思ってしまいます。

※カテゴリーへのリンクが減るという大リスクがあります。

THE THOR ver1.5.0からアイキャッチ上のカテゴリー非表示機能が追加されました。



THE THOR アイキャッチについているカテゴリーを非表示にする方法

こちらは簡易的にテストしたもので実際には様々なケースがあり、上手くいかない可能性もありますのでご了承ください。

 

一時的に当サイトで適用した出来上がりはコチラ↓

アイキャッチ画像上のカテゴリーを消す

カテゴリー消去に成功!

 

※カスタマイズは自己責任でお願いします。

 

カテゴリー表示を消す方法は簡単。追加CSSにコードを少し追加するだけ。

外観 → カスタマイズ → 追加CSS

 

追加するコードは以下のとおり。

/*アイキャッチのカテゴリーを消す*/
.eyecatch__cat {
    display:none;
}

 

以上です。

当サイトでのアイキャッチ上のカテゴリー表記は別のカスタマイズをしています。

前述通り、標準ではバランスが悪いと思っていたので当サイトではレイアウトを変更しています。

 

当サイトのアイキャッチ&カテゴリー表記はこんな感じ↓(変更の可能性あり)

アイキャッチ画像上のカテゴリーを移動して縮小半透明

 

カテゴリー名と枠の隙間を狭くして角丸に変更しカテゴリー表記の縮小化

標準の隙間は大きすぎません?ここを狭くするだけでだいぶかわります。

さらに角丸にして圧迫感を無くしました。

アイキャッチ カテゴリー 01

 

アイキャッチ右上から左下へ変更

視線の流れからして右上は違和感がありましたので、視線がスムーズに流れるよう左下に変更しました。

アイキャッチ カテゴリー 02

↑標準は違和感ありませんか?

 

カテゴリー表記が目立ちすぎないよう透過

カテゴリーの色の設定によってはアイキャッチよりカテゴリー表記が目立ってしまうことがあったので、カテゴリー表記の枠を黒で透過させました。

これによりアイキャッチの邪魔をすること無く、しっかりとカテゴリーを視認できます。

アイキャッチ カテゴリー 03

 

上記もカテゴリー表記を消す方法と同様に追加CSSを使用しています。

いずれ記事にしたいと思いますが、より良いカタチを求めて試行錯誤中です。


あとがき

毎回CSSは体当たりでトライしています。

当然ですが、いじらなければマスターはできません。良くわからないなら触らない方が良い・・・では成長しません。

まだたいしたことは出来ませんが、もっと理解できるようこれからもいじり倒して行きたいと思います。

※でもカスタマイズは自己責任で!

THE THOR 記事一覧

アイキャッチ画像のカテゴリーを消す
呟くのよ・・・私の棒ストが