【デザイン設定】3カラムの幅調整 大手wiki似

テーマ

 

ページの幅をCSSで調整して、スマホのサイズに近づける

 

 

完成イメージ

 

説明

 

wiki3用のデザインテンプレート。

大手wikiによく用いられている3カラムの幅調整です。

メインカラムをスマホやタブレットの幅に寄せているのが特徴。

スマホ画面を基準にページを構成できるため、スマホゲームの攻略サイトに向いています。

 

方法・手順

 

1. [ 管理画面 ] ＞ [ デザイン設定 ]
2. ３カラムにチェック
3. CSSカスタマイズに下記のコードをコピーして貼る

 

CSSカスタマイズ

/* 3カラム+マージン(隙間)の合計幅 */
body>div.uk-container.uk-container-center{
width: 1000px; 
}

/* 左カラムの幅 */
body>div.uk-container.uk-container-center>div.uk-grid>div[class*=uk-width-].sidebar.left_side {
width: 240px;
}

/* メインカラムの幅 */
body>div.uk-container.uk-container-center>div.uk-grid>div[class*=uk-width-].sidebar.left_side+.main_content {
width: 440px;
}

/* 右カラムの幅 */
body>div.uk-container.uk-container-center>div.uk-grid>div[class*=uk-width-].sidebar.right_side {
width: 300px;
}

 

全体の構成

 

左カラム	マージン	メインカラム	マージン	右カラム
240px	10px	440px (430+5*2)	10px	300px

 

ポイント

 

幅の数値はお好みで変更可。

セレクタの長さはこれがデフォルト。短くするとCSSの優先度が落ち、幅が変わらなくなるので注意。

 

まとめ

 

ページの幅をCSSで調整した