TCDテンプレートIZMの見出し(hタグ)の追加・装飾

IZMの見出し(hタグ)の装飾

TCDのテーマはSEOに対しての考え方が独特です。ブログのロゴにh1タグが使用されており、記事タイトルにh2が使用されていました。

前回の記事ではトップページのブログのロゴはh1のままで他のページ(投稿・固定・アーカイブ)ではdivになるように変更しました。同時に記事タイトルをh2➝h1に格上げしました。

TCDテンプレートIZMの見出しのカスタマイズ【内部SEO】
ワードプレスの有料テンプレートTCD(034)のIZM(イズム)のh1タグをカスタマイズしていきたいと思います。 今年の夏にTCD(0...

旧テンプレートでは見出しタグを画像入りで装飾していましたが、テーマをTCD(034)IZMに変更してからはうやむやになっていました。

毎回手書きで「h2」「h3」と打ち込むのも手間ですので、Add Quicktagに登録して使用していました。

IZMの見出し(hタグ)の装飾1

しかしこのままだと全くもって味気ないんですね(笑)。ですので今回はIZMの見出しタグを装飾していきたいと思います。

スポンサーリンク

TCDのテーマIZMのデフォルトの見出しタグ

今までTCDのテーマIZMで記事を作成する時は、Add Quicktagに登録しているh2,3,4を使用していました。こんな感じです。

IZMの見出し(hタグ)の装飾2

何の変哲もない文字になります(笑)。これでは見た目もイマイチです。仕方がないのでこのタグを使用していました。

しかし最近になってビジュアルエディタに見出しタグがあるのを発見しました。

IZMの見出し(hタグ)の装飾3

どんな装飾がされているのかといいますと。

IZMの見出し(hタグ)の装飾4

全く変化なしです(笑)。TCDの有料テーマ代を1万円も支払って見出しタグも装飾されていないのかと目を疑いましたが、よくよく探してみるとテキストエディタの中で発見しました。

これが新規で投稿記事を作成した時のテキストエディタです。

IZMの見出し(hタグ)の装飾5

このままでは見出しタグは表示されていませんが、一度ビジュアルエディをクリックして再びテキストエディタに戻りますとタグが表れるような仕掛けになっています。

IZMの見出し(hタグ)の装飾6

さっそくどんな装飾がされているのかテストしてみました。

見出しaタイプ

IZMの見出し(hタグ)の装飾6

見出しbタイプ

IZMの見出し(hタグ)の装飾7

!? なんだかパッとしない・・・おまけにh2タグが無い・・・

そもそもTCDのテーマでは記事タイトルにh2タグが充てられていますので、投稿記事の見出しは必然的にh3からになります。

このままでは外見的にパッとしませんので、とりあえずh3の見出しを装飾していく事にします。

class=styleって何?

TCDテーマの見出しにclass=styleという文章が記載されています。WordPress歴1年の自分にとってはなんだかさっぱり分からないので、このclass=styleというのは何を表しているのか調べてみました。

TCDのテーマでは見出しのh3はこんな感じになっています。

素人的にはCSS(スタイルシート)に書かれた物が反映されるという事は分かります。なので、CSS(スタイルシート)を変更すれば見出を装飾できると思うのですが・・・

とりあえずCSSを覗いてみる事にしました。IZMの親テーマのCSSにアクセスします。

見出しの項目がありました。このh3の個所を変更していきたいと思います。

IZMの見出し(hタグ)の装飾8

見出しh3の変更

親テーマを直接書き換えるとテーマの更新があった場合に上書きされて反映させた物が消えてしまいますので、子テーマに見出しの項目を貼り付けてやります。

以前のテーマSimplicityで使用していましたh3タグのコードを貼り付けました。

IZMの見出し(hタグ)の装飾9

どうなったかと言いますと

IZMの見出し(hタグ)の装飾10

何かごちゃ混ぜになっているみたいです。子テーマに記載したコードは反映されているのですが、親テーマのコードも同時に反映されている感じです。

仕方がないので親テーマを直接書き換えました。

IZMの見出し(hタグ)の装飾11

これで何とかh3タグの変更が完了しました。

h2タグを新たに追加する

次はいちばん肝心のh2タグの装飾ですが、元々TCDのテーマではh2タグは記事タイトルに使われていました。なので見出しのh2タグは存在しません。

前回で記事のタイトルをh2からh1になるように変更しましたので、見出しをh2から使えるようになりました。

今回見出しh2タグを新たに作成してAddQuicktagに登録していきます。

変更前

変更後

追加するコード

「.style2」を追加してみました。

IZMの見出し(hタグ)の装飾12

後はAddQuicktagにコードを登録します。

IZMの見出し(hタグ)の装飾13

最終的にh2タグがこんな風に追加・装飾されました。

IZMの見出し(hタグ)の装飾14

TCDテーマIZMの見出し(hタグ)の装飾まとめ

今回はTCDテーマIZMの見出し(hタグ)のh2を新しく作成してh3タグと共に装飾しました。ほとんどコピペで済みましたのでWordPress歴の浅い自分でも何とかこなせた感じです。

最終的にはブログが少し華やかになりました。

見出しタグ変更前

IZMの見出し(hタグ)の装飾15

見出しタグ変更後

残念な点は、親テーマを直接変更しましたので、アップデータ時にすべて上書きされてしまいます。なんとか子テーマに書き込んで反映させる方法を見つけないと駄目ですね。

スポンサーリンク

シェアする

フォローする

コメントをどうぞ

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