Luxeritas（ルクセリタス）特定のページのみ１カラムに変える方法（コピペOK！CSSのみ）

2019-06-112019-12-29備忘録

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

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

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

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

<style>
#main {
max-width: 1080px; /*任意の最大幅*/
width: 100%; /*スマホ対応 レスポンシブ*/
flex: 0 1 1080px; /*任意の最大幅と同じ値で*/
float:none; /*左寄せを解除*/
margin: 0 auto; /*記事エリアの中央寄せ*/
}
#side{
display: none;/*サイドメニューを非表示に*/
}
</style>

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

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

固定ページ限定～テンプレートとCSSで１カラム表示する方法（高速・推奨）

上記のコードでは、

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

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

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

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

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

エディタで開きます。

手順２ 298行目を削除

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

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

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

/**
* Template Name: 1column
*/

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

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

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

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

手順５ 追加ヘッダーに最小限の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. テンプレートを選択
2. 追加ヘッダーにCSSを追記

記事ページの場合

以上になります。

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

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

実際のページはこちら

【翻訳】寿司ネタ・すしメニュー一覧表（英語・中国語・韓国語）

お寿司屋さんに出てくるメニューと関連するメニューや文言を、英語・中国語・韓国語でご紹介しています ...

 https://msstyle.jp/memo/sushi-menu-translation/

参考になれば幸いです。