1カラムレイアウト

ポインタまずはメインページをデザインする
まずはMovableTypeをインストールします。各レンタルサーバごとにマニュアルなどがあるので、それにしたがってインストールしましょう。 ロリポップの場合は、...

ポインタ簡単なソースを記述して、表示してみる
次に、簡単なHTMLを記述します。 さきほど削除したソースに、以下のように記述して再構築します。 <!DOCTYPE html PUBLIC "-//W3...

ポインタ記述したソースを再構築し、実際にブラウザで見る
先ほど記述したソースを再構築し、実際にブラウザで確認してみましょう。 非常にそっけない表示となりました。 注意して見ると、図の左上の青色部分に『サンプルレイアウ...

ポインタまとめその1
今までの流れをまとめます。 ①まず、メインページのテンプレートを編集します。 (以下のMovableTypeのタグを含んだソース) <!DOCTYPE h...

ポインタエントリーを表示する
今度は、実際にエントリーを表示してみましょう。 まず、準備段階として、エントリーを3つほど作成しておきます。(MovableTypeの管理画面左のメニューバーか...

ポインタスタイルシートの適用
スタイルシートで見た目をよくします。(※スタイルシートのネタ帳参照) スタイルシートを全て覚えるのは大変ですが、実際に使用するスタイルは以外に少ないものです。も...

ポインタグループ化する
スタイルシートの定義の前に、まずは各部分をグループ分けします。 タイトルとサイト説明文をヘッダ、エントリー一覧をコンテンツ、コピーライト部分をフッタ、以上各グル...

ポインタ各グループをスタイルシートで装飾する
インデックステンプレートのソースの各部分をグループ化します。 ソースが長くなってきましたが、太字とコメント文を追加しただけです。コメント文とは、<!-- ...

ポインタヘッダ部分に画像を挿入する
ヘッダ、コンテンツ、フッタのスタイルの定義を行って、以下の図のようなデザインになりました。 見た目はまだ味気ないですが、これが基本となります。 上記画面を、何も...

ポインタカテゴリ・アーカイブのテンプレート作成
(以下の作業の前に、個別エントリーを5つほど、カテゴリも3つほど作成しておきます。) カテゴリ・アーカイブのテンプレートを作成します。MovableTypeの管...

ポインタメインページからカテゴリーページへの遷移確認
再構築後、ブラウザで確認してみます。 上図を見ると、カテゴリの一覧が表示されていることがわかります。 ここでは、カテゴリ1をクリックします。すると、以下の画面に...

ポインタエントリーアーカイブのテンプレートの作成
MovableTypeの管理画面で、テンプレート→アーカイブ→エントリーアーカイブを編集します。初期状態で記述されているソースを全て削除します。(バックアップを...

ポインタまとめその2
今まで作成してきた3つのテンプレートの全ソースとスタイルシートのソースを掲載します。 デザイン性はほとんどありませんが、MovableTypeに初期状態で設定さ...

▲ページトップへ