実践型2カラムサイト

ポインタ完成画面の紹介
このカテゴリでは、1カラムレイアウト、2カラムレイアウト、3カラムレイアウトのカテゴリで説明したレイアウト方法を元に、より実践的な2カラムサイトの作成を行います...

ポインタグループ分けとスタイルシート記述
完成型の画面を参考に、各エリアを<div>タグでブループ分けします。 全体を囲むコンテナ、ヘッダ、コンテンツ、サイドバー、フッタの5種類を作成します...

ポインタ文字部分のスタイルを定義
前のページまでは、レイアウトのスタイルを定義しました。次は、各文字列のスタイルを定義していきます。前のページで作成したスタイルシートに追記していく形となります。...

ポインタメインページ作成:グループを記述する
スタイルシートの定義が終わったので、いよいよテンプレートの編集を行います。まず、グループ分けした<div>タグを記述します。containerで大枠...

ポインタメインページ作成:ヘッダ・フッタの作成
ヘッダ部分とフッタ部分の編集を行います。 <$MTBlogName$>タグでサイトタイトルを出力します。 その下に、【<$MTBlogName...

ポインタメインページ作成:コンテンツの作成
コンテンツの作成です。サイトの概要をメインページのテンプレートに直接記述することによって、この部分が常にトップページの先頭に表示されるようになります。その下の部...

ポインタメインページ作成:サイドバーの作成
サイドバーの作成を行います。検索、メニュー、新着情報の3つを作成します。 検索部分では、検索結果のテンプレートsearch_tempを読み込むように指定し、検索...

ポインタカテゴリページ作成
カテゴリページを作成します。メインページのソースを元に作成します。メインページのソースをコピーペーストし、タイトルタグ、ヘッダ部分、コンテンツ部分とフッタ部分を...

ポインタエントリーページ作成
エントリーページも、カテゴリーページを元(コピーペースト)に作成します。 変更部分は、タイトルタグ内、ヘッダ、コンテンツ部分となります。 タイトルタグ内に、【エ...

ポインタ検索結果ページ作成
検索結果ページを作成します。ファイル名をsearch_temp.tmplとし、ファイル作成後、MovableTypeをインストールしたディレクトリの直下にあるs...

ポインタスタイルシートでカラー調整とレイアウト変更
前回までで実践2カラムサイト作成は終了しましたが、ここでは、スタイルシートで定義した各カラー、floatを変更して、サイトの見栄えを変更してみます。色の変更だけ...

ポインタ画像を使用する
タイトル部分の背景画像に画像を使用することも可能です。太字の部分を調整して、レイアウト調整することができます。 #header { background-co...

▲ページトップへ