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

2017-09-25ブログ運営

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

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

Luxeritasはボタンひとつでカスタマイズできる項目が多く、デフォルトのデザインが気に入ったので、ほとんどスタイルシート(CSS)を変更していないのですが、少ないながらも私がLuxeritasで行ったカスタマイズと、素人なばかりにつまづいた点をご紹介します。

スポンサーリンク

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

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

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

そんな時にLuxeritasを知りました。Luxeritasは無料のテーマでありながら、

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

などなど理想すぎる利点が!気に入らなかったら元のテーマに戻せばいいし、と思って試してみることにしました。すごく満足してるからもう戻さないけどね!

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

Luxeritasは外観カスタマイズの項目でかなり色々と変更できるので、CSS(子テーマ)に変更を加えたのは最小限です。Luxeritasはブラックグレー系カラーで統一されてるから、カラーを変更したのが多いかな。

見出しの変更

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

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

H2見出しの変更

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

H3見出しの変更

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

H4見出しの変更

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

タグクラウドをシンプルに見せてくれるデザインが素敵なこちらの記事を参考にさせていただきました!大きさやカラーは変更しています。マウスホバー時に色が逆転するような設定にしています。

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

Luxeritasのデフォルト設定だと記事トップにアイキャッチ画像が入らないのですが、functions.phpにソースコードを書くと記事トップにアイキャッチ画像が挿入され、さらにCSSにソースコードを書くとアイキャッチ画像の下に余白を入れられました。

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

というわけで、こちらのページを参考にさせていただきました。

functions.phpに追加するコード

CSSに追加するコード

WordPress Popular Postsの見た目を変更

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

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

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

人気記事のデザインをLuxeritas仕様の新着記事のデザインに合わせて、さらに順位も表示されるように。こちらの記事を参考にさせていただきました!順位表示のバックグランドカラーをピンク色に変えました。

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

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

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

 

CSSカスタマイズ時につまずいたこと

あまり順番を意識せずにソースコードを入力していってたのですが、モバイル用の設定は最後に記載するべきです。

WordPress Popular Postsの見た目カスタマイズ用のソースコードを入れた際に、モバイルには反映されるのにPCで反映されないな〜?と思ってたらモバイル用の設定(モバイルの記事を読むボタンカラーを変更)の後ろに書いていたのでした。バカ…。

 

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

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が記事に対してカスタマイズをする指定になります。とみーさんのおかげで今日も一つ勉強になりました。

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

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

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

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

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

 
ブログはエックスサーバーで運用中です。