HTML5要素を1つずつ > メタデータ・コンテンツ > link要素

body_press.jpg

こんにちは! プロレスを観させ過ぎて ダイビングボディプレスを使えるようになったネコ の飼い主の @dutchisover です!

Body press
愛読書、現場のワークフローで覚える Webサイト制作教室 – MdN Design Interactive で、Webの勉強をガリガリとしている最中です3日目。

メタデータ・コンテンツとは

引用 : Webサイト制作教室 P90より
おもに<head>内に書き、実際にはページ上に表示されない要素です。

とのこと。要素の種類としては以下。

とりあえずコピペなんかで何となしに使用してましたが、やはり記述するということはその行為に意味があるから。と 気づきました。

link 要素とは

参考サイト 遊びとお勉強の村さん

link要素とは、head要素の中に書き込む要素です。私は主にCSSのファイル(スタイルシート)を読み込むときくらいしか使用してませんでした。
私の勉強不足でそれしか使っていなかったのですが、調べてみると結構便利な使い方ができる要素のようです。
まとめてみます。

まずは基本 ”stylesheet”

href属性で適用するスタイルシートのファイルを指定します。HTML5では type=”style/css” は省略してもOKとのこと。

もし複数のCSSを指定する場合は、<link rel=”stylesheet” 〜 > を複数行記載します。

上から順にスタイルシートが適用されます。後に読み込みしたCSSが優先されるので、順番を間違えるとエラいことになりますので注意

この場合、style.css で指定した color: red は上書きされてしまい、後の page.cssでの color: blue になってしまいます。
フォントのサイズは上書きされていないので、 font-size: 32px のまま適用されます。

例) これは上記のCSSが適用されたh2要素です

また、WordPressの場合はhref=”<?php bloginfo(‘stylesheet_url’); ?>”を記述すると、各ページで適切な記載にしてくれます。
この場合、必ずファイル名を style.css にしないといけません。

ワンポイントおしゃれ ”icon”

このサイトでも使用してます!実は。

Menubar

コレがあるサイトと無いサイトではちょっと印象が変わってくると個人的に思ってます。お洒落はまず足元からです。

ここに表示されているアイコンはファビコンと呼ばれてます。ファビコンは専用の画像ファイルを用意して、指定してあげると表示されます。

ファビコン専用ファイルは普通の画像から作れます。オススメはコチラです
ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。
カンタンに作れますよ。詳細はリンク先を参照してください。

ファイルを容易したら、あとは指定するだけです。

また、WordPressの場合はコチラの記事が参考になります。

WordPressを使っている方はコチラの記事の方法をまんま やってみるとうまくいくと思います。うちも まんまやってみてます。ありがたいです。

RSS配信用? alternate

いままでのHTMLでは正式にRSSやAtomのフィードがあるよ。という指定をする要素はなかったようです。で、HTML5でこの要素にその存在を入れられるようになったとのことです。

が、元来の意味合いとしては 「代替え文書を指す」 とのこと。RSSなどのフィードがありますよ、という指定をするのは若干意味合いが異なるのかもしれません。
ただ、WordPress側でも この要素にフィードの情報を入れ込んでいますので、この使い方がデフォになっていくのかもしれません。私は流されるまま WordPressさんのおもむくままに従ってみようと思いますw

WordPress(3.3.2)では、下記の手順で自動的に head内に記載してくれます。
<head> 〜 </head>内に <?php wp_head(); ?> を記述

functions.php内に
add_theme_support( ‘automatic-feed-links’ );
を記述する

プラグインでfeed_linksのフックを削除するものを使ってないか

ちなみにそれを行った 前回の記事のHTMLコードです。

今まで知らなかったのは、WordPressさんに任せっきりだったからですね。任せっきりにしすぎもアレなので今回知れてよかったですわw

その他の要素もいろいろあります

などなど。他にも a要素で使用するような nofollow、external、license や pingback などでピンを受け取るサーバの指定云々・・・

また使用する機会があれば追記しています。

以上でした!

最近の記事

Sponsored