TCDテンプレート『IZM(tcd034)』の記事タイトルをh1、ロゴをDIVにする方法

TCDテンプレート『IZM(tcd034)』の記事タイトルをh1、ロゴをDIVにする方法

TCDテンプレート『IZM(tcd034)』の記事タイトルをh1、ロゴをDIVにする方法を紹介していきたいと思います。

TCDテーマではh1タグにロゴが適用されており、h2タグは記事のタイトルに使用されていました。これをロゴ⇒DIV、記事タイトル⇒h1に変更していきます。

今年の夏にTCD(034)テンプレートを購入して、ワタシの料理ブログで使用していますが、TCDのテンプレートには独特のSEO設定が施されているという話を聞きました。

あまり気にも留めていなかったのですが、SEO的にも良くないという事なので、どういう構造になっているのか調べてみる事にしました。

スポンサーリンク

ブログの見出しを表すhタグとは?

ブログで記事を作成していると見出しが必要になります。見出しを付けた方が読者には分かり易いんですね。新聞や雑誌でも見出しは必ずあります。

h1大見出し記事タイトル
h2中見出し記事の見出し
h3 小見出し記事の小見出し
h4
h5
h6

基本的にh1タグは記事内に1回だけしか使用してはいけないとされてきましたが、最近では複数回の使用もOKになってきたみたいですね。

飼いヌコ
時代の移り変わりですかね?

h1タグはブログの記事タイトルなので、この記事の中では「TCDテンプレート『IZM(tcd034)』の記事タイトルをh1、ロゴをDIVにする方法」になり、h2タグは中見出しなので、「ブログの見出しを表すhタグとは?」になります。

ブログの見出し(Hタグ)の順番

h2タグの中で更に小見出しを付けるならば、h3タグを使います。

TCDテンプレート『IZM(tcd034)』の記事タイトルをh1、ロゴをDIVにする方法

という風に、h2タグの直後はh2タグかh3タグでなければなりません。h2タグからh4タグに飛ぶのはNGです。

TCDテンプレートのデフォルトのhタグの配置

ここで問題になってくるのは、TCDのテンプレートのhタグの配置です。

TCDテンプレート『IZM(tcd034)』ではh1タグがブログのロゴになっており、h2は記事のタイトルに使用されていました。

飼いヌコ
マジか?

念のために確かめておきましょう。ブログのトップページでマウスを右クリックすると「ソースの表示」という項目があるので選択します。

TCDテンプレート『IZM(tcd034)』の記事タイトルをh1、ロゴをDIVにする方法

ソースの表示で「h1」で検索してみると<h1 id=”logo”>という風になっていました。

TCDテンプレート『IZM(tcd034)』の記事タイトルをh1、ロゴをDIVにする方法

飼いヌコ
ロゴがh1?

h1タグは大見出しになるので、Googleでも最重要視されていると思うのですが、ロゴがh1というはどうなんでしょうか?

TCDシリーズ各テーマではH1タグをロゴに設定しておりますが、SEOを考慮してH1タグを記事の見出しに使いたいというお問い合わせをいただくことがあります。H1タグを記事見出しに使うことがSEOに効果が有るか否かに関しては意見が分かれるところではあります。

厳密な見出しタグのルールによると、H2タグやH3タグの後にH1タグを表示する事は、文章の構造上間違っていると判断されます。これはSEOとして不利になる可能性があります。

TCDのサイトではこのように解説されています。

飼いヌコ
う~む。

一方で当サイトの無料テーマ Simplicityのソースを表示させてみると、<h1 id=”site-title”>でした。

TCDテンプレート『IZM(tcd034)』の記事タイトルをh1、ロゴをDIVにする方法

飼いヌコ
ロゴとサイトタイトルとではどちらがSEO的に良いのかな?

TCDテーマのh1タグの変更方法

トップページで他のh1タグを探したけれども、ロゴ以外見当たらないので、このままh1タグをロゴに使用しても問題ないと思いますが、記事ページのロゴがh1タグでは都合が悪くなってきます。

TCDテンプレート『IZM(tcd034)』の記事タイトルをh1、ロゴをDIVにする方法

記事タイトル(大見出し)がh2タグになっているので、記事の見出し(中見出し)がh3タグからという事になります。この記事タイトルをh1タグに変更すると、ブログのロゴとh1タグが2つ存在してしまいます。

なので、記事ページのh1タグのみを変更していきます。カスタマイズは子テーマで行うので、失敗してもファイルを削除すればもとに戻せます。子テーマの作り方はこちら

変更に必要なファイル

・header-logo.php

・single.php

header-logo.php

FTPソフトを起動して、テーマの『izm_tcd034』内の『functions』の中にある『header-logo.php』をローカルにダウンロードします。

TCDテンプレート『IZM(tcd034)』の記事タイトルをh1、ロゴをDIVにする方法

TeraPad等のテキストエディターでファイルを開き、以下のコードを書き換えます。

icon-check-square-o 変更前

icon-check-square-o 変更後

飼いヌコ
コピーして貼り付ければ良いですね。

ファイルを上書き保存して『IZM(tcd034)』の子テーマにアップロードしてやります。

single.php

こちらも『header-logo.php』と同様にファイルを変更していきます。

icon-check-square-o 変更前

icon-check-square-o 変更後

以上で変更完了です。しかし、変更を加えても全く変化は無く、試行錯誤を繰り返しましたが駄目でした。

飼いヌコ
!?

仕方がないので、子テーマの変更を諦めて、直接 親テーマ を直接カスタマイズしたところ、ようやく変更されました。

TCDテンプレート『IZM(tcd034)』の記事タイトルをh1、ロゴをDIVにする方法

トップページのみロゴがh1タグで、その他のページではdivになるように変更したので、記事ページにh1タグが重複しなくなりました。

飼いヌコ
やれやれ

投稿ページでは、このように h1タグ➝h2タグ➝h3タグ と順序よく並んでいますね。

TCDテンプレート『IZM(tcd034)』の記事タイトルをh1、ロゴをDIVにする方法

まとめ

今回は、TCDテンプレート『IZM(tcd034)』の記事タイトルをh1、ロゴをDIVにする方法を紹介しました。

今までは投稿ページのロゴがh1タグに、記事タイトルがh2タグ、記事の見出しがh3タグに充てられていました。ロゴをdivに変更して記事タイトルをh1タグに、見出しをh2タグに変更する事で、SEO的にも良い影響が出てくると思います。

飼いヌコ
アクセスが増えるといいな♪

今回での変更点のおさらい
1トップページ以外(投稿・アーカイブ・カテゴリ)のロゴをh1からdivに変更。
2記事の見出しをh2からh1に変更。

注意点として、親テーマを直接カスタマイズした事です。子テーマを変更するだけでは反映されませんでした。

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

IZM(TCD34)関連記事
スポンサーリンク

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です