typepadでPIE.htcが動作、IEで角丸を表示

コンピュータとインターネット

最近はwordpressやgoogleサイトで製作しているのだが、休眠していたtypepadのサイトを久しぶりに触った。
typepadを活用しないとならない事情があるといえばあったんだけど、CSS3でデザインしてみよう、と勉強がてら。。
　
で、角丸をCSSで作る。
IEどうにかならんかなぁとgoogle先生にぼやくと、IEでも表示できる角丸が表示できるプラグインがあるよ、と。
　
（ちょっとメモ）IEにもCSS3の機能を使えるようにする「CSS3 PIE」（参照）
　
PIE-1.0beta5.zipをこちらから落としてくる。
解凍するといくつかファイルが収まっているが、PIE.htcだけをアップロードして、

behavior: url(PIE.htc);

絶対パスで書き足す。
typepadでも動くかな。一瞬、ロードするんだけど、表示されず...

  • うまくいかない場合は「position: relative;」を追加してみます。behaviorで「PIE.htc」を指定した結果の不具合を、positionプロパティで解決できる場合があります。

おぉ、positionプロパティを追加して、解決。
　

そして、ナビゲーションを横にしたい。
　
上級者テンプレートを利用してヘッダーにナビゲーションメニューを設置（参照）
　
上級テンプレートで、navbarというモジュールで定義できる。テンプレートになかったので、その名前で新規作成して、以下の例をに貼り付けて適宜直す。

<div id="nav">
<div id="nav-inner">
<ul class="nav-list pkg">
<li class="nav-list-item"><a href="http://biz.typepad.jp/tbb/">ホーム</a></li>
<li class="nav-list-item"><a href="http://biz.typepad.jp/tbb/profile.html">自己紹介</a></li>
<li class="nav-list-item"><a href="http://biz.typepad.jp/tbb/archives.html">過去記事一覧</a></li>
<li class="nav-list-item"><a href="http://biz.typepad.jp/tbb/archives.html">カテゴリー</a></li>
</ul>
</div>
</div>

さらに、bannerテンプレートの最終行に

<$MTInclude module="navbar"$>

を追加する。
　
typepadのマニュアルはググれば色々出てくるけど、レイアウト構造は以下を参考に。
CSSスタイルとクラスリファレンス（参照）