>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

ルクセリタスのオリジナルデザインファイル3色と使い方

ルクセリタス・デザインファイル
この記事は約5分で読めます。

ルクセリタスは、デザインファイルを使って簡単にデザイン変更出来ます。

公式のデザインファイルは12種ほどありますが、カスタマイズを自由に出来るようにと基本カラーが設定されている程度のものです。気に入った色があり、細かいカスタマイズは不要または、自分で行うという方は公式サイトからダウンロードしてご利用下さい。

https://thk.kanzae.net/wp/design/
当サイトオリジナルデザインファイルは、もう少し細かいカスタマイズを含んだものになっています。

2021/08/26 追記

ルクセリタスVer.3.18.0~アイコンフォントがFontAwesomeから、Googleマテリアルも利用可能になった為、以前に作成したデザインファイルでは不都合がある場合も出てきた為に、新しく作成しました。

新デザインファイルは、記事一覧リストページのカードにもタイルにも対応しています。
ルクセリタス-オリジナルデザインファイル(NEWブラック)
はじめに デザインファイルとは ルクセリタスは、デザインファイルを使って簡単に着せ替えるようにデザイン変更出来ます。他テーマで言う「スキン」です。 ※公式のデザインファイルは こちら 公式のものはいずれもシンプルで、カラー設定が少しされてい...

 

オリジナルデザインファイル

主なカスタマイズ項目

  • グローバルナビ
  • 記事一覧(カード型最大1列)でのデザイン
  • 関連記事デザイン
  • ページネーション
  • ブログカード
  • 目次
  • 目次ウィジェット
  • 新着記事ウィジェット
  • 検索フォーム
  • 見出し
  • テーブル
  • 引用

 

カラーパターン

デザインのパターン、カスタマイズ箇所は同じで、以下の3色になります。

デザインファイル:ワインカラー 詳細 ダウンロード
ルクセリタス-オリジナルデザインファイル(ブラック) 詳細 ダウンロード
ルクセリタス-オリジナルデザインファイル(紺色) 詳細 ダウンロード

 

使い方

「Luxeritas」→「デザイン選択」を開きます。

 

デザインファイルを使う場合は、有効化したと同時に外観カスタマイズの設定内容がデザインファイル内で設定された内容に変更されるため、バックアップを取っておく方が無難です。

 

外観のバックアップ」を押してバックアップファイルを置いておきます。

ルクセリタスデザインファイル

 

新規追加」からダウンロードした圧縮ファイル(zip形式)を選択します。

 

デザインファイルがインストールされるので「有効化」を押します。

ルクセリタスデザインファイル

外観カスタマイズ設定が変更されるワーニングが出ますので、「OK」を押せば完了です。

 

当サイトのオリジナルファイルの名前は以下のように表示されます。

ワインカラー:luxe_wine

ルクセリタスデザインファイル

黒:luxe_black2

デザインファイル:ブラック

紺:luxe_deepblue

ルクセリタスデザインファイル

 

注意点

  1. 当サイトで行っているカスタマイズを中心にしたデザインファイルになります。
  2. トップページ、アーカイブなどの記事一覧ページはカード型(最大1列)のデザインになります。
  3. AMP対応のCSSは記述していません。

AMP用CSSは、デザインファイル画面の「style-amp.css」で直接編集できますので、必要に応じて記述して下さい。

 

ご自身の責任においての個人利用のみでお願いします。再配布、改変し再配布などはご遠慮ください。

 

カスタマイズ方法

方法1:デザインファイルの設定から行う

利用中のデザインファイルのスタイルシートは「style.css」、「style-amp.css」に記載があります。

 

 

style.cssを直接編集し、保存する事で変更が可能です。

 

方法2:サーバーへアップロードする

使い慣れたエディタでコード編集をしたい場合は、直接サーバーへアップロードする方法でもOK。

圧縮ファイルを解凍し、style.cssを編集後、サーバーへアップロード(既にデザインファイルインストール後であれば上書き)します。

サーバーでのデザインファイルの場所は以下です。

wp-content/themes/luxech/design

 

解凍ファイル内容

フォルダ: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の編集画面から、不要な部分をまるごと削除して問題ありません。

それぞれの項目にコメントを付けていますので、例えば「サイトネーム」に関するカスタマイズが不要な場合は、以下の部分を削除して下さい。

 

 

カスタマイズ箇所(コメント行) /*~*/ で囲われた部分から次のコメントがある行の手前までを削除。(コードは閉じる ”}” があるところまで)

 

最後に

上記の通り、要らないものは上記の通り、自由に削除できます。

「こんなのがあればいいのに」 などのご意見があれば、コメント下さると今後、対応するかもしれませんので、

お気づきの点があれば、お気軽にコメントをください。

以上です。

コメント

タイトルとURLをコピーしました