THE THOR ザ・トール カテゴリートップ タイトル画像をカスタマイズ もっとトップらしく

THE THOR のカテゴリー関連には便利な機能が多くあります。

その中でも自由コンテンツエリアを利用すればカテゴリートップにて様々な表現が可能。

カテゴリートップを自由コンテンツエリアでつくり込んでいったときにタイトル部分が物足りなかったので少しカスタマイズしてみました。

カテゴリートップのメインビジュアル完成イメージ

出来上がりは以下のようになります。※スマホ表示

• タイトル画像とヘッダーの隙間、左右の隙間を消去してヘッダーと一体化しタイトル感を出します。
• タイトル画像の縦幅を300pxに設定。タイトル内の文字数に影響を受けないよう配慮しつつ厚みを持たせタイトル感を出します。
• categoryという表記を消します。
• HOMEのメインビジュアルにあわせて影付け。

※縦幅と影付けはお好みで。

THE THOR カテゴリートップの設定

カテゴリートップの設定変更は2カ所をチェック

今回はカテゴリートップのタイトルに画像を使用するのでカテゴリーアーカイブ設定の見出しエリアデザイン設定で「ノーマル(default：イメージ背景不可)」以外を選択。

投稿設定のカテゴリーで使用する画像を設定します。

カテゴリートップのタイトル画像を変更してもっとトップページらしくする方法

カスタマイズは追加CSSにて行います。

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

追加CSSへの記述は以下の通り。

/*　カテゴリーのヘッダー*/
.archiveHead.mask  {
    top: -40px;
    left: -15px;
    height: 300px;
    width: calc(100% + 30px);
    box-shadow: 0px 0px 20px 3px rgba(25,25,25,.6)
}
@media only screen and (min-width: 992px){
    .archiveHead.mask  {
    top: -60px;
    }
}
/*　カテゴリーのヘッダーサブタイトル*/
.archiveHead__subtitle {
    display: none;
}

以上です。

今すぐ使えるCSSレシピブック

たかもそ

3,686円(11/16 03:56時点)

Amazonで購入する楽天市場で探すYahoo!で見る

Amazonの情報を掲載しています

あとがき

かなりトップページらしさが出たと思います。

THE THOR らしさが出るのでブラックメッシュを採用しています。カテゴリー毎にカラーを設定している場合は「カラー」や「カラー＋画像グレー」を使うのも良いかもしれません。

まだほとんどのカテゴリーに画像を設定していないし、詳細の記述もしていないのでカテゴリートップはもう少し作り込みたいですね。