重複しているh1タグを修正する(ショップサーブ)

ショップサーブカスタマイズ


ショップサーブをカスタムテンプレートで利用している場合、管理画面からヘッダーや< head>タグ内の編集も可能となります。

修正する必要がなければ無理にさわらなくて良いと思いますが、個人的に1点だけやっておいた方が良いと思うのがヘッダー内のh1タグ重複です。

h1タグが同じ要素の中に2つある

hタグはh1からh6までありますが、よく使われるのはせいぜいh4ぐらいまででしょう。
各項目の見出しを表しているタグです。

h1が大見出し。以下数字が小さくなるにつれて小見出しになっていきます。

全体をまとめるh1タグ。(全体のまとめなので1つのみ)

各章の見出しとなるh2。

章の中で小見出しとなるh3タグ。。といった具合です。

この<h>グループタグの扱いに関してはhtml5.1で少しあやふやになっていたのですが、html5.2で元通りになった印象があります。

どちらにせよ、少なくとも同じセクションの中での序列はきちんとしておかないといけません

使用するテンプレートの種類によって違いがあるかも知れませんが、ショップサーブデフォルトの構成では、ヘッダーのロゴ画像にh1タグが出てきたかと思えば、その直後のショップ名にもh1タグと、同じヘッダーの中で2つの<h1>タグが存在しています。

個人的にh1タグに画像使うのも好きではないのですがalt属性をきちんとしておけば特に問題ないと考えています。好き嫌いはさておき同じ要素の中に2つのh1タグを配することは望ましくありません。

ですので、この重複したh1タグは修正推奨です。

ヘッダーのh1タグを差し替える

ショップサーブの管理画面からデザイン編集HTMLのカスタマイズにすすむと
お店ページ(トップページ)・商品ページ・フリーページなどそれぞれのヘッダーを編集することができます。

クリックで拡大します

たとえば商品ページのヘッダーにすすむと、ロゴ・お店の名前・キャッチコピーが表示されるぶ箇所が表示されます。
ロゴ・店名がh1タグ、キャッチコピーにh2タグが使用されています。(なんでもかんでもhタグ使えばいいってもんじゃないと思うのですが)

ここのh1をどちらか1つほかのタグに差し替えてしまいましょう。

見た目が変わらないようにcssで編集

ショップ名のh1は .siteName で規定されていると思いますが、ロゴに至ってはh1に対してcssを使っている(*注)ので、ロゴの表示サイズなどが変わってしまうかも知れません

デフォルトのcssでは #enquete-header #logo .shoplogo h1 で指定されている(*注)ので、それを参考にデザインが崩れないよう修正してやりましょう。

*注: 使用しているテンプレートの種類によって異なる場合もあります。

必ずバックアップをとっておきましょう

cssやhtmlのカスタマイズは修正を誤るとデザインが総崩れとなります。

修正版を保存したら必ずプレビューで確認。その結果失敗していてもすぐに復元できるように元のデータを別に保存しておき、自己責任でお願いします。