FAQ2653: サイドバーをページ下部に移動させる方法

Title: サイドバーをページ下部に移動させる方法

SVGA (800 x 600) や XGA (1024 x 768) などの低い解像度のコンピューターやプロジェクターを使用する場合に、サイドバーを隠して文字表示部分（メイン部分）をもっと広くしたいと思いませんか？

TeamPage の標準スキンである「Proteus」では、ブラウザーの表示エリアの幅が 720 ピクセルより狭い場合、自動的にサイドバーが非表示になりますが、ページ下部へは移動しません。

そこで、この記事では、CSS の設定を追加してサイドバーをページ下部へ移動させる方法を紹介します。

CSS

1 行目の「1024px」は、サイドバーのページ下部移動を実行する閾値で、「幅が 1024px より狭い場合、以下の設定を適用しなさい」という意味です。必要に応じて値を変更してください。

@media only screen and (max-width: 1024px) {
 
  #wrapper #yui-main {
    margin-right: 0;
    float: none;
  }
 
  .layout #yui-main .yui-b {
    margin-right: 0;
  }
 
  #sidebar {
    float: none;
    width: auto;
  }
 
  #sidebar #sect-drafts .buttonbar {
    margin-left: 0;
  }
 
  #sidebar #sect-drafts .content {
    text-align: left;
  }
 
}

設定手順

管理者アカウントでログインし、[セットアップ] > [カスタマイズ] メニューを選択します。

「デザイン」ダイアログが表示されるので、[スキン] ドロップダウンリストで色テーマを選択し、[カスタマイズ] をクリックします。

標準の色テーマに変更を加える場合は、別の名前を付ける必要があります。[名前の変更] をクリックして、新しい色テーマ名を入力してください。

ドロップダウンリストで正しい色テーマ名が選択されていることを確認して、[カスタム] タブを選択します。

[上級者向けの上書き設定] 欄に、上記の CSS コードをコピー＆ペーストしてください。

[適用] ボタンをクリックし、色テーマを動作に反映させます。

ブラウザーのウィンドウの幅を狭めて、幅が 1024px 以下になったときにサイドバーが下へ移動することを確認します。

FAQ1764: Proteus スキンのカスタマイズ

FAQ1784: スタイルシートでスキンのデザインを変更するには

Forum1159

Attachments:

image1.png
image2.png
image3.png
image4.png

参照されている (1)

FAQ1764: Proteus スキンのカスタマイズ

参照している (2)

FAQ1784: スタイルシートでスキンのデザインを変更するには FAQ1764: Proteus スキンのカスタマイズ

Article: FAQ2653 (permalink)
Categories: :FAQ:カスタマイズ, :FAQ:スキン:Proteus, :FAQ:CSS, :DocJp:FAQ, :FAQ:表示, :FAQ:デザイン
Date: 2016/06/21; 5時52分53秒 JST

Author Name: TeamPage サポート
Author ID: jpbo

CSS

設定手順

関連記事