こんにちは。SaitoKouです。
WordPressテーマTCDの「VOGUE」を使用したお仕事に出会いまして、早速トップページの修正の依頼がありました。そのときの対応をコラムとして記載していこうと思います。
今回の修正概要
「VOGUE」の大きな特徴であるこの「ヒーローヘッダー」。
これを非表示にし、別の単一画像を表示するというものです。この大きな特徴を無くしてしまうこの修正ですが、VOGUEの仕様とお客様の要件などを鑑みると、無くしたほうが良いという方針になりました。
というのもこのヒーローヘッダーですが、タイトルとリンク、そして画像を4つ分すべてしっかり用意しないと見栄えが微妙になってしまうのです。設定してみるとわかりますが、3カ所しか設定しなかった場合、4つ目はカーソルを合わせると空白のリンクとまっさらな白背景が表示されてしまいます。
それであれば、いっそヒーローヘッダーはなくして、最も見せたい画像やキャッチコピー１つだけを表示するというのもよいかなと思いました。
ヒーローヘッダーを非表示にする
では、早速修正していきます。ヒーローヘッダーの非表示は非常に簡単です。下記のCSSコードを反映させてください。（反映のさせ方がわからない方は、WordPress管理画面 ＞ 外観 ＞ カスタマイズ ＞ 追加CSSにコピペ）
#js-hero-header {
display: none;
}
これだけでヒーローヘッダーが見えなくなります。
代わりの画像を追加する
代わりの画像は、TCDテーマのコンテンツビルダーを使用していきます。
WordPress管理画面 ＞ 外観 ＞ TCDテーマオプション ＞ トップページ まで遷移します。
コンテンツビルダーで、フリースペースを追加します。
追加したフリースペースに、以下HTMLを張り付けてください。
<div class="toppage_header">
<img ここはメディアから画像を挿入/>
</div>
本来、画像を画面幅いっぱいに表示したいのですが、このままだとそうならないのでCSSを追加します。
.toppage_header img {
width: 100%;
}
これで、ヒーローヘッダーに変わり別の画像を表示することができます。
まとめ
TCDのコラムは初めて書きましたが、TCDのテーマに関しては公式ホームページに色々ノウハウが乗っていますので、そちらも参考にしてみてください。僕のサイトでのTCDコラムは、公式に乗っていないノウハウや豆知識を随時掲載していくつもりです。
今回の修正では少しプログラミングチックな内容が出てきましたが、そういった知識がなくてもTCDテーマはおすすめです。TCDテーマを使用した、集客に強いホームページの製作はこちら。
TCDを使ったサンプルサイトはこちら。
