テンプレートの上部に隙間ができる原因「FC2ソーシャル解析」と「head情報間違い」

もうタイトルで結論書いてしまいましたけれど (´・ω・`)
テンプレートの最上部(上辺)、ブラウザ最上部(上辺)との間に隙間ができる原因のほとんどが、

① FC2アクセス解析のソーシャルタイプを利用
② head情報(ヘッダ情報)の記述間違い

このいずれかです。


わかりやすいのは、ナビゲーションが固定されているテンプレートです。

サンプル: Decoy

● パソコン

隙間のある状態(ナビゲーションが下へ落ちている)





正しい位置





● スマートフォン

隙間のある状態(ナビゲーションが下へ落ちている)





スクロールしても隙間が埋まらないので下からコンテンツがチラチラ…





特に最後の「隙間からチラチラ状態」は閲覧者にとってものすごく疎ましいです (´・ω・`)


原因その① ソーシャル解析


FC2アクセス解析には、
・ アイコンタイプ
・ ソーシャルタイプ
の2種ありますが、後者の「ソーシャル」はコード内容が正しくありません。
正確なアクセス数を取得できない、とかそういった機能面ではなく、
見た目のことを言ってるだけですよ ^^;
機能面についてはわかりません ←

ソーシャル解析タイプをお使いの方はアイコンタイプに変更するだけで直ります。
コードの操作云々は主旨ではありませんので割愛。



原因その② head情報の記載ミス


テンプレートの <head></head> の内容をカスタマイズされる方は重々お気をつけください。
この中には <meta><title> など、非常に重要な要素が詰まっています。
ここを間違えてしまうとSEOもへったくれもありません。

FC2アクセス解析のソーシャルタイプを利用していないのに上記サンプルのようなコンテンツ下がりが見られる場合、
まず間違いなくhead情報内にミスがあります。
ミスがあるかどうかはここで精査するのがてっとり早い ↓

Nu Html Checker

いわゆる「W3C validator (だぶる すりー しー ばりでーた)」です。
Show の項目の ソース の部分にチェックを入れるとミスがある箇所を指摘してくれます。
(ただし全て英語です)


どう修正するか、というのは一口に言えるものではありませんので、
今回の記事は啓蒙と手段の提供のみ、ということでお願いします(笑)


ittsuie
2023/11/20 (Mon) 07:46

PCのみアクセス解析アイコンが表示されないんです

Akiraさん おはようございます

ソーシャルタイプのアクセス解析を2年ほど前に入れました
画面に現れるはずの文字が現れていませんが、数字は出ていて解析自体は効いているようなのでそのまま使っていました

しかし、ある時Lighthouseで確認時にFailed to load resource: the server responded with a status of 400 (Bad Request) analyzer.php:1 と、アクセス解析起因と思われるエラーが出ている事に気付きました
しょっちゅうではなく、稀に発生する程度なのでそのままほったらかしにしていました

そのうち、だんだんと稀ではなく、発生する頻度が高くなってきた感じもありました

先日、新しいバージョンのFrancescaをそのまま充てるのは厳しかったので移植しましたが、ついでにこの件を探ってみたところ、こちらの記事と、https://vanillaice000.blog.fc2.com/blog-entry-1015.htmlの記事を参考に、ソーシャルタイプからアイコンタイプに変更したところ、アイコンが現れ、1週間は問題無くLighthouse上でエラーも出ていませんでした

しかし、昨日記事を書いてLighthouseで確認したところ、またエラーが出ていて、今回はまる1日続いています
なんなんやねん!と一応スマホで確認してみると、なんとスマホではアイコンも表示されているんです

結構テンプレートをいじくりまくったので、メディアクエリとか疑いましたが、デフォルトの最新Francescaにデフォルトのアクセス解析構文を入れて確認したところ、やはりスマホでは現れているんですが、PC上では現れずにLighthouse確認でエラーとなっています

このPCのバックグラウンドも関係しているかもしれませんが、その前に聞いておこうと思い質問させて頂きました

試した事
デフォルトのFrancescaにデフォルトのアクセス解析構文
Chrome Edge Firefox
セキュリティ ノートンの各機能オフ
別のWindows10 PC上

どれもPC上ではダメでした

vanillaice (Akira)
vanillaice (Akira)
2023/11/20 (Mon) 21:14

To PCのみアクセス解析アイコンが表示されないんです

こんばんは ('0')/

404エラーの『bad request』の原因は以下の通りです。

1. 不正なURL(URLが正しくない)(クライアントサイド)
2. 何らかの原因でリダイレクトができない(サーバーサイド)
3. キャッシュの破損(クライントサイド(ブラウザ))
4. 何らかの原因で応答できない・あるいは指定ファイルを提供できない(サーバーサイド)

不正なURLは今回除外して良いと思いますので、2〜4のいずれか、最も可能性が高いのは3か4です。
キャッシュクリアで改善されなければサーバーサイドの問題あるいは制限なので、テンプレートで操作・解決することはできません。
エラーの文言を見ると

Failed to load resource: the server responded with a status of 400 (Bad Request) analyzer.php:1

ということで解析のphpに起因していることは決定です。lighthouseも結局はクローラーなので、アクセス解析側で第三クローラーのアクセスを能動的に制限しているのかもしれませんし(そういった話は聞いたことはありませんが可能性がゼロというわけでもありません)、phpの中身をうかがい知ることはできませんので断言はできません。

どうでも気になるようでしたらFC2運営へ直接問い合わせてみてはいかがでしょうか。ただあくまでも解析ツールは字のごとく解析することが目的ですから解消というのは難しいと思います。

ちなみに何度かリロード確認しましたが私のPC環境では問題なく表示されました。
https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/sc-2023_11_20_20.png
(ヘッダー画像が表示されていませんがキャプチャツールのグリッチなので無視してください, 実際はちゃんと表示されています, ただしPCのみ)


----- 別件
スマホでヘッダー画像が表示されないのは意図的でしょうか。意図しないものであればブレイクポイントを外すなどCSSの修正を。

---- 追記
本件に関する記事を拝見しましたので追記です。

> スクロールアンカー用JSが邪魔しているので〜

FrancescaテンプレートはスクロールアンカーJS未導入なので対象外です。

また、先程ヘッダー画像の件に触れましたが恐らく意図的なのかな、と思います。画像の無いページではpaddingを減らすなどして調整されたほうがよいかもしれません。閲覧者側からだと何かしらの表示エラーかな?(広告?)と思ってしまいそうな ^^;

ついでに独自タグのエリア関数(テンプレート上のみ利用可能, 記事内利用不可)ですが

<div<!--index_area--> class="xxx"<!--/index_area-->>あいうえお</div>

とある場合は
index_areaはトップページの最初の1ページ目のみを指しますので、最初の1ページ目は
<div class="xxx">あいうえお</div>
と出力(サーバーサイドでの文字列変換)され、それ以外の全てのページでは
<div>あいうえお</div>
と出力されます。

<div class="xxx<!--category_area--> yyy<!--/category_area-->">あいうえお</div>
ならばカテゴリページのみ
<div class="xxx yyy">あいうえお</div>
それ以外の全てのページは
<div class="xxx">あいうえお</div>
となります。

ittsuie
2023/11/21 (Tue) 00:57

To vanillaice (Akira)さん

Akiraさん こんばんは!

> ちなみに何度かリロード確認しましたが私のPC環境では問題なく表示されました。

今日は仕事が休みだったのでちょくちょく確認していましたが、昨日から今日の19時ぐらまでダメで、22時30分に確認してみるとアイコン現れていました。
結果的に僕の環境によるものという事がわかったので1歩前進です。

> FrancescaテンプレートはスクロールアンカーJS未導入なので対象外です。

jsをひとつずつ消していき試していて、その中のどれかに入っていものと思っていました
ん~まだまだ未熟者です。

> 先程ヘッダー画像の件に触れましたが恐らく意図的なのかな、と思います。・・・

ハイ、スマホ領域を縦にした時はシンプルに、横にした時はPC同様にと、差を付けたくて意図的に行っています。
paddingを減らすなどして調整されたほうがよいかもしれませんとの事なので、挑戦してみます。

記事を見て頂いたようですいません。
> <div<!--index_area--> class="xxx"<!--/index_area-->>あいうえお</div>

そういう個所は理解したんですが。ここがさっぱりわかりません。
<<!--not_permanent_area--><!--not_titlelist_area--><!--not_search_area-->h1<!--/not_search_area--><!--/not_titlelist_area--><!--/not_permanent_area--><!--permanent_area-->div<!--/permanent_area--><!--titlelist_area-->div<!--/titlelist_area--><!--search_area-->div<!--/search_area--> class="blog-title<!--index_area--> blog-title-index<!--/index_area-->"><%blog_name></<!--not_permanent_area--><!--not_titlelist_area--><!--not_search_area-->h1<!--/not_search_area--><!--/not_titlelist_area--><!--/not_permanent_area--><!--permanent_area-->div<!--/permanent_area--><!--titlelist_area-->div<!--/titlelist_area--><!--search_area-->div<!--/search_area-->>

エリア変数を外すとこうなっちゃうんです・
<h1divdivdiv class="blog-title blog-title-index"><%blog_name></h1divdivdiv>

個別記事以外、タイトルリスト以外、サーチエリア以外で効く
<h1 class="blog-title blog-title-index"><%blog_name></h1>
個別記事で効く
<div class="blog-title blog-title-index"><%blog_name></div>
タイトルリストで効く
<div class="blog-title blog-title-index"><%blog_name></div>
サーチエリアで効く
<div class="blog-title blog-title-index"><%blog_name></div>
この4通りを意味する書き方なのかな?と・・・

最後にもう一つだけ甘えさせてください

最近になってスクリーンリーダーという存在を知りました。
今までは見出しの順序もうっとうしいので、curlなら本来、<h2 class="curl"></h2>のところを、バリデータで指摘されるので<p class="curl"></p>みたいに避けて来ました。

しかしこの順序はもちろん、見出しがある事が大切で、スクリーンリーダーには見出しを判断できる機能があり、視覚障碍者の人にとっては有効という事を今回初めて知り、等級は低いですが僕も身障者手帳を持つ身なので、なんか胸がグチュグチュしてしまいました。(見た目重視で今まで記事を書いていました ^^; )

又、目次も有効らしく、スクリーンリーダーは目次を判断できる事も知りました。
TOCについてAkiraさんの記事内にありましたが、僕のような日記メインの人だと導入するには、堅苦しくなっちゃうのでためらい中です。
(って言うか、そもそも日記に目次は釣り合わないと思いますが・・・)

日記メインさんに合うような目次のあり方を、Akiraさんの抜群のセンスでいつか期待したいです。

vanillaice (Akira)
vanillaice (Akira)
2023/11/21 (Tue) 01:56

To ittsuieさん

こんばんは ('0')/

> エリア変数を外すと〜

ここの変数は絶対外さないようにしてくださいね。見出しには順位があり、各ページで正しい順序になるよう変数を用いた操作をしています。
独自変数の仕組みはHTMLのタグと同じで
<!-- 変数 -->xxxxxxxx<!--/変数 -->
に囲まれた文字列、上記だと xxxxxxxx が変数と合致するエリアでのみ出力されます。なので

<div<!--search_area--> class="xxx"<!--search_area-->>yyyyy</div>
ならば検索結果だけ
<div class="xxx">yyyyy</div>
でその他ページは
<div>yyyyy</div>
です。

<!--search_area--><div>yyyyy</div><!--/search_area-->
とあれば、検索結果のみ
<div>yyyyy</div>
が表示され、その他ページでこのdiv要素は表示されません。

-----
> curlなら本来、<h2 class="curl"></h2>のところを、バリデータで指摘される〜

バリデートで指摘される、というのはあり得ないので何か他に要因があります。例えば

<h2 class="curl">
<p>某の文言</p>
</h2>

<h2 class="curl">
<div>某の文言</div>
</h2>

など。これは不正です。
参考記事: HTMLコンテンツモデルカテゴリー
https://vanillaice000.blog.fc2.com/blog-entry-1139.html

-----
> 順序はもちろん、見出しがある事が大切〜

そうですね。ブログのSEOで一番大事と言って良いかもしれません。TOCは記事内容によりますので意識しすぎなくて良いと思います。複雑な内容・長文などを書かれる際は利用してみてください。私も毎回必ずTOCを使っているというわけではないですよ :)

ittsuie
2023/11/21 (Tue) 10:34

To vanillaice (Akira)さん

Akiraさんおはようございます!

返答がAM1:56になっていたので、申し訳ないです。
僕はそのままPCの電源を落として寝てしまいました ^^;

> ここの変数は絶対外さないようにしてくださいね

あいかわらず質問ベタでゴメンナサイ 。

<div<!--search_area--> class="xxx"<!--search_area-->>yyyyy</div>
ここからエリア変数を外すと
<div class="xxx">yyyyy</div>と理解できるんですが
質問の箇所はエリア変数がたくさん使われていますが、とりあえずエリア変数を外して確認してみると
<h1divdivdiv class="blog-title blog-title-index"><%blog_name></h1divdivdiv>
こういう構文になっちゃうので、理解できないという意味なんです。

> バリデートで指摘される、というのはあり得ないので何か他に要因があります

以前デザイン重視で
<h4>テキスト内容</h4>
<p>aaaa</p>
<h2>テキスト内容</h2>
<p>aaaa</p>
こんな感じで書いていた時に指摘されました。
バリデータではなくLighthouseでした ^^;

> そうですね。ブログのSEOで一番大事と言って良いかもしれません。

知ってしまうと対応したくなる性分なので、困ったもんです。

vanillaice (Akira)
vanillaice (Akira)
2023/11/22 (Wed) 00:54

To ittsuieさん

こんばんは ('0')/

> こういう構文になっちゃうので〜

エリア変数と実際のページ種が合致したときのみ表示(表記)される、という点、そして変数はサーバーを経由して対応文字列に書き換えが行われた上でレスポンスが返ってくる の2点が理解できていると仮定した上で、ittsuieさんがどのような情報を求めていらっしゃるのか測りかねてはいますが、「divとhを切り分けているいる理由が不明」ということであれば、個別記事ページは『記事タイトル』がh1で妥当だと考えますので、ブログタイトルをh1からdivに格下げしている、というのが理由です。

仮定を破棄してお伝えする場合は、
Francescaを例に取ればブログタイトル部位は概ね以下の通りです(説明の便宜上クラスなど省略します)

<<!--not_permanent_area--><!--not_titlelist_area--><!--not_search_area-->h1<!--/not_search_area--><!--/not_titlelist_area--><!--/not_permanent_area--><!--permanent_area-->div<!--/permanent_area--><!--titlelist_area-->div<!--/titlelist_area--><!--search_area-->div<!--/search_area-->><%blog_name></<!--not_permanent_area--><!--not_titlelist_area--><!--not_search_area-->h1<!--/not_search_area--><!--/not_titlelist_area--><!--/not_permanent_area--><!--permanent_area-->div<!--/permanent_area--><!--titlelist_area-->div<!--/titlelist_area--><!--search_area-->div<!--/search_area-->>

こうです。強引に日本語にし、さらに改行を入れてみます

<

<!--個別記事ページじゃない--><!--全記事リストページじゃない--><!--検索結果ページじゃない-->h1<!--/検索結果ページじゃない--><!--/全記事リストページじゃない--><!--/個別記事ページじゃない-->

<!--個別記事ページ-->div<!--/個別記事ページ-->

<!--全記事リストページ-->div<!--/全記事リストページ-->

<!--検索結果ページ-->div<!--/検索結果ページ-->

>

<%blog_name>

</

<!--個別記事ページじゃない--><!--全記事リストページじゃない--><!--検索結果ページじゃない-->h1<!--/検索結果ページじゃない--><!--/全記事リストページじゃない--><!--/個別記事ページじゃない-->

<!--個別記事ページ-->div<!--/個別記事ページ-->

<!--全記事リストページ-->div<!--/全記事リストページ-->

<!--検索結果ページ-->div<!--/検索結果ページ-->

>


解説すると
『個別記事じゃない』『全記事リストページじゃない』『検索結果ページじゃない』
の条件に合致するページ、つまり『トップページ』『カテゴリ』『月日別』『タグ』のページでは

<h1><%blog_name></h1>

と、上記文字列をサーバーが返します。では『〜じゃない』で指定された3ページ種をどうするかというと、それぞれ個別のエリア変数で

『個別記事』
の条件に合致すれば

<div><%blog_name></div>

同じく『全記事リスト』と『検索結果ページ』
でも条件合致で

<div><%blog_name></div>

と返ってきます。テンプレートはそれら全てのページ種を想定して変数を使いこなす必要があるので、単純に変数を削除しても理解するのは難しいと思います。いずれにしろ一般ユーザーさんが変数を使うことは無いので深く追求する必要自体ないんですが、知的探究心で習得したいというならばソースコードとにらめっこして理解できるまで突き詰めるという感じになります ^^;

-----
見出し自体が重要というのは事実ですが、SEOにものすごく影響するかといえばそういうわけでもないと思います。例えば会議ではまず『議題』を示しほしいですよね。議題がわからずいきなり討論が始まっても混乱するだけです。見出しは議題のようなものなので、書いてあれば当然その後に続く文章との関連がわかりやすくなります。

ただ見出しが抜けていたり順序がおかしかったり、といったことでSEO大いに不利になるというわけでもない、という発言がGoogle運営側から出ています。なので過去に遡って修正するとなったときに、非常に時間や心の負担になるのであればやる必要無いと個人的には思います。気になって仕方がないというならばやるべきでしょう。気になるものはどうしようもない(笑)

lighthouseは『提案』を行うツールなので、あれこれと指摘はしてきます。ただ100%正しいわけでもないですよ。例えばh1要素はHTML5以降では1ページ内で何度も利用して良いという決まりになっていますし、Googleも「やって良い」と言っているわけですが、lighthouseでは「h1は1つにしろ」とか言ってきますよね(今は違うかも)

私としてはあまりlighthouseにかかりきりになって記事の更新が疎かになる方が心配です。記事を更新することが最大のSEOですよ。

ittsuie
2023/11/22 (Wed) 07:04

To vanillaice (Akira)さん

Akiraさん おはようございます!

> 。。。ソースコードとにらめっこして理解できるまで突き詰めるという感じになります

元々成り立っている構文に、変数を最初に入れたり間に入れたりは理解できるんですが、該当の箇所はそうではないようなのでどうなっとるねん?となりました。
ん~むずかしいです・・・。

> 見出し自体が重要というのは事実ですが・・・

確かにですね
スクリーンリーダーが記事を把握するのに有効であっても、日記に何の目次を付けるねん!っていうか、そうなると、もう日記ではなくなりますもんね。 ^^;

こちらの記事と離れた質問をしてしまいゴメンナサイ
今回も詳細に説明して頂き、有難うございました!!

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)