■ MT4のテンプレート(CSS)の操作について教えてください。


サイドバーとメインの文章の順列を変更したいのです。

● 現在

文章/サイドバーサブ/サイドバーメイン

のような配列です。

● これを、

サイドバーメイン/文章/サイドバーサブ

のように順列を入れ替えたいのですが、たくさんあるテンプレートのうちの、どこの部分がコレを担当しているのか、よくわかりません。

簡潔でかまいませんので、ご存じの方よろしくお願いします。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/04/24 01:34:25
  • 終了:2010/05/01 01:35:02

ベストアンサー

id:rouge_2008 No.2

rouge_2008回答回数593ベストアンサー獲得回数3502010/04/25 06:42:12

ポイント35pt

現在、3カラムレイアウトのデザインを使用していて、左から順番に「文章(記事)/サイドバーサブ/サイドバーメイン」というレイアウトになっているのを、「サイドバーメイン/文章(記事)/サイドバーサブ」に変更したいということでしょうか?

使用しているデザイン(スタイル)によって異なりますが、おそらくCSS編集だけで可能なようにはなっていないと思います。

次の手順でHTMLとテンプレートを確認して、どのような構成になっているかを確認してください。

まず、SafariかGoogle Chromeを使用している場合はそのままでいいのですが、Firefoxの場合は、Firebugというアドオンをインストールします。

※IEを使用している場合は、上記のいずれかのブラウザをインストールしてください。

(IEをアンインストールしなくても、別のブラウザをインストールして併用できます。)

準備が出来たら、ブラウザでブログにアクセスして、各ブロック(記事コンテンツ、各サイドバー)のidを確認します。

※各ブロックの左上端と思われる部分を右クリックしてから、Safariは「要素の詳細を表示」、Google Chromeは「要素を検証」、Firefox+Firebugは「要素を調査」で、クリックした箇所のHTMLを選択した状態でソースを表示します。

(「<div id="alpha">」等にマウスを合わせると、ブラウザの表示画面の方で該当するブロックが青く表示されます。)

※私が確認したデザインでは、「<div id="alpha">」が記事のブロックで、サイドバーは「<div id="beta">」と「<div id="gamma">」でした。


次に管理画面にログインして、「デザイン」→「テンプレート」に進みます。

1.「テンプレートモジュール」の「サイドバー」をクリックして編集画面を開きます。

一番左に移動したいサイドバーと一致するidのブロックを切り取りって、別のファイルにコピーしたら、「保存」をクリックします。

※私の場合は、以下を切り取ってコピーしました。

<div id="beta">
    <div id="beta-inner">
        <$mt:Var name="profile_widgets"$>
<mt:If name="page_columns" eq="2">
        <$mt:WidgetSet name="アクティビティウィジェット"$>
        <$mt:WidgetSet name="アーカイブウィジェット"$>
<mt:Else name="page_columns" eq="3">
        <$mt:WidgetSet name="アーカイブウィジェット"$>
</mt:If>
    </div>
</div>

※すぐ使いますが、一応コピーして残して置いてください。

2.テンプレートの一覧画面に戻って、「テンプレートモジュールを作成」でテンプレートを新規作成します。

3.上の入力欄に「メインサイドバー」と入力して、下の入力欄に先ほどコピーして置いた記述を貼り付けて「保存」をクリックします。

4.「インデックステンプレート」の「メインページ」をクリックして、中のコードを確認します。

次のような記述があると思います。

<$mt:Include module="ヘッダー" body_class="mt-main-index"$>

これが読み込まれているテンプレートです。

編集欄右横の「インクルードテンプレート」の所に表示されている「ヘッダー」をクリックします。

5.下の方にある記述を以下のように変更して保存をクリックします。

            <div id="content">
                <div id="content-inner">
                    <$mt:Include module="メインサイドバー"$><!-- この行を追加 -->
                    <div id="alpha">
                        <div id="alpha-inner">

※先ほど保存したメインサイドバーのHTMLコードが、記事ブロックのHTMLコードよりも先に出力されるようにしました。

6.ブログメニューのテンプレート一覧画面に戻ります。

※先ほどの操作でシステムメニューのテンプレートの編集画面に移動しています。

※一応この時点で再構築してください。

7.CSSを編集する準備をします。

ブラウザでブログにアクセスして、表示の問題点と各ブロックに適用されているCSSの記述を確認してください。

8.「インデックスメニュー」の「スタイルシート」をクリックして編集して保存します。

※保存後はメッセージに従ってスタイルシートの再構築を実行してください。

※こちらでは以下の記述を追加することで望みどおりの表示になりました。

#gamma {
    display: inline;
    float: right;
}

.layout-wtt #beta {
    left: 0px;
}

.layout-wtt #gamma {
    right: 0px;
}

※既にある記述(CSSファイルの読み込み)より後ろに記述します。

※確認に使用したブログのデザインは「tristan-blue-4.2」です。

※テンプレートの構成は、「メインページ」「ヘッダー」「フッター」等のテンプレートを確認すると大体理解できると思います。


上記の説明で分からない場合は、使用しているデザインを教えてください。

※コメント欄を開けてくださった方がやり取りしやすいです。

id:himawari-sun

ご回答ありがとう御座いました。親切に回答して頂いてほんとうに感謝します。メッセージもありがとう御座いました。

取り急ぎオープンいたしましたが、MTのデザインに関する書籍を注文していますので、ご回答と交えて考えてみたいと思います。

どうぞよろしくお願いします。

2010/04/27 23:17:41

その他の回答(1件)

id:rafting No.1

ラフティング回答回数2652ベストアンサー獲得回数1762010/04/24 09:00:39

ポイント35pt

・おそらくAI(管理画面)のことではなく、UI(ユーザー画面)のことだと思われますがいかがでしょうか?

・UIだとすると、どのデザイン・テンプレートを適用したかによってCSSの記述内容が変わってきますが、CSS自体はたくさんはなく、1ファイルだけだと思いますがいかがでしょうか?(また、CSSを使用していない場合もあるし、CSSファイルとして外部ファイル化していない場合も想定できます。)

・順列を入れ替えたいとのことですが、UI表示のレイアウトを変更したいということでしょうか?

そうであるならば、CSSファイルではありません。

・CSSファイルに記述されている各種の定義(1ファイル想定)の記載の順序を変えたいだけでしたら、変えても問題ないはずです。

但し、順序(上下)を変えただけでは、UI側のレイアウトは変わらないはずです。

→何をどうしたいのか?具体的な情報が必要です。

id:rouge_2008 No.2

rouge_2008回答回数593ベストアンサー獲得回数3502010/04/25 06:42:12ここでベストアンサー

ポイント35pt

現在、3カラムレイアウトのデザインを使用していて、左から順番に「文章(記事)/サイドバーサブ/サイドバーメイン」というレイアウトになっているのを、「サイドバーメイン/文章(記事)/サイドバーサブ」に変更したいということでしょうか?

使用しているデザイン(スタイル)によって異なりますが、おそらくCSS編集だけで可能なようにはなっていないと思います。

次の手順でHTMLとテンプレートを確認して、どのような構成になっているかを確認してください。

まず、SafariかGoogle Chromeを使用している場合はそのままでいいのですが、Firefoxの場合は、Firebugというアドオンをインストールします。

※IEを使用している場合は、上記のいずれかのブラウザをインストールしてください。

(IEをアンインストールしなくても、別のブラウザをインストールして併用できます。)

準備が出来たら、ブラウザでブログにアクセスして、各ブロック(記事コンテンツ、各サイドバー)のidを確認します。

※各ブロックの左上端と思われる部分を右クリックしてから、Safariは「要素の詳細を表示」、Google Chromeは「要素を検証」、Firefox+Firebugは「要素を調査」で、クリックした箇所のHTMLを選択した状態でソースを表示します。

(「<div id="alpha">」等にマウスを合わせると、ブラウザの表示画面の方で該当するブロックが青く表示されます。)

※私が確認したデザインでは、「<div id="alpha">」が記事のブロックで、サイドバーは「<div id="beta">」と「<div id="gamma">」でした。


次に管理画面にログインして、「デザイン」→「テンプレート」に進みます。

1.「テンプレートモジュール」の「サイドバー」をクリックして編集画面を開きます。

一番左に移動したいサイドバーと一致するidのブロックを切り取りって、別のファイルにコピーしたら、「保存」をクリックします。

※私の場合は、以下を切り取ってコピーしました。

<div id="beta">
    <div id="beta-inner">
        <$mt:Var name="profile_widgets"$>
<mt:If name="page_columns" eq="2">
        <$mt:WidgetSet name="アクティビティウィジェット"$>
        <$mt:WidgetSet name="アーカイブウィジェット"$>
<mt:Else name="page_columns" eq="3">
        <$mt:WidgetSet name="アーカイブウィジェット"$>
</mt:If>
    </div>
</div>

※すぐ使いますが、一応コピーして残して置いてください。

2.テンプレートの一覧画面に戻って、「テンプレートモジュールを作成」でテンプレートを新規作成します。

3.上の入力欄に「メインサイドバー」と入力して、下の入力欄に先ほどコピーして置いた記述を貼り付けて「保存」をクリックします。

4.「インデックステンプレート」の「メインページ」をクリックして、中のコードを確認します。

次のような記述があると思います。

<$mt:Include module="ヘッダー" body_class="mt-main-index"$>

これが読み込まれているテンプレートです。

編集欄右横の「インクルードテンプレート」の所に表示されている「ヘッダー」をクリックします。

5.下の方にある記述を以下のように変更して保存をクリックします。

            <div id="content">
                <div id="content-inner">
                    <$mt:Include module="メインサイドバー"$><!-- この行を追加 -->
                    <div id="alpha">
                        <div id="alpha-inner">

※先ほど保存したメインサイドバーのHTMLコードが、記事ブロックのHTMLコードよりも先に出力されるようにしました。

6.ブログメニューのテンプレート一覧画面に戻ります。

※先ほどの操作でシステムメニューのテンプレートの編集画面に移動しています。

※一応この時点で再構築してください。

7.CSSを編集する準備をします。

ブラウザでブログにアクセスして、表示の問題点と各ブロックに適用されているCSSの記述を確認してください。

8.「インデックスメニュー」の「スタイルシート」をクリックして編集して保存します。

※保存後はメッセージに従ってスタイルシートの再構築を実行してください。

※こちらでは以下の記述を追加することで望みどおりの表示になりました。

#gamma {
    display: inline;
    float: right;
}

.layout-wtt #beta {
    left: 0px;
}

.layout-wtt #gamma {
    right: 0px;
}

※既にある記述(CSSファイルの読み込み)より後ろに記述します。

※確認に使用したブログのデザインは「tristan-blue-4.2」です。

※テンプレートの構成は、「メインページ」「ヘッダー」「フッター」等のテンプレートを確認すると大体理解できると思います。


上記の説明で分からない場合は、使用しているデザインを教えてください。

※コメント欄を開けてくださった方がやり取りしやすいです。

id:himawari-sun

ご回答ありがとう御座いました。親切に回答して頂いてほんとうに感謝します。メッセージもありがとう御座いました。

取り急ぎオープンいたしましたが、MTのデザインに関する書籍を注文していますので、ご回答と交えて考えてみたいと思います。

どうぞよろしくお願いします。

2010/04/27 23:17:41

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません