ルクセリタスLuxeritasの26か所+αをカスタマイズ!高速・高機能無料テーマ

2019-02-12スタイリッシュ

 

高機能でスピード抜群の無料テーマ「ルクセリタス」を、いろいろカスタマイズしていますので、少しまとめてみます。

—- 2019/3/29 追記 —-
カスタマイズする事自体が楽しく、いろいろやってはみましたが、すべてが現在も当サイトで使っているカスタマイズではありません。
使えそうなものがありましたら、それぞれの方法を参考に、ご自身の判断と責任でお願い致します。

 

更にカスタマイズしたものについては、追記していきます。

 

 

ルクセリタスについて

 

関わっているサイトで有料テーマもあれこれカスタマイズしているのですが、自サイトはこの無料の「ルクセリタス」に固執していて、いろいろとカスタマイズをしています。

今のところテーマはこの一択と決めている「ルクセリタス」については以下の記事もご参考に。

 

バージョンと初期デザインについて

 

当サイトで使用中のバージョンは以下です。(記事作成時)

Luxeritas Child Themeバージョン: 3.0.0
Luxeritasバージョン: 3.5.7~

ダウンロードはこちら

ルクセリタスに用意されている「デザイン選択」からのデザイン変更はせずにデフォルトからカスタマイズしています。

一時、「rosea-et-rubrum」のデザインを設定していたので、ビフォーの画面がそちらになっている場合がありますが、たくさんのデザインカスタマイズをされる際は、デザインを選んでいると、余計な装飾が残る事もあり、それをまた打ち消していく必要がある為、デフォルトからされる事をお勧めします。

デザインファイルについては以下も参考にして下さい。

 

カスタマイズ

 

デフォルト → カスタマイズ後

※記事作成時の画面例です

 

デフォルトではとてもシンプルですが、カスタマイズもしやすいテーマです。
見た目のほとんどをカスタマイズしています。

 

使用したクラス名などの一覧は以下も参考にして下さい。

ルクセリタスでのアイコンフォントの利用方法は以下をご覧ください。

ルクセリタスでアイコンフォントを使う

 

難易度について

 

簡単なCSSのコピーで対応できるようなもの~FTP利用~PHP編集が必要なものなど、様々ですので、Web知識のない方にとっては、難しいと感じるものもあるかもしれません。

各カスタマイズごとに、難易度の目安を3段階で表示しています。

★  CSSコピーで可など簡単なもの
★★ 若干複雑?な工程
★★★ FTP利用必須や、PHPファイル編集

 

難易度:★

 

サイトタイトル・記事タイトル

サイトのタイトルと記事タイトルを揃えたカスタマイズについてです。

8284_03

サイトタイトル

8284_04
記事タイトル

 

簡単に好きなデザインにすることが出来ます。

 

グローバルナビ右寄せ

難易度:★

3561_15

グローバルナビの右寄せは以下のCSSでOKです。

/* ナビ右寄せ */
#gnavi ul {float: right;}

 

吹き出しの幅・テキスト位置

難易度:★

3561_16

吹き出しの幅指定や、テキストの中央寄せは以下のCSSでOKです。

//*吹き出し*/
.balloon {max-width: 600px;}
.balloon-left {text-align:center;}
.balloon-right {text-align:center;}

以下も参考にして下さい。

 

 

色変更系

難易度:★

カスタマイザーから設定できる色指定のまとめと、カスタマイズが必要な個所のクラス名などは以下をご覧ください。

 

固定ページの投稿日削除

難易度:★

サイトマップページやプライバシーポリシーなどから作成日、更新日を削除する方法は、公式サイトにも紹介されていますが、ほんの数行のCSSです。

子テーマのスタイルシート(style.css)に以下を追記します。

Font Awesome 4 の場合

/* 固定ページの更新日時を非表示 */
.page .meta .fa-clock-o,
.page .meta .fa-repeat,
.page .meta .date {
display: none;
}

Font Awesome 5 の場合

/* 固定ページの更新日時を非表示 */
.page .meta .fa-clock,
.page .meta .fa-redo-alt,
.page .meta .date {
display: none;
}

以下も参考にして下さい。

 

 

サイドバータイトル

難易度:★

 BEFORE → AFTER

 

 

この方法は以下でご覧ください。

 

タグクラウドウイジェット

難易度:★

 BEFORE → AFTER

 

付箋風にしています。

 

上記3パターンのカスタマイズ方法は以下でご覧ください。

 

カテゴリーウィジェット

難易度:★

9145_01

9145_02

この方法は以下でご覧ください。

 

 

ページャーリンク

難易度:★

6795_12

 

6795_10

6795_09

 

囲み枠の外し方と、デザイン変更を簡単に3パターン紹介しています。
この方法は以下でご覧ください。

 

Next/Prexナビ リンク色変更

難易度:★

リンクの色とサムネイルの枠線色を自サイトテーマカラーに変更しています。

6830_02

 

6830_03

この方法は以下でご覧ください。

 

PAGETOPボタン

難易度:★

表示位置を変えたりやサイズを変えたり、モバイルでの表示方法を設定するなどのプチカスタマイズ。

7348_22
スマホ

 

7348_21
全幅表示

この方法は以下でご覧ください。

 

 

記事一覧デザイン

難易度:★

カード型(1)

 BEFORE → AFTER

3296_25
 

3296_24

 

アドセンスのインフィード広告に寄せたデザインにしました。

カテゴリー名も左上に出しています。

 

この方法は以下でご覧ください。

 

 

カード型(2)

 BEFORE → AFTER

8743_02

8743_01

 

この方法は以下をご覧ください。

 

タイル型(1)

上記のデザインは以下でご覧ください。

 

タイル型(2)

8566_10

上記のデザインは以下でご覧ください。

 

 

ブログカード

難易度:★

 BEFORE → AFTER

 

3296_15

 

3296_10

 

影付きカード、オンマウスでふわっと浮き上がる仕様です。

この方法は以下でご覧ください。

 

新着記事ウィジェット

難易度:★

6851_09

 

6851_04

カスタマイズ内容

  • サムネイルサイズ変更
  • リンクホバー色を自サイトのテーマカラーに合わせて変更
  • 記事抜粋の非表示
  • 投稿日を表示

この方法は以下でご覧ください。

 

サイト内検索フォーム

難易度:★~★★★

ウィジェット用のCSSのみ編集で可能なものと、PHP編集で改造するもの

7017_03
デフォルトデザイン
 ウィジェット用CSS変更のみ
7017_01
ウィジェットデザイン

 

 フォーム改造(PHP編集)
7017_04
フォーム改造デザイン

この方法は以下でご覧ください。

 

記事上にアイキャッチ画像挿入

難易度:★

7552_05

PFPファイルへの追記になりますが、ルクセリタスのカスタマイザーからのファイル編集で、コピペで可能な為、難易度1です。

以下をご覧ください。

 

 

難易度:★★

ヘッダー上の帯状メニュー

難易度:★★

5702_03

 

5702_06

この方法は以下でご覧ください。

 

フッターにメニュー

難易度:★★

この方法は以下でご覧ください。

 

カテゴリー表示(メニュー利用)

難易度:★★

 BEFORE → AFTER

 

カテゴリーウィジェットは、表示カテゴリーの順番を変更出来ませんが、メニュー機能を使って順番の入れ替えも可能です。また、カテゴリーに限らず固定ページやカスタムリンクも組み込めます。

 

この方法は以下でご覧ください。

 

記事一覧にインフィード広告

難易度:★★

カード型で記事一覧を表示すれば、うまく馴染みました。

この方法は以下でご覧ください。

 

 

カルーセルデザイン

難易度:★★

 BEFORE → AFTER

 

3296_14

 

3561_04

 

影付きタイルカード、オンマウスでふわっと浮き上がる仕様です。

 

この方法は以下でご覧ください。

 

 

目次デザイン

難易度:★★

 BEFORE → AFTER

 

3296_16

 

3296_08

上記はアイコンフォントを使用しています。

アイコンフォント未使用は以下

3481_04

 

この2つの方法は以下でご覧ください。

 

カテゴリー説明文でパンくずリスト風メニュー

難易度:★★

カテゴリー一覧のページに、カテゴリーの説明文を使って、階層をフォルダ表示して同カテゴリー内の別カテゴリーへのリンクを「パンくずリスト風」に表示しています。

以下は「WordPress」→「カスタマイズ」のカテゴリー一覧ページの例です。

 

 更にスマホでも見やすいデザインに変更
PCだと横並びの方が見やすいかもしれませんが、スマホで見ると適当に改行されてしまい見にくいので縦並びに変更。

 

この方法は以下でご覧ください。

 

 

難易度:★★★

関連記事にインフィード広告

難易度:★★★

この方法は以下でご覧ください。

 

 

モバイルメニューの改造

難易度:★★★

モバイルでのグローバルナビメニューが、副項目がある場合の開閉動作不良の為、以下の処理を行いました。

 「Menu」を削除する代わりに「Home」ボタンを追加しました。

 

この方法は以下でご覧ください。

 

 

ビジュアルエディタのスタイル

難易度:★★★

3296_09

ビジュアルエディタの「スタイル」で装飾コードを選択できるようにしています。

 

この方法は以下でご覧ください。

 

サイトマップから個別に除外とデザイン微調整

難易度:★★★

404 Not Foundなど、サイトマップに必要のないページを載せないように変更しました。

ついでに、左側のラインがネストしてくるとごちゃごちゃするので少しスッキリさせました。

この方法は以下でご覧ください。

 

 

  • WordPressランキング
  • にほんブログ村 IT技術ブログ Webサイト構築へ