TCD ZEROのスタイルと記事タイトルh1タグの変更(CSS カスタマイズ)

2019年1月29日

美しいテーマを、海外のサイトを作るために必要と思いました。

以前からTCDの中田社長の興味あるメルマガをブログを本格的に作る前から読んでいたので、TCDを購入することにしました。

今までというか、本サイトは、Affinger 4 -> Affinter 5(Wing)を使用しています。これはこれで使い勝手も良く機能も豊富でSEOも強いと認識しております。

ではなぜTCDを追加購入したかですが、

データが軽いサイトを海外向けに作りたい。
美しいテンプレートをもうひとつ購入したい。

1についてですが、海外は、日本のようにネット環境が良いわけでなく、米国も日本より下ですし、画像を入れると重くて、そのサイトをあまり見なくなるとの話を聞いておりました。

そうしたてころで、英語でも対応でき、アイキャッチ画像を使わない美しいテーマ ZEROが発売されたので、「これだ!」と思って購入しました。

ただ、記事を新しいサイトに移してから気が付きましたが、「アクセスがなんだかこないな...」

今まで、実は、Affingerで他のサイトを立ち上げましたが、同様な記事を移してもアクセスはかなりきました。よって、気になり調べてみたら、その原因があるかもしれない、とのことで、今回記事にしました。

特にZEROに関するブログ記事がないので作りました。

アクセス数の変化の有無、TCD ZEROでカスタマイズして変更すべき箇所、スタイル(見出しタグ)装飾の簡単な変更方法、記事タイトルh1タグとh2タグの変更方法についてご説明いたします。

アクセス数の変化の有無

TCDでは、独特の考え方で記事のタイトルにh1タグを使っていません。よってh1->h2->h3という通常の流れがないので、グーグルにうまく認識されないのではと思う人がいることがわかりました。

結局、記事を調べても差異もないといっている人もいるし、実際自分が変更を加えても、正確な比較実験までしてないので、変化したか否かは不明です。ただ、若干上昇基調になっている感じはします。

ただ、やはり、もしもアクセスがこない可能性があるのならと思い対応することにしました。他に立ち上げたAffinger 4の方がアクセスがすぐにかなり良かったためです。

TCD ZEROでカスタマイズして変更すべき箇所

TCD ZEROを使って3つ位サイトを作りました。その中でカスタマイズしたいと感じた箇所は以下です。

見出しタグ(h2, h3, h4...)のスタイルが今一つ
記事タイトルをh1タグに、h2タグは、記事のTopレベルの見出しに対応するべき

TCDのコンセプトとしては、いろいろなプラグインを入れることがあるため、見出しタグはシンプルにしか設定してないとのことです。ただ、そのプラグインを紹介する記事もないようで、CSSをいじる必要が出てきます。

いろいろな記事をみながら試行錯誤しましたが、どうしてもうまくいかないので、TCDのサポート外と知りつつ質問してみたら回答が帰ってきました。このサポートはすばらしいです。

その上で、簡易的な方法をとることにしました。

それから記事タイトルをh1タグにする方法ですが、これは、記事になっているものを読んで対応したらできました。

ZEROのケースでご紹介いたします。

記事タイトルh1タグとh2タグの変更方法

まずはスタイルの装飾の次の作業の前に、この作業をしてh1,h2タグの定義しなおし必要です。

ファイルを直接修正するので必ずバックアップが必要です。やっているうちに私も失敗して、バックアップから復元できました。

FFTPで以下4つのファイルをバックアップまずしてください。

場所は、ドメイン名/public_html/wp-content/themes/zero_tcd055

です。

header.php
logo.php
page.php
single.php

そして、それらのFileを修正していきます。

現状認識

その前に全体像を掴むために、今のhタグがどうなっているか、まず画面で確認するのを推奨します。対象ブログの記事をひとつ選び、記事中で右クリックして、赤の部分を選択してください。

すると、以下のようなHTMLのコードが見れます。ここで"h1"や"h2","h3"を検索してどういうものが割り当てられているかざっと見てまず現状認識されることをオススメいたします。

ファイルの修正

次に、ファイルの修正です。
以下のように、「テーマの編集」を選択します。

なお、これ以降については英語サイトのものを修正していくので英語で表示されますが、修正しているFileは同じ名称です。

header.phpの修正

右下のようにFileを選択します。

そして、Ctrl + Fを同時に押して、上部の検索ウィンドウを表示してh1タグを探します。

ふたつありますね。ここでは、45,46行です。ここで、記事見出しであるべきh1タグが、サイトの説明になってます。よって、このh1タグはいらないので、pタグに修正します。

そして最後に必ずSave。

logo.phpの修正

ここでlogoにh2タグがアサインされてますのでpタグに同様に変更します。場所がfunctionsの下にありますのでちょっとわかりにくいです。

さきほどと同様な方法で、このh2をpにすべて変更します。セーブも忘れずに!

single.phpの修正

次に修正するのは、投稿する記事について、記事タイトルをh2からh1に変更です。

以下のh2が2箇所ありますが、h1に変更します。これで記事タイトルがh1になります。同様に修正してSaveです。

page.phpの修正

次に固定ペーシについても同様にh2->h1に変更です。そしてSaveです。なれて来ると簡単にできるでしょうか...

上記でタグが、記事タイトルからh1->h2->h3->h4ときれいに展開できるようになりました。必要であれば、さきほどのHTMLのソースコードをもう一度記事から表示させて見てください。変更されているはずです。

スタイル(見出しタグ)の簡単な変更方法

つぎに見出しタグのスタイルの変更です。

何も設定してない状況では、以下のような見栄えになってます。h2やh3の見出しが良くわかりにくくしまってませんね。

見出しタグの情報がありそうなcssファイルが3つあります。いろいろ試行錯誤しましたが、ぴったりなかなかうまく行かなかったので、結局一番簡単そうな方法でとりあえずしのぐことにしました。

ここからは、CSSファイルを修正する知識が必要です。この記事ではCSSの変更については概要の説明だけして、具体的に修正する箇所は画像でご紹介いたします。

CSSの修正方法などは他の記事を調べて頂ければ幸いです。

その3つのファイルですが、Wordpressメニューの「外観」「テーマの編集」を選ぶと、一覧のファイルがみれます。

style.css
editor-style-02..css
cssフォルダの下の"design-plus.css"

です。結局この3つのファイルはさわりませんが、途中までトライしたので解説だけすると、style.cssには、h2,h3などのスタイル情報を含んだものはないようです。

そして、editor-style-02.cssには、以下のようなものがあります。

/* ----------------------------------------------------------------------
headline - 見出しのスタイル
---------------------------------------------------------------------- */
.style3a, .style3b, .style4a, .style4b, .style5a, .style5b, .style6 { line-height:1.6; }
/* h3 */
.style3a { margin:3em 0 1.5em; padding:1.1em .2em 1em; font-size:22px; font-weight:400; border-top:1px solid #222; border-bottom:1px solid #222; }
.style3b { margin:3em 0 1.5em; padding:1.1em .9em 1em; font-size:22px; font-weight:400; border-top:2px solid #222; border-bottom:1px solid #ddd; background:#fafafa; box-shadow:0px 1px 2px #f7f7f7; }

ここで、sytle3aとかstyle3bとかは、記事の編集画面のタグに対応しているものです。

これをいろいろ変更したのですが、どうしても治りません。そのため、デザイプラスに質問をしたら、ZEROに特化した回答ではなかったですが、実は、3のdesign-plus.cssに定義されているとのこと。

これは、実はWordpress上で見ても空で見れないんです。デザインプレスからFTPで転送して直接Fileを修正することを教えてもらいました。

ここでもeditor-style-02.cssと同様な記述があり、多少修正することはできましたが、どうも、marginやpaddingなどのスペースをとるところがきちんとできませんでした。

コードを全部読む時間もなかったので、結局以下の簡略な方法をとることで妥協しました。

完璧は望めませんが、見栄えは多少良くなりました。

妥協せず、コードを読めることは是非やってみて記事を紹介して頂ければ幸いです。

その簡略な方法ですが、TCDのテーマオプションを選びます。