画面を見ながら サイトのカスタマイズ ができる【外観カスタマイズ】

外観カスタマイズ とは デフォルトの状態から オリジナルのサイトデザインに
カスタマイズしていく機能なのですが、難しいCSSコードが分からなくても
オリジナルのサイトにデザインすることができます。

Luxeritasのテーマでは 30種類の項目に分類されており
また、外観カスタマイズは 仕上がりのイメージを サイト画面を見ながら
決定していけるという機能で とても分かりやすく 便利な機能になります。

メインになる項目をピックアップしてみました。

外観カスタマイズ

外観カスタマイズはいろいろな場所からアクセスできます。
ダッシュボード画面からや記事作成でのプレビュー画面で記事をチェックしながら
気になった項目をすぐに編集することも可能です。

外観カスタマイズへのアクセス方法

サイト外観のデザイン

外観カスタマイズ項目一覧の図一部画像を省略していますが、項目は追加CSSを入れて31項目あります。

まずは、基本的な設定から。

パンくずリンク

パンくずリンクは サイトの案内役のようなものです。
パンぐずリンクとカスタマイズの使いかたここでは、パンくずリンクを設置する場所やカラーを指定します。

カラーの選択が難しい場合は、こちらのサイトが色見本で参考になるかと思います。
色見本おすすめサイト→ WEB 色見本 原色大辞典

メニュー ( グローバルナビゲーション )

グローバルナビゲーションもまた サイトを見やすくするためのものですが
こちらはいろいろな使いかたができます。

外観カスタマイズ-メニュー-グローバルナビゲーションの画像

メニュー(グローバルメニュー)・固定ページについては
こちらの記事にまとめていますので 合わせてごらんくださいませ。
メニュー (グローバルナビ) の使いかた – WordPressテーマ Luxeritas

こだわりカスタマイズ

細かなところにまでこだわって サイトを作っていきましょう。

サムネイル画像(アイキャッチ)

サムネイル画像は、記事ごとに設定できる画像で記事のイメージに
合わせて画像を設定することで ユーザーに何が書かれているページなのか
分かりやすくすることができます。

外観カスタマイズ-サムネイルの意味と使いかたサムネイルの設定では、サムネイルの表示・非表示も選択できます。
ちなみに この画像は私のサイトの No image 画像です。

外観カスタマイズ-いろいろな場面で使われるサムネイルサムネイルは使われる場所によって サイズが変わります。

グリッドレイアウトで 長方形を選択した場合に合わせて
画像のサイズも考える必要があります。

グリッドレイアウト

グリッドレイアウトは 記事一覧 の BOXの レイアウトのことで
トップページや カテゴリページで使用されます。

画像・タイトル・冒頭の文章などが ボックスに表示されます。
 Luxeritas-外観カスタマイズ-グリッドレイアウトこのボックスのタイプの組み合わせで 何通りものデザインになるので
初めての設定では すごく迷ってしまいますね。

グリッドレイアウトのカスタマイズはこちらで紹介しています。
【ルクセリタス】グリッドレイアウトとサムネイル(アイキャッチ)の組み合わせ

目次

目次は 見出しが多い記事の時にあると便利な機能です。

外観カスタマイズへのアクセス方法自動で目次を挿入する を選択した場合、
2 の見出しの数に達した時に自動的に 目次が表示されるという機能です。
ここでは  設定数3 ですので H2のタイトルが3つ目になれば 目次が表示されます。

3 見出しは H2 からが基本です。
4 ジャンプ先の位置は お好みで調整してください。

追加CSS

ここまでのかんたんなカスタマイズ以外で さらにカスタマイズしたい方、
または、文字の装飾や 枠などのデザインを CSS (スタイルシート) に作成していきたい場合に
こちらの追加CSSを使用します。

外観カスタマイズ-追加CSSの使い方のイメージ必要なコードを記述し、OKなら公開をクリックします。

サイト画面を見ながらCSSの編集のイメージ1.Box画像を見ながらの場合、編集したい項目の画像を表示させます。

サイト画面を見ながらCSSの編集のイメージ2.文字色の変更

こちらにに書き込むことで 画面全体でのイメージを確認しながら
設定できるので 本当に分かりやすく便利ですね。

また、コードが間違っている場合はこのように注意マークが表示されます。
間違いをよーくチェックして記述してくださいね。
外観カスタマイズ-コードが間違っている場合の表示