テンプレート修正・変更履歴

このページの記事目次 (カテゴリー: テンプレート修正・変更履歴

← 前のページ  total 8 pages  次のページ →  

Template 27、単独ページ「ホーム」の個別メタタグ設定

SEOを意識したブロガーさんだったら最初に着手するだろうと思しきメタタグ設定。HTML5仕様に書き換えるにあたって、ちょっとした実験心から、必要最低限に抑えて放置してみました。メタタグを設定しない場合、googlebot(以下、ロボ子)がどのようなスニペットを拾ってくるのか興味があったのです。

W3C、HTML/jp/Elements/metaより(始めて日本語ページ発見!)

<meta>要素は、<title>や<base>、<link>、<style>、<script>を使って表現のできない様々なメタデータをあらわします。

ポイント

  • name属性、http-equiv属性、charset属性のうち一つは指定しなければなりません。
  • もしname属性かhttp-equiv属性が指定された場合、content属性も指定しなければなりません。そうでなければ、それは省略されなければなりません。

初期設定

私が実験用に投入したmetaタグは、ただ一つ、meta charset="utf-8"(文字コード)です。↑に一つは必要だって書いていますので、素直に従い、それ以外は全て削除しました。

記事が検索された時のスニペットに不満はありません。イギリスApple Payで下図ならいい感じだと思います。

イギリスのApple Pay

Homeやカテゴリーが酷い状態になっちゃっています。この為、インデックスエリアに属する記事を優先して、しかしボチボチと、metaタグ投入していこうと思います。

FC2でのページ構成(エリア・モード変数)

テンプレート用 変数一覧、エリア(モード)変数を参考に、ホームすなわちindex areaのmetaタグは、下記の通りに設定しました。

meta name="description"

<!--index_area--><meta name="description" content="<%introduction>「外国人としての暮らし」、「イギリス」、「ネィティブ観察記録」、「駐在員の腹の底」などに関する雑記です。最新記事、タグリスト、カテゴリーリスト" /><!--/index_area-->

ブログの説明(<%introduction>)では33文字で短すぎました。でも、ブログの説明を長くしたくなかったので、残りはテンプレートに直接書き込みました。これをやっちゃうと、次にブログの説明を更新する際にも残りの部分を調整しなければならなくなるのですが、あまり変えないエリアなので、多分大丈夫。(とりあえず、メモ)

meta name="keyword"

<!--index_area--><meta name="keyword" content="Internal Links (サイト内リンク), User Tags (ユーザータグ), Categories (カテゴリー), Blog Links (ブログリンク), Recent Artivles (最新記事)"> <!--/index_area-->

Homeのコンテンツは、プラグイン3が使われている(最新記事を除く)ので、そのタイトルを使おうと思ったのですが、これを使うとbodyの方が表示されないエラーが出ました。なんで!!?っと、いろいろ試しましたが結局わからずじまい。普通に手書きしました。どうせ単独ページですし。

meta name="author"

<!--index_area--><meta name="author" content="<%author_name>"> <!--/index_area-->

他のページでは、JSON-LDのマークアップが効いているので、「のろのろ」はauthorであることが繰り返し記述されているのですが、Homeは単独ページなので、マークアップされておりませんでした。

現在のホームのスニペット

今、こんな感じ↓ 2017-3-18 ホームのスニペット

とりあえずこんな感じでしばらく様子を見ます。

私のHTML学習法は、あたってくだけて、立て直す…

いや、短絡的なだけですが…

新しい知識を取り入れたら、ついやってみて、テンプレートが崩れて、復旧して、の繰り返しです。
テンプレートが崩れていないからと言って、うまく行っているかというと、そうでもないみたいです。

本日、終日パソコンに向かっていろいろ試す中で「W3Cのバリデータ」から指摘されたことを記録してみました。

End tag "section" seen, but there were open elements.

=閉めタグがあったけど、中に空いたままの要素(タグ)があるよ。

section、article、footerなどのセクショニングタグは、中にopen element (閉まっていないタグ)があると教えてくれます。

The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.

=border属性は廃止されましたよ。かわりにCSSの中でimgのborderを指定するよう検討してみて。

このエラーが当ブログでは最も多いです。
FC2の画像挿入ボタンは、ポチットするだけで必要な要素や属性を自動で追記してくれるとても便利な機能なのですが、この廃止されたborder="0"を必ずいれているので、画像を使うたびに注意されます。あはは。

Bad value 100% for attribute width on element img: Expected a digit but saw % instead.

⇔imgタグの中に100%という値を入れるのはよろしくないよ。数字(桁)が入るべきなのに、かわりに%が入っているよ。

画像の幅の調整が少々面倒で、width="100%"でheightを削除した状態で保存してみたら、エラーになりました。100%の代わりに1と入れるとプチくて見えませんし、100と入れると100px程度の大きさになってしまいます。それでも面倒くささに耐えられず、エラーを出したままにしちゃっています。pixel指定だとたまにはみ出ちゃっていたりするし、プロはどうやっているのかしら…

Text not allowed in element ul in this context.

⇔ulタグの中にテキストは入れられないよ。

ulタグにしても、dlタグにしても、リストの「題名」を入れてみたくなりませんか??、それで、ulタグとliタグの間に表の題名を入れてみたらエラーとなりました。そりゃそうか…

No space between attributes.

=属性間のスペースがないよ。

attributesというのは属性のことです。上記のとおり、FC2の画像挿入ボタンを使うとborder=0という枠線属性が入ってしまいます。エラーになるので取り除くのですが、勢い余って残すべき空白まで削除しちゃって、前と次のwidth属性間の空白がなくなっている時があって、こういうエラーがでます。

Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier.

属性名のダブルクォーテーションマークがあったよ。たぶんだけど、もう片方のダブルクォーテーションマークが前の方で一個抜けているんじゃない?

大抵の場合、片方のクォーテーションマークが日本語フォントになっていて、英数字で書き直します。

Bad value http://laggy2015.blog.fc2.com/?template=03-profile&index title= for attribute href on element a: Illegal character in query: space is not allowed.

aタグの中に属性タイトルとして適しない値があったよ。禁止された文字が入っているか、空白が入っているかのどっちかじゃない?

これは『&』がダメだったような気がします。

Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles.

Articleタグの中にヘッディングタグがないよ。全てのArticleにh2~h6要素のいずれかを使って(タイトルがどれかを)特定できるヘッディングタグを加えることを検討してね。

これは、「コメント」をArticleに仕立て直したときのことです。 当ブログでは、本記事と同じh2を使用することにいたしました。

Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

Articleタグの中にヘッディングタグがないよ。全てのArticleにh2~h6要素のいずれかを使って(タイトルがどれかを)特定できるヘッディングタグを加えることを検討してね。

記事本文を「section」に指定してみたのですが、hタグを一切使わない短編を書くのが好きだったりします。記事のいくつかにはhタグを投入してみたのですが、最終的には記事本文はdivタグでCSS指定することにしました。ほんのり残念ですが、そういうユルイ記事を捨てたくなかったので仕方がありません。

Empty heading.

ヘッディングタグの中身が空だよ。

↑でヘッディングタグがないよと言われたので、書き加えたら、過去コメントでタイトルが空白の場合こんなメッセージがでます。自動でNo titleが入るようにしましたが、過去記事は変わらないのでタグの中に必ず★★が入るようにしました。コメントを入れる時にタイトルを書いてくれた場合は二つの★の間にタイトルが入ります。

Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools).

h1タグは最高位のヘッディングだけに使うことを検討してね。(全てのh1タグは多くのスクリーンリーダーや他のツールから最高位のヘッディングとして扱われるからね。)

ネット上には、「THML5になってからは、h1タグをセクションごとに入れてもよし!」みたいなことが書いていました。しかし、実際のところh1タグを一つ増やしてみたら、こんなエラーが…

Stray start tag script

Scriptの開始タグがはぐれているよ。

これはタグの閉め忘れです。はぐれ開始タグ… はぐれメタルみたいで、テンションが上がります。

Stray end tag cite

cite終了タグがはぐれているよ

これは逆にタグの開け忘れ。もしくは、中に別のタグや改行タグを入れられないタグの中にタグを入れてしまった時に出てきます。

No p element in scope but a p end tag seen.

pタグが見当たらないのに、qタグの終了タグがあるよ

↑の"Stray start tag"の違いは何なんでしょうね??

Unclosed element div

divタグを閉め忘れているよ。

これもタグの閉め忘れです。もしかすると抜けているタグのタイプによって言い方が違うのかも?それにしても何パターンにもわたってタグの開け閉めを忘れている私って…

An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

imgタグはある特定の状況下以外の場合、alt属性が必要だよ。詳しくは画像の代替コメントを提供するガイダンスを調べてみてね。

imgタグは画像を入れるタグですが、言葉で表現されないので、alt="○○○"の様に説明を入れなければなりません。テンプレートに手書きする時に、忘れてしまいます。

The type attribute on the ul element is obsolete. Use CSS instead.

ulタグの中にtype属性を入れることは廃止されたよ。かわりにCSSを使ってね。

なかなか手厳しいですね。<ul type="square">とHTMLにてスタイルを変更した際に出てきたエラーです。私の個人的な好みで、丸ポチよりも角ポチが好きなんです。でも世の中のデフォルトが丸ポチなので、単にulを選ぶと丸ポチになるんですよね。これをCSSでわざわざ書き換えるか??というと、結論としては、書き換えました。好みですから…

Element p not allowed as child of element cite in this context. (Suppressing further errors from this subtree.)

citeタグの中にpタグは内包できないよ。(このサブツリー内の更なるエラーが抑制されているよ)

引用文献・出典を囲んでいるciteタグの中にはpタグは内包できないそうです。わからなかったのは括弧内。このエラーがあることで、他のエラーが抑制されている??、このエラーがあることによって他のエラーがわからない状態になっているよと言われいると理解しました。

The summary attribute on the table element is obsolete. Consider describing the structure of the table in a caption element or in a figure element containing the table; or, simplify the structure of the table so that no description is needed.

tableタグの中でのsummery属性は、廃止されたよ。tableタグのの中ではcaptionタグかfigureタグに内包したテーブルを使うか、もしくは説明(description)が不要になるように単なるtableを使うことで、テーブル構造を表現することを検討してみてね。

しえ~。tableタグはあまり使ったことがないので、何を言っているのかさっぱり。です。確かに単なるtableに変えることですべてが解決したので、元々あったsummery属性はなんだったのか謎のままです。

Element p not allowed as child of element strong in this context. (Suppressing further errors from this subtree.)

strongタグの中にpタグは内包できないよ。(このサブツリー内の更なるエラーが抑制されているよ)

私はこういう不注意が多いみたいです。範囲を指定するdivタグもそうですが、段落を指定するpタグが強調語を囲むタグの中に入れようとする方がおかしな話なのに、たまにやっちゃっています。

Element p not allowed as child of element span in this context. (Suppressing further errors from this subtree.)

spanタグの中にpタグは内包できないよ。(このサブツリー内の更なるエラーが抑制されているよ)

pタグ大好きシリーズその3、divタグはブロック要素の範囲指定、spanタグはインライン要素の範囲指定、HTML5ではブロック要素やインライン要素という概念がなくなったと書いていたのですが、段落用のpタグとインラインでの範囲指定では、段落の方が大きいみたいですね。指摘されると、そりゃそうか…っとなるのですが、書いている時には気づかないという残念な人間です。

Duplicate ID subject. The first occurrence of ID subject was here.

ID名が重複しているよ。ID名が最初に出てきたのはここね。

ID属性はページに一つだけしか使えませんから、当ブログの例では複数ページのリストページでも一つになるように調整しないとなりませんでした。

The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.

name属性は廃止されたよ。代わりに最も近くの入れ子にid属性を入れることを検討してね。

時代というほど長くない歴史の中で、語彙がかなり変遷しているんですね。HTMLとしては機能しているものの、今は使われていませんよ。といわれるエラーは多いです。いきなり今日から禁止なんて言われても、全ての人が書き換えるわけではないので、ブラウザー上はちゃんと表現されているのでしょうね。

Attribute pubdate not allowed on element time at this point.

pubdate属性は現在time属性に許可されていないよ。

HTML5で新規導入されたといわれるtimeタグですが、pubdate属性とdatetime属性がありますが、片方は既に廃れた??模様です。本当に流れが速いですね~。

それにしてもよく間違えていますね~。あはは。

Attribute webkitallowfullscreen not allowed on element iframe at this point. Attribute mozallowfullscreen not allowed on element iframe at this point. The frameborder attribute on the iframe element is obsolete. Use CSS instead. The month input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.

HTML・CSSの7不思議?

最近はまっている読み物→「W3C, THML5, Table of Contents

これの第3章、第4章に書いている事を試してみたくて仕方がない感じで、テンプレートが大崩れです。失笑。
取り組んでいく中で、どうにも理解できていない現象がいくつかあって、備忘録を書いてみることにしました。

不思議-1、リストページで記事タイトル画像が入れ替わる

記事タイトル画像が置き換わる

↑記事タイトル画像のかえるちゃんがいなくなって、他のクラスのヘッダーデザインと入れ替わっています。

トップだと置き換わらない

↑同じリストでも、記事がずれてリストのトップにいるときは、かえるちゃんのままです。今のところ記事番号701番以外には起きていない現象で、本当に謎です。

不思議-2、横並びになったり、段組みだったり、ふわふわ

勝手に横並び

↑タグリストとパンくずリストのブロックが横並びになっています。

スペースが足りないと段組み

↑普段、スペースが足りていない時は、段組みになっています。wrapper層を外して、前より中のブロックをふわふわさせているのですが、CSSを書き換えたわけでもないのにこんなところまでふわふわなって、面白いです。

不思議-3、iphoneだと字の大きさまで違う

同じCSSで字の大きさが違う

書き方は全く同じで、同じクラスを使っているハズなのに、片方は小さく見えます。なんででしょうね~。

不思議-4、iphoneだと『』まで縮小サイズに!

かっこが小さい

↑iphoneだと『』が小さくなっています。他のメディアだとダブルクオーテーションになっていたりします。なんで??

不思議-5、3つ目のdl、dt、ddタグがうまく機能しない

次のグループが干渉

横並びにしたdl、dd、dtタグは、全てのタグにクラス名を記載しないとフロートしないうえに、次のグループに干渉される。でも旧インライン要素を間に挟むと干渉されない。使うにはコツがいる??

あと二つはそのうち追加します。いくつも出てきそうですが、本日の備忘録はここまで。

Template 26、セクショニングタグとid属性が喧嘩

当ブログのタグツリー

まず最初に、記事にセクションタグをつけようと思い立ってから、人間の目にも心地よいように専用のCSSを準備していました。ところが、header、nav、footerの3要素は、id名と被っちゃっていて追記したCSSが効かないみたいです。(←ド素人なので確信はありませんが、多分理由はコレ)

それなら、単にid名を変えればいいじゃん!と思ったりもするのですが、折角なので、当ブログでのメインコンテンツ(=記事)までの経路を調べてみました。

ピンクの文字の部分が、当ブログの記事部分です。赤色文字の部分が、被っちゃって改名しようと思っているid名です。

  • head
  • body
    • FC2-1
    • wrapper
      • top
      • container
        • site-title
        • nav
        • header
        • content
          • mokuji
          • highlight
            • record-id
            • entry-title
            • entry-top
            • entry_m
              • header
                • nav
              • section-1
                • h2
                • h3
                • h4
                • h5
                • h6
              • section-2
              • section-3
              • footer
              • FC2_footer
              • FC2_text_ad
            • thread-1
            • thread-2
            • entry-bottom
          • next-entry
          • comment-top
          • comment-m
          • next-entry
        • sidebar
        • footer
    • FC2-2

結構深いですね。ぐふっ。難しい…

ド素人には、class属性とid属性の使い分けポイントがよくわかりません。号泣。

因みにこの階層は、ディレクトリ階層でも、リンク階層でもありませんし、いくつ階層があろうとも賢いロボ子には、あまり関係がないかもしれません。素人の私が見て、理解できないだけです。

セクションタグはどの階層でも差し替えられそうに見える

記事がある第7階層は、(CSSは効いていないけれど)セクションタグを入れながら記事を書いて行くことができます。

よく見てみると、第6階層、第5階層もセクションタグをつけられそうに見えなくもありません。つまり記事にいたるまでの経路はArticleに到達するまでユニークな名前になりますが、それ以外は全てセクションタグをつけてみたくなります。

セクションタグについての復習

まずは本家(?)、W3Cサイトにてセクション用のタグにどんなものがあるか眺めてみます。

W3Cページ、HTML/Elements、4 Sectionsより引用

Sections

  • body
  • section
  • nav
  • article
  • aside
  • h1, h2, h3, h4, h5, and h6
  • hgroup
  • header
  • footer
  • address

補足:日本語サイトは見つかりませんでしたm(__)m

うーん。body (第2階層)とarticle (第6階層)以外はどの階層にいても不思議じゃないですよね。なんだか階層ごとにclass属性もしくはid属性をふってそれぞれのCSSを書けばスッキリしそうな、そうでないような…

ついでに階層も減らせるかも??

ここから先は、3月13日に修正しました。新しい階層は下記の通りです。

  • head
  • body
    • FC2-1
    • layout_top (旧、top)(第2層、wrapperを削除)
    • container
      • header (id=site_header)(旧、site-title)
        • h2 (ブログ名)
        • h3 (ブログ説明)
      • nav
        • site_nav (ナビゲーションメニュー)
      • section
        • feed
        • container_title
          • h1(ページタイトル)
      • main (id=content)
        • nav (記事タグ)
        • nav (パンくずリスト)
        • article(id=entry number)
          • header(id=entry-title)
            • h2 (記事タイトル)
          • nav(id=entry-nav)
            • time(投稿日)
            • category
          • section (class="entry_m") (記事内容)
            • header
            • nav
            • section
              • h2
              • h3
              • h4
              • h5
              • h6
            • footer
            • FC2_footer
            • FC2_text_ad
          • aside (class="thread")-1(記事フッター、タグ)
          • aside (class="thread")-2(記事フッター、スレッドテーマ)
          • footer (class="entry-bottom")
        • aside(next-entry)
        • comment-top
        • comment-m
          • article(コメント1)
          • article(コメント2)
        • h4(コメント投稿欄header)
        • form(コメント投稿フォーム)
        • trackback
          • h3(トラックバックheader)
        • trackback_m(トラックバック投稿欄)
        • aside(next-entry)
      • aside(sidebar)
      • footer(site_footer)
    • layout-bottom
    • FC2-2

作業進捗

最初は下の階層からさかのぼる形でセクショニングタグに置き換えていったのですが、途中で全部やり直しになりました。

今回は、上の階層から仕立て直しています。

第1階層
headとbody
メタタグエリアとボディーエリア
第2階層
レイアウト
FC2のヘッダーラインとブログ部分のデザイン画像
描画エリアの大きさ・枠の設定
wrapper、container、ってなるほどね
第3階層
サイトの大枠構成
ヘッダー、ナビゲーションメニュー、メイン、サイドバー、フッターなど
第4階層
各部位の中での構成
(記事部分の場合)ヘッダー、記事、コメント、トラックバックなど
第5階層
(記事部分の場合)記事のタイトル、日付、内容、カテゴリー、タグ、テーマ-など
第6階層
(記事の場合) 記事そのもの。
イントロ、章、まとめ

しぇ~。よくできていますね。

こんなに込み入っているのに、ユーザーが記事を書く時に必要なのは、第5階層以降の一部分だけです。googlebot(以下、ロボ子)が読み取って検索結果に表示するスニペットが微妙だと悲しく思っていたのですが、ある意味ここにちゃんと到達できるだけでもロボ子を尊敬しちゃいます。

当ブログでよくありがちなのは、ホームの新着記事として並んで表示されたことによって、全く違う内容の記事が検索にかかっていたりすることなのですが、今回mainやarticleを示したことで、その範囲から検索用語に近いものを選んでくれるといいな~。っと思いました。

Template 25、AMP化の失敗と雑談

FC2とBloggerの両方でAMP化に失敗

当たり前じゃん?っと、プロ、セミプロは思うのかもしれませんが、それがわからないのが素人です。苦笑。

FC2とBloggerの両方でAMP(Accelerated Mobile Pages)化に挑戦してみました。HTML5へ仕立て直す前です。そして、HTML5へ仕立て直しているかどうかは、全く関係なくできませんでした。

FC2は流石に無理だと分かっていた

AMP化の仕様は、AMPプロジェクトサイトの「AMP HTML Specification」的に、FC2の広告はamp-adタグに、iframeはamp-iframeタグに差し替えなければならなくて、FC2側が表示している広告のタグを変えられることを期待できない以上、難しそうだとは分かっていました。あはは。

CSSをHTML側のHeaderに書くとどうなるか、見てみたかったというのもあります。

結果は、惨敗でした!

Bloggerもダメで、がっくり

Bloggerは、Googleさんが運用しているわけだから、行けるかな??っと楽しみにしていました。それに、英語記事にHow-to系が散見されて、アドバイスなどもあったので、期待も大きかったのです。しかし、Bloggerのロゴとか、編集用の工具マークなどをamp-imgタグに変更することができなくて、断念しました。残念。

Wordpress陣は成功している

ワードプレスブログって、フォントの大きさが大きすぎたり、スマホの画面いっぱい文字で息がつまったりするので、ワードプレスに引っ越しをしたブログはあまり読まなくなります。

しかし、あれは心意気の問題でした。今回、AMP化を試している中で、既にAMP化が終わっている、もしくは専用AMPサイトを作ったような意識の高いブロガーさんのテンプレートを見たら、文字の大きさも、余白の取り方も、心地よくて、普通に読みやすかったんですよね~~。失敗に終わったAMP化の一番の収穫はなんとWordpressが読みやすくなり得るという発見でした。

夢はでっかく!

AMPの稲妻マーク、好感度高いですよね~。実際に読み込みが早いので、読み手としては、絶対そっちを選んじゃいますもの!

仮にスピードが同等だったとしても、CSS一体型でファイルサイズも決まっているので、あまりごちゃごちゃ載せられないようになっていて、すっきりしているレイアウトが多いというのも魅力です!

あ~。試してみたかったな~。自ブログがあれに仕立て直ったら、感動しそうです!!

時間ができたら、wordpressでボツネタブログを作ってみたいな~~。目的はブログじゃなくて、テンプレートをカスタマイズしたり、AMPサイトを自作したり、テンプレートを自作したり、果てにはCMSを自作したり??、してみたいな~~。

ド素人が何を言っているんだって感じですよね?

冒頭の繰り返しになりますが、プロの常識が通じない素人らしく、夢にあふれて良くないですか?、あはは。