リンク先との関係をXFNを使って表す

広告
facebookボタン
googleplusボタン
twitterボタン
ダミーボタン
bloggerボタン

WordPressでは作成するリンクが人に対するものであった場合、XFN(XHTML Friends Network)を使ってリンク先と自分との関係を設定することが可能です。例えばリンク先が家族なのか仕事関係の仲間なのかを表すことが可能です。XFNの情報を設定した場合でもブログなどで表示される見た目は変わりはありませんが、リンクで使われる<a>タグの「rel」属性に値が設定されます。

※XFNに関する詳細は下記のリンク先をご参照下さい。

では実際にどのようにXFNの情報を設定するのかを確認します。「新規リンクの追加」を参考にリンクの新規追加画面を表示して下さい。

p10-1

下の方へスクロールして頂くとXFNに関して設定する箇所があります。

p10-2

作成するリンクとの関係を表す項目にチェックして下さい。いずれか一つを選択するものと、同時にいくつでもチェックできる項目があります。では例として「仕事仲間」にチェックをしてみます。

p10-3

すると上部の「rel」のところに自動的に値が表示されます。このままリンクを作成すると「rel="colleague"」がリンクに設定されることになります。

では合わせて「片思い」にもチェックをしてみます。

p10-4

「rel」のところの値が「colleague muse」のようになります。リンクを作成すると「rel="colleague muse"」がリンクに設定されます。

では実際にリンクを作成してみます。XFNに関する値として「友人」「同僚」「夢中」にチェックを入れ、それ以外の情報を入力した上でリンクを作成します。

p10-5

作成後にリンク一覧で作成したリンクを確認してみると「関係」のところに設定したXFNの値が表示されています。

p10-6

ではブログで表示させて確認してみます。

p10-7

ブログの画面上ではリンクにどのような設定がされているのかは確認できません。次にソースを確認してみます。

<ul class='xoxo blogroll'>
<li><a href="http://www.buzzword.jp/" rel="friend co-worker crush">buzzword</a></li>
<li><a href="http://www.starbucks.co.jp/" title="よく行くコーヒーショップです。" target="_blank">スターバックス</a></li>
</ul>

リンクに「rel」属性が設定されている事が確認できます。

( Written by T.buzz.Ikura+ )

Social Button
Facebook Page