スタティックページ作成用ブログの作成

記事一覧

TypePad を簡易な CMS (コンテンツ管理システム) として利用するひとつの例として、一つのブログをページ作成ツールとして利用する方法を紹介します。

TypePad は Movable Type 同様、テンプレートを利用してコンテンツ (ウェブページ) を生成します。この仕組みをうまく利用して、ユーザーがブログに記事投稿するのと同じ感覚で、指定のウェブページを作成することができるようにしてみましょう。

投稿した記事は、1記事あたり1つのエントリーアーカイブとして TypePad 上で保管されます。今回の仕組みはこのエントリーアーカイブを利用し、テンプレートを作成します。ですので、エントリーアーカイブ以外のアーカイブは構築しないように設定しておきます。

本来エントリーアーカイブは、コメント一覧やコメント投稿機能などが埋め込んでありますが、エントリーアーカイブテンプレートから、これらの部分を削除してしまえば、単なるウェブページと変わりありません。ユーザーは、TypePad の記事投稿画面 (通常ブログを書く画面) を利用して、コンテンツの入力や修正が可能になります。

スタティックページのサンプル

ブログをこのように利用する場合、記事のどの項目がどういった役割を担うのかをまとめておくと便利です。今回の例は簡単なものですが、複雑なカスタマイズになるほどそれに対応したテンプレートの作成時にこうしたまとめが役立ちます。今回の例では、以下のようになります。

タイトル <$MTEntryTitle$>: ページのタイトル及び大見出し
記事の内容 <$MTEntryBody$>: ページの内容
概要 (記事の要約) <$MTBlogDescription$>: ページの概要
キーワードの入力フォーム <$MTEntryKeywords encode_html="1"$>: ページのキーワード

以上を元にエントリーアーカイブテンプレートを XHTML で作成したものが以下になります (サンプル)。

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head profile="http://purl.org/net/ns/metaprof">
    <meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="generator" content="TypePad" />
    <meta name="dc.title" content="<$MTEntryTitle$> - <$MTBlogName encode_html="1"$>" />
    <meta name="description" content="<$MTBlogDescription encode_html="1"$>" />
    <meta name="keywords" content="<$MTEntryKeywords encode_html="1"$>" />
    <title><$MTEntryTitle$> - <$MTBlogName$></title>
    <link rel="stylesheet" type="text/css" href="<$MTBlogURL$>styles-site.css" />
  </head>
  <body>
    <div class="section">
      <a id="title" href="<$MTBlogURL$>" title="<$MTBlogName encode_html="1"$>"><$MTBlogName$></a>
      <h1><$MTEntryTitle$></h1>
      <$MTEntryBody$>
    </div>
  </body>
</html>

こうした目的別に作成したブログテンプレートセット (デザイン) をデザイン管理機能を利用して管理すれば、新たにスタティックページ作成用のブログが必要になった場合にも簡単にデザインを適用できます。

例えば、このブログで作成したページ一覧をナビゲーションとして利用する場合、以下のような内容のテンプレートを作成し、navigation.inc などのファイル名で出力し、複数のブログも TypePad なら SSI で簡単に連携を利用してトップページにナビゲーションを表示させることもできます。

<ul class="navigation"><MTEntries>
  <li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>"><$MTEntryTitle$></a></li>
</MTEntries></ul>

出力したナビゲーションのスタイルも簡単なサンプルを用意してみました。

リストを単純にインライン表示

リストを単純にインライン表示させたナビゲーションの場合、以下のようにスタイルを定義します。

ul.navigation li {
  display: inline;
}

リストをタブナビゲーションのように

タブナビゲーションのサンプル

スタイルを以下のようにすると、同じ HTML でもタブナビゲーションのようなスタイルにもできます。

ul.navigation {
  display: inlie-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.navigation li {
  float: left;
  margin: 0 0.1em;
  padding: 0;
}

ul.navigation li a {
  display: block;
  border: solid gray;
  border-width: 1px 1px 0;
  padding: 0.2em;
  color: black;
  text-decoration: none;
}

* html ul.navigation li a {
  display: inline-block;
}
      
ul.navigation li a:hover {
  background-color: gray;
  color: white;
}

実際にカスタマイズしたサンプル(TypePad で作成)

Taichi Kaminogoya
2007年04月17日 15:52

トラックバック

トラックバック url

このページのトップへ

TypePad 法人