Luxeritas 3.2.3にアップデート！カスタマイズと不要なプラグイン削除

本記事は私が運営する「急がば回れ！」ブログから移転させた記事です

Luxeritasを使い始めて半年以上。Luxeritasの機能が結構増えていたのでそろそろアップデートしてみようかなと思って、Luxeritas 3.2.3にアップデートしました。

Luxeritas 3.2.3にアップデートしてカスタマイズしたこと、不要になって削除したプラグインを記しておきます。

現在メインの「急がば回れ！」ブログはWordPressテーマ「ストーク」、「急がば回れの裏側」ブログはWordPressテーマ 「WING（AFFINGER5）」を使っています。

Luxeritasの機能が向上してる！

私がLuxeritasを使い始めたのは2017年9月。シンプルなテーマだけどそれをちょこちょこカスタマイズしていたら、現在のような外観に。

それだけでも満足だったのだけど、Luxeritasはさらなる進化を遂げていました。私がLuxeritasをインストールした時からアップグレードされていた機能は、

• 目次が使える
• 定型文登録できる
• シンタックスハイライターが使える
• デザインファイルが使える
• サイトマップページの自動生成

などなど。

自分が使っている機能が標準で使えるようになっているので、これはアップデートしてみようと思ったのでした。

Luxeritasのアップデートをしてみる

Luxeritasのアップデートをするには、「アップデート用テーマ」というものを使います。

アップデート手順はこうです。

1. LuxeritasのDLページから「アップデート用テーマ」をDLしておく
2. LuxeritasのDLページからアップデート用の「3.2.3の親テーマ」と「子テーマ3.0.0」をDLしておく
3. WordPress管理画面>テーマ>新規追加で「アップデート用テーマ」をインストールし有効化
4. テーマの新規追加で「3.2.3の親テーマ」をインストール
5. テーマの新規追加で「子テーマ3.0.0」をインストールし有効化

私は「子テーマ3.0.0」のインストールの段階でつまづきました。既に子テーマがインストールされているというメッセージが出て、新しいものがインストールできないのです。

ファイルサーバから古い子テーマを削除して、新しい子テーマをインストールするという方法を取りました。

子テーマをインストールしたら有効化するのを忘れずに！カスタマイズは全て子テーマで行います。

Luxeritasテーマアップデート方法の詳細はLuxeritasの公式ページで説明されています。

Luxeritas テーマのアップデート方法

デザインファイルを使ってみる

シンプルなデザインが特徴のLuxeritasですが、現在はデザインファイルが使えるようになっています。これによりちょっとおしゃれな外観にも対応！

私は「musica in paradisum」のデザインファイルを使ってみることにしました。もともとカスタマイズしていた外観にも近かったし。

「musica in xxx」のデザインファイルのいいところは、カテゴリーのラベルを自動でつけてくれるところ。

他のブログで見ていてカスタマイズしようかなーとちょうど考えていた部分だったので、Luxeritas様ありがとう！という感じです。

デザインファイルはこちら。

Luxeritasデザインファイル

アップデート後に行ったカスタマイズ

さて、本題のLuxeritas 3.2.3へのアップデート後に行ったカスタマイズ項目です。

初めてLuxeritasをインストールした時にかなりの項目をカスタマイズしたし、外観のカスタマイズでもかなり変更できるので、今回はちょっと修正を入れたり追加したりするくらいでした。

カスタマイズした項目はこちら。

• 見出しのカスタマイズ
• 引用スタイルのカスタマイズ
• リスト表示の見た目カスタマイズ
• 目次の見た目修正
• サイトマップの見た目修正
• 「シェアお願いします」の下線の色変更
• トップページのカテゴリーラベルのカラー変更
• モバイルで見た時の「記事を読む」カラーの変更

Luxeritasを初めてインストールした時にしたカスタマイズはこちらで。

見出しのカスタマイズ

h2とh4はカラーのみ変更しました。

h3見出しがh2見出しとあまり差がなくてつまらなかったのでわかりづらかったので、h3見出しは全く別のものにカスタマイズしてみました。

Luxeritasは記事の見出しを変更する場合は、.postという書き方をするのが注意点です。

h2の見出し

h2はafterのbackgroundでカラーを指定します。

/* h2の見出しカラー変更 */
.post h2 after{
    background: #ff667c;
}

h3の見出し

h3の見出しはサルワカさんのアイコンフォントを使った見出しを参考にさせていただきました！

基本的にサルワカさんのサイトに記載されているコードを踏襲していますが、以下のコードを追加しています。

• Luxeritasの設定を考慮してマージンの設定を追加

.post h3のpadding設定の前に「margin-left: 0 !important;」を追加して、アイコンの先頭位置を左寄せにしました。

• Chromeで「Font Awesome 5」のアイコンが表示されないエラーが出たので「font-weight」を追加

font-familyの次の行で「font-weight: 900;」を指定することで、Chromeでアイコンが表示されないエラーを回避しました。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

h4の見出し

h4はborder left colorでカラーを指定します。

/* h4の見出しカラー変更 */
.post h4{
    border-left-color: #ff667c;
}

ウィジェトの見出し

ついでにサイドウィジェットの見出しカラーも変更します。

/* サイドウィジェットの見出しカラー変更 */
#side h3,#side h4,#foot-in h4{
    border-left:8px solid #ff667c;
}

引用スタイルのカスタマイズ

デフォルトの引用スタイルはそっけないので、デザイン性のある引用スタイルにしました。

こちらもかわいいカスタマイズが豊富なサルワカさんの引用スタイルを参考にさせていただきました！

CSSで作る！魅力的な引用デザインのサンプル30（blockquote）

Luxeritasは記事の引用スタイルを変更する場合は、.post blockquoteという書き方をするのが注意点です。

リスト表示の見た目カスタマイズ

リストボックスもデザイン性がほしかったので変更。完成系はこちら。

使いまくってすみません。サルワカさんありがとう！

コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに

Luxeritasは記事のリストボックスデザインを変更する場合は、.post ul（番号付きリストを変更する場合はol）という書き方をするのが注意点です。

目次の見た目修正

さて、Luxeritasでリストボックスのデザインを変更すると、そのカスタマイズが目次にも反映されてしまいます。

目次のボックスの中にもう一つリストボックスが入っちゃったような感じ。これは困るぜ。

というわけで、目次（TOC）ではリストボックスの書式（背景と枠線）が反映されないようにCSSに書きます。

/* TOCのカスタマイズ */
#toc_container ul {
    background: transparent ; /* 背景を透明に */
    border:none ; /* 枠線を消去 */
}

デフォルトでは文字に下線が入っているのと、⚫︎のアイコンが入っているので、ついでにそれを消去しました。

#toc_container a {
    text-decoration:none; /* 下線消去 */
}

ul.toc_list,
.toc_list ul {
    list-style: none; /* ボタン消去 */
}

カラーのカスタマイズは外観カスタマイズで実施しています。

サイトマップの見た目修正

リストボックスのデザインはサイトマップにも適用されます。

目次と同じくサイトマップに適用されているリストボックスデザインの背景と枠線の書式をクリアします。

/* サイトマップの枠線消去 */
#sitemap ul{
    background: transparent ; /* 背景を透明に */
    border:none ; /* 枠線を消去 */
}

これで通常スタイルに戻ります。

「シェアお願いします」の下線の色変更

記事下にある「シェアお願いします」の下線のカラーをなんとなく変えたかったので変えました。

/* シェアお願いしますの下線色変更 */
.sns-msg h2 {
    border-bottom: 5px solid #75a9ff;
}

トップページのカテゴリーラベルのカラー変更

トップページのカテゴリーラベルを目立たせたかったので、カラーを変更しました。

/* トップページのカテゴリーラベルカラー変更 */
div[id^=tile-] .meta .category a:first-child{
   background: #75a9ff;
}

モバイルで見た時の「記事を読む」カラーの変更

PC画面の「記事を読む」ボタンは外観カスタマイズでカラーが変えられますが、モバイルの「記事を読む」ボタンはカラーが変わっていませんでした。

同じように色を合わせたかったのでカスタマイズ。

/* モバイルの記事を読むカラーを変更 */
.read-more-link{
    border: solid #fff !important;
    color: #fff !important;
    background: #ffb2bc;
}

枠線やカラーが反映されなかったので、!importantを入れました。

不要なプラグインを思い切って削除

Luxeritas 3.2.3は標準搭載の機能が増えているので、これまで使っていたプラグインがいくつか不要になりました。

アップデート後に削除したプラグインはこちら。

• AddQuicktag
• Crayon Syntax Highlighter
• Table of Contents Plus
• PS Auto Sitemap
• Instagram Feed

AddQuicktag

Luxeritasの機能で定型文を登録できるようになりました。なので、AddQuicktagは不要です。

Luxeritas>定型文登録から定型文を登録しておくと、記事投稿画面で定型文が入力できるようになります。登録はAddQuicktagと同様の手順です。

h2・h3・h4見出しはサンプル登録にチェックを入れるだけでOK。だいぶバーがすっきりして良かった。

Crayon Syntax Highlighter

定型文登録と合わせてショートコードも登録でき、ソースコードを美しく見せてくれるシンタックスハイライターにも対応。

シンタックスハイライターはLuxeritasカスタマイズ記事でしか使ってないけど、もうCrayon Syntax Highlighterは不要。

Luxeritas>定型文登録>ショートコードでCSSを選択し、シンタックスハイライターの見た目を7種類から選びます。

Default

Dark

Okaidia

Twilight

Coy

Solarized Light

Tomorrow Night

使う時は記事投稿画面で「ショートコード」を選択して、テキストを入力すればOK

Table of Contents Plus

Luxeritasは目次対応していて、外観カスタマイズから簡単にカラーを変えられます。

Table of Contents Plusは不要になりました。削除。

PS Auto Sitemap

固定ページ作成画面の右側のテンプレートでSitemapを選べば、簡単にサイトマップページが作れます。

PS Auto Sitemapもお世話になったけど削除。

Instagram Feed

最近はサイドウィジェットにInstagramの写真を表示していなかったので使ってなかったけど、Instagram Feedも削除しました。

ヘッダー上の帯状メニューにSNSのボタンを表示させることができます。新しくInstagramボタンが増えたのでそちらで対応することにしました。

嬉しい進化を遂げているLuxeritas

どんどん進化しているLuxeritas。

外観カスタマイズやその他設定でカスタマイズできる項目が多く、私のようにwordpressやHTMLの知識がなくても結構いろいろ変更できるのは素晴らしいです。

プラグインの数を最小限に抑えられるのも本当にありがたし。

関連記事：Luxeritas 3.2.3にアップデート！カスタマイズと不要なプラグイン削除