THE THOR のカテゴリー関連には便利な機能が多くあります。
その中でも自由コンテンツエリアを利用すればカテゴリートップにて様々な表現が可能。
カテゴリートップを自由コンテンツエリアでつくり込んでいったときにタイトル部分が物足りなかったので少しカスタマイズしてみました。
カテゴリートップのメインビジュアル完成イメージ
出来上がりは以下のようになります。※スマホ表示
実物はこちら→THE THORのカテゴリートップ
変更点
- タイトル画像とヘッダーの隙間、左右の隙間を消去してヘッダーと一体化しタイトル感を出します。
- タイトル画像の縦幅を300pxに設定。タイトル内の文字数に影響を受けないよう配慮しつつ厚みを持たせタイトル感を出します。
- categoryという表記を消します。
- HOMEのメインビジュアルにあわせて影付け。
※縦幅と影付けはお好みで。
THE THOR カテゴリートップの設定
カテゴリートップの設定変更は2カ所をチェック
外観 → カスタマイズ → アーカイブページ設定[THE] → カテゴリーアーカイブ設定
投稿 → カテゴリー → 任意のカテゴリー
今回はカテゴリートップのタイトルに画像を使用するのでカテゴリーアーカイブ設定の見出しエリアデザイン設定で「ノーマル(default：イメージ背景不可)」以外を選択。
投稿設定のカテゴリーで使用する画像を設定します。
カテゴリートップのタイトル画像を変更してもっとトップページらしくする方法
カスタマイズは追加CSSにて行います。
外観 → カスタマイズ → 追加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;
}
以上です。
あとがき
かなりトップページらしさが出たと思います。
THE THOR らしさが出るのでブラックメッシュを採用しています。カテゴリー毎にカラーを設定している場合は「カラー」や「カラー＋画像グレー」を使うのも良いかもしれません。
まだほとんどのカテゴリーに画像を設定していないし、詳細の記述もしていないのでカテゴリートップはもう少し作り込みたいですね。
