１カラムレイアウト
まずはメインページをデザインする
まずはMovableTypeをインストールします。各レンタルサーバごとにマニュアルなどがあるので、それにしたがってインストールしましょう。 ロリポップの場合は、...
簡単なソースを記述して、表示してみる
次に、簡単なHTMLを記述します。 さきほど削除したソースに、以下のように記述して再構築します。 <!DOCTYPE html PUBLIC "-//W3...
記述したソースを再構築し、実際にブラウザで見る
先ほど記述したソースを再構築し、実際にブラウザで確認してみましょう。 非常にそっけない表示となりました。 注意して見ると、図の左上の青色部分に『サンプルレイアウ...
まとめその１
今までの流れをまとめます。 ①まず、メインページのテンプレートを編集します。 （以下のMovableTypeのタグを含んだソース） <!DOCTYPE h...
エントリーを表示する
今度は、実際にエントリーを表示してみましょう。 まず、準備段階として、エントリーを３つほど作成しておきます。（MovableTypeの管理画面左のメニューバーか...
スタイルシートの適用
スタイルシートで見た目をよくします。(※スタイルシートのネタ帳参照) スタイルシートを全て覚えるのは大変ですが、実際に使用するスタイルは以外に少ないものです。も...
グループ化する
スタイルシートの定義の前に、まずは各部分をグループ分けします。 タイトルとサイト説明文をヘッダ、エントリー一覧をコンテンツ、コピーライト部分をフッタ、以上各グル...
各グループをスタイルシートで装飾する
インデックステンプレートのソースの各部分をグループ化します。 ソースが長くなってきましたが、太字とコメント文を追加しただけです。コメント文とは、<!-- ...
ヘッダ部分に画像を挿入する
ヘッダ、コンテンツ、フッタのスタイルの定義を行って、以下の図のようなデザインになりました。 見た目はまだ味気ないですが、これが基本となります。 上記画面を、何も...
カテゴリ・アーカイブのテンプレート作成
（以下の作業の前に、個別エントリーを５つほど、カテゴリも３つほど作成しておきます。） カテゴリ・アーカイブのテンプレートを作成します。ＭｏｖａｂｌｅＴｙｐｅの管...
メインページからカテゴリーページへの遷移確認
再構築後、ブラウザで確認してみます。 上図を見ると、カテゴリの一覧が表示されていることがわかります。 ここでは、カテゴリ１をクリックします。すると、以下の画面に...
エントリーアーカイブのテンプレートの作成
MovableTypeの管理画面で、テンプレート→アーカイブ→エントリーアーカイブを編集します。初期状態で記述されているソースを全て削除します。（バックアップを...
まとめその２
今まで作成してきた３つのテンプレートの全ソースとスタイルシートのソースを掲載します。 デザイン性はほとんどありませんが、MovableTypeに初期状態で設定さ...