あなたのサイトは大丈夫?久々にサイトのコードを見直して気づいたこと

公開日:
更新日:
カテゴリー: HTML・CSS

本日AMPに対応させようとWordPressサイトのコードを見直していたのですが、リンク切れがあったりHTML5の仕様が微妙に変わっていたりと修正をあれこれ行ったのでメモしたいと思います。

ちなみに、3月末まで仕事が忙しく、サイトのHTMLを見直すのは実に3年ぶりくらいです(笑)

GoogleCodeが閉鎖されていた

ちょうど3年前くらいに、このサイトをHTML5仕様に変更したとき、IE8にHTML5の対応をさせるために次のように「html5shiv」をヘッダーに設定していました。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

しかし、GoogleCodeは2016年1月25日に終了したようで、リンク切れとなっていました。

対処

もはやIE8なんかどうでもいい使っている人が少ないのでコード丸ごと削除しようかと思ったのですが、マイノリティにこそ優しくありたいと数分前に掲げたポリシーに乗っ取って次のように修正しました。

<!--[if lt IE 9]>
<script src="<?php echo get_bloginfo('template_url'); ?>/js/html5shiv.min.js"></script>
<script src="<?php echo get_bloginfo('template_url'); ?>/js/respond.min.js"></script>
<![endif]-->

こちらを参考に「html5shiv.min.js」と「respond.min.js」をWordPressのテーマフォルダにぶち込んで直接読み込むようにしました。

学んだこと

「自分のサーバーにファイルを置かず、外部から読み込めてお得でお手軽!」と当時は思ったのでしょうね。

しかもホスト先がGoogleだったので、途中でサービス停止になることも予測してなかったのかもしれません。

このことに対する教訓ですが、基本的にサーバーがキツキツでなければ自分のサイトで使うファイルは自分のサーバーにおいておくのがベストです。

HTML5の仕様変更

その1

HTML5のチェックをこちらでしていたところ、

The banner role is unnecessary for element header.

「banner roleはヘッダー要素に必要ない」と怒られました。

これは、ヘッダー要素にバナー(ロゴ)を設定していたので、「banner role」と設定しましたが、ここ3年でHTML5の仕様が変わったのか不要とのことなので次のように変更しました。

<header id="header" role="banner">

<header id="header">

その2

The complementary role is unnecessary for element aside.

「complementary roleはaside要素に必要ない」とのことなので、これも同様に次のようにしました。

<aside role="complementary">

<aside>

その3

The contentinfo role is unnecessary for element footer.

「contentinfo roleはフッター要素に必要ない」とのことなので、これも次のようにしました。

<footer id="footer" role="contentinfo">

<footer id="footer">

その4

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

「セクションに見出しがありません。すべてのセクションにH2~H6の見出しを含めてください。」とのことなので、「<section>」の中に見出しを入れました。

数記事しか含まれていないカテゴリーありませんか?もう追加される予定がないなら、

 

 

ちなみに、AMPへの対応ですが、様々な制約があり、時間が足りずに頭もわけわからなくなって断念しました。

後日再チャレンジしたいと思います。

 

 

 

1.WordPressテーマの基本骨格を作る

WordPressのページは、大きく分けて次の4つの部分からなります。

  • ヘッダー
  • コンテンツ
  • サイドバー
  • フッター

なので、これをかなりシンプル設計するとこんな感じでしょうか。 AMP完全対応のWordPressテーマを自作しようと思う

 

あわせて読んでほしい!

 

コメント

まだコメントはありません。

コメントフォーム
お名前
コメント