2カラムレイアウト

ポインタ2カラムレイアウトの概要とスタイルシート
1カラムレイアウトで作成したソースを引き継いで、2カラムレイアウトに挑戦します。 1カラムレイアウトの時は、コンテナの中に、ヘッダ、コンテンツ、フッタと3つのグ...

ポインタメインページのテンプレートの修正と画面確認
メインページのテンプレートのコンテンツ(content)部分の下に、サイドバー(sidebar)の部分を追記します。以下のソースを見ると、非常に簡単な追記である...

ポインタclear:both;を忘れずに
前回サイドバーを設置し、ブラウザで画面を確認したところ、フッタ部分が最下部ではなくサイドバーの下に表示されてしまうという問題が発生しました。 これは、CSSの仕...

ポインタカテゴリー一覧をサイドバーに移動する
2カラムレイアウトができました。今度は、現在コンテンツのトップ部分に表示されているカテゴリ一覧を、サイドバーのトップに移動してみます。 メインページのテンプレー...

ポインタ左右のグループを入れ替える
現状、サイドバーが右側、コンテンツが左側に配置されています。これを逆にします。実は非常に簡単です。 スタイルシートのコンテンツ(content)で指定しているf...

ポインタサイドバーに余白を設置する
前回までの画面をよく見ると、コンテンツ部分は余白があるのに対して、サイドバーの部分は余白が無く、境界線ぴったりまで文字が並んでいます。この部分をコンテンツと同じ...

ポインタカテゴリと個別エントリも2カラムにする
次にカテゴリページと個別エントリページのテンプレートもメインページと同様2カラムにします。 カテゴリ、個別エントリそれぞれのテンプレートのコンテンツ部分の下に、...

ポインタ検索窓の設置と検索結果画面の作成1
2カラムレイアウトの作成が終わったので、ここで検索窓の設置と検索結果画面を作成します。 エントリーが多くなった場合や、データベース的なWEBサイトを作成した場合...

ポインタ検索窓の設置と検索結果画面の作成2
検索窓の設置が終わったところで、次は、検索結果画面のテンプレートの作成を行います。 今まで編集してきたテンプレートはMovableTypeの管理画面で編集ができ...

ポインタ検索窓の設置と検索結果画面の作成3
実際に検索してみます。メインページで作成した検索ボックスに『サンプル文その2』と入力し、検索します。 すると、以下のような検索結果画面が表示されました。 検索結...

ポインタ検索結果テンプレートを複数作成する
検索結果のテンプレートを0から作りましたが、注意が必要です。 <form method="get" action="<$MTCGIPath$>...

ポインタ2カラムまとめ
2カラムレイアウトで実際に作成したソースを以下に紹介します。 多少長くなりましたが、それでもMovableTypeに標準で用意されているテンプレートよりは、はる...

▲ページトップへ