【Luxeritas】ルクセリタス専用メニュー｜外観カスタマイズ設定

「Luxeritas(ルクセリタス)」専用メニュー内の「外観カスタマイズ設定」について解説します。

サイト(ブログ)の見た目に影響する内容が多く、変更部分を確認しながら設定できますので、自分の好みに合わせて細かい調整を行うことができます。

どの項目が何に対して影響しているのか？をしっかりと理解しながら作業をしていきましょう。

また「PC」「タブレット」「スマホ」など、アクセスするデバイスに応じて表示方法を切り替える機能が備わっており、外観カスタマイズの画面内で各デバイスごとの表示を変更・確認しながら設定を行うこともできます。

カスタマイズ(外観)

管理画面左側のメニュー内に、WordPress の基本設定項目とは別に「Luxeritas」という項目が追加されています。

その中から「カスタマイズ(外観)」をクリックすることで、全３３項目の設定を変更、確認できます。

設定項目が多く一度に全部やるのは大変なので、時間があるときに行うか、複数回に分けて設定を完了させるのがいいかもしれません。

とりあえず「何ができるのか」だけを確認しておく必要はありますので、各項目ごとに詳細を見ていきましょう。

1.サイト情報/サイトアイコン

サイトのタイトルとキャッチフレーズを確認、変更できます。

WordPress 側の設定が反映されていますので、インストール時に設定した場合など、変更の必要がない場合はそのままで OK です。

この項目以外にもいくつか、WordPress 側の設定と重複している項目がありますので、その場合はどちらか一方で設定を行うことで両方に反映されます。

また、ここでは「サイトアイコン」を設定できます。

「512×512以上の正方形」の画像を自分で用意する必要がありますが、アイコンの表示によって自分のサイトに「特別感」が出てきますので、設定することをおススメします。

2.全体レイアウト

いくつか設定できる項目がありますが、最初はデフォルト設定のままでも特に問題はありません。

コンテナの最大幅

コンテナの最大幅(ページの横幅)を設定できます。

コンテナは、サイドバーまでを含めたコンテンツの表示領域のことです。

例えば PC ではウインドウのサイズを訪問者が自由に変更できますので、そのサイズによってページの表示が変化することになります。

コンテナの最大値を設定することで、画面をフルスクリーンで表示した場合などでも、設定値(最大値)以上の表示サイズにはならないことになります。

数値が大きくなるほど横長のサイトになり、画面の横幅いっぱいに文章が表示されて読みづらいサイトになってしまいますので、デフォルト設定よりも数値を大きくする場合は注意してください。

全体イメージ

サイトの背景色を「ホワイト」と「ブラック」から選択します。

背景色の変更はサイトのイメージを大きく変えてしまうので、どちらかを最初に決めて、途中で変更しない方がいいでしょう。

ブラックに変更した場合は、サムネイル画像や文字の装飾部分など、ブラック背景用の色設定を行うと思いますので、もしも後でホワイトに戻したいと考えた時に、大幅な修正が必要になる可能性も頭に入れておいた方がいいでしょう。

記事一覧の表示方法

「抜粋＋サムネイル」と「記事全文(moreタグまで)」のどちらかを選択します。

記事内に more タグを使うことで、一覧に表示させる文章量を調整できますが「抜粋＋サムネイル」の設定のままでも大丈夫です。

また、ページャー機能を使うことで、記事一覧ページにページャー表示(ページ数の表示)を設定できます。

記事数の把握がしやすくなるため、デフォルトの ON のままで OK です。

投稿ページ

「関連記事の表示」と「ナビゲーション表示」を設定できます。

投稿ページのコンテンツ領域の下に、関連記事や、前の記事、次の記事などを自動で表示してくれます。

訪問者のサイト滞在時間 UP につながりますので、デフォルトの ON のままにしておきましょう。

固定ページ

「ナビゲーション表示」や「固定フロントページの記事タイトル表示」設定を行えます。

固定ページから固定ページへ誘導をすることはあまりないため、デフォルトでナビゲーションは OFF になっています。

3.グリッドレイアウト

ここでは、記事一覧ページの表示方法に関する設定を行えます。

「通常」「リスト」「カード」の３種類のタイプから設定できますので、表示を確認しながら好みのタイプを選択してください。

また、リンク文字列の文章や抜粋の文字数なども設定できますので、こちらも表示を確認しながら設定を行ってください。

最初はとりあえずデフォルト設定のまま使い、後で気になった時に設定を変更する…ということもできますので、変更可能部分をチェックしておくだけでも十分です。

4.カラム操作

カラムは「コンテンツ表示領域の縦列」のことで、２カラムなら２列、３カラムなら３列となります。

２カラム以上でメインコンテンツ(記事)とサイドバーの組み合わせになりますが、アクセスするデバイスによって表示方法が変化しますので、必ずここで設定したカラム数が有効になるわけではありません。

「Luxeritas(ルクセリタス)」のデフォルト設定では「２カラム右サイドバー」となっています。

情報発信サイトなど、投稿ページ(記事コンテンツ)を主体とする場合は視覚的に「左側にメインコンテンツを置く」のが推奨されているため、デフォルトでこの設定になっていると思われます。

PC とスマホで表示方法の違いを出したくない場合や、余計なモノを徹底的に省いたサイト構成を目指す場合は「１カラム」を選択することもあります。

３カラムは PC からのユーザーを想定して、一画面当たりの情報量を増やして、あえてごちゃごちゃした見た目のサイトを作る場合に選択します。

例えば「まとめサイト」のような、メインコンテンツの質が低い代わりに記事の量が膨大な場合、複数の記事へ寄り道させることで訪問者の滞在時間を稼ぐことができます。

特にこだわりがない場合や、最適なカラム構成が分からない場合は、とりあえずデフォルト設定のまま使いましょう。

5.ヘッダー/フッター

ヘッダー(一番上の部分)とフッター(一番下の部分)の表示に関する設定です。

表示位置や枠線などの設定ができますが、ここもとりあえずデフォルトのままで問題ないと思います。

6.コンテンツ領域とサイドバー

コンテンツ領域の枠線の設定と、サイドバーの幅の変更設定が行えます。

「コンテナの幅」で設定した以上の数値(横幅)にはならないため、例えばサイドバーの幅を大きくした場合には、結果的に記事コンテンツの表示領域が小さくなっていくことになります。

こちらもまずはデフォルト設定で運用し、広告を貼る場合など、必要がでてきたら最適なサイズに調整するのが良いと思います。

7.ディスカッション

コメント欄の表示や、トラックバック URL の表示設定を行えます。

表示しない場合はチェックを外します。

私は全て表示しない設定にしています。

8.細部の見た目

「キャッチフレーズ」「ホームのテキスト」「Page Top ボタン」に関する設定を行うことができます。

キャッチフレーズ＝サイト説明文なので、すでに設定している場合は変更の必要はありません。

ホームのテキストはパンくずリンクに表示されるテキストで、デフォルトでは「Top」となっていますが、私は「Home」に変更しています。

Page Top ボタンは、ページを一番下にスクロールした時に表示される、クリックすることでページの一番上に戻れるアレです。

アイコンの種類や色の設定ができますので、好みに応じて手変更してください。

9.メタ情報の表示

投稿ページや一覧ページに対する情報の表示設定です。

情報は「カテゴリ」「タグ」「投稿日」などで、必要なものにチェックを入れましょう。

私は「カテゴリ」と「タグ」のみにチェックを入れています。

また一覧タイプのページにある「抜粋上のメタ情報」に関しては、全てのチェックを外しています。

記事タイトル下と抜粋上は同じ部分になるため、両方のチェックを入れることでメタ情報が重複して見栄えが悪くなります。

表示を確認しながら設定できるため、こういった部分はすぐに気が付くことができるため便利です。

アイテム数は、情報を何個まで表示するか？という設定です。

タグの数などを考慮して、最適な数値を設定してください。

10.サムネイル(アイキャッチ)

記事一覧ページのサムネイル(アイキャッチ)の表示サイズや、記事ページのサムネイル表示、非表示の設定ができます。

11.投稿の行間

投稿ページで表示する文章(文字)の行間(空白の領域)を設定できます。

私はデフォルトのままで使用しています。

12.自体(フォントファミリー)

Web ページで表示される場合に読みやすいフォントとして「メイリオ」がおススメされることが多いです。

「Luxeritas(ルクセリタス)」ではデフォルトでメイリオが採用されていますので、特に変更の必要はないと思います。

自分のサイト(ブログ)に個性を出したいという理由でフォントを変更する場合には、まずその文章(フォント)が読みにくくなっていないか？を確認しましょう。

訪問者にストレスを与える原因にもなりかねないため、フォントの変更は慎重に行ってください。

13.文字サイズ

ひとつを変更すると、サイト全体のバランスが崩れる可能性があるため、デフォルトのまま使用しています。

14.文字色

文字の色に関する設定です。

リンク色：リンクが設定されている文字の色(デフォルト:青)

ホバー色：マウスオーバー時に変化する色(デフォルト:赤)

リンクの色＝青のような共通認識があると思いますので、もしも変更するのならホバー色の部分となるでしょう。

15.背景色/枠線色

各表示領域ごとに、背景や枠線の色を設定できます。

あまりにも複数種類の色を使うとごちゃごちゃして統一感がなくなってしまうので、サイトカラーをひとつ決めて、その色をメインに設定していくのがいいと思います。

ただし、いつでも自由に変更できる部分でもあるので、最初は好きな方に配色してみるのもいいかもしれません。

16.背景・タイトル・ロゴ画像

サイトの背景やタイトル部分に画像を設定できます。

デフォルトのヘッダー(一番上)部分はかなりシンプルなため、気になる方は画像を設定するのもいいでしょう。

ただし、素材となる画像は自分で用意する必要があります。

17.パンくずリンク(パンくずリスト)

「ホーム」を基準位置として、サイト内のどの位置(ページ)にいるのかを分かりやすくするためのナビゲーション機能です。

ここでは、パンくずリンクの表示位置や、リンク文字色の変更ができます。

18.ヘッダー上の帯メニュー

ヘッダー領域には基本的に「サイトタイトル」と「サイト説明文」が表示されていますが、そのさらに上の部分に「帯メニュー」を表示させることができます。

表示させるメニューの種類や、メニューの色の設定などを行えます。

帯メニューが不要な場合は非表示にできます。

19.グローバルナビ(ヘッダーナビ)

グローバルナビは「ホーム」や「サイトマップ」など、固定ページで作成したメニューが表示されている部分です。

表示されるメニューの枠のサイズや、文字色、背景色などを設定できるので、サイトカラーに合わせて統一するなどの工夫が行えます。

このブログを例にすると、背景色と文字色を、リンクホバー時に反転するような設定をしています。

この項目も変更を確認しながら行うことができますので、好みに応じて設定をしてください。

こだわりがなければデフォルト設定のままにし、後で気になった時に変更する…ということでも問題ないと思います。

20.フッターナビ

WordPress 側のグローバルナビ設定で、フッターナビを ON にしている場合に表示されます。

フッターナビの表示位置や、色の設定などを行うことができます。

21.モバイル用ナビボタン

モバイル用ナビに表示する項目と色の設定などが行えます。

表示形式がモバイルの場合は、PC 用のグローバルナビが表示されず、代わりにモバイル用のナビが表示されます。

PC の表示形式のままでは設定変更をしても反映された部分を確認できないため、表示形式をモバイルに変更してから作業を行ってください。

22.目次

情報発信サイトなど、１ページ辺りの情報量(文字数)が多い場合は、目次を設定するのが一般的だと思います。

アダルトサイトのような、文章よりも画像や埋め込み動画がメインコンテンツとなる場合は、見出しの機能を使わないため目次は不要となります。

目次を活用する場合は、ここで、表示に関する詳細設定を行うことができます。

「自動で目次を挿入する」にチェックが入っているのを確認したら、後はデフォルトのままでも問題はありません。

23.アニメーション

サイト(ページ)の表示スピードに影響がありそうなので、余計な負荷を省くために、全ての機能を OFF にしています。

24.Lightbox(画像ギャラリー)

サイト内で使用している画像に対してアクションを設定できます。

この機能を利用するためには、設置した画像にリンク(メディアファイル)を設定する必要があります。

私は「使用しない」の設定にしています。

25.外部リンク

記事内に設置した外部リンクに対して、属性の設定やアイコンの追加を行うことが出来ます。

記事の外部リンクに「class=”external」を付ける

「external」は外部リンクを表す属性です。

デフォルトで ON になっているため、そのままで大丈夫です。

外部リンクのアイコン

外部リンクにアイコンを付ける場合は、２種類のアイコンからどちらかを選択できます。

アイコンが不要な場合はチェックを外してください。

記事の外部リンクに target=”_blank”を付ける

target=”_blank”を設定したリンクをクリックすると、新しいタブを開いて対象のページが表示されます。

自分のページ(タブ)は開いたままになるので、一度外部リンクへ移動した訪問者が元のページに戻ってくる可能性が高まります。

リンクの設定は記事の作成時に個別で行うことができるため、この項目は OFF にしておき、ページごとに手動で設定してくことも可能です。

外部リンクに nofollwo

デフォルトで OFF となっていますので、そのままにしています。

26.投稿者名の表示

デフォルトで ON になっており、作成した記事に対して記事投稿者の名前(ニックネーム or ブログ表示名)が表示されます。

チェックを外すことで「構造化データエラー」になると表記がありますが、無視しても問題ないエラーのため、投稿者名を表示したくない場合は OFF にしておきましょう。

27.ブログカード

ブログカードのサイズや表示設定を行うことができます。

ブログカードはおもに内部リンク(自サイト内のリンク)で使用しますが、ただの文字列のリンクよりもリンク先の情報を多く表示できます。

このブログも、内部リンクはすべてブログカードを使用しています。

28.SNSシェアボタン(1)

SNSシェアボタンの表示に関する設定とデザインの選択を行うことができます。

不要な場合は非表示にもできます。

私は記事上と記事下に、可変幅フラットタイプ(カラー)を設置しています。

29.SNSシェアボタン(2)

表示する SNS ボタンの種類を設置できます。

Twitter や Facebook などをメインに、自分が表示させたい SNS ボタンにチェックをいれてください。

30.メニュー

使用するメニューの選択と、表示位置の設定です

WordPress 側で設定したメニューの内容が反映されるため、ここで操作するためには、あらかじめメニューを作成しておく必要があります。

31.ウィジェット

ウィジェットを設置することで、記事(メイン)コンテンツ以外の部分に対して表示領域を追加できます。

例えばサイドバーにウィジェットを追加して「検索窓」「カテゴリ」「タグ」「広告」などを表示させることができます。

WordPress の外観メニューからも同様の操作ができるため、どちらか操作しやすい方から行ってください。

32.ホームページ設定

「ホーム」のリンク先を設定します。

デフォルトで「最新の投稿」となっていますが「固定ページ」を選択して自分が表示させたいページを指定することもできます。

33.追加CSS

CSS はサイトのデザインに影響を与えます。

見出しや装飾などで物足りない部分がある場合、CSS を追加することで自分好みのデザインに変更できます。

ただし、自分でコードを調べて反映させる必要があり、分からない場合やデザインにこだわりがない方は何もしなくても大丈夫です。

まとめ

以上「Luxeritas(ルクセリタス)」の外観カスタマイズ設定についてでした。

外観(見た目)に影響する部分がほとんどで、すぐに設定変更をせず、とりあえずはデフォルトのまま運用していくことも十分に可能だと思います。