ブログカスタマイズの雑談BLOG

前回の記事＜■見出しタグを変更する（3）h3やh4をpタグに入れ替える＞で、デフォルトのテンプレートの「h3」と「h4」を、「pタグ」（または「h2」タグ）に変更しました。
見出しタグを変更してもスタイルを指示しているのは各classなので、ページ表示上のスタイルは変更されていないことはご理解いただけると思います。（しつこく書いたので大丈夫でしょう）



見出しタグを入れ替えたので、現時点では、HTML上にもコンテンツHTML上にも、「h3」と「h4」は存在していません。全部「pタグ」（または「h2」タグ）に入れ替えてしまいましたので、「h3」も「h4」もどちらも存在しません。念のためにご自分のテンプレートで確認してみてくださいね。



さて、現在使用していない「h3」と「h4」は、それぞれ大タイトル、小タイトルとして記事内で使います。（記事内で使いたいから見出しタグを変更したのです）
「h3」と「h4」のスタイルについては、元々のCSSに記述があります。


＜デフォルトのCSS＞


このCSSの記述は今でも生きているので、このまま記事内で「h3」や「h4」タグを使うと、文字サイズが「16px」と「14px」になります。
「body」の中でフォントサイズは「14px」に設定しているはずですから、「h4」に至っては普通の文字サイズであり、視覚的にはあまり意味がありません。



CSSの記述ではフォントサイズだけしか指示していないので、『このままCSSの「h3」や「h4」にスタイルを記述していけばいい』と思われるかもしれませんが、そんなことをすると大変なことになりますのでお気を付けください。

Seesaaブログのスマホ用テンプレートにはh3やh4が残っている

今、カスタマイズしているのはパソコン用のテンプレートです。ここまで「HTMLが〜」とか「CSSが〜」とか言ってきたのは、すべてパソコン用のテンプレートの話です。


スマホ用のテンプレートはこれまで何も触っていませんので、何も変わっていません。
もちろんスマホ用のテンプレートも編集できますが、実はスマホ用はCSSしか編集できません。
HTMLの編集はできないのです。


ということは、スマホ用のテンプレートは、HTML上にまだ「h3」や「h4」が残っていることになります。
いくら「h3やh4はHTML上には存在しない」と言っても、それはパソコン用のテンプレート上の話であってスマホ用のテンプレートには無関係です。
スマホ用のテンプレートには「h3」や「h4」が存在している、ということを忘れないでください。



スマホ用テンプレートに「h3」や「h4」が残っていることの何が問題なのか？
それは、「h3」や「h4」に直接スタイルを指示すると痛い目に遭う、ということです。
確認の意味も込めて、少し試してみたいと思います。

スマホ用のテンプレートでスタイル設定を試してみる

色々と確認したいので、見出しタグ「h3」に「フォントスタイルは太字で、見出し全体を赤線で囲む」というスタイルを設定します。
スマホ用テンプレートのCSS（スタイルシート）に下記のように記述して「保存」しました。




上記の記述は、「h3」は太字になって赤線で囲まれる、というスタイルです。
そして、記事の中で「h3」を使って何か書いてみます。
とりあえず以前試しにやってみたものを再利用するということで、記事の作成画面では「テストです」と書いてみました。
この記事をスマートフォンで開いてみます。


記事作成画面



実際の表示（スマホ）


これは記事ページの画像ですが、意図したように赤線で囲まれています。
記事の中では見出しタグ「h3」を使って「テストです」と書いたし、CSSでは「h3」に赤枠で囲むというスタイルを設定していたので、意図した通りに表示されました。



次に、この記事ページを下までスクロールしてみます。
記事ページの下には「最新記事」があります。


実際の表示（最新記事）


何ですかコレ。
記事タイトルすべてが赤線で囲まれちゃってるじゃないの！


ということで、スマホ用テンプレートの「最新記事」の各記事のタイトルが赤線で囲まれてしまいました。「やだー何これー」レベルの話ではありません。想定外です。



私が何に驚いているのかというと、パソコン用のテンプレートで「h3」が使われていたのは、最新記事（カテゴリの最新記事）の「○○の最新記事」というタイトル部分であって、各記事のタイトル部分ではなかったはずだ、ということです。


このことから、パソコン用のテンプレートとスマホ用のテンプレートでは、HTMLに記述されている見出しタグが違うということがわかります。
最新記事の記事タイトルに赤枠のスタイルが適用されるというのは、完全に想定外でした。



でもですね、非常に残念なんですが、スマホ用のHTMLを管理画面から確認することはできません。どこに「h2」や「h3」が使われているのか、簡単にはわからないのです。
「どこに使われているのかわからない」ということは、「h3」に直接指示を記述すると、予期しない場所でその指示が有効になってしまう可能性が非常に大きい、ということです。
記事の中で「h3」や「h4」の見出しタグを使用する場合は、スマホ用テンプレートを考慮しなければいけません。

スマホ用テンプレートを考慮して、記事中に見出しタグを使う

スマホ用のテンプレートはHTMLを編集できないので、どこに何のタグがあるのかわかりません。
記事中の見出しとして「h3」を使いたくても、迂闊に使うとスマホ用のテンプレートのどこに影響があるのかわかりません。


だからと言って「どこに影響があるのかわからないからスマホ用のCSSにh3のスタイルを記述しない」という選択はしない方がいいと思います。
検索エンジン（クローラー）に引っ掛けてもらうために「h3」を使うのですから、記事の中に「h3」を記述することは当然のことです。
その「h3」に何のスタイルも設定しないとか、これじゃあ記事の中で目立ちもしないただの段落「pタグ」と一緒です。
ではどうしたらいいのか？

見出しタグには「class」でスタイルを付けよう！

「h3」には何かのスタイルを記述しなければ、記事の中で目立たせることはできない。
でも、スマホに「h3」のスタイルを記述すると、意図しない箇所まで「h3」のスタイルになってしまう。
これを避ける方法は、「h3」に直接スタイルの指示を書かずに「class」でスタイルを作ることです。


例えば、新しくclass「midasi1」「midasi2」を作ります。
記事の中で大タイトルを書く時に


などと書けばよいのです。


これは「h3」+「midasi1」という指示になるので、ただの「h3」とは違います。
スマホのCSSにも「midasi1」「midasi2」というclassを記述しておけば、スマホのテンプレートのどこに「h3」が設定されていたとしても、その「h3」には適用されません。
意図した箇所つまり記事の中の「h3」にだけ、設定したスタイルを適用することができます。


もちろん、ただの段落タグである「pタグ」にこの「midasi1」classを記述しても同じようなスタイルを付けることができますが、それはただの段落であり、通常の文章と変わりません。
検索エンジン（クローラー）は引っ掛けてくれません。
「これは大事な言葉だよ」と検索エンジンに気にかけてもらいたいから見出しタグ「h」を使おうとしていることを忘れないでください。
見出しタグを使うことが前提の話です。

見出し用のclassを新しく作って利用する

見出し用のclassを作ります。
好きなよう設定して、CSSの最後の空いた部分にでも記述すればいいです。
もちろんスマホ用のCSSにも記述します。
スマホ用はパソコン用と同じにしなくてもかまいません。好きなように作ればいいと思います。



私は実は、さっき例として出した「midasi1」「midasi2」というclass名を使っています。
もちろんお好きなclass名にすればいいと思います。
私がやっているように記述する必要はありませんが、例として私の設定を書いておきますのでよかったら参考にしてください。


＜パソコン用のテンプレート（CSS）＞


＜スマホ用のテンプレート（CSS）＞


パソコン用のテンプレートもスマホ用のテンプレートも、CSSの一番下に記述すればいいので簡単です。
どちらも大タイトル（midasi1）は左横と下に線を引きました。
小タイトル（misasi2）は、左横に線を入れています。

実際に記事中で見出しタグを使う場合の書き方

記事中で見出しタグを使う場合は、


のように記述します。


「h3」や「h4」の見出しタグだけを記述してしまうと、先ほどから説明しているように、パソコン用のテンプレートとスマホ用テンプレートでは表示が異なってしまいます。というか、スマホ用では意図していないところで「h3」や「h4」のスタイルになってしまいます。
必ず「class」を入れてください。
もちろん終了タグ「</h3>」「</h4>」も忘れないように書きます。


私はこの見出しスタイルをパソコンの「メモ帳ソフト」に書いておいて、見出しとして使用したい時にコピペして使っています。
いちいち直打ちするのは面倒ですから。

CSSに元々記述されていた見出しタグをどうする？

さて、長々と説明してきましたが、見出しタグの変更作業は終わりました。
新しいclassもCSSに記述しました。
これで作業は終わったわけですが、気になるのはCSSに元から記述されている見出しタグです。


CSSには「h1」から「h6」までの設定が記述されていますが、この設定は何の役にも立っていません。
なぜなら、すべてのスタイルは「class」を使って指定されているからです。
見出しタグ「h」に直接スタイルを指定する予定はありませんし、そもそもCSSの記述では文字サイズしか書いてありません。
こんなもの、何か必要ですか？


と思ったんですが、念のためにとっておこうかな？
う〜ん、どうしよう。
まあ、どうでもいいや。削除してもいいし、しなくても関係なさそうだし。
‥‥いつか、しれっと削除するかもしれないですねｗ




次の記事の紹介

次の記事では、Seesaaブログのカテゴリページに記事リストを作る方法を説明します。