ルクセリタスは、デザインファイルを使って簡単にデザイン変更出来ます。
公式のデザインファイルは12種ほどありますが、カスタマイズを自由に出来るようにと基本カラーが設定されている程度のものです。気に入った色があり、細かいカスタマイズは不要または、自分で行うという方は公式サイトからダウンロードしてご利用下さい。
https://thk.kanzae.net/wp/design/
当サイトオリジナルデザインファイルは、もう少し細かいカスタマイズを含んだものになっています。
ルクセリタスVer.3.18.0~アイコンフォントがFontAwesomeから、Googleマテリアルも利用可能になった為、以前に作成したデザインファイルでは不都合がある場合も出てきた為に、新しく作成しました。
オリジナルデザインファイル
主なカスタマイズ項目
- グローバルナビ
- 記事一覧(カード型最大1列)でのデザイン
- 関連記事デザイン
- ページネーション
- ブログカード
- 目次
- 目次ウィジェット
- 新着記事ウィジェット
- 検索フォーム
- 見出し
- テーブル
- 引用
カラーパターン
デザインのパターン、カスタマイズ箇所は同じで、以下の3色になります。
詳細 | ダウンロード | |
詳細 | ダウンロード | |
詳細 | ダウンロード |
使い方
外観カスタマイズ設定が変更されるワーニングが出ますので、「OK」を押せば完了です。
当サイトのオリジナルファイルの名前は以下のように表示されます。
ワインカラー:luxe_wine
黒:luxe_black2
紺:luxe_deepblue
注意点
- 当サイトで行っているカスタマイズを中心にしたデザインファイルになります。
- トップページ、アーカイブなどの記事一覧ページはカード型(最大1列)のデザインになります。
- AMP対応のCSSは記述していません。
AMP用CSSは、デザインファイル画面の「style-amp.css」で直接編集できますので、必要に応じて記述して下さい。
カスタマイズ方法
方法1:デザインファイルの設定から行う
利用中のデザインファイルのスタイルシートは「style.css」、「style-amp.css」に記載があります。
style.cssを直接編集し、保存する事で変更が可能です。
方法2:サーバーへアップロードする
使い慣れたエディタでコード編集をしたい場合は、直接サーバーへアップロードする方法でもOK。
圧縮ファイルを解凍し、style.cssを編集後、サーバーへアップロード(既にデザインファイルインストール後であれば上書き)します。
サーバーでのデザインファイルの場所は以下です。
解凍ファイル内容
フォルダ:luxe_wine luxe_black2 luxe_deepblue
<構成>
- images(フォルダ)
- editor-style.css
- luxe-appearance.json
- screenshot.jpg
- style.css
- style-amp.css
カラー変更
色の変更なども自由に行って下さい。
それぞれのデザインでのカラーコードは以下の通りです。
ワインカラー
#a2526b | #5d5855 |
黒
#000000 | #5d5855 |
紺
#233B6C | #5d5855 |
カラーサンプルは以下もご利用下さい。
不要なカスタマイズを削除する
style.cssの編集画面から、不要な部分をまるごと削除して問題ありません。
それぞれの項目にコメントを付けていますので、例えば「サイトネーム」に関するカスタマイズが不要な場合は、以下の部分を削除して下さい。
最後に
上記の通り、要らないものは上記の通り、自由に削除できます。
「こんなのがあればいいのに」 などのご意見があれば、コメント下さると今後、対応するかもしれませんので、
お気づきの点があれば、お気軽にコメントをください。
以上です。