Luxeritas

ブログテーマをLuxeritasに変更してカスタマイズした12項目と困ってること

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

ブログサーバをお名前.comからXサーバーに移転したのと合わせて、ブログのテーマをSimplicityからLuxeritasに変更しました。

Luxeritasはボタンひとつでカスタマイズできる項目が多く、デフォルトのデザインが気に入ったので、ほとんどスタイルシート(CSS)を変更していません。

少ないながらも私がLuxeritasで行ったカスタマイズと、素人なばかりにつまづいた点をご紹介します。

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

ブログテーマを変更した経緯

Simplicityはカスタマイズが簡単で、インターネットで探すとかなり豊富な導入事例、トラブルシューティングが出てくる点が良かったです。Simplicityをブログで使っているユーザはとても多いからね。

自分でSimplicityのCSSをカスタマイズしておきながら、もっとシンプルな見た目でサクサク動くテーマがいいなぁと思ってました。

そんな時にLuxeritasを知りました。

Luxeritasは無料のテーマでありながら、

  • 見た目が超絶シンプル
  • ボタンひとつでカスタマイズできる項目が多い
  • SEO最適化済み
  • 高速
  • レスポンシブ対応
  • 不要なプラグインを一気に削除できそう

などなど理想すぎる利点が!

気に入らなかったら元のテーマに戻せばいいし、と思って試してみることにしました。

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

Luxeritasで行ったCSSのカスタマイズ

Luxeritasは「外観カスタマイズ」の項目でかなり色々と変更できるので、CSS(子テーマ)に変更を加えたのは最小限です。

Luxeritasはブラックグレー系カラーで統一されてるから、カラーを変更したのが多いかな。

見出しの変更

Luxeritasのデフォルト見出しはかなりシンプルなので、カラーと合わせて見出しを変更しました。飽きたらカラーのみ変更してデフォルトの見出しに戻すかも。

ルクセリタスの見出しカスタマイズ

H2見出しの変更

H2の見出しはカラーのみ変更しました。

H3見出しの変更

H3の見出しは少しデザイン性のあるものにしました。こちらのソースコードを参考に、四角の大きさや位置を変更しました。

見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)

H4見出しの変更

H4の見出しは、カラーのみ変更しました。

トップページの記事タイトルのホバー色を変更

リンクのホバー色はLuxeritasの外観カスタマイズで対応できるのですが、トップページの記事タイトルのホバー色は変更できなかったので、CSSで変更しました。

ホバー色とはPCでマウスオンした時の色です。

ルクセリタスのトップページホバー色カスタマイズ

関連記事のタイトル色・ホバー色を変更

同様に関連記事のタイトルとホバー色も変更できなかったので、CSSで変更しました。

ルクセリタスの関連記事ホバー色カスタマイズ

記事ページ下にある前後の記事のホバー色を変更

各記事ページの下にある前後の記事のホバー色を変更しました。

ルクセリタスの前後記事ホバー色カスタマイズ

ブログカードのホバー色を変更

ブログカードのホバー色がデフォルトではオレンジなので、CSSでピンクに変更しました。

ルクセリタスのブログカードカスタマイズ

ページネーションの色を変更

ページ下にあるページネーションの色はLuxeritasの外観カスタマイズでは変更できなかったので、CSSで変更しました。

ルクセリタスのページネーション色カスタマイズ

たくさんのカスタマイズが掲載されていてとっても参考になるこちらのページを参考にし、ページネーションの色を変更の部分のみ使わせていただきました。

Luxeritas(ルクセリタス)の見た目をオシャレに! 13のカスタマイズしたことまとめ【WordPressテーマ】

タグクラウドのデザインを変更

タグクラウドはデフォルトだと文字の大きさが統一しなくて個人的には見にくいので、タグクラウドの大きさを統一してアイコンにしました。

ルクセリタスのタグカスタマイズ

タグクラウドをシンプルに見せてくれるデザインが素敵なこちらの記事を参考にさせていただきました!

大きさやカラーは変更しています。マウスホバー時に色が逆転するような設定にしています。

WordPress無料テーマ「Simplicity2」カスタマイズ備忘録

記事アイキャッチの下に余白を入れる

Luxeritasのデフォルト設定だと記事トップにアイキャッチ画像が入りません。

記事トップにアイキャッチ画像を入れる場合は、functions.phpにソースコードを書くと記事トップにアイキャッチ画像が挿入されます。

さらにCSSにソースコードを書くとアイキャッチ画像の下に余白を入れられました。

ルクセリタスの記事にアイキャッチ表示

Luxeritasの開発者さんが書いているこちらの記事を参考にさせていただきました。

Luxeritasで個別記事のタイトル下にアイキャッチ画像を表示させる方法(プラグイン使わない版)

functions.phpに追加するコード

CSSに追加するコード

WordPress Popular Postsの見た目を変更

人気記事を表示するにはWordPress Popular Postsを使っています。

Luxeritasにはデフォルトで新着記事を表示するウィジェットがありますが、新着記事のデザインとWordPress Popular Postsのプラグインが作り出す人気記事のデザインが異なってしまいます。

ルクセリタスの人気記事カスタマイズ

人気記事のデザインをLuxeritas仕様の新着記事のデザインに合わせて、さらに順位も表示されるように。

こちらの記事を参考にさせていただきました!順位表示のバックグランドカラーをピンク色に変えました。

Luxeritasの人気記事表示プラグインが見づらい!

モバイルの記事を読むボタンカラーを変更

モバイルの「記事を読む」のボタンがデフォルトではグレーなので、ピンク色に変更しました。

ルクセリタスの記事を読むボタンカスタマイズ

ウィジェットのカスタマイズ

twitterのタイムライン埋め込みと、Instagramを連携をさせたかったので、ウィジェットで追加しました。

twitterのタイムライン埋め込み

Luxeritasのデフォルト機能でtwitterとFacebookのアカウント連携はできます。

twitterはタイムラインを埋め込みたかったので、ウィジェットで追加しました。

wordpressルクセリタスにtwitterウィジェット連携

twitterのプロフィールと設定>ウィジェットを選択し、新規作成を選びます。4つ出る表示リストの中から「Embeded Timeline」を選択し、自分のtwitterのアドレスを入力して「Preview」を押します。

ルクセリタスtwitter連携

「set customization options」を選択すると、ウィジェットの大きさを変更できます。「copy code」を押して、それをウィジェトのテキストとして入力します。

Instagramの連携

LuxeritasにはInstagram連携の機能はないようなので、Instagramと連携するために「Instagram Feed」というプラグインを使いました。

wordpressルクセリタスをインスタ連携

Instagram Feedのプラグイン設定画面>カスタマイズで、写真の枚数を3列9枚表示に変更しました。モバイルで見ると3列×3列にならずに1枚ずつ表示されるので、写真数は余り多くない方がいいと思います。

wordpressルクセリタスをインスタ連携

「フォローする」ボタンの色を変えました。「もっと見る」ボタンは外しました。設定変更が完了した後、[Instagram Feed]という文字をウィジェットのテキストで入力すれば、Instagram連携の完了です。

Luxeritasに変更して良かったこと

  • 本当に高速、スピードテストの結果が抜群に良くなった
  • 見た目がシンプル
  • 外観のカスタマイズが簡単
  • プラグインの数が減った

困っていること

私に知識がないため、ちょいと困っていることがあります。

H3見出しがヘッダー上帯状メニューに表示されてしまう

なぜかH3見出しがWordPressのヘッダー上帯状メニューに表示されます。

ルクセリタスのカスタマイズした見出しが帯状ヘッダーに表示されてしまう

タイミングによってヘッダー上帯状メニューに表示されたり、そのバックグラウンドに表示されたり、と症状が落ち着かないのですが、何が原因でこのような表示が出てしまうのかが不明です。どなたか原因わかったら教えてください...。

とブログで助けを求めていたら、なんと!このページでカスタマイズ記事を紹介したとみーさんからアドバイスいただきました。嬉しすぎる。

私がもともとCSSに書いていたH3見出しに誤りがありました。

以前に書いていたコード(現在は修正済)

どこを修正したのか。

それはh3:beforeとh3:afterの部分です。ここが何も指定がない状態になっていると、帯状メニューにもH3見出しの適用が入ってしまうようです。

「.post h3:beforeと.post h3:afterに変更すれば帯状メニューの見出し表示はなくなる」ととみーさんよりアドバイス。

ルクセリタスでは.postが記事に対してカスタマイズをする指定になります。とみーさんのおかげで今日も一つ勉強になりました。

かわいいルクセリタスのカスタマイズだけでなく、ブログカスタマイズ記事がとても参考になるとみーさんのブログはこちらです。

PCとインテリアが好きなアラサー独女の雑多なブログ

twitterのシェア数カウントがされない

なぜかtwitterのシェア数がカウントされないの。

SSL化以前の分はまだ引き継げてないのだけど、Luxeritas変更後のFacebookやPocketはカウントされてる。twitterだけなぜなのだー。どなたか原因わかったら教えてください...。

Luxeritasをアップデート

2018年7月にLuxeritas 3.2.3にアップデートしました。

アップデート後に行ったカスタマイズと、不要なプラグインの削除はこちらです。

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

本記事は私が運営する「急がば回れ!」ブログから移転させた記事です Luxeritasを使い始めて半年以上。Luxeritasの機能が結構増えていたのでそろそろアップデートしてみようかなと思って、Lux ...

Luxeritasのダウンロードはこちらからできます。こんな素晴らしいテーマを作ってくださった開発者さん、本当にありがとうございます。超気に入ってます。

Luxeritas Theme

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

-Luxeritas

Copyright© 急がば回れの裏側 , 2020 All Rights Reserved Powered by AFFINGER5.