Template 23、テンプレートをHTML5に書き換えた

Template 23、テンプレートをHTML5に書き換えた

HTML5にて採用されたセクショニングタグ(header、nav、section、footer、asideなど)を使ってみたくてたまらない。動機はたったそれだけです。

もしかすると昔の宣誓文(HTML1.0)のままでもHTML5から有効になっているタグを使っても新タグ自体はエラーにならなりません。ただHTML5に変えなさいとアドバイスされます…

問題はタグじゃない!らしいです。

そして、今、最大の疑問は、HTML5について触れているサイトで、HTML1.0のサイトがそのままにしている理由です!私のような初心者が下手に手を出したらじわじわ困る何かがあるんじゃないの??的な不安です。

1、Head部分の大幅改定

ウェブ上に資料が豊富にありましたので、そこに「FC2の変数」を埋めました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="<%css_link>" rel="stylesheet">
<title><%sub_title><%blog_name>】</title>

charset(文字コード)用のFC2変数?

ここまでは、ウェブ上にたくさんの資料があったので、助かりました。

唯一疑問だったのは、元のテンプレートでは、charset(文字コード)に<%template_charset>という変数が使われていたのですが、現在の変数リストからは見当たらなかったことです。使えるものかどうかよくわかりませんでしたので、一般的であると思しきutf-8にしておきました。

titleタグの簡略化

元々のテンプレートには、ページタイプ毎に、とても手の込んだSEO対策をして下さっていたのですが、私には難しくて理解できなかったので、シンプルな構成にかえました。

今後の課題1
ページタイプ毎のタイトルタグの設定法を読解・自作できるようになりたい。

2、class名の振替(idはまだ難しい)

関連記事「Template-22、ページ構成を示すセマンティックなタグたち」で発見した通り、HTMLではセクショニングタグが設けられています。

これを使ってみたくてしようがないのですが、sectionとaside以外は他のところで使われているターミノロジーだったので、混乱を避けるため既存のCSSを一部改名したり、新タグ用のCSSを追記したりしました。

但し、今のところclass属性の範囲内です。

id属性はページ内でユニーク(1回しか使えない)特徴から、ヘッダー部、ラッパー部、コンテンツ部、サイドバー部などの位置指定に使われていたりすることが多く、ちょっとでも変えるとテンプレートが大崩れします。

というか、大崩れさせまくったことで、id属性とclass属性の違いを叩き込まれました。あはは。

今後の課題
id属性を使いこなせるようになる

3、アンカーリンク・テキストの書き換え

え~。頻繁に使うものまで推奨の書き方とかが変わっちゃうの??っと驚きました。

記事を書いている分にはウィザードボタンを使って書くのであまり困りませんが、テンプレートに書いているアンカーテキストは殆ど手書きなので、四苦八苦しながら修正しました。

当ブログで多かったものから

見たことがないスタイル
<a id="xxx"></a>などは、全て盲目的に<div>か<span>に置き換え。
name属性
name="xxx"的な属性表記は削除

まだ完全に終わったわけではなくて、どう修正したらいいか分からないものがエラーとして残っていますが、ボチボチ続けます。

今後の課題
アンカーリンク、テキスト、idの再設定を続ける。

4、その他「禁止・変更」タグのチェック

いつものごとくサーチコンソールとそのヘルプから当てもなくいろいろ散策していた際に発見したもので、ハマっているもの一つに、「Markup Validation Service」という、ページが有効なHTMLかどうかを判定して、エラーメッセージをくれるサイトがあります。

このサイトでページを検索すると、ロボ語のエラーチェックをしてくれます。

例えば、関連記事、「Template-22、ページ構成を示すセマンティックなタグたち」は、現在(2017年3月5日)、12個のerror、4個のwarningをいただいています。

HTLM Validator

って、これでも減ったのです。

ダメだしされるのに慣れすぎて笑っちゃいます。落ち込んでいる時にそれどころじゃない気分にさせてくれるので、オススメです。

これでHTML5の禁止、非推奨タグがすべて洗い出せるわけではなさそうですが、文法エラーも含めて教えてくれるので、重宝しています。

私の場合、「HTMLではなく、CSSに書きなさい!」のエラーが多いです。調べものが大変です。そういう訳で、当ブログ、見た目は殆ど変っていませんが、中身が前よりはロボ子フレンドリーになっています。

今後の課題
とりあえずエラーゼロを目指す!

5、テンプレート内のbrタグを最小限にする!

FC2には、「自動改行」の設定に、「HTMLタグ以外は無視」という選択があって、それにしているのですが、編集で行をあけちゃうとbrタグが入っちゃう模様です。それで、大量のエラーをいただいております。

過去記事は追々編集画面で修正するとして、テンプレートのbrタグは先に減らして置くに越したことがないので、消せるものは殆ど削除しました。そもそもテンプレートにbrタグを入れまくるなぞ、プロには考えられない発想なのかもしれませんが…

CSSでのスペーシングに完全切換えすべき?

ちなみに本記事はbrが入らないように書いたらどうなるか実験中で、↓こんな感じ↓です。

FC2本文の編集

CSSを見やすいスペーシングに調整するためにbrタグなしで書いています。CSSを修正すると過去記事は全て後で修正されない限り広々と行間が空いたページになってしまいます。

どんまい、私。

逆にスペースが詰まりまくって読みにくくなるよりましだと思うことにします。

ロボ語は英語に感覚が似ている!?

CSSを調整するだけなら過去記事の行間を詰めるだけでいいのですが、それとは別にどのくらい書きにくいのかを試す実験も兼ねています。

文を書き始める前にタグを入れるのは感覚的には英語の冠詞「the」や「a」を先に考えてから口に出す(文書を書く)のに近い感覚です。欧米語圏の人には大した苦じゃないのかもしれません。

メール送信前に英語の冠詞を付け足す感覚でタブ忘れを付けたしていっています。そして英語と同じ感覚で文書を改行なしの塊で書いています。笑。

今更ながら「リアルタイムプレビュー」が何のためにあるか理解できた感じです。あはは。

ちなみにbloggerのHTMLモードだと改行してもbrタグが入らないので便利です。タグを閉め忘れると警告が出る+保存できないので、ロボ語学習用にはbloggerの方が助かります。

Blogger本文の編集

私はいったいどこへ向かっているのか…

そもそも豊かなコンテンツを持っていることが最優先になりつつ世界で、修辞にハマっちゃダメでしょ的な自己矛盾です。

最近全く記事を書いていませんからね…

実際にサイトをクリックするのは人間なので、ロボ語文法がダメダメでも、中身がよければアクセスは集まるものですよね。おそらくそれがブロガーが目指すべきところ。ところが最近は興味の対象が完全にロボ子とロボ語になっちゃっています。ま、趣味だからこそ許される?、的な??

何事もそうですが、飽きるまでは存分にハマっておくことにします。

今後の課題
たまには、コンテンツも書く。←

Comment

コメントを投稿する
記事: Template 23、テンプレートをHTML5に書き換えた

お気軽にコメントをどうぞ~。

  非公開 (管理人のみ閲覧可能)
 

Trackback