サイトマップ(sitemap.xml)にCSSスタイルを割り当てる
XMLによるサイトマップの作成とXSLTによるスタイル指定（HTML表示）ができれば、
あとは通常のHTMLと同じで見栄えの調整はCSSにて行えます。
自分が確認する為だけにHTML化する程度のものでしょうから、
CSSまで凝る必要はないと思いますが、指定方法についてご紹介します。
サイトマップ(sitemap.xml)にCSSスタイルを割り当てる
今回サイトマップの表示の元として以下でご紹介したデータを利用します。
正直CSS云々より、XSLT側でXML（サイトマップ）の値を取得するのに、
躓くことが多いかもしれないと思います。
正直、ここまで来てしまえばCSS反映はオマケです。
CSS割当前
上記では以下の様なXMLとXSLTを利用しています。
XML
|
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="si4_both_p3.xsl" ?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url><loc>https://rensrv.com/weekday/1900/01/01/</loc><lastmod>2018-05-30</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url> <url><loc>https://rensrv.com/weekday/1900/01/02/</loc><lastmod>2018-05-30</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url> <url><loc>https://rensrv.com/weekday/1900/01/03/</loc><lastmod>2018-05-30</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url> <url><loc>https://rensrv.com/weekday/1900/01/04/</loc><lastmod>2018-05-30</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url> <url><loc>https://rensrv.com/weekday/1900/01/05/</loc><lastmod>2018-05-30</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url> </urlset> |
XSLT
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?xml version="1.0" encoding="UTF-8" ?> <xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:sm="http://www.sitemaps.org/schemas/sitemap/0.9"> <xsl:template match="/"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>sitemap_xml</title> </head> <body> <h1>「XML,XSLT両方ネームスペース指定３(OK)サイトマップ用」</h1> <table border="1"> <thead> <tr> <th>サイトマップURL</th> <th>最終更新</th> <th>更新頻度</th> <th>優先度</th> </tr> </thead> <tbody> <xsl:for-each select="sm:urlset/sm:url"> <tr> <td><a target="_blank"><xsl:attribute name="href"><xsl:value-of select="sm:loc" /></xsl:attribute><xsl:value-of select="sm:loc" /></a></td> <td><xsl:value-of select="sm:lastmod" /></td> <td><xsl:value-of select="sm:changefreq" /></td> <td><xsl:value-of select="sm:priority" /></td> </tr> </xsl:for-each> </tbody> </table> </body> </html> </xsl:template> </xsl:stylesheet> |
適用済みの表示例
CSSの割り当て
これに対して、以下のCSSを指定します。
CSS
単純なものです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@CHARSET "UTF-8"; table { width:700px; margin:15px 0; font-size:12px; } th { background-color:#000069; color:#FFFFFF } th, td { font-size:0.95em; text-align:left; padding:4px; border:1px solid #dddddd; border-collapse:collapse } tr:nth-child(odd){ background-color:#aaaacd; } tr:nth-child(even){ background-color:#fdfdfd; } |
XSLT
このCSSをXSLT側で読み込むように１行を追加します。
８行目でいつも通りのCSS指定を挿入しておくだけです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?xml version="1.0" encoding="UTF-8" ?> <xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:sm="http://www.sitemaps.org/schemas/sitemap/0.9"> <xsl:template match="/"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>sitemap_index_xml</title> <link rel="stylesheet" type="text/css" href="./sitemap.css" /> </head> <body> <h1>「XML,XSLT両方ネームスペース指定３(OK)サイトマップインデックス用」</h1> <table border="1"> <thead> <tr> <th>サイトマップURL</th> <th>最終更新</th> </tr> </thead> <tbody> <xsl:for-each select="sm:sitemapindex/sm:sitemap"> <tr> <td><a target="_blank"><xsl:attribute name="href"><xsl:value-of select="sm:loc" /></xsl:attribute><xsl:value-of select="sm:loc" /></a></td> <td><xsl:value-of select="sm:lastmod" /></td> </tr> </xsl:for-each> </tbody> </table> </body> </html> </xsl:template> </xsl:stylesheet> |
XML
XML側は変えていません。（XSLT読み込みの関係で別ファイルではあります）
|
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="si5_both_p3_idx.xsl" ?> <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <sitemap><loc>https://rensrv.com/sm_demo/sitmap_100.xml</loc><lastmod>2018-05-30</lastmod></sitemap> <sitemap><loc>https://rensrv.com/sm_demo/sitmap_200.xml</loc><lastmod>2018-05-30</lastmod></sitemap> <sitemap><loc>https://rensrv.com/sm_demo/sitmap_300.xml</loc><lastmod>2018-05-30</lastmod></sitemap> <sitemap><loc>https://rensrv.com/sm_demo/sitmap_400.xml</loc><lastmod>2018-05-30</lastmod></sitemap> <sitemap><loc>https://rensrv.com/sm_demo/sitmap_500.xml</loc><lastmod>2018-05-30</lastmod></sitemap> </sitemapindex> |
適用済みの表示例
CSSが割り当てられてXMLの表示が行われたことと思います。
個人的にはどうでもいいと思いながらも、
XMLがサイトマップなどだと行数が多くなったりして、
デフォルトのフォントサイズではどうも見にくい・・・それだけのことで、
このCSSの割り当てをするに至りました。
何かのお役に立ちますと幸いです。
当サイト内のコンテンツおよび画像を含むすべてにおいて、管理人アルゴリズンが著作権を保持しております。
当サイトでご紹介しております写真等につきましては著作権の放棄はしませんが、
ライセンスフリーでご利用いただいて構いません。
コンテンツを有益であると感じていただけましたら非常に光栄です。
ありがとうございます。
サイト内コンテンツを引用される際には、出典元として当サイト(個別記事)へのリンクをお願いいたします。
申し訳ございませんが、無断転載、複製をお断りさせて頂いております。
公開日：
