サイドバーを非表示・幅変更・左右入れ替えする

サイドバーを非表示・幅変更・左右変更しましょう。Giblogで作成されたブログやWebサイトは、サイドバーがデフォルトで設定されています。これを変更したい場合にも対応できます。

サイドバーのデザインを編集するには、次のCSSを編集します。

templates/static/css/common.css

最初に、このファイルを開いてください。

コンテントとサイドバーの設定を探してください。デフォルト設定とスマートフォン用の設定の二つのものがあります。

「@media only screen and (max-width:960px)」より上にあるものが、デフォルト設定、下にあるものがスマートフォン用の設定です。

  /* content */
  .content {
    /* コンテントエリアの設定 */
  }

  /* side */
  .side {
    /* サイドバーの設定 */
  }

/* Tablet and Smart phone */
@media only screen and (max-width:960px) {
  .content {
    /* コンテントエリアの設定 - スマートフォン */
  }
  .side {
    /* サイドバーの設定 - スマートフォン */
  }
}

サイドバーを非表示にする

スマートフォンの場合だけ、サイドバーを非表示にしたい場合は、次のように記述してください。

  /* content */
  .content {
    /* コンテントエリアの設定 */
  }

  /* side */
  .side {
    /* サイドバーの設定 */
  }

/* Tablet and Smart phone */
@media only screen and (max-width:960px) {
  .content {
    width:100%;
  }
  .side {
    display:none;
  }
}

PCとスマートフォンの両方でサイドバーを非表示にしたい場合は、次のように記述してください。

  /* content */
  .content {
    width:100%;
  }

  /* side */
  .side {
    display:none;
  }

/* Tablet and Smart phone */
@media only screen and (max-width:960px) {
  .content {
    width:100%;
  }
  .side {
    display:none;
  }
}

サイドバーの幅を変更する

サイドバーの幅を変更するには、以下のように設定します。widthとmargin-leftを変更してください。

メインコンテンツが70%、サイドバーが29%、間のマージンを1%に設定する例です。

  /* content */
  .content {
    float:left;
    width:70%;
  }
  
  /* side */
  .side {
    float:left;
    width:29%;
    margin-left:1%;
  }

サイドバーの左右を入れ替える

サイドバーの左右を入れ替えるには、以下のように設定します。floatの設定をrightに変更し、margin-leftをmargin-rightに変更します。

  /* content */
  .content {
    float:right;
    width:74%;
  }
  
  /* side */
  .side {
    float:right;
    width:25%;
    margin-right:1%;
  }

参考

サイドバーのデザインの変更のために、CSSの基礎について知りたい場合は、以下の記事を参考にしてください。

Webサイト作成のためのCSSの基礎