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

ブログ運営

ルクセリタス3.2.3へアップデート

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

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

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ですが、現在はデザインファイルが使えるようになっています。これによりちょっとおしゃれな外観にも対応!

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

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

他のブログで見ていてカスタマイズしようかなーとちょうど考えていた部分だったので、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でアイコンが表示されないエラーを回避しました。

h4の見出し

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

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

ウィジェトの見出し

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

ルクセリタスのサイドウィジェット見出し変更

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

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

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

ルクセリタスの引用スタイルのカスタマイズ

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

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

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

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

ルクセリタスのリスト表示のカスタマイズ

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

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; /* ボタン消去 */
}

ルクセリタスの目次カスタマイズ

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

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

リストボックスのデザインはサイトマップにも適用されます。そのままだとサイトマップはこんな感じになっちゃいます。

ルクセリタスのサイトマップのカスタマイズ

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

/* サイトマップの枠線消去 */
#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

ルクセリタスの定型文

記事投稿画面で「定型文」を選択します。だいぶバーがすっきりして良かった。

ルクセリタスの定型文

使いたい定型文を選択して、文字を入力すればOK

Crayon Syntax Highlighter

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

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

ルクセリタスのショートコードCSSの登録

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

Default

ルクセリタスのシンタックスハイライター「default」

Dark

ルクセリタスのシンタックスハイライター「dark」

Okaidia

ルクセリタスのシンタックスハイライター「okaidia」

Twilight

ルクセリタスのシンタックスハイライター「twilight」

Coy

ルクセリタスのシンタックスハイライター「coy」

Solarized Light

ルクセリタスのシンタックスハイライター「solarized-light」

Tomorrow Night

ルクセリタスのシンタックスハイライター「tomorrow-night」

私は「Okaidia」を使っています。

ルクセリタスのショートコード利用

使う時は記事投稿画面で「ショートコード」を選択して、テキストを入力すれば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の知識がなくても結構いろいろ変更できるのは素晴らしい。

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

最後まで読んでくれてありがとう。
Hasta luegui!!!

こんな記事も読まれています

この記事を書いた人

moni

10年勤めた会社を退職し、スペイン語とスペイン文化+αを学ぶため、2015年6月よりスペインのセビージャ暮らし。日々の生活で気づいたこと、スペイン語のこと、セビージャのこと、などなどをブログに記録。熱中したら止まらないB型。Sevilla tiene un color especial〜♬

ブログ運営

Posted by moni