Luxeritas(ルクセリタス)のカスタマイザー機能でサイトの圧縮とCSSの設定をしてみよう!【圧縮・最適化、CSS 編】

2018年10月25日ブログ管理CSS, Luxeritas, Luxeritas内部カスタマイズ, ブログ管理, 初心者, 圧縮・最適化

最適化CSSヘッダー

トリ師匠
トリ師匠
今日もダラケてるの。

ぐず夫
ぐず夫
ナニコラ、タココラ!!
トリ師匠
トリ師匠
長州か。
もうええ、さっさと始めるで。今日はブログの圧縮とCSSの内部設定じゃ!

ということで、今回はLuxeritasのカスタマイザー機能を使って「圧縮と最適化」、「CSSの内部設定」をしてみたいと思います。

圧縮・最適化 機能

内部カスタマイズ選択

トリ師匠
トリ師匠
圧縮・最適化機能は、サイトのHTMLやCSSの圧縮や最適化を行おうっちゅうもんじゃ。基本はLuxeritasの中で自動で動いてくれる機能やで選択するだけやけどな。ほな管理画面から「Luxeritas」「カスタマイズ」を選択して、「圧縮・最適化」タブを押してみ。

① HTMLの圧縮

サイト全体のHTMLの圧縮率を設定します。

トリ師匠
トリ師匠
機能の詳細は説明しようがないで省略じゃ。ちなみに作成者さんは「低」「高」をオススメしてるの。

② CSSの最適化

子テーマのCSSファイルを圧縮します。

トリ師匠
トリ師匠
こちらも①と同様、説明のしようがないで省略じゃ。いつでもベストは「親と子のCSSを結合して圧縮する」やそうじゃ。

③ Javascriptの最適化

テーマ以外に使用するJavascriptファイルを最適化します。

トリ師匠
トリ師匠
自分でJavascriptを使用してなければ「必要ない」を。使用する場合は「圧縮する」を選択でええと思うで。

【 追加して圧縮・結合するJavascriptファイル名 】
使用するJavascriptのファイル名を指定します。

トリ師匠
トリ師匠
この大項目は基本的に作者さんのオススメ設定にするのがええと思うで。そもそもこのあたりがLuxeritasの売りでもあるからの。細かく知りたい人はこちら(外部サイト)をどうぞ。

 

CSS 機能

内部カスタマイズ選択

トリ師匠
トリ師匠
CSS(見た目設定)に関わる細かな設定をする機能じゃ。細かい話は置いといて、管理画面から「Luxeritas」「カスタマイズ」を選択して、「CSS」タブを選択してみよか。

① モード選択

Bootstrap(簡単に言えばサイトの見栄え用素材集)の使用について選択する機能。

トリ師匠
トリ師匠
Bootstrapを使って見栄えを変えたい場合は3と4の使用したいモードを選択するとええぞ。意味が分からん人には不要かもしれへんで、必要になるまでは「Luxeritas Mode」を選択じゃ!

② 外部CSSの直接出力

【 テーマのCSSをHTMLに埋め込む 】
style.cssの内容を直接HTMLに埋め込み出力する。HTTPリクエスト回数を削減可能。

トリ師匠
トリ師匠
処理の中身は初心者にはちと説明が難しすぎるで省くけど、ページの内容によってチェックを入れるか入れんかは考えるべきじゃな。1ページだけ読んで帰る人が多いサイトやとチェックを入れた方が良さそうや!

③ 子テーマのCSS

子テーマのCSS設定を読み込みます。

トリ師匠
トリ師匠
基本的に子テーマで装飾するから、普通はチェックでええと思うで。

◆子テーマって何?という方はコチラもどうぞ!

④ アイコンフォントのCSS

【 CSS(Font Awesome)の読み込み方法 】
Font Awesome(簡単に言うと文字として使えるアイコン・フォント集)の読み込み方法を選択します。

トリ師匠
トリ師匠
通常は非同期でええと思うで!

【 Font Awesomeバージョン 】
使用したいFont Awesomeのバージョンを選択します。

トリ師匠
トリ師匠
5は17年にリリースされた最新版じゃの。4からクラス名やらの記述が変わってるで、新規でブログ作ってる方は5でええけど、そうでなければ4のが使い勝手ええかもな。速度も遅いし(18年現在)、選択はお任せするで。ちなみにぐず夫は4じゃ。

【 CSSの構成 】
Font AwesomeのCSS構成を設定する。

トリ師匠
トリ師匠
機能をフルで使いたいならオリジナルを選択じゃな。

【 Font Awesomeのフォントファイル本体の読み込み方法 】
Font Awesomeをどこから読み込むかを選択します。

トリ師匠
トリ師匠
自分が使ってるサーバー環境によっぽど自信があるならローカルを選択したほうが速いかもと作者さんも言うてるの「CDN(簡単に言うとFont Awesome用の専用サーバー)」を選択しとくのが無難じゃと思うで。

⑤ ウィジェット用のCSS

読み込むウィジェット用CSSの種類を選択します。

トリ師匠
トリ師匠
使ってないウィジェット用CSSのチェックを外した分CSSの読み込み容量が減るでページ速度が上がるの。やから極力無駄なもんは省いたってな。設定は以上じゃ!

◆ウィジェットの設定はコチラをどうぞ!

 

 

圧縮・最適化とCSSの設定を終えて…

ぐず夫
ぐず夫
最近ワシの知らへん言葉が出てきすぎちゃうか?
トリ師匠
トリ師匠
そうは言っても実際本当に困ることはCSSが分からんちゅうことくらいじゃろ?
ぐず夫
ぐず夫
うぐぐ、確かに困ってはおらへんけど。
トリ師匠
トリ師匠
Javascriptも、Bootstrapも、Font Awesomeもそうやけど、今のところ使う用途あらへんやん。使いたい時に初めて今回設定した部分を変更してやれば構わんのじゃ。
ぐず夫
ぐず夫
そ、そんなもんか。
トリ師匠
トリ師匠
ブログをカスタマイズしてるうちに、「あれ、こんなこと出来へんのかいな」と思って調べてみた時に、初めて「Bootstrapを使ったら簡単なんや!」と気づく。それが学びっちゅうもんじゃろ?
ぐず夫
ぐず夫
知らん。めんどい。眠い。
トリ師匠
トリ師匠
(…会話にならんで)

以上で圧縮・最適化、CSS編の内部カスタマイズを終了します。

ではまた次回!