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

[随時更新中] Luxeritasデザインカスタマイズまとめ

2020年3月23日

サイトのテーマはLuxeritasを使用しております。

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

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

ダウンロードはこちらから💡

デザインカスタマイズの前に:子テーマ導入のすすめ

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

子テーマについて詳しくはこちら

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

基本的な色・レイアウトデザイン等はカスタマイザーから変更可能です。

CSSで編集したこと

CSSを使うと、より好みのデザインにできるようになります。

スタイルシート(style.css)の場所

CSSの編集は、

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

から可能です。

子テーマ編集時の注意点

必ず37行目以降から編集すること

スタイルシートに書かれていますが念のため💡

36行目以前の元々書かれている部分を消すと正しく動作しなくなる可能性があるので、必ず37行目以降から編集するようにしてください。

タイトルのフォント変更

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

ヘッダーのカスタマイズ

/* ヘッダー背景 */
#head-in {
    background: repeating-linear-gradient(90deg, #edf5f4, #edf5f4 10px, #f6faf9 0, #f6faf9 20px);
}

記事内見出しの色を変更

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

/* 記事内見出し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やればやるほど奥が深くて楽しい😄記事の終わらせ方が分からなくなっちゃったのでこの辺で😛