WordPress・Lightningのコンテンツの幅を変更

[スポンサーリンク]


記事の方法でカスタムを100%保障するものではございません。

バージョンにより異なりますのでご了承下さいませ。

※カスタマイズは必ずバックアップの上、自己責任にて行って下さい。

コンテンツの幅を変更

Lightningのテーマは、コンテンツとサイドバーの間の幅(隙間)が広すぎるので、隙間を無くします。

Bootstrap(ブートストラップ)ベースなので幅の調整は楽です。

mainSection(メインコンテンツ)はcol-md-8

subSection(サイドバー)はcol-md-3

がベースとなっております。

Bootstrapでは(全幅)12カラムですので1カラム分がスペースとして使用されています。

col-md-offset-1 を削除して mainSectionをcol-md-9 にすれば隙間は無くなります。

修正ファイル

修正するファイルは以下の4ファイルとなります。

・front-page.php
・page.php
・index.php
・single.php 

indexページ

front-page.php

 $main_col = ‘col-md-8’; を $main_col = ‘col-md-9’; に

$main_col = 'col-md-9';

div class=”col-md-3 col-md-offset-1 subSection sideSection のcol-md-offset-1を削除

<div class="col-md-3 subSection sideSection">

固定ページ

page.php (固定ページ)

div class=”col-md-8 を col-md-9 に変更

<div class="col-md-9 mainSection" id="main" role="main">

div class=”col-md-3 col-m subSection sideSection の col-md-offset-1を削除

<div class="col-md-3 col-m subSection sideSection">

カテゴリ・アーカーブ・タグ ページ

div class=”col-md-8 mainSection” id=”main” role=”main” を col-md-9に変更

<div class="col-md-9 mainSection" id="main" role="main">

div class=”col-md-3 col-md-offset-1 subSection sideSection のcol-md-offset-1を削除

<div class="col-md-3 subSection sideSection">

記事ページ

div class=”col-md-8 mainSection” id=”main” role=”main” の col-md-8 を col-md-9へ

<div class="col-md-9 mainSection" id="main" role="main">

div class=”col-md-3 col-md-offset-1 subSection sideSection の col-md-offset-1を削除

<div class="col-md-3 subSection sideSection">

完成

Bootstrapベースなので幅の調整は楽に行えます。

cssで調整も可能ですが、カラムで修正したほうが楽だと思います。



こちらの記事も読まれてます。