ワードプレスのテーマ「ルクセリタス」は、様々なデザイン変更がダッシュボードから「外観」→「カスタマイズ」で可能です。
ただカスタマイズ項目が33項目もあり、多すぎて「どこで何が設定可能なのか?」迷うので、簡単な一覧を作ってみました。
お役立てていただければ幸いです。
※Luxeritas バージョン: 3.7.0.2で説明しています。
- 本サイトでデフォルトを変更している設定(参考)
- カスタマイズ項目一覧(外観→カスタマイズ)
- 1.サイト情報 / サイトアイコン
- 2.全体レイアウト
- 3.グリッドレイアウト
- 4.カラム操作
- 5.ヘッダー / フッター
- 6.コンテンツ領域とサイドバー
- 7.ディスカッション
- 8.細部の見た目
- 9.メタ情報の表示位置
- 10.サムネイル (アイキャッチ)
- 11.投稿の行間
- 12.字体 ( フォントファミリー)
- 13.文字サイズ
- 14.文字色
- 15.背景色 / 枠線色
- 16.背景・タイトル・ロゴ
- 17.パンくずリンク
- 18.ヘッダーナビ(グローバルナビ)
- 19.ヘッダーの上の帯状メニュー
- 20.モバイル用ナビボタン
- 21.目次
- 22.アニメーション
- 23. Lazy Load (画像の遅延読み込み)
- 24. 画像ギャラリー
- 25.外部リンク
- 26.投稿者名の表示
- 27.ブログカード
- 28. SNS シェアボタン (1)
- 29.SNS シェアボタン (2)
- 30.メニュー
- 31.ウィジェット
- 32.ホームページ設定
- 33.追加 CSS
本サイトでデフォルトを変更している設定(参考)
2.全体レイアウト
全体イメージ:ホワイト
3.グリッドレイアウト
リスト型トップページ:カード型3列、”記事を読む” ( カード型 ):空欄にして非表示
9.メタ情報の表示位置
投稿・固定ページ、記事タイトル下のメタ情報:投稿日時表示なし、更新日時表示なし
固定ページおよび投稿の日時がすべて表示なしとなる(下には表示する)
14.文字色
ヘッダー文字色:白(キャッチフレーズ)
15.背景色 / 枠線色
背景色(Body):薄緑、ヘッダー背景色:濃い緑、コピーライト表示部背景色:濃い緑
16.背景・タイトル・ロゴ-タイトル
サイトタイトルを画像にする(ヘッダー):PNG画像(600*67px)に変更
18.ヘッダーナビ(グローバルナビ)
ナビリンクホバー背景色:緑、ナビカレント背景色:濃い緑
19.ヘッダーの上の帯状メニュー
RSS ボタン表示:無し、Feedly ボタン表示:無し
21.目次
自動で目次を挿入する:チェックon(項目の自動番号付けは非表示:追加CSS子テーマ)
22.アニメーション
ヘッダーナビ:上方移動
28. SNS シェアボタン (1)
記事上のSNSボタン表示:なし
29. SNS シェアボタン (2)
Twitterボタン表示:有、Facebookボタン表示:有、はてブボタン表示:有
カスタマイズ項目一覧(外観→カスタマイズ)
※青色の背景色は変更した設定です。
1.サイト情報 / サイトアイコン
サイト名・キャッチフレーズの設定
サイトアイコンの設定
※ここでの設定不要。「サイト情報 / サイトアイコン」は WordPress の標準機能。
2.全体レイアウト
コンテナの最大幅(1280px)
全体イメージ(ホワイト、ブラック)
記事一覧の表示方法(抜粋+サムネイル表示、記事全文表示)
投稿ページ(関連記事表示、Next / Prev ナビゲーション表示
固定ページ( Next / Prev ナビゲーション表示、 固定フロントページの記事タイトル表示)
3.グリッドレイアウト
リスト型トップページ(通常、タイル1~4列、カード1~4列)
カテゴリー(通常、タイル1~4列、カード1~4列)
アーカイブ(通常、タイル1~4列、カード1~4列)
タイル型の並び順
記事一覧の抜粋の文字数と色濃度
“記事を読む” ( 通常スタイル )
“記事を読む” ( タイル型 )
“記事を読む” ( カード型 )
4.カラム操作
カラム数
サイドバーの位置
コンテンツ領域
サイドバー
コンテンツとサイドバーの分離・結合
5.ヘッダー / フッター
タイトルの配置(左、中央、右)
ヘッダーのマージン ヘッダー上 ( 0px )
ヘッダーのパディング ヘッダー上 ( 20px )、ヘッダー右 ( 10px )、ヘッダー下 ( 20px )、ヘッダー左 ( 10px )
ヘッダーの位置 ヘッダーを枠線で囲む、ヘッダーの枠線を横幅いっぱい (コンテナの外側の時のみ有効)
フッターの位置 フッターを枠線で囲む、コピーライト表示部の上に線を入れる、モバイル・スマホで非表示にする
フッターウィジェットエリア表示数(横3列、横2列、横1列、非表示)
6.コンテンツ領域とサイドバー
コンテンツ領域
コンテンツ領域に枠線をつける
ページャー表示領域に枠線をつける ※ コンテンツ領域分離時のみ
角の丸み
コンテンツ領域のパディング
※ 実際の幅は画面幅によって変動します
コンテンツ上 ( 45px )
コンテンツ右 ( 68px )
コンテンツ下 ( 45px )
コンテンツ左 ( 68px )
サイドバーウィジェットの幅
2カラム目
3カラム目
サイドバーの位置
※ サイドバーの位置は「カラム操作」の項目で変更できます。
モバイル・スマホで非表示にする
サイドバーを枠線で囲む
角の丸み
7.ディスカッション
投稿ページ
固定ページ
コメント一覧の表示方法
8.細部の見た目
ヘッダーのキャッチフレーズ変更
“ホーム” のテキスト
PAGE TOP ボタンのテキスト
PAGE TOP ボタンのアイコン
角の丸み
PAGE TOP 文字色
PAGE TOP 背景色
9.メタ情報の表示位置
投稿・固定ページ
記事タイトル下のメタ情報
投稿日時表示
更新日時表示
カテゴリー名表示
タグ表示
タクソノミー表示
記事下のメタ情報
投稿日時表示
更新日時表示
カテゴリー名表示
タグ表示
タクソノミー表示
一覧タイプのページ
記事タイトル下のメタ情報
投稿日時表示
更新日時表示
カテゴリー名表示
タグ表示
タクソノミー表示
抜粋上のメタ情報
投稿日時表示
更新日時表示
カテゴリー名表示
タグ表示
タクソノミー表示
10.サムネイル (アイキャッチ)
サムネイルの表示/非表示切り替え
画像に対するテキスト(抜粋)の配置
サムネイルの表示サイズ
11.投稿の行間
段落行間
リスト行間
12.字体 ( フォントファミリー)
ローマ字フォント
日本語フォント
13.文字サイズ
基準値
Body
14.文字色
文字色 ( Body )
リンク色 ( Body )
リンクホバー文字色 ( Body )
ヘッダー文字色
ヘッダーリンク色
ヘッダーリンクホバー文字色
フッター文字色
フッターリンク色
フッターリンクホバー文字色
15.背景色 / 枠線色
背景色 ( Body )
背景透過 ( Body )
コンテンツ領域背景色
コンテンツ領域枠線色
コンテンツ領域背景透過
サイドバー背景色
サイドバー枠線色
サイドバー背景透過
ヘッダー背景色
ヘッダー枠線色
ヘッダー背景透過
フッター背景色
フッター枠線色
フッター背景透過
コピーライト表示部背景色
コピーライト表示部枠線色
16.背景・タイトル・ロゴ
サイトタイトルを画像にする
ワンポイントロゴ画像
背景・タイトル・ロゴ画像
サイトタイトルを画像にする
ワンポイントロゴ画像 ※ サイトタイトルの左にワンポイント画像を表示します。
背景画像
背景画像透過
背景固定
背景画像の配置方法
サイドバー背景画像
ヘッダー背景画像 ※ レスポンシブではロゴは背景画像にするよりも、項目下にあるロゴ画像を使用する方がおすすめです
横幅いっぱい
ヘッダー背景画像の配置方法
※ 画像の表示領域は、「ヘッダー / フッター」の「ヘッダーのパディング」で幅や高さを調整してください。
※ モバイルでの見た目は要確認
ロゴ画像
17.パンくずリンク
パンくずリンクの配置
パンくずリンク上下パディング ( px )
( デフォルト 10px )
パンくずリンク左右パディング ( px )
( デフォルト 10px )
パンくずリンク文字色
パンくずリンク背景色
パンくずリンクを枠線で囲む
角の丸み
パンくずリンク枠線色
18.ヘッダーナビ(グローバルナビ)
グローバルナビ表示
グローバルナビの位置
モバイルメニューの種類
モバイルメニューの開閉方法
スクロール固定
※ 古いAndroid (2.x系)では動作しません
固定オプション
スクロール固定時の影の濃さ
スクロール固定で半透明にする
上スクロールの時だけ表示
横幅の大きさ
中央揃え
区切り線を付ける なし 区切り線を付ける 両端を含めて区切り線を付ける
ナビ文字色
ナビバー背景色
ナビ背景色
ナビリンクホバー文字色
ナビリンクホバー背景色
ナビカレント文字色
ナビカレント背景色
ナビ上の線の色
ナビ下の線の色
区切り線の色
ナビ上の線の太さ ( px )
ナビ下の線の太さ ( px )
ナビ上下パディング ( px )
ナビバー上下パディング ( px )
19.ヘッダーの上の帯状メニュー
※ メニューの設定は「外観 → メニュー」で、新しいメニューを作成した後「メニュー設定」を「ヘッダーの上の帯状メニュー」にチェックを付けて保存してください。
ヘッダーの上に帯状のメニューを表示
ヘッダー上の帯状メニューを常に横幅いっぱいにする
帯状メニューを固定表示にする
※ 古いAndroid (2.x系)では動作しません
帯状メニューの外観
帯状メニューの高さ ( px )
帯状メニュー文字色
帯状メニューリンクホバー文字色
帯状メニュー背景色
帯状メニューの下線の色
帯状メニューの下線の太さ ( px )
検索ボックス表示
検索ボックス文字色
検索ボックス背景色
検索ボックス背景透過
フォローボタンの表示方法 アイコン アイコン + SNS名
フォローボタンをカラーにする
Twitter フォローボタン表示
Twitter ID
※ http://twitter.com/XXXXX
の XXXXX 部分を入力
Facebook フォローボタン表示
Facebook ID
※ http://www.facebook.com/XXXXX
の XXXXX 部分を入力
Instagram フォローボタン表示
Instagram ID
※ https://www.instagram.com/XXXXX
の XXXXX 部分を入力
Pinterest フォローボタン表示
Pinterest ID
※ https://www.pinterest.com/XXXXX
の XXXXX 部分を入力
はてブ フォローボタン表示
はてブ ID
※ http://b.hatena.ne.jp/XXXXX
の XXXXX 部分を入力
Youtube フォローボタン表示
Youtube ID
※ http://www.youtube.com/channel/XXXXX
の XXXXX 部分を入力
Youtube ID ( old )
※ http://www.youtube.com/user/XXXXX
の XXXXX 部分を入力
LINE フォローボタン表示
LINE ID
※ http://line.naver.jp/ti/p/XXXXX
の XXXXX 部分を入力
RSS ボタン表示
Feedly ボタン表示
20.モバイル用ナビボタン
チェックをつけると画面下にモバイル用のナビゲーションボタンを表示します。
ホームへ戻るボタン
※ このボタンはトップページでは表示されません。
グローバルナビボタン
SNS ボタン
※ このボタンはページ内に通常ボタン以外のSNSボタンがある場合のみ表示されます。
サイドバーボタン
目次ボタン
※ このボタンはページ内に目次がある場合のみ表示されます。
コメントボタン
※ コメント欄までスクロールします。
検索ボタン
ページ上に戻るボタン
モバイルボタンの外観 文字色
背景色
背景透過
角の丸み
ボタン同士の間隔
アイコンのみ表示
画面内に収まらない場合 横スクロール 折り返す
ボタンの大きさ 小 中 大
21.目次
投稿内の見出しタグに基づいて目次を作成します。
自動で目次を挿入する
スタイルを適用する
AMP ページにも自動で目次を挿入する
表示条件: (見出しの数)
表示するポストタイプ
投稿ページ
固定ページ
目次にする見出し階層 H2 H2 – H3 H2 – H4 H2 – H5 H2 – H6
ジャンプ先の位置 (高さ)
これより下の項目はウィジェットには適用されません
開始状態 開いた状態 閉じた状態
タイトル
表示ボタン
非表示ボタン
横幅 自動 100%
文字色
背景色
枠線色
ボタン 文字色
ボタン 背景色
22.アニメーション
アニメーション効果を有効にする
ヘッダーの視差スクロール
( デフォルト 0 )
オープニングアニメーション アニメーション効果なし カーテン ( ダーク ) カーテン ( ホワイト ) シャッター ( ダーク ) シャッター ( ホワイト ) 横に伸張 縦に伸張 タイトル回転 フェードイン
– 適用範囲 –
全ページに適用する トップページのみ適用する
外部からのアクセスのみ適用する
トップページは常に適用する
サイト名 アニメーション効果なし ズームイン ズームアウト
記事一覧のサムネイル アニメーション効果なし ズームイン ズームアウト
SNS シェアボタン アニメーション効果なし 上方移動 ズームイン ズームアウト
ヘッダーナビ (グローバルナビ) アニメーション効果なし 上方移動
23. Lazy Load (画像の遅延読み込み)
※ この機能は Intersection Observer API を使用しています。
各種サムネイル画像の Lazy Load 有効化
投稿コンテンツの Lazy Load 有効化
サイドバーの Lazy Load 有効化
※ ウィジェットのスクロール追従領域の動作に異常が出る場合があります。
フッターの Lazy Load 有効化
Gravatar の Lazy Load 有効化
Javascript が無効でも画像を表示する
エフェクト・効果 Fade-in (フェードイン) Show (エフェクトなし)
24. 画像ギャラリー
画像ギャラリーの種類 Tosrus ( レスポンシブ / 最もおすすめ ) Lightcase ( レスポンシブ / おすすめ ) Fluidbox ( レスポンシブ / おすすめ / Lazy Load との共存不可 ) 画像ギャラリーを使用しない
25.外部リンク
記事の外部リンクに class=”external” 付ける
記事の外部リンクにアイコン付ける
外部リンクアイコンのタイプ fa-external-link fa-external-link-square
外部リンクアイコンの色
記事の外部リンクに target=”_blank” 付ける
記事の外部リンクに rel=”nofollow” 付ける
※ 非推奨 (記事で紹介しているリンクに nofollow 付けるのはマナー違反です)
26.投稿者名の表示
author (記事投稿者)を表示
※ 投稿者名を非表示にすると構造化データエラーになります。
author に張る URL 投稿者アーカイブページにリンク 自分で作成したページにリンク
自分で作成したページの URL
27.ブログカード
ブログカード有効化
直書きの URL をブログカード化する
※ これにチェックを付けると、一部を除いて WordPress 標準の oEmbed 機能は使えなくなります。
ブログカードの最大幅
※ 0 で画面幅いっぱい
※ デフォルト 540px
ブログカードの丸み
カードに影を付ける
画像の位置 右 左
画像を枠線で囲む
画像に影を付ける
画像の丸み
キャッシュの有効期間
28. SNS シェアボタン (1)
SNS カウントをキャッシュする (おすすめ)
※ SNS 通常ボタンが選択されてる場合は、動作しません。
※ キャッシュを有効にすると、WAF が有効となっているサーバーでも SNS のカウント数を取得できるようになります。
SNS カウントを非表示にしていても、カウント数を取得してキャッシュする
キャッシュ再構築までのインターバル
週に一度の自動キャッシュ整理
記事上 SNS ボタンの種類と配置
記事上の SNS ボタン表示
記事上の SNS カウント表示
記事下 SNS ボタンの種類と配置
記事下の SNS ボタン表示
記事下の SNS カウント表示
記事下の SNS シェアメッセージ
トップページリスト下に SNS ボタン表示
固定ページにも SNS ボタン表示
画像ホバー時に Pinterest の保存ボタンを表示する
コピーボタンのコピー対象 記事タイトルと URL URL
Facebook の設定
※ 5桁以上のカウント数を表示する際は設定が必要になります。
App ID ( Get ID )
App Secret ( Get Secret )
App Token ( Get Token )
29.SNS シェアボタン (2)
記事上SNSボタンの表示/非表示
Twitter ボタン表示
Facebook ボタン表示
Pinterest ボタン表示
LinkedIn ボタン表示
はてブ ボタン表示
Pocket ボタン表示
LINE ボタン表示
RSS ボタン表示
Feedly ボタン表示
コピーボタン表示
記事下SNSボタンの表示/非表示
Twitter ボタン表示
Facebook ボタン表示
Pinterest ボタン表示
LinkedIn ボタン表示
はてブ ボタン表示
Pocket ボタン表示
LINE ボタン表示
RSS ボタン表示
Feedly ボタン表示
コピーボタン表示
30.メニュー
メニューの位置
お使いのテーマにはメニューの表示位置が2か所あります。
ブラウザーアイコンとしてプレビュー
アプリアイコンとしてプレビュー
31.ウィジェット
お使いのテーマには他に18個のウィジェットエリアがありますが、このページでは表示していません。
ページに表示されるウィジェットを表示・編集するためにカスタマイザーを使用している最中でもサイトの別のページに移動することができます。
ブラウザーアイコンとしてプレビュー
アプリアイコンとしてプレビュー
32.ホームページ設定
投稿の逆順表示 (従来のブログ) または固定・静的なページから、サイトのホームページの表示内容を選択することができます。静的なホームページを設定するには、まず2つの固定ページを作成します。1つはホームページになり、もうひとつは投稿が表示される場所になります。
ホームページの表示 最新の投稿 固定ページ
33.追加 CSS
サイトの外観とレイアウトをカスタマイズするには、ここに独自の CSS コードを追加してください。 CSS について詳細を読む (新しいタブで開く)
キーボードナビゲーションの利用方法:
編集エリアの中で Tab キーを押すと、タブ文字を入力します。
このエリアから移動するには、Esc キーを押した後に Tab キーを押します。
スクリーンリーダー利用者: フォームモードではエスケープキーを2回押す必要があります。
エディターは自動的にコードシンタックスをハイライトします。プレーンテキストモードを利用するには、ユーザープロフィール (新しいタブで開く)から無効化することができます。
CSS コード
コメント