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

THE THOR のアイキャッチ右上についているカテゴリーが違和感を感じたことはありませんか？ 違和感を感じたのなら【 アイキャッチについているカテゴリーを非表示 】にする方法を試してみるの良いかも知れません。

 

 

僕はこの部分はずっと気になっていました。

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

特にアイキャッチの縦横比を16：9にしているとバランスが悪く感じます。なので取っ払ってみました。

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

 

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

 

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

 

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

カテゴリー消去に成功！

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

 

 

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

 

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

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

 

カテゴリーの位置を変更

 

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

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

 

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

 

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

 

標準の隙間は大きすぎません？ここを狭くするだけでだいぶかわります。さらに角丸にして圧迫感を無くしました。

 

 

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

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

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

 

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

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

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

 

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

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

※追記しました。

 

 

あとがき

 

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

当然ですが、いじらなければマスターはできません。良くわからないなら触らない方が良い・・・では成長しません。まだたいしたことは出来ませんが、もっと理解できるようこれからもいじり倒して行きたいと思います。

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

 

THE THOR 記事一覧