/*Font Awesome*/ /*Prism.js*/

[入門編] Luxeritasデザインカスタマイズまとめ

  • 速い
  • カスタマイズしやすい
  • SEOに強い

といった観点からLuxeritas使用しております。

とにかく表示速度がめちゃめちゃ速いです。

そしてデフォルトのデザインがシンプルな分、カスタマイズ好きにはたまらないですね😏

ちなみに💡

LuxeritasはWordPressの公式ディレクトリ登録テーマではないので、テーマの検索欄では出てきません。

ということでダウンロードはこちらから😄

カスタマイザーからできること

フォントスタイルの変更

本文は読みやすさ重視でNoto Sansを使用。

Luxeritas→外観→カスタマイズ→字体(フォントファミリー)

で変更可能。

かわいいフォントがあったので、タイトル、サイドバー、フッターのフォントをsushikiに変更しました。

フォントの色を変更

本文は#6a859c、

タイトル(ヘッダーリンク)は#ba91e2、

キャッチフレーズ(ヘッダー)は#24e5df、

を使用しています。

こちらは 

Luxeritas→外観→カスタマイズ→文字色 

から変更可能。

枠線の色を変更

デフォルト(グレー)から#95e5e2に変更。

こちらも 

Luxeritas→外観→カスタマイズ→背景色/枠線色 

から変更可能です。

ヘッダーナビ(グローバルナビ)の色を変更

Luxeritas→外観→カスタマイズ→ヘッダーナビ(グローバルナビ) 

で背景色をミントグリーンに。だいぶ統一感が出てきました。

検索ボックスの表示

Luxeritas→外観→カスタマイズ→ヘッダーの上の帯状メニュー 

から、検索ボックス表示に☑️、色もピンクに変更。

RSSとFeedlyは非表示に。

目次のデザインを変更

Luxeritas→外観→カスタマイズ→目次 

から色を変更。

「自動で目次を挿入する」もON。

SNSシェアボタンを白に

Luxeritas→外観→カスタマイズ→SNSシェアボタン(1) からボタンの種類を 可変幅フラットタイプ に変更。SNSシェアボタン(2) から LINE を追加しました。

パンくずリンクの色を変更

Luxeritas→外観→カスタマイズ→パンくずリンク から文字色をピンクに。

CSSで編集したこと

CSSの編集は、

ダッシュボード画面のLuxeritas → 子テーマの編集 → style.css

から可能です。

子テーマを入れていない方は、子テーマ導入を強くお勧めします。

と言うのも、

親テーマを直接カスタマイズすると、

親テーマがバージョンアップした時にカスタマイズ内容が消えてしまうからです。

一方、子テーマは親テーマを元に作られているものの、保存先は別ファイルです。

従って親テーマが更新されても、子テーマに編集した内容はそのまま残すことができるのです。

また、子テーマ編集時の注意点があります。

CSSシートの左側に行数が書かれていますが、

36行目以前の元々書かれている部分を消すと正しく動作しなくなる可能性があるので、

必ず37行目以降から編集するようにしてください。

タイトルのフォント変更

タイトルとその他一部をsushikiに変更しました。

記事内見出しの色を変更

記事内見出しの左側の線の色を、グレーからピンクに変更しました。下線にするか考え中。

/* 記事内見出しH2 */ 
.post h2{
      border-color: #ef97e8;
}

メタ情報のデザインを変更

メタ情報とは、タイトル下にある投稿日などのデータのこと。色を黒→パープルに、下線は無くしました。個人的にはぐっと雰囲気変わるお気に入りポイントです。

/* メタ情報 */
.meta i.fa[class*="fa-"], .post .meta i.fa[class*="fa-"], .meta, .post .meta, .meta a {
 color: #ba91e2;
 text-decoration: none;
}

記事下NextとPrevの色変更

デフォルトでは文字色は暖色系グレー、ホバー色は赤なのですが、寒色系グレーとピンクに変更しました。

/* NextとPrev */
 #pnavi a{
  color: #8e8e9c;
 }
 #pnavi a:hover {
 color: #ef97e8;
 }

コメント欄のデザイン変更

コメントボックスと送信ボタンの色を変更


#comments textarea{
 border-color:#24e5df;
 }
 #comments [type="submit"]{
 color:#ba91e2; border-color:#ba91e2; background:#fff;
 }
 #comments [type="submit"]:hover{
 color:#ef97e8; border-color:#ef97e8;background:#fff;
 }

参考サイト

第0版 こちらのサイトを参考にさせていただきました!

とってもかわいらしいデザインな上にとっても分かりやすいです😄

カスタマイズして思ったこと

めちゃめちゃ楽しいです。CSSやればやるほど奥が深くて楽しい😄記事の終わらせ方が分からなくなっちゃったのでこの辺で😛