Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】見出しタグを変更する(3)h3やh4をp…

【Seesaaブログ新デザインシステム】見出しタグを変更する(3)h3やh4をpタグに入れ替える

bt-059■Seesaaブログの見出しタグを変更する
■「h3」と「h4」をそれぞれ「pタグ」に変更する
■HTMLとコンテンツHTMLを編集

前回の記事<■見出しタグを変更する(2)見出しタグをどこで使うのか計画する>で計画したように、Seesaaブログのパソコン用テンプレートの見出しタグ「h3」と「h4」を、段落「pタグ」に入れ替えたいと思います。



SeesaaブログのHTMLでは、見出しタグを使っている箇所に「class」が指定されています。
見出し部分のスタイルについては「class」で設定されているので、HTMLで見出しタグ自体を入れ替えてしまっても何の問題もありません。
入れ替えた後に、改めて「h3」と「h4」のスタイルを決めたいと思います。
見出しタグが使われているのは「HTML」と「コンテンツHTML」ですので、両方とも編集します。


【注意】
見出しタグを変更してもかまわない、というのはあくまでもパソコン用のテンプレートの話です。スマホ用には少しだけ影響があります。
スマホ用のテンプレートでの見出しについては、次の記事<■見出しタグを変更する(4)スマホ用テンプレート(見出しタグのスタイルを作る)>で説明します。








HTML上の「見出しタグ」を変更する


デフォルトテンプレートの、HTML上の「h3」と「h4」を書き出しておきます。
あくまでも「デフォルトのテンプレート」なので、HTMLのカスタマイズをしている方は、下記デフォルトの行数とは違う箇所を変更することになると思います。
その場合は「h3」や「h4」という単語でご自分のテンプレート(HTML)を検索してください。すぐに見つかると思います。


<HTML上の「h3」と「h4」>
h3 記事ページ下の「関連記事」タイトル、記事ページ下の「この記事へのコメント」、コメント記入ページの「○○へのコメントを書く」
110行目 <h3 class="module__heading"><% if:blog.get_property('related_article') eq 'category' %><% article_category.name -%>の最新記事<% else %>関連する記事<% /if %></h3>
273行目 <h3 class="module__heading">この記事へのコメント</h3>
640行目 <h3 class="module__heading">"<% article.subject | tag_break -%>"へのコメントを書く</h3>

h4 コメントを記入した時にエラーになった場合の「ERROR」、ブログの認証?に失敗した場合の「ERROR」
645行目 <h4 class="message__title message__title--error">ERROR</h4>
714行目 <h4 class="message__title message__title--error">ERROR</h4>



この「h3」と「h4」が記述されている箇所は、わざわざ見出しタグを付けて強調しておいた方がいい部分だとは思えないですよね?
「この記事へのコメント」だの「ERROR」だの、こういう言葉をクローラーに引っ掛けてもらう必要はないと思います。
強いて言うならば、640行目の「○○の記事へのコメントを書く」には記事タイトルが入っているのでクローラーに引っ掛かってほしい部分かもしれないけれども、正直、そんなに大事な部分でもないと思います。(まあ、好きなように考えてもらってかまわないんですけども)
私自身はハッキリ言って面倒なので、全部「pタグ」に変更したいと思います。



「h3」と「h4」を「pタグ」に入れ替える


上記の箇所の「h3」と「h4」を全部、「p」と入れ替えます
終了タグ「/h3」「/h4」も、忘れないように「/p」と入れ替えます。
地道に「p」の文字を直打ちすれば大丈夫です。


もしも一気に入れ替えたいのであれば、一度HTMLのコードを全部パソコンの「メモ帳ソフト」等に貼り付けて、「置換」で「h3」を「p」へ、「h4」を「p」へ入れ替えてしまって、それからまたHTML編集画面にコピペすればいいのではないでしょうか。(‥‥これまた面倒w)
私は地道に、直打ちしました。



例として最初のコードの画像を掲載しておきます。
(カスタマイズ後の画像ですので行数や言葉がデフォルトとは異なります)


記事ページ下の「関連記事」タイトル(デフォルト)
関連記事部分のHTML


編集後
編集後の関連記事部分のHTML



コンテンツHTML上の「見出しタグ」を変更する


デフォルトテンプレートの、コンテンツHTML上の「h3」と「h4」を書き出しておきます。
あくまでも「デフォルトのテンプレート」なので、コンテンツHTMLのカスタマイズをしている方は、下記デフォルトの行数とは違う箇所を変更することになると思います。
その場合は「h3」や「h4」という単語でご自分のテンプレート(コンテンツHTML)を検索してください。すぐに見つかると思います。


<コンテンツHTML上の「h3」と「h4」>
h3 各コンテンツのタイトル
003行目 <h3 class="module__heading"><% parts.title -%></h3>
015行目 <h3 class="module__heading"><% parts.title -%></h3>
047行目 <h3 class="module__heading"><% parts.title -%></h3>
067行目 <h3 class="module__heading"><% parts.title -%></h3>
078行目 <h3 class="module__heading"><% parts.title -%></h3>
157行目 <h3 class="module__heading"><% parts.title -%></h3>
198行目 <h3 class="module__heading"><% parts.title -%></h3>
210行目 <h3 class="module__heading"><% parts.title -%></h3>
270行目 <h3 class="module__heading"><% parts.title -%></h3>
287行目 <h3 class="module__heading"><% parts.title -%></h3>
307行目 <h3 class="module__heading"><% parts.title -%></h3>
317行目 <h3 class="module__heading"><% parts.title -%></h3>
336行目 <h3 class="module__heading"><% parts.title -%></h3>
350行目 <h3 class="module__heading"><% parts.title -%></h3>
362行目 <h3 class="module__heading"><% parts.title -%></h3>

h4 最新の記事の記事タイトル
24行目30行目 <h4 class="recent-entry__title"> 〜 </h4>



「h3」が記述されている箇所は、見出しとして強調しておく必要がない部分です。
各コンテンツのタイトル、つまりサイドバーの「検索」や「カテゴリ」、「最近の記事」の文字部分に「h3」が入っていますが、クローラーに引っ掛けてもらう必要はありませんので全部「pタグ」に入れ替えてしまっても問題はありません。


ただし、「h4」については、ちょっと注意が必要です。
これは「最新の記事」で表示する記事リストの「記事タイトル」部分ですので、「pタグ」にしてしまってもいいし、強調したいならこのまま何もしなくてもかまいません。
見出しタグ「h」を付けても付けなくても、ブログページの表示上は「class」が指示を出すので、例えば「h4」のままでもいいし、「h3」にしても「h2」にしてもどちらでも大丈夫です。お好きなように変更してください。


ちなみに私は、「h2」にしました。
元々記事タイトルには「h2」が使われていますので、同じように設定することにします。
(見出しタグは「h1」以外は同じページに何個あっても大丈夫です)



「h3」と「h4」を「pタグ」に入れ替える


ということで、上記の箇所の「h3」と「h4」を全部、「p」と入れ替えます
終了タグ「/h3」「/h4」も忘れないように「/p」と入れ替えます。


【注意】
上記で説明したように、「h4」は「最近の記事」の記事タイトル部分なので、私は「h2」に変更しました。コンテンツHTMLでは、私は結局「h3」を「p」に、「h4」を「h2」に入れ替えたことになります。


一気に入れ替えるためには、一度コンテンツHTMLのコード全部をパソコンの「メモ帳ソフト」等に貼り付けて、「置換」をして、また戻せば大丈夫です。(私はもちろん、直打ちしました)
画像を掲載しようと思いましたが、上記のHTML編集時の画像を掲載していますので、もう大丈夫だと思います。あんな感じで変更してください。



テンプレートをカスタマイズしている場合の「h3」タグ


上記でコンテンツHTMLの変更すべき箇所を表示しましたが、しつこいですが、あれはデフォルトのテンプレートの場合の変更箇所です。
私がこれまでカスタマイズしてきた中で、コンテンツHTMLには他にも「h3」が存在しています。
サイドバーに表示させているカレンダーの「カレンダー」というタイトル部分と、もしも「自由形式」で何かコンテンツを追加しているならば、自由形式のタイトル部分にも「h3」が使われているはずです。



カスタマイズ後だと、「カレンダー」の場合はおそらく116行目に「h3」が存在していると思います。
「自由形式」の場合は194行目あたりに「h3」があると思います。
こちらも間違いなく「p」に変更しておいてください。


例:サイドバーの「カレンダー」
カレンダー部分のHTML

以上で見出しタグの入れ替えは終わりです。




次の記事の紹介

見出しタグの入れ替えが終わったので、この後は、改めて見出しタグのスタイルを設定したいと思います。
CSSにスタイルを記述するんですが、「h3」や「h4」に直接スタイルを記述してしまうと失敗しちゃうかもしれないんですよね。
問題となるのは「スマートフォン」のテンプレートです。
まあ、詳しいことは次の記事をお読みください。


【Seesaaブログ新デザインシステム】見出しタグを変更する(4)スマホ用テンプレート(見出しタグのスタイルを作る)
見出しタグを入れ替えたので、現時点では、HTML上にもコンテンツHTML上にも、h3とh4は存在していません。現在使用していないh3とh4は、それぞれ大タイトル、小タイトルとして記事内で使います。‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。