HTML5のアウトライン

HTML5は、HTML構文とXML構文の二つのパターンを保持してますが。
こんな認識でいいのだろうか。

また、アウトラインの構造的はこんな感じ？

HTML 構文

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title Strings</title>
</head>
<body>
<section>
	<header>
		<hgroup>
			<h1>LOGO</h1>
			<h2>Site Summery</h2>
		</hgroup>
		<nav>Navigation</nav>
	</header>
<section>
	<article>
		<h1>article title</h1>
		<p>hoge</p>
	</article>
	<article>
		<h1>article title</h1>
		<p>hoge</p>
	</article>
	<article>
		<h1>article title</h1>
		<p>hoge</p>
	</article>
</section>
<aside>
<nav>
	<ul>
		<li>side navigation</li>
		<li>side navigation</li>
		<li>side navigation</li>
	</ul>
</nav>
</aside>
<footer>
<adress>hoge</adress>
</footer>
</section>

XML 構文

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title Strings</title>
</head>
<body>
<section>
	<header>
		<hgroup>
			<h1>LOGO</h1>
			<h2>Site Summery</h2>
		</hgroup>
		<nav>Navigation</nav>
	</header>
<section>
	<article>
		<h1>article title</h1>
		<p>hoge</p>
	</article>
	<article>
		<h1>article title</h1>
		<p>hoge</p>
	</article>
	<article>
		<h1>article title</h1>
		<p>hoge</p>
	</article>
</section>
<aside>
<nav>
	<ul>
		<li>side navigation</li>
		<li>side navigation</li>
		<li>side navigation</li>
	</ul>
</nav>
</aside>
<footer>
<adress>hoge</adress>
</footer>
</section>

article はドキュメント、サイト、ページの独立した独立した構成をもつ部分をさす(原文)となってるのでブログの記事リストごとに囲むのも
ありでしょうか。

他のサイトでもサイドメニューはaside(本筋からやや離れてるけど触れておきたいコンテンツを表現する。)で構成してるっぽいのでよしとしましょう。。。

とりあえずテストページなんかつくってみて
いろいろ実験しないとなんともいえない感じですね。汗2

自分の理解度的に・・

  • Comments [0]
  • Trackbacks [0]

プラグインを使わずにカテゴリ並び替え[regex_replace] (Movable Type5)

カテゴリ（フォルダ）を並び替えると言えば。
藤本　壱さんのSuperSortや
CategoryLabelの頭N文字を削除するプラグインなんかが有名ですよね。

たまに制作現場で、「プラグインをインストールしてはいけない」とかいう
とんでも案件に出会ったりします。←出会ったりしました嫌な感じ。

その経験を基にMT4.1以降だと動くはずな方法です。

古いMovable Typeから4.01以降に乗り換えた場合、
上記のプラグインなどでカテゴリの順番を並び替えていたりする人も
いるのではないでしょうか。

01_カテゴリ1
02_カテゴリ2
03_カテゴリ3
04_カテゴリ4
05_カテゴリ5

こんな感じに。

この方法だとMTはカテゴリ名の文頭の数値によって昇順に並びます。

しかし、このままだと不要なNN_が残ってしまっていかにも不細工です。
かといってプラグインは使えない状況（という話です。）

そこでこの方法

MT4.01以上のグローバル・モディファイア
regex_replaceを使って頭の数字部分をを置換してしまいます。

<mt:Ignore><!-- 正規表現を変数に格納 --></mt:Ignore>
<mt:Var name='re' value='/^[\d]{2}_(.+)/'>
<mt:TopLevelCategories>
<mt:SubCatsIsFirst><ul><mt:SubCatsIsFirst>
<mt:Ignore><!-- 正規表現でカテゴリ名の頭のxx_を置換 --></mt:Ignore>
<li>
<a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel regex_replace='$re','$1' /></a>
</li>
<mt:SubCatsIsLast></ul></mt:SubCatsIsLast>
</mt:TopLevelCategories>

これだけでカテゴリリストからきれいさっぱり
頭の数字が取れます。

  • Comments [0]
  • Trackbacks [0]

外部リンクアイコンと別窓を開く備忘録（jQuery1.3.2）

いまでは当たり前のように使われてるJavascriptで外部リンクアイコンと別窓を開くスクリプト。

ちょっとググればすばらしいスクリプトがごろごろしてそうなのですが。

勉強をかねて自分で組んでみることにしました（というほどのものでもない嫌な感じ）。

jQuery Script

$(function(){
	//自ドメイン取得
	var myDomain;
	myDomain = document.domain;
	if(!myDomain){
	//ローカルなんかで作業してるときとか
		myDomain = "hogehoge.com";
	}
　　　　//記事のメイン領域だけ走査
	var target = document.getElementById("main");
	if(!target) return;
　　　　//http://とhttps://で始まるURIを探して
	$("a[href^=http://]"||"a[href^=https://]",target).each(function(){
		var urls = $(this).attr("href");
		//http://,https://を含むURIからホスト部分を抜き出して自ドメインと比較
		var extra = urls.split('/')[2];
		if(extra !== myDomain){
                        //自ドメインじゃなかったらtarget="_blank"とclassを付加
			$(this).attr({"target":"_blank","class":"extlink"});
		}
	});
});

Style Sheet

.extlink{
	padding:0 13px 0 0;
	background:url(../img/ico_extra_link.gif) right center no-repeat;
}

たぶんわかる人から見ると
ムダだらけなんでしょうね・・・・ドクロ

一応 Win IE6(そういえば３月１日にIE6のお葬式だそうですね。）、Win IE7、Win FireFox 3.5.8、Opera 9.64、Google Chromeで動作確認しました。


おまけ
ほしいという奇特な方がいれば・・5色入りgifとpngのこのサイトで使ってる外部リンクアイコンセットどうぞ

  • Comments [0]
  • Trackbacks [0]