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

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

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

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

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

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

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

IZMの見出 しAdd Quicktagに登録

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

icon-check-square-o見出しaタイプ

IZM 見出しaタイプ

icon-check-square-o見出しbタイプ

IZM 見出しbタイプ

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

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

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

スポンサーリンク

class=styleって何?

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

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

HTML
<h3 class="style3b">H3見出しb</h3>

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

とりあえずCSSを覗いてみる事にしました。IZMの親テーマのCSSを開くと見出しの項目がありました。このh3の個所を変更していきたいと思います。

IZMの見出し class=styleって何?

見出しh3の変更

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

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

IZM 見出しh3の変更

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

IZM 見出しh3の変更

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

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

IZM 見出しh3の変更

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

h2タグを新たに追加する

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

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

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

icon-check-square-o変更前

.post_content .style3a, .post_content .style3b, .post_content .style4a, .post_content .style4b, .post_content .style5a, .post_content .style5b, .post_content .style6 { line-height:1.6; }

icon-check-square-o変更後

.post_content .style2, .post_content .style3a, .post_content .style3b, .post_content .style4a, .post_content .style4b, .post_content .style5a, .post_content .style5b, .post_content .style6 { line-height:1.6; }

追加するコード

/* h2 */
.post_content .style2 { background-image: url( http://cooking.nmb48.work/wp-content/uploads/2015/12/02.jpg); background-repeat: no-repeat; background-position:left center;padding-left: 77px; margin-left: 0em;  }

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

IZM h2タグを新たに追加する

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

IZM h2タグを新たに追加する

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

IZM h2タグを新たに追加する

まとめ

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

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

icon-check-square-o見出しタグ変更前

IZM 見出しタグ変更前

icon-check-square-o見出しタグ変更後

IZM 見出しタグ変更後

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

TCD無料テンプレート
TCD最新テンプレート

 

IZM関連記事一覧はコチラ

コメントを残す

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

日本語が含まれない投稿や心無いコメントは無視されますのでご注意ください。(スパム対策)

YouTube
Twitter
SHARE