TCDのテーマはSEOに対しての考え方が独特です。ブログのロゴにh1タグが使用されており、記事タイトルにh2が使用されていました。
前回の記事ではトップページのブログのロゴはh1のままで他のページ(投稿・固定・アーカイブ)ではdivになるように変更しました。同時に記事タイトルをh2➝h1に格上げしました。
旧テンプレートでは見出しタグを画像入りで装飾していましたが、テーマをTCD(034)IZMに変更してからはうやむやになっていました。
毎回手書きで「h2」「h3」と打ち込むのも手間ですので、Add Quicktagに登録して使用していました。
しかしこのままだと全くもって味気ないんですね(笑)。ですので今回はIZMの見出しタグを装飾していきたいと思います。
TCDのテーマIZMのデフォルトの見出しタグ
今までTCDのテーマIZMで記事を作成する時は、Add Quicktagに登録しているh2,3,4を使用していました。こんな感じです。
何の変哲もない文字になります(笑)。これでは見た目もイマイチです。仕方がないのでこのタグを使用していました。
しかし最近になってビジュアルエディタに見出しタグがあるのを発見しました。
どんな装飾がされているのかといいますと。
全く変化なしです(笑)。TCDの有料テーマ代を1万円も支払って見出しタグも装飾されていないのかと目を疑いましたが、よくよく探してみるとテキストエディタの中で発見しました。
これが新規で投稿記事を作成した時のテキストエディタです。
このままでは見出しタグは表示されていませんが、一度ビジュアルエディをクリックして再びテキストエディタに戻りますとタグが表れるような仕掛けになっています。
さっそくどんな装飾がされているのかテストしてみました。
見出しaタイプ
見出しbタイプ
！？ なんだかパッとしない・・・おまけにh2タグが無い・・・
そもそもTCDのテーマでは記事タイトルにh2タグが充てられていますので、投稿記事の見出しは必然的にh3からになります。
このままでは外見的にパッとしませんので、とりあえずh3の見出しを装飾していく事にします。
class=styleって何？
TCDテーマの見出しにclass=styleという文章が記載されています。WordPress歴1年の自分にとってはなんだかさっぱり分からないので、このclass=styleというのは何を表しているのか調べてみました。
TCDのテーマでは見出しのh3はこんな感じになっています。
1 | <h3 class="style3b">H3見出しb</h3> |
素人的にはCSS(スタイルシート)に書かれた物が反映されるという事は分かります。なので、CSS(スタイルシート)を変更すれば見出を装飾できると思うのですが・・・
とりあえずCSSを覗いてみる事にしました。IZMの親テーマのCSSにアクセスします。
見出しの項目がありました。このh3の個所を変更していきたいと思います。
見出しh3の変更
親テーマを直接書き換えるとテーマの更新があった場合に上書きされて反映させた物が消えてしまいますので、子テーマに見出しの項目を貼り付けてやります。
以前のテーマSimplicityで使用していましたh3タグのコードを貼り付けました。
どうなったかと言いますと
何かごちゃ混ぜになっているみたいです。子テーマに記載したコードは反映されているのですが、親テーマのコードも同時に反映されている感じです。
仕方がないので親テーマを直接書き換えました。
これで何とかh3タグの変更が完了しました。
h2タグを新たに追加する
次はいちばん肝心のh2タグの装飾ですが、元々TCDのテーマではh2タグは記事タイトルに使われていました。なので見出しのh2タグは存在しません。
前回で記事のタイトルをh2からh1になるように変更しましたので、見出しをh2から使えるようになりました。
今回見出しh2タグを新たに作成してAddQuicktagに登録していきます。
変更前
1 | .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; } |
変更後
1 | .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; } |
追加するコード
1 2 | /* 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」を追加してみました。
後はAddQuicktagにコードを登録します。
最終的にh2タグがこんな風に追加・装飾されました。
TCDテーマIZMの見出し(hタグ)の装飾まとめ
今回はTCDテーマIZMの見出し(hタグ)のh2を新しく作成してh3タグと共に装飾しました。ほとんどコピペで済みましたのでWordPress歴の浅い自分でも何とかこなせた感じです。
最終的にはブログが少し華やかになりました。
見出しタグ変更前
見出しタグ変更後
残念な点は、親テーマを直接変更しましたので、アップデータ時にすべて上書きされてしまいます。なんとか子テーマに書き込んで反映させる方法を見つけないと駄目ですね。
