Luxeritas(ルクセリタス)特定のページのみ1カラムに変える方法(コピペOK!CSSのみ)

備忘録

ルクセリタスは、カスタマイズ(外観)からカラム数を設定できますが、ページ単体ではなくページ種類ごとのみ変更が可能となっています。

ですので「お手軽かつ簡単に特定のページのみ1カラムで表示したい!」という方向けに方法をご紹介します。

スポンサーリンク

CSSのみで1カラムで表示する方法

固定ページ・記事ページ共に使えます。

追加ヘッダー部分に下記を追記します。

luxeritas 追加ヘッダー部分

この部分に追加する時は、<style>追加コード</style>で囲む必要があります。
<style>
#main {
max-width: 1080px; /*任意の最大幅*/
width: 100%; /*スマホ対応 レスポンシブ*/
flex: 0 1 1080px; /*任意の最大幅と同じ値で*/
float:none; /*左寄せを解除*/
margin: 0 auto; /*記事エリアの中央寄せ*/
}
#side{
display: none;/*サイドメニューを非表示に*/
}
</style>

以上で、任意の幅の1カラムページになると思います。

これだけだとテーマ「ルクセリタス(光速)」の良さを生かせないので、ここからは解る方向けに書いていきます。

スポンサーリンク

固定ページ限定~テンプレートとCSSで1カラム表示する方法(高速・推奨)

固定ページに限りますが、不要な要素を読み込まない方法なので、ページの表示スピードを落とさず表示できます。

最後まで読まれてから出来そうなら挑戦してみて下さい。バックアップを忘れずに・・

上記のコードでは、

#side{
display: none; /*サイドメニューを非表示に*/
}

として、サイドメニューを非表示にしていますが、実際は読み込まれています。

なので、ここでは不要な要素を読み込まないために、1カラム用のテンプレートを作成します。

手順1 page.php ファイルをダウンロード

設置ディレクトリ/wp-content/themes/luxeritas

で表示される、page.php ファイルをFTPソフトでダウンロード。

luxeritas-pagephp

エディタで開きます。

手順2 298行目を削除

page.php-298

これで、サイドメニューを呼び出さない(読み込まない)様になります。

手順3 テンプレート名を追記

同ファイル上の17行目に以下を追記

page.php-add

/**
* Template Name: 1column
*/

※名前を付けることで、テンプレートが選択出来るようになります。

手順4 任意の名前に書き換えてアップロード

page.php から 1column.php に名前を変更して保存。

page.php と同じ階層にアップロード。

ftp-1column-up

1column.php とは別に、page.php が下に存在します。(念の為)

同様の方法で、シェアボタンを表示させないテンプレートなども作成しています。

また、テーマのアップデートで上書きしても、同名のファイルが無い限り消えることはありません。

固定ページを更新後、テンプレートを選択できるようになります。

template-choice

手順5 追加ヘッダーに最小限のCSSのみ追加

<style>
#main {
max-width: 1080px;
width: 100%;
flex: 0 1 1080px;
float:none;
margin: 0 auto;
}
</style>

圧縮すると

<style>#main{max-width:1080px;width:100%;flex:0 1 1080px;float:none;margin:0 auto}</style>

以降、1カラムを使用したい時は・・

固定ページの場合

  1. テンプレートを選択
  2. 追加ヘッダーにCSSを追記

記事ページの場合

#side {display:none;} を含むCSSを追記。

以上になります。

工夫をすれば記事ページでもサイドメニューを読み込ませないようにする事も可能です。

AMPページでも適用されたい方は、追記をお忘れなく。

page-add-amp

参考になれば幸いです。

スポンサーリンク