FC2ブログ共有テンプレートを作成・配布しています。不精なので時々更新。(^^;
Top Page ›  Template ›  カスタマイズ  ›  個別記事のタイトルを h1 に変更するカスタマイズ
✎

個別記事のタイトルを h1 に変更するカスタマイズ

▼

FC2ブログテンプレート（新旧、公式・共有）の多くがブログタイトルを h1、記事タイトルを h2 としています。

これは、昔の公式テンプレートからの習慣（？）で HTMLを使っての記事投稿が難しい方のために「初めの h1 は1ページに1回、それ以降に続く見出しは必ず h2 …」という形になるよう作られているから、だと私は勝手に思ってるんですよね。

なので、（新・旧投稿画面とも）見たまま編集画面でユーザーが使える見出しは『 h3 』からになったのでは…と、これも私的な憶測ですけど。^^;

こんな風に ↓

見出し新管理画面見出し旧管理画面

公式テンプレートをお手本にして作られた多くの共有テンプレートが同じような形になっているのは、多分みんな「前倣い」したんじゃないかな。私はそうでした。（← 今もですね。(~_~;)）

hタグの基本的な使い方と Google 検索のタイトルリンク

ご存知の通り『hタグ』は見出しを意味するタグで、HTMLでマークアップする「h1 / h2 / h3 / h4 / h5 / h6」のことです。

見出しのレベルは h1 が一番重要度が高く、h6 が一番低い見出しです。使い方のルールとして、

  • 見出しの順番を守って使う。（h1 → h3 → h2 等、フォントサイズ変更やデザインとして使ったり 順を変えて使わない。）
  • h1 タグの使用は1ページにつき1度にする。（検索エンジンがページの内容を理解するための重要なタグなので、複数利用可だけど乱用しない。）

というのが推奨されています。詳しくは下記をご覧下さいませ。

<h1>–<h6>: HTML の見出し要素 - HTML: HyperText Markup Language | MDN

HTML の <h1>–<h6> 要素は、セクションの見出しを 6 段階で表します。<h1> が最上位で、<h6> が最下位です。

developer.mozilla.org

現行のHTMLでは文法的に <h1> を複数使っても問題有りませんが、このような記事も有ります。

Google、タイトルリンクのTIPSを追加: はっきりとわかる目立つ見出しを1つだけ使う – 海外SEO情報ブログ

Google、タイトルリンクのTIPSを追加: はっきりとわかる目立つ見出しを1つだけ使う – 海外SEO情報ブログ

タイトルリンク生成に関わる TIPS を Google は技術ドキュメントに追加した――はっきりとわかる見出しを 1 つだけ使う

www.suzukikenichi.com

Google 検索のタイトルリンク生成アルゴリズムが、2021年8月のアップデートで <title> 要素の代わりに見出しテキストが使われる傾向が強まったとのこと。

（テンプレートの）個別記事にある <title> 要素は各記事のタイトル <%sub_title> が入るようになっていますが、見出しテキストが使われる可能性を考えて <title> と <h1> を揃える…というのが今回のカスタマイズです。

テンプレートの HTML、<title> と <h1> を揃えるカスタマイズ

カスタマイズ…としておくのは、この作業を行った後の記事に <h2> が無くなってしまうためです。

見たまま編集モードを利用して見出しを付けた場合、<h2> では無く必然的に <h3> からになります。（故に記事内は h2 が抜けて h1 → h3 → h4 のようになります。見出しを使ってない場合は問題有りません。）

見出しがh1→h2→h3の順でないと、SEOに悪影響あったりします?【SEO記事12本まとめ】 | 海外&国内SEO情報ウォッチ

HTMLの仕様とグーグルのページ評価、そしてユーザビリティやアクセシビリティを含めた判断について考えたい

webtan.impress.co.jp

2018年の上記の記事では「セマンティック的には順序良く正しく書くのが好ましいけれどマイナスにはならない」と有りますが、記事投稿者がHTML編集画面で書けるなら（ユーザビリティやアクセシビリティを考えて）新しい記事からでも h2 を見出しに使って頂きたいので、テンプレートの修正・更新では無く「HTMLの投稿画面を使って書ける方向けのカスタマイズ」とさせて頂きます。m(__)m

前置きが長くなってしまいました。HTML・CSS で変更する箇所は以下の部分です。

① h1 になっているブログタイトル部分を変更

対象テンプレート：当方共有化済み全テンプレート

変更するテンプレートのHTML編集枠内の記述位置は、キーボードCtrl＋Fキーで検索窓を出し、中に <h1 と入れて探すと1ヵ所見付かります。 

<h1 id="blog-name"><a href="<%url>"><%blog_name></a></h1>
若しくは
<h1><a href="<%url>"><%blog_name></a></h1>

見付けた所がこのようになっていると思うので、<h1 から </h1> までの部分を下記のように変更します。（コピペ可） 

<<!--not_permanent_area-->h1<!--/not_permanent_area--><!--permanent_area-->div<!--/permanent_area--> id="blog-name"><a href="<%url>"><%blog_name></a></<!--not_permanent_area-->h1<!--/not_permanent_area--><!--permanent_area-->div<!--/permanent_area-->>

② h2 になっている記事タイトル部分を変更

対象テンプレート：当方共有化済み全テンプレート

【注意】更新日によって HTML が異なるため、カスタマイズしたいテンプレートのスタイルシート編集枠内上部に記述されている更新日をご覧頂き、2019/11/20, 11/23 以降のテンプレートは以下を、それ以前のテンプレートで『Newマークを記事タイトル部に入れている場合』はこの記事最下にある『Read More』をクリックしてご確認下さいませ。

変更するテンプレートのHTML編集枠内の記述位置は、キーボードCtrl＋Fキーで検索窓を出し、中に id="entry<%topentry_no>" と入れて探すと1ヵ所見付かります。 

パターン1
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2>

パターン2
<div class="entry_title"><h2<!--permanent_area--> itemprop="headline"<!--/permanent_area--> id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2>

パターン3
<div class="entry_title"><h2<!--permanent_area--> itemprop="headline"<!--/permanent_area--> id="entry<%topentry_no>"><!--not_permanent_area--><a href="<%topentry_link>"><!--/not_permanent_area--><%topentry_title><!--not_permanent_area--></a><!--/not_permanent_area--></h2>

上記のパターンが有るので、前後に有る <h2 から </h2> までの部分を（パターンに合わせて）下記のオレンジ文字のように変更して下さい。（コピペ可）

（ <div class="entry_title"> という部分はテンプレートによって異なる事が有ります。その場合も <h2 から </h2> までの部分をオレンジ文字のように変更して下さい。） 

パターン1
<div class="entry_title"><<!--not_permanent_area-->h2<!--/not_permanent_area--><!--permanent_area-->h1<!--/permanent_area--> id="entry<%topentry_no>"><!--not_permanent_area--><a href="<%topentry_link>"><!--/not_permanent_area--><%topentry_title><!--not_permanent_area--></a><!--/not_permanent_area--><<!--not_permanent_area-->/h2<!--/not_permanent_area--><!--permanent_area-->/h1<!--/permanent_area-->>

パターン2, パターン3
<div class="entry_title"><<!--not_permanent_area-->h2<!--/not_permanent_area--><!--permanent_area-->h1 itemprop="headline"<!--/permanent_area--> id="entry<%topentry_no>"><!--not_permanent_area--><a href="<%topentry_link>"><!--/not_permanent_area--><%topentry_title><!--not_permanent_area--></a><!--/not_permanent_area--><<!--not_permanent_area-->/h2<!--/not_permanent_area--><!--permanent_area-->/h1<!--/permanent_area-->>

'22/07/04 個別記事タイトル部分の不要なリンクを外したので、パターン2 とパターン3 を一緒にしました。コメントでのご指摘有難うございました。m(__)m

③ 各テンプレートのスタイルシートを修正

対象テンプレート：当方共有化済み全テンプレート

下記のテンプレート名をクリックすると修正に必要なスタイルシートが表示されるので、テンプレートのスタイルシート編集枠内最下に追加して下さい。

後は更新ボタンを押して完了です。

この記事を書いている時点でのテンプレート更新日（'22/06/27、'22/05/01、'22/04/24）のHTML・CSSを元に表示の検証を行っていますが、不具合が有った場合は個別に対応致しますのでご連絡下さいませ。

カスタマイズを行う際は、必ずテンプレートの複製を作ってから作業して下さい。不具合が有った時に元に戻せるので安心です。

… 個別記事タイトルが h1 になっているテンプレート …

多分、共有化されているテンプレートで個別記事タイトルが h1 になっているテンプレートは、vanillaice(Akira氏) の作っているものだけではないかと。それ以外は、『ブログタイトルは h1、個別記事タイトルは h2』になっていると思います。（違うのも有ったらスミマセン。）

記事内で見出しを利用する際の注意点

記事内で見出しを利用する際の注意点

以前にも注意勧告及び弊テンプレートの仕様について説明をしていますが、ここで再度お伝えしたいと思います。特に 新投稿画面のデフォルトモード(WYSIWYG)で見出しを利用する 場合です。...

vanillaice000.blog.fc2.com

2019/11/20、2019/11/23 のテンプレート更新以前に、新着記事に対してNewマークを付ける記事を掲載していました。

・テンプレートの修正・更新致しました。11/23

・新着記事にNewマークを表示

もし、個別記事のタイトル（前or後）にNewマークを付けるカスタマイズをされている場合は、② のカスタマイズ用 HTML が異なりますので、ご確認頂いて以下のようにカスタマイズをお願い致します。

カスタマイズでnewマークを記事タイトル部に入れている場合

パターン１a（タイトル前）
<h2 id="entry<%topentry_no>"><span data-newdate="<%topentry_year>-<%topentry_month>-<%topentry_day>"></span><a href="<%topentry_link>"><%topentry_title></a></h2>

パターン１b（タイトル後）
<h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a><span data-newdate="<%topentry_year>-<%topentry_month>-<%topentry_day>"></span></h2>

上記のパターンが有るので、前後に有る <h2 から </h2> までの部分を（パターンに合わせて）下記のように変更して下さい。（コピペ可） 

カスタマイズでnewマークを記事タイトル部に入れている場合

パターン１a（タイトル前）
<<!--not_permanent_area-->h2<!--/not_permanent_area--><!--permanent_area-->h1<!--/permanent_area--> id="entry<%topentry_no>"><span data-newdate="<%topentry_year>-<%topentry_month>-<%topentry_day>"></span><a href="<%topentry_link>"><%topentry_title></a><<!--not_permanent_area-->/h2<!--/not_permanent_area--><!--permanent_area-->/h1<!--/permanent_area-->>

パターン１b（タイトル後）
<<!--not_permanent_area-->h2<!--/not_permanent_area--><!--permanent_area-->h1<!--/permanent_area--> id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a><span data-newdate="<%topentry_year>-<%topentry_month>-<%topentry_day>"></span><<!--not_permanent_area-->/h2<!--/not_permanent_area--><!--permanent_area-->/h1<!--/permanent_area-->>
[Tag] * カスタマイズ * テンプレート 
↻
 * Category：カスタマイズ
 * Comment：(14) * Trackback：(0) * △
カテゴリ:［カスタマイズ］

Comments

お疲れ様です

akiさん、こんにちは〜。
毎日く◯暑い日が続いていますが、お変わりありませんか？ニャンコちゃんたちは元気にしていますか？

今回「個別記事のタイトルを h1に変更するカスタマイズ」に踏み切られたとのこと、私がこんなこと言うのは生意気だけれど、本当に大英断でしたね〜。

akiさんも言及されてらっしゃるように、共有テンプレートで個別記事のタイトルにh1が使われているのは、私が知っている限りでは、Akiraさんのそれだけなのですよ。

私のブログは「ドラマのタイトル+ネタバレ」で検索されることがほとんどなのですけれど、もう10年ぐらい前ですかね、検索上位に来ている方の記事を確認したところ、そのほとんどが「個別記事のタイトルがh1」なことに気づきました。

それからはあれこれ調べながら自分で四苦八苦して、それこそ当時はまだ1ページに１hタグが原則と聞いていたので、どうせブログのタイトルを検索してくる人などおらん！とブログタイトルをh2にしたりしてたんですよ（苦笑。リピーターさんには「韓ドラおばさん」で捜していただくようお願いしました。確かに順序は間違っているのだけれど、検索順位は飛躍的に上昇したので、ま、いいか、と(￣▽￣)。

その後、偶然、Akiraさんのテンプレートを拝見する機会があって、思わず、これだ！と飛びつきました（爆。それ以来ずっとお世話になっていたのですよ。

akiさんのテンプレートをお使いの方で「記事タイトル」でヒットを狙っていらっしゃる方は、きっと効果覿面ですよ〜。楽しみですね( *´艸｀)。

自分も苦労したことだったので、この暑いのに暑苦しく長々とすみませんです。猛暑の折から、どうぞくれぐれもご自愛くださいませね。
2022-07-02-08:09 こん
 [ 返信 * 編集 ]▼ ▲

教えてください

本件は、カスタマイズ提供とのことでしたので、私の場合これ以上いじくると訳がわからなくなると思い、触らずにいました。
しかし、前の　こんさんのコメントを拝読し、[ct_responsive3c] をカスタマイズしてみました。
結果、以下について教えてください。なお、「② h2 になっている記事タイトル部分を変更」については、パターン2でした。

Q1.ブログタイトルの文字がデカ過ぎます。
Q2.個別記事を表示せた場合(ex.https://nono634.blog.fc2.com/blog-entry-6369.html)、記事のタイトル部が調子悪いです。
タイトル文字を表示する帯が薄くなってしまいます。また、できる事ならタイトル文字を太文字にしたいのですが、不都合でしょうか。

この事について
①.「③ 各テンプレートのスタイルシートを修正 」ヵ所をバッサリ書かなければ「Q1」は解消されました。しかし、「Q2」はされませんでした。
②.試みに[ct_responsive3c] 配布版でカスタマイズしてみました。結果、真っ当でした。
※現在、カスタマイズした物を利用しています。
以上、御教授いただければ幸いです。

追伸、
(Read More)で書き変えてましたが、関係無さそうでした
2022-07-02-13:54 呑兵衛あな
 [ 返信 * 編集 ]▼ ▲
aki

Re: こん 様へ

こんにちは。コメント頂き有難うございます。m(__)m

> 今回「個別記事のタイトルを h1に変更するカスタマイズ」に踏み切られたとのこと、私がこんなこと言うのは生意気だけれど、本当に大英断でしたね〜。

…踏み切るというか、あくまでもカスタマイズですけどね。^^;
Akira氏のテンプレートのように「個別記事のタイトルは h1 標準」に至っていない点は『出来る人任せ』という私の自信の無さと他力本願の表れです。
それと、記事内に使える見出しが h3 からなので、（うちのを含めて）共有テンプレートによっては h2 を記事タイトル部分やメニュータイトル部分のスタイルに使っていて、記事内にそのまま見出しとして使えない場合も有ります。

<title> と <h1> を揃えた方が良い～という記事を5月に見付け、自分の作ったテンプレートに適用する方法を考えておりました。
<h1> を出し分けるのはエリア変数を使えば簡単なのですが、変わった後（ h1 → div , h2 → h1 ）のCSSが色々面倒で時間が掛かってしまいました。
ただ、テンプレートの更新が多いので、DL時期によってカスタマイズ後に崩れてしまう可能性も有るんですよね。
全ての対象に適応するのは難しいので、そこは個別対応するしか無いかなと。(~_~;)

> ～～～それこそ当時はまだ1ページに１hタグが原則と聞いていたので～～～

…そうなんですよね。だからFC2ブログのテンプレートは昔から「ブログタイトルを h1、記事タイトルを h2 」として表示されるように作られていたんだと思うのです。
HTMLに不慣れな方にも h1 の後に h2 が続くように、そして記事内の見出しは h3 からなので h1 → h2 → h3 の順で並ぶように、と。（私個人の憶測です。）

> akiさんのテンプレートをお使いの方で「記事タイトル」でヒットを狙っていらっしゃる方は、きっと効果覿面ですよ〜。

…現状 h1 が複数有っても、見出しタグが順序通りでなくても（極端な話 抜けてても）マイナスでは無いというのが解れば、SEO的に優位なブログになるかもしれません。
なので、この度のカスタマイズが誰かのお手伝いになれば良いなぁと思います。

-----
毎日本当に暑くて、私も猫ズもバテ気味です。
血尿の出ている「ちまき」も相変わらず治りません。（只今投薬を止めて食事療法中。）
まだまだこれからが夏本番、色々家計も体調も厳しくなりますが、頑張って乗り切りましょう！
2022-07-02-19:01 aki
 [ 返信 * 編集 ]▼ ▲
aki

Re: 呑兵衛あな 様へ

こんにちは。コメント有難うございます。

呑兵衛あな様のテンプレートはかなり私も弄ったので、別の調整が必要になります。
CSSを作りますので、暫しお時間を下さいませ。m(__)m
2022-07-02-19:14 aki
 [ 返信 * 編集 ]▼ ▲

Re: aki 様へ

それは大変な手間をお掛けする事になってしまいました。
たいへん恐縮です。

追伸
でもこのカスタマイズの効果は大きいと見ました。
私のブログの場合、個別記事のタイトルでGoogle検索しても、以前は24時間ほど掛かっていたのですが、カスタマイズしたのが07/02の14時頃だったのですが、「テンプレh1タグの変更」で既にヒットします。
https://www.google.com/search?client=firefox-b-d&q=%E3%83%86%E3%83%B3%E3%83%97%E3%83%ACh1%E3%82%BF%E3%82%B0%E3%81%AE%E5%A4%89%E6%9B%B4
2022-07-02-19:32 呑兵衛あな
 [ 返信 * 編集 ]▼ ▲
aki

Re: 呑兵衛あな 様へ

お待たせ致しました。
呑兵衛あな様の場合は、CSSを下記のようにして下さい。

/* 記事タイトルh1化のカスタマイズ用に追加 */
header a, header a:link, header a:visited{
font-size: unset;
}
#blog-name{
top:0;
margin:0 30px;
font-size:2em;
font-weight:bold;
line-height:1.4;
}
.entry_title h1{
padding-left:0;
font-size:1em;
font-weight:bold;
text-align:left;
margin:0;
line-height:inherit;
position: initial;
}
@media only screen and (max-width:749px){
#blog-name{
font-size:1.4em;
text-align:left;
margin:3px 45px 0 15px;
line-height:1.5;
position:static;
}}
@media only screen and (max-width:480px){
#blog-name{
margin-top:5px;
font-size:1.2em;
}}

記事内で <h2> を今後見出しに使う場合は、新たに h2 に対してスタイルを追加し、記事投稿時にHTML編集画面を使って手打ち（<h2>見出しタイトル</h2>）でご利用下さい。
h2 に新規スタイルを追加しない場合は、テンプレートのスタイルになっている
h2 {
font-size:1em;
font-weight:normal;
}
が適用されます。ブラウザのデフォルトに戻す場合は
h2 {
all: revert;
}
を追加して下さい。

貴殿ブログに記事に有った「タイトル文字部の帯が狭くなった件」については、ゴメンナサイ、推測とは異なります。
h1 のスタイル position:absolute; が継承されてしまっていたので、.entry_title h1 に引き継がないように position:initial; として上書きし、初期値に戻したものです。
これでお試し頂けますか？
2022-07-02-21:44 aki
 [ 返信 * 編集 ]▼ ▲

Re: aki 様へ

早速対応して頂き、大変感謝しています。
ありがとうございました。
バッチリです。
果報は寝て待てとも言いますが、まことに素早い事で。寝ている暇がありませんでした.笑
2022-07-03-08:47 呑兵衛あな
 [ 返信 * 編集 ]▼ ▲
aki

Re: 呑兵衛あな 様へ

こんにちは。先程確認致しました。
不具合が有りましたらお教え下さいませ。m(__)m
2022-07-03-13:37 aki
 [ 返信 * 編集 ]▼ ▲

No Subject

独り言です。
提供して頂いた[ct_responsive3c] 改造版のことですが。
記事のタイトルの右端に▼が付きましたが、あれ便利ですね
2022-07-03-17:20 呑兵衛あな
 [ 返信 ]▼ ▲
aki

Re: 呑兵衛あな 様へ

こんばんは。
個別記事のページをスクロールしなくても、▼でコメント欄に移動できるのは楽で良いですよね。
お気付き頂き有難うございます。付けた甲斐が有りました。m(__)m
2022-07-03-22:50 aki
 [ 返信 * 編集 ]▼ ▲

ありがとうございます

以前から記事ページの記事タイトルがリンクになっていることが気になってしまっていたので、思い切ってこの御記事を参考に直してみました。
大変参考になりました、ありがとうございます。

その際、ついでにh1にしようと思い、悪戦苦闘の末、ようやくカスタマイズできた気がしますが、
ちゃんとそうなっているのかは怪しいです😂

あと、我儘を申し上げると、黒字に白の文字がわたくしには見にくいので、
以前のテンプレートのようにライトカラーに切り替えられるととてもありがたいです。
PCの設定でなんとかなりますかねえ😂
↑単なる我儘ですのでスルーで問題ありません笑

P.S.
今コメントを修正しに伺ったところ、背景が白に文字が黒になっていて感動いたしました
ありがとうございます
しかしながら逆に見辛い方もお見えになるかと思いますので申し訳ないやらです┏○︎))💦
2022-07-04-11:00 徳川たぬこ
 [ 返信 * 編集 ]▼ ▲
aki

Re: 徳川たぬこ 様へ

こんばんは。コメント頂き有難うございます。m(__)m

> 以前から記事ページの記事タイトルがリンクになっていることが気になってしまっていたので、～～

…実はこの記事作る前から、私も気付いていたんですよね。(^^; 「エリア変数で出し分けたら、個別記事ページのタイトルに有るリンク 消せるじゃん」と。
で、実は05/01の修正・更新でテンプレートの方は直しております。
一応パターンとして有るため両方掲載したのですが、先程思い切って記事の内容を少し変更してパターン2を削除し、『パターン2, 3』としてまとめました。
（これなら記事タイトル部に有った不必要なリンクが無くなります。）
記事に載せるか悩んでたので踏ん切りがつきました。有難うございました。

ブログ、拝見致しました。
個別記事のHTMLソース内を <h1 で検索すると1つだけ見付かります。ちゃんと個別記事タイトルは<h1>になっていますし、<title>と同じになってるのでこれで問題無いですよ。
不具合を見付けられましたらお教え下さいね。(^-^)

> 以前のテンプレートのようにライトカラーに切り替えられるととてもありがたいです。

…最近は暗色背景用に記事の文字色を選んでいたので、淡色背景に変えると逆に見辛いかもしれません。ゴメンナサイ。
私が夜中にばっかりPC弄ってるため、画面が明るくて疲れちゃうので暗色にしてたのですが、チェンジ出来たらそれが一番良いですね。
まぁ、ベースが淡色背景なら個人的に DarkReader も使えるし、時間が出来たらダークテーマボタンも考えてみます。(^_^)
2022-07-04-23:33 aki
 [ 返信 * 編集 ]▼ ▲

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2022-07-29-21:47 -
 [ 返信 ]▼ ▲
aki

Re: - 様へ

こんばんは。コメント頂き有難うございます。(^-^)
時間見てお返事に伺いますので、ちょっとお時間下さいね。
宜しくお願い致します。
2022-07-30-03:51 aki
 [ 返信 * 編集 ]▼ ▲





非公開コメント
▲▼