Movable Type Rainierのカラム幅を変更する：らっぱ王子

サイトの表示幅を広げよう

このサイトはMTのテーマ「Rainier」をベースにしているのだけど、メインカラムの幅が初期値の640pxでは、狭く感じるようになってきたので広げた。

具体的には、mt/mt-static/support/theme_static/rainier/css/base.css の以下選択部分の数値に160を足した。

  @media (min-width: 930px) { /* ←ここがレスポンシブで折りたたまれる数値 */
    #container #container-inner,
    #container #header-inner,
    #container #content-inner,
    #container #footer-inner {
      width: 940px; /* ←ここが上部と全体のカラム幅 */
      margin-right: auto;
      margin-left: auto; } }

[role="banner"] {
  margin: 0; }
  @media (min-width: 930px) {
    [role="banner"] {
      margin: 0 auto; }
      [role="banner"] h1 {
        margin: 0; } }
  [role="banner"] [role="navigation"] {
    padding: 0 1em; }
    [role="banner"] [role="navigation"] ul {
      display: none; }
    @media (min-width: 930px) {
      [role="banner"] [role="navigation"] ul {
        display: block; }
      [role="banner"] [role="navigation"] select {
        display: none; } }

[role="navigation"] ul {
  padding-left: 0; }
  [role="navigation"] ul li {
    padding-right: 1.618em; }

#content {
  margin: 1.618em 1em 0; }
  #content .related {
    margin-top: 4.854em; }
  @media (min-width: 930px) {
    #content {
      margin-right: auto;
      margin-left: auto; }
      #content [role="main"],
      #content .related {
        float: left;
        min-height: 1px; }
      #content [role="main"] {
        width: 640px; /* ←ここがメインのカラム幅 */
        padding-left: 15px; }
      #content .related {
        width: 235px; /* ←ここは右メニューのカラム幅(変更せず) */
        padding-left: 50px;
        margin-top: 0; } }

[role="contentinfo"] {
  margin: 0; }
  @media (min-width: 930px) {
    [role="contentinfo"] {
      margin: 0 auto; } }