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

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

2020年5月2日

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

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

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

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

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

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

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

基本的なデザインはカスタマイザーから可能です

  • レイアウトデザイン
  • 色(文字・背景・枠線)
  • フォントの種類

等の基本的なデザインはカスタマイザーから変更可能です。

子テーマのCSSを編集する方法

カスタマイザーだけでも結構良い感じのデザインにできますが、子テーマのCSSを編集するとより好みのデザインにできます。

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

CSSの編集は、

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

から可能です。

子テーマ編集時の注意点

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

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

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

CSSで編集したこと

タイトルのフォント変更

外部(デフォルトで装備されている以外の)フォントを使用しています。

タイトルとその他一部をsushikiに変更しました。→現在はロゴたいぷゴシックを使用しております。

フリーフォントでもWebフォント化されていない場合、自力でWebフォントに変換する必要があります。難しそうに聞こえますがやってみると案外簡単です。

詳しくは以下の記事を参考にしてみてください。初心者歓迎。

日本語Webフォントを自作する方法 写真入り5ステップで簡単

ヘッダーのカスタマイズ

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

他のデザインも見てみたい方はこちらの記事もチェックしてみてください。

[Luxeritas] CSSで出来るヘッダーデザインカスタマイズまとめ

記事内見出しの色を変更

記事内見出しの左側の線の色を変更しました。下線にするか考え中。

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

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

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

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

記事下NextとPrevの色変更

デフォルトでは文字色は暖色系グレー、ホバー色は赤なのですが、サイト全体の雰囲気に合わせて変更しました。

/* NextとPrev */
 #pnavi a{
	 color: #ef97e8;
	 margin: -1px;
         border: 1px solid #c6eeee;
}
#pnavi img {border-color: #c6eeee;}
#pnavi a:hover {color: #ba91e2;}
#pnavi a:hover > img {border-color: #ba91e2;}

参考:[luxeritas] Next/Prevナビゲーションのデザインカスタマイズ

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

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

#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;
 }

シンタックスハイライターの導入

<pre><code class="language-markup">
 <p>コードを良い感じに表示しているこれです</p>
</code></pre>

[シンタックスハイライター]Prism.jsでコードを綺麗に表示

参考サイトリンク集

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

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

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

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