permalink: /post/:year/:month-:day/:title.htmlの様に変更したのだが、それに応じた検索エンジンへの対応として
ErrorDocument 404 http://www.sample/404.html RedirectMatch 301 /post/(.*)/(.*)/(.*)/ http://www.sample/post/$1/$2/$3.htmlリダイレクトは2行目でリダイレクトマッチを使っている。
nodejsを使う上での簡単な基礎知識としてのメモ
まずクライアントサイドで動作をするjavascriptをサーバ上で動作させる為のサーバ
内部ではjitコンパイラであるchromeのv8 VMが使われている。
簡単な使用方法
npm -g install hoge ←グローバルインストール npm install hoge ←ローカルインストール
参考リンク
Node.js 日本ユーザグループまず、以下がhoverを使用したsampleである。
リンクの表示方法としてよく見る方法をかなり簡素にしている。
以下が今回使用したstyle要素である。
a#sample{
line-height:38px;
color:#444;
background:#AAA;
}
a#sample:hover{
color:#AAA;
background:#444;
}
前回と前々回の流れで何かやりたいことがあった分けでもないけれども、
面白そうだったので、HTML5について触ってみた。
といってもテンプレート的な物までしかできなかったのだが。
以下が作成したhtmlのソースである。
index.html
<!DOCTYPE html>
<html lang="ja"><head>
<meta name="description" content="site_description">
<meta name="keywords" content="site_keywords">
<meta charaset="UTF-8">
<title>test webpage</title>
<link rel="stylesheet" href="import.css">
<!-- <script src="pass"></script> -->
<!--[if lte IE 8]>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/html5.js"></script>
<![endif]-->
</head><body>
<header>head
<hgroup>
hgroup1
hgroup2
</hgroup>
</header>
<section>section</section>
<nav>nav
<ul>
<li>1th</li>
<li>2th</li>
<li>3th</li>
<li>4th</li>
</ul>
</nav>
<footer>footer</footer>
</body></html>
HTML5は使いやすいようにに作られているという感じで、サクサク作れた。
htmlはよくある、2colomにheaderとfooterが付いている形なのだが、
cssを作っている時にpxやら%やらの大きさで悩んでいた結果、文字を基準にしたemにして落ち着いた。
import.cssを読み込むとbase.cssとlayout.cssの2つのcssファイルを読み込むことができる。
import.css@charset "UTF-8"; @import url(base.css); @import url(layout.css);
layout.cssはhtmlのスタイルを変更している。
layout.cssbody{
width:74em;
margin:0 auto;
text-align:center;
background:#000;
-webkit-box-sizing: border-box; /* Safari,Google Chrome用 */
-moz-box-sizing: border-box; /* Firefox用 */
-ms-box-sizing: border-box; /* Internet Explorer 8用 */
box-sizing: border-box; /* Opera用 */
}
header,section,nav,footer{
display:block;
background:#FFF;
padding:2em;
margin:1em;
}
header{
min-height:6em;
}
section,nav{
min-height:30em;
}
section{
float:right;
width:40em;
}
nav{
float:right;
width:20em;
}
footer{
clear:both !important;
min-height:3em;
}
あと肝心のcss3は
-webkit-box-sizing: border-box; /* Safari,Google Chrome用 */
-moz-box-sizing: border-box; /* Firefox用 */
-ms-box-sizing: border-box; /* Internet Explorer 8用 */
box-sizing: border-box; /* Opera用 */
ここだけで、padding、borderの値の適用方法が変わるものである。
あと、ここまでやって気づいたが,
css3にはbox系プロパティ？正確な名前は分からないが、簡単に2colomや3colomのliquidな物が作れるように
なっているらしく良さそうな感じ、使うかもしれない。
いちようHTML5のテンプレはできたし問題はないはず。
がHTML5の動的な感じのタグはまったく使ってないため、そのうち使いたい。
HTMLの基本的なことについて
参考リンク
HTML5とCSS3のブラウザ対応について