blog

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

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

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

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

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

  • base
  • command
  • link ← 今日はココです
  • meta
  • noscript
  • script
  • style
  • title

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

link 要素とは

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

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

まずは基本 ”stylesheet”

[html]

<link rel="stylesheet" href="style.css" type="style/css">

[/html]

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

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

[html]

<link rel="stylesheet" href="style.css" type="style/css">
<link rel="stylesheet" href="page.css" type="style/css">

[/html]

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

[css]

/* 例) 上記の並びでCSSを指定した場合 */
// style.css ファイルの記述
h2 {
color: red;
font-size: 32px;
}
// page.css ファイルの記述
h2 {
color: blue;
}

[/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 無料で透過マルチアイコンが作れます。
カンタンに作れますよ。詳細はリンク先を参照してください。

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

[html]

<link rel="icon" href="images/favicon.gif" >

[/html]

また、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コードです。
[html]

<link rel="alternate" type="application/rss+xml" title="LogicA &raquo; フィード" href="https://logic-a.com/feed/" />

<link rel="alternate" type="application/rss+xml" title="LogicA &raquo; コメントフィード" href="https://logic-a.com/comments/feed/" />

<link rel="alternate" type="application/rss+xml" title="LogicA &raquo; HTML5要素を1つずつ &gt; メタデータ・コンテンツ &gt; command要素 のコメントのフィード" href="https://logic-a.com/2012/04/25/html5_metadata-content_command/feed/" />

[/html]

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

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

[html]

<!– archives –>
<link rel="archives" title="HTML5のページ" href="https://logic-a.com/html5_page.html">
<!– 現在のページ(記事)と関連しているリンク –>

<!– author –>
<link rel="author" title="dutchisoverのTwitter" href="https://twitter.com/#!/dutchisover">
<!– サイト作成者が分かるリンク先 Twitterなんかでもよいかもとのこと –>

<!– first、last、prev、next、up –>
<link rel="first" title="Hello World! ブログ始めました" href="https://logic-a.com/2012/04/14/hello_world/">
<!– 最初の記事、最後の記事、前の記事、次の記事、上の階層の記事(今の記事なら カテゴリーの "HTML・CSS" –>

[/html]

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

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

以上でした!