HTML5

このページの記事目次 (タグ: 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本文の編集

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

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

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

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

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

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

Template-22、ページ構成を示すセマンティックなタグたち

1. header等のタグを入れていないサイト

SEO関係のサイトで、「HTML5で新しく導入されたページ構成を伝えるタグです!」なんて、これらのタグを紹介しながら、ご本人は使っていないサイトも散見されました。なにやら特別な理由がありそうです。

関連記事でも「HTMLタグの栄枯盛衰」について触れましたが、これらのタグが将来的に廃止になると見立てておられるのでしょうか??

とても気になります。

2. そのページの固有のコンテンツをArticleとみなすサイト

ヘッダー、ナビ、アーティクル、セクション、フッター

当ブログでいうと、上記のような感じです。

私も上記のような感じでタグをふりました。が、しかし、最上部のheaderタグだけはどうしても型崩れをするので、ちゃんとclassやidとにらめっこしながら注意深く入れていく必要がありそうです。

また、Article内にも目次を入れるブロガーさんをよく見かけます。この場合、記事内にもheaderとnavを持つことができてタグ記述としては面白そうです。しかし読者としての私がそういうデザインを個人的に好んでいないので、このテスト記事以外に今後も使っていくかわかりません。

記事内header、CSS


.entry_m header {
font-size:1em;
font-style:normal;
border:4px double #fa8072;
background:#ffe4b5;
margin:0.25em 1em 0.25em 1em;
padding:0.75em;
}

記事内header、サンプルHTML


<header>
<p>冒頭文</p>
<nav><ol>
<li><a href="#1">目次1</a></li>
<li><a href="#2">目次2</a></li>
<li><a href="#3">目次3</a></li>
</ol></nav>
</header>
<section>
<h2 id="1">大見出し1</h2>
<h3 >中見出し</h3>
<h3 >中見出し</h3>
</section>
<section>
<h2 id="2">大見出し2</h2>
<h3 >中見出し</h3>
<h3 >中見出し</h3>
</section>
<section>
<h2 id="3">大見出し3</h2>
<h3 >中見出し</h3>
<h3 >中見出し</h3>
</section>

変な話、こういう風に雛形を固めて、ガイド付きで文字を埋めていくのは楽だったりします。ただ、書いていて、あんまりおもしろくないんですよね~。

3. Articleの解釈が拡大版のサイト

Articleの拡大解釈

わかりにくいかもしれませんが、記事が一つのsection、サイト内独立ページのプラグインが次のセクション、タグリストのプラグインがそのまた次のセクションというように解釈しているサイトのことです。

私が書いた記事の多くは、検索語句とスニペットが悲しいミスマッチになってしまっています。こんな風に全く関係がないタグやリンクをふんだんに入れて、それをsectionとしてみなしてしまうと、検索語句とページコンテンツのミスマッチが更にひどくなってしまいそうなので、私はパスです。

そもそも、footerタグの次に興味が湧いたのがnavタグです。このタグを書いておくと、スニペットに記述されるのを避けられないかな…なんていう淡い期待を胸に抱いております。

セマンティック・ウェブという言葉を知った!

セマンティック・ウェブ!??


最近になって、Googlebot (以下、ロボ子)が、かなりの語彙力を持つ賢い子だということを知りました。こちらの方でロボ語(HTMLやJSON-LD、Microdata)などがカタコトなので、まだまだロボ子にこちらの意図を理解してもらうことはできそうにありません。大抵の場合、Google検索のスニペットがとても悲しい感じの抜粋になっていて、がっかりします。
それでも、ロボ子と意思疎通を図るためにロボ語を勉強する事はとても楽しいです!


つい先ほど、こういう取り組みをセマンティック・ウェブと呼ぶことを知りました。


私がちょっと前にハマっていたJSON-LD、Microdataなどでのマークアップもこの取り組みに含まれるようです。つまるところコミュニケーションがうまく行かない外国人(ロボ子)と意思疎通を図るために外国語(ロボ語)を勉強することが楽しかったんですね!

私は、スペイン語が話せるようになると世界人口の9割と意思疎通が取れるようになるらしいのですが、スペイン語をすっ飛ばしてロボ語に挑戦していたという…

ハマっているものの根源はこれまでの人生の延長上だったことがわかって、ちょっと気恥ずかしくもあります。成長がない??


参考文献:Wikipedia、「Semantic Web
※日本語版はとても短かったので、英語版の方がオススメです。


プレゼンテーショナルマークアップは禁止方向


Presentational Markupを日本語でなんと呼ぶのかよくわかりません。装飾用タグ的な表現でしょうか??
例として挙げられていたのは、<font>、<i> 、<center>タグです。

<b>、<i> は使ってもいいみたいですが、強調などの「意味」は持たないタグと定義されているようです。


HTMLはロボ子との意思疎通用に、人間用はCSSで装飾しなさい!的なお達しが出ているようです。



HTML5でのセマンティック記述強化タグ


これも存じ上げなかったのですが、HTMLにもバージョンがあって、最新版はHTML5だそうです。
私が使っているテンプレートのドキュメントタイプは、「<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">」です。正直どう読めばいいのかわかりません。最新版のHTML5での宣誓文は「<!DOCTYPE html>」だけらしいので、そのうちすべてHTML5仕様に書き換えて5でびゅーしたいな~。なんて思っています。


HTML5では、マークアップに更なる意味を持たせるための新しいタグ<section>、<article>、<footer>、<progress>、<nav>、<aside>、<mark>、<time>が追加されたそうです。
私が先日出くわして、参考文献・引用元を表示するためにスタイルシートを追記した<footer>もその一つです。というか、これがきっかけで、またズブズブといろいろ調べものを始めることになったとも言います。



セマンティック的に中性とな…


<span>や<div>のタグはセマンティック的に中性だそうです。タグの中に、意味のあるキーワードを付帯したclass名を使用するとセマンティック・ウェブ化の助けになるみたいですね。最近ようやくclassやidの使い方がわかるようになってきた気でいたのですが、画面装飾用の部位・有効範囲指定に使うものだと思っていました。
適当な名前をつけちゃダメですね。
あはは。


グーグルのリッチスニペットをいろいろ面白がって埋め込んでいたわけですが、HTMLだけでもできることはそれなりにありそうです。自己流だと系統だてて学べないかわりに、知識が増えるにつれてバラバラだった取り組みのつながりが見えたときに妙に感激したりしています。




HTMLタグの栄枯盛衰


今回の調べものの中でとても驚いたのが、HTMLタグって、廃止されたり、意味が変わったり、復活したり、いろいろ動きが激しいみたいです。


例えば、謎のHTMLタグ、<menu>については、下記の様に記されていました。

<menu>...</menu>
HTML 2.0: A menu listing. Should be more compact than a <ul> list.
MENU existed in HTML Tags, and was standardized in HTML 2.0; deprecated in HTML 4.0 Transitional; invalid in HTML 4.0 Strict; but then redefined in HTML 5.

※へなちょこ翻訳:menuタグは、HTML2.0では、目次(メニューリスト)、ulタグでのリストよりもコンパクト。HTMLには既に存在し、HTML2.0で標準化され、HTML4.0までに廃止の方向へ遷移、HTML4.0で非有効、HTML5にて再定義された。


え~。こういうのついていくのは大変そうですね。プロじゃなくてよかった~。




日本語とロボ語、ともに学習課題


全く持って頭が痛いことに、人間用(日本語)もロボ語(各種マークアップ言語)も、どちらも上手ではありません。気長にボチボチ学習しますかね…



私の中でのSEOの解釈が変わりつつある


SEO (Search Engine Optimization)というと、検索結果の上位に食い込む為の技術みたいな解釈をしていました。特にブログを始めてから、ページビューを増やす為の手段や技術のような印象が強くなっていました。


最近、自分が書いたコンテンツと親和性が高いワードが検索された場合に適切なスニペットを表示してもらうためにいろいろ工夫しているのですが、私がやっている事ってまさにSEOど真ん中なんじゃないか??っと、思えてきました。


酷いスニペットが次に見たときに改善されている、それだけで嬉しかったりします。少なくともロボ子には理解してもらえた!!っという喜びです。その後、人間がクリックしてくれるかどうかは別の話です。「興味がなければクリックしない」と言うこと自体も一つの貴重なニーズ情報ですので、ミスリーディングでクリックしてもらうよりもいいと思うんですよね。


とはいえ、ビジネスサイトだと、そう悠長にも構えてられないのでしょうね~


Template 17、h1タグは1ページに1つだけ

h1タグをページに2つつけるとエラーが出る

Markup Validation Serviceのエラーメッセージより

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タグを一つ増やしてみたら、こんなエラーが…
やはりページに1つが妥当なんじゃないでしょうか?

当ブログのh1タグ

テンプレート修正17-1

無知だったとはいえ、h1タグの中に、いろいろ詰め込んじゃっています。記事名+ブログ名+ロゴです。

他のプロブロガーさんたちや、Google、W3Cサイトのh1タグを除きにいったら、大抵「サイト名」をh1タグに指定しているようでした。
当ブログも素直に従っておけばいいものを、逆に素直に従うためのカスタマイズはいつでもできるからという理由で、ブログタイトルではなく、ページタイトル(FC2では、<%sub_title>だとおもう。)をh1に指定するスタイルを継続することにしました。

Template 20、h1タグ内容変更

  • h1タグは<%sub_title>のみにする。
  • ブログ名は最上部右側にh2タグで、ロゴもそちらに移動
  • ブログ紹介文はh3で最上部左側

テンプレート修正17-2

当ブログh1タグ
<section id="container_header">
<div id="feed"><a class="feed-button" href="./?xml" target="_blank" title="RSSフィード"></a></div>
<!--not_index_area--><div class="container_title"><h1><%sub_title></h1></div><!--/not_index_area-->
<!--index_area--><div class="container_title"><h1><%blog_name></h1></div><!--/index_area-->
<!--/id=container_header--></section>

当ブログh2とh3タグ
<div id="layout_top">&nbsp;</div>
<div id="container">
<header class="site_header"><h2 class="f_right"><a href="<%url>" title="ブログ名「<%blog_name>」"><%blog_name>&nbsp;<img src="http://blog-imgs-102.fc2.com/l/a/g/laggy2015/noronorofaviconmini.png" alt="のろのろ" width="15" height="12" /></a></h2><h3><%introduction></h3></header>

申し訳ありません。 お探しの記事は現在、この ユーザータグ (Keyword) を設定していない可能性があります。 右の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。