ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる
  • ブログ型サイト
  • 企業ブランディング・集客ページ
  • 飲食店や医院用サイト
  • 各種LP制作

・・・などなど
ワードプレスを使ったサイト制作や
コーディングのみも承ります。

お気軽にお問い合わせください。

※本サイトで紹介する商品は提携先アフィリエイトリンク付き(PR)の場合がございます。

【したいことが探せる】Luxeritas(ルクセリタス)使い方目的別ガイド

ワードプレスの高速無料テーマLuxeritasは無料でありながら多機能です。

しかしどの機能がどこにあるのか時々わからなくなるので、私自身の頭の整理も兼ねて目的別に使い方ガイドを作成しました。

検証バージョン:3.21.4.1(2022年2月13日リリース)

Luxeritasテーマダウンロード先はこちら

記事内の構成は

サイト全体の設定・デザインに関するものナビゲーション・リンクサイトの共通パーツ・ページのデザインコンテンツの作成各種機能設定・バージョン情報カスタマイズ時のコード記入場所

との順となっています。

構成がわかりやすいよう大見出しのみの目次を表記しておきます。
(詳細目次はこの下にあります)

  1. サイトの基本情報を設定する
    (サイトタイトル・キャッチフレーズ・ファビコン)
  2. トップページの設定
    (投稿一覧ページか固定ページかを選ぶ)
  3. デザイン着せ替え機能を使う場合
  4. サイト全体のデザイン
    (レイアウト・配色・フォント・画像・パンくずリンク・ページトップボタン)
  5. ナビゲーションの設定
  6. サイトマップの作成
  7. SNSリンク
  8. その他外部リンクの設定
  9. ヘッダー部のデザイン
  10. フッター部のデザイン
  11. サイドバーのデザイン
  12. 記事一覧・カテゴリー・アーカイブページのデザイン
  13. 各個別ページ(投稿・固定ページ)のデザイン
  14. 404 Not Foundページのデザイン
  15. アニメーションをつける
  16. エディターで記事を作成
  17. ウィジェットでコンテンツを作成
  18. SEO関連の設定
  19. 高速化設定
  20. アクセス解析
  21. アドセンス
  22. コメント(画像認証)
  23. カスタマイズのバックアップ・復元
  24. 管理バー(ログイン中のサイト画面左下)の非表示
  25. リセット
  26. バージョン情報の確認
  27. 独自にカスタマイズするときのコード記述場所

私のおすすめ機能を次の記事でも紹介しています。合わせてご覧ください。

目次

サイト基本情報を設定する
(サイトタイトル・キャッチフレーズ・ファビコン)

外観>カスタマイズ>サイト情報/サイトアイコン

できること
  • ”サイトのタイトル”を入力
  • ”キャッチフレーズ”を入力
  • ”サイトアイコン”をアップロードして設定
    (512×512px以上の正方形画像)
サイト情報の入力状況(ウェブチルサイトの事例)

トップページの設定
(投稿一覧ページか固定ページかを選ぶ)

外観>カスタマイズ>ホームページ設定

または

設定>表示設定

できること
  • 最新の投稿
  • 固定ページ

いずれかをサイトトップページとする

ホームページ設定(デフォルト状態)

固定ページを選んだ場合のタイトル非表示

固定ページをトップページに設定した場合は、その固定ページのタイトルを非表示設定することができます。

外観>カスタマイズ>全体レイアウト→

固定ページ

できること
  • ”固定フロントページの記事タイトル表示”のチェックを外すと非表示となる
    (デフォルトは表示設定)
固定フロントページの記事タイトル表示

デザイン着せ替え機能を使う場合

Luxeritas>デザイン選択>”デザイン選択”タブ→

一覧からデザインを”有効化”
または
外部からダウンロードしたファイルを”新規追加”

できること

デザインの着せ替え機能でデザインを一括設定する

選択できるデザインは、”デザイン選択”のページでは1つしかありませんが、テーマ作者るなさんのサイトからデザインファイルをダウンロードして”新規追加”できます。

以下は、デフォルトのトップページをデザインファイル musica in paradisumに変えた場合の比較です。

デフォルトのデザイン(トップページ)
サイトの初期状態(トップページ)
着せ替え後トップページ
デザインファイル”musica in paradisum”のトップページ

サイト全体のデザイン
(レイアウト・配色・フォント・画像など)

サイト全体に共通するデザイン設定です。

コンテナ幅・全体イメージ

外観>カスタマイズ>全体レイアウト

できること
  • コンテナの最大幅を設定
    (デフォルト値1280px。ゼロに設定すると画面幅いっぱいとなる)
  • 全体イメージをホワイト(白基調)またはブラック(黒基調)とする
    (デフォルトはホワイト)

コンテナの最大幅=サイトの最大表示幅と考えてよいでしょう。

下記のサイトでは、記事一覧表とサイドバーを合わせた幅がコンテナ幅となります。

コンテナ幅

デフォルト設定の1280pxはパソコンのFHDディスプレイの幅と同じですので、特にこだわりなければデフォルト設定のままでよいでしょう。

サイト全体の背景色

外観>カスタマイズ>背景色/枠線色→

背景色(Body)・背景透過(Body)

できること
  • サイト全体の背景色
  • サイト全体背景色の透過率

※Luxeritasではサイト全体の背景色以外に、それぞれの部位ごとに背景色の設定が可能です。

ヘッダー背景色
フッター背景色
コンテンツ領域およびサイドバーの背景色

背景画像

外観>カスタマイズ>背景・タイトル・ロゴ画像→背景画像

できること
  • 背景画像をアップロードして設定
  • 背景画像の透過率
  • 背景画像の固定
    (デフォルトはスクロールされる)
  • 背景画像の配置位置の選択
    (上・垂直中央・下×左・中央・右の組み合わせ)
  • 背景画像のrepeatまたはno-repeat
  • 背景画像サイズの選択
    (auto、contain、cover、幅:100%・高さ:自動、幅:自動・高さ:100%、幅:100%・高さ:100%)

カラム設定

外観>カスタマイズ>カラム操作

基本レイアウトとして、1カラム~3カラムを選択できます。

以下のサイト例なら、2カラムです。メインのカラムをコンテンツ領域、関連情報のカラムをサイドバーといいます。

コンテンツ領域とサイドバー
できること
  • ページのテンプレート毎に1~3カラムで個々に選択できる
    サイト全体のカラム数(デフォルトは2カラム)
    フロントページのカラム数
    投稿ページのカラム数
    固定ページのカラム数
    カテゴリー/アーカイブページのカラム数
  • サイドバーの位置を指定
    ・2カラムの場合・・・右または左(デフォルトは右サイドバー)
    ・3カラムの場合・・・両脇または右に2列・左に2列
  • 領域の分離または結合を選択
    ・コンテンツ領域を項目ごとに分離または結合
    ・サイドバーを項目ごとに分離または結合
    ・コンテンツ領域とサイドバーを分離または結合

コンテンツ領域とサイドバーの項目ごとの分離と結合の例を紹介しておきます。

コンテンツ領域サイドバー項目ごと分離
コンテンツ領域・サイドバーともに項目ごとに分離
コンテンツ領域サイドバーそれぞれ項目結合
コンテンツ領域・サイドバーともに項目を結合

コンテンツ領域とサイドバーの幅・余白・枠線

2または3カラムの場合、コンテンツ領域とサイドバーの幅や余白を設定してレイアウトを決めます。
また、それぞれの領域の枠線の設定も行います。

外観>カスタマイズ>コンテンツ領域とサイドバー

できること
  • コンテンツ領域に枠線をつける
    (デフォルトは枠線あり)
  • コンテンツ領域の枠線に丸みをつける
    (デフォルトは丸みゼロ)
  • コンテンツ領域のパディング(余白)の設定
    (上下左右それぞれ別々に設定可能)
  • サイドバーウィジェットの幅
    (3カラムの場合、2カラム目・3カラム目別々に設定可能)
  • サイドバーをモバイル・スマホで非表示設定可能
    (デフォルトはモバイル・スマホでコンテンツ領域下に表示)
  • サイドバーに枠線をつける
    (デフォルトは枠線あり)
  • サイドバー枠線に丸みをつける
    (デフォルトは丸みゼロ)

各領域の幅やパディングは、特にこだわりのない限りデフォルト設定のままでよいと思います。

(デフォルト設定)

コンテンツ上45px
コンテンツ右68px
コンテンツ下45px
コンテンツ左68px
コンテンツ領域パディング
2カラム目336px
3カラム目250px
サイドバーウィジェットの幅

コンテンツ領域とサイドバーの背景色・枠線色

外観>カスタマイズ>背景色/枠線色→

コンテンツ領域背景色・枠線色・背景透過
サイドバー背景色・枠線色・背景透過

できること
  • コンテンツ領域の背景色
  • コンテンツ領域背景の透過率
  • コンテンツ領域枠線色
  • サイドバーの背景色
  • サイドバー背景の透過率
  • サイドバーの枠線色

フォントの設定

フォント(字体)の指定

外観>カスタマイズ>字体(フォントファミリー)

できること

フォントファミリーの指定

  • 日本語フォント・ローマ字フォントのどちらを優先するか選択
    (デフォルトは日本語フォント優先)
  • ローマ字フォント:指定なし・9種のwebフォント・3種の非webフォントより選択
    (デフォルトはSegoe+Helvetica)
  • 日本語フォント:指定なし・8種のwebフォント・8種の非webフォントより選択
    (デフォルトはメイリオ+San Francisco)

webフォントの読み込みを非同期にする

外観>カスタマイズ>字体(フォントファミリー)

できること
  • webフォントを非同期で読み込む
    (非同期にするとweb表示は速くなるが、webフォントの反映にはタイムラグが生じる)

文字サイズ

外観>カスタマイズ>文字サイズ

できること
  • 単位remの基準値
    (デフォルト値62.5%)
  • Body(サイト全体)、サイトのタイトル、記事全体など23カ所の文字サイズを指定

各部のデフォルト値は以下の通り(rem値はrem基準値が62.5%が前提)

Body(サイト全体)14px/1.4rem
サイトのタイトル28px/2.8rem
キャッチフレーズ14px/1.4rem
抜粋14px/1.4rem
記事全体16px/1.6rem
記事のタイトル<h1>28px/2.8rem
記事内<h2>24px/2.4rem
記事内<h3>22px/2.2rem
記事内<h4>18px/1.8rem
記事内<h5>16px/1.6rem
記事内<h6>16px/1.6rem
記事内<li>14px/1.4rem
記事内<pre>14px/1.4rem
記事内<blockquote>14px/1.4rem
メタ情報14px/1.4rem
パンくずリンク13px/1.3rem
グローバルナビ14px/1.4rem
コメント14px/1.4rem
サイドバー14px/1.4rem
サイドバー<h3>18px/1.8rem
サイドバー<h4>18px/1.8rem
フッター14px/1.4rem
フッター<h4>18px/1.8rem

※記事内のリスト<li>のデフォルト設定は14pxですが、記事全体と同じ16pxに設定して私は使っています。
記事内の見出し<h4>~<h5>も少し大き目に設定しています。

文字色

外観>カスタマイズ>文字色

できること

以下の各部毎に文字色、リンク色、リンクホバー色を設定

  • Body(ページ全体)
  • ヘッダー
  • フッター

アイコンフォント

Luxeritas>カスタマイズ>”アイコンフォント”タブ

できること
  • アイコンフォントとして
    Material IconsとFont Awesomを選択。両方選択も可能
    (デフォルトはMaterial Icons)
  • Material IconsはRounded・Sharp・Two toneの指定も可能
  • Font AwesomeはFont Awesome5と4のいずれかを選択
  • Font Awesome5の場合は、webフォントかJavascriptによるSVGで表示かを選択できる
  • Material Icons、Font Awesomeどちらも非同期か同期を選択できる
    (デフォルトは非同期)

Material Iconの使い方についてはこちらの記事も参照ください。Font AwesomeからのCSSコードの書き換え方も解説しています。

絵文字を使わない場合

ワードプレス標準の絵文字を使わない場合は、絵文字用スクリプトを読み込まない設定により高速化に貢献します。

外部Javascriptの取り扱いを参照ください。

画像の基本設定

画像遅延読み込み(Lazy Load)

Luxeritas>カスタマイズ>”Lazy load”タブ

できること

画像のLazy load(遅延読み込み)を次の中から選択設定できる
(デフォルトではNative Lazyloadが選択されている)

  • Native Lazyload・・・ワードプレスversion5.5から備わったLazy load機能
  • Intersection Observer・・・Luxeritasの準備したJavascriptによるlazy load機能
  • なし・・・Lazy loadしない

Intersection Observerを選ぶと部位ごとの有効化やオプション、エフェクトを選ぶことができる

  • 部位・・・サムネイル・投稿画像・サイドバー・フッター・Gravatar
  • オプション・・・Javascriptが無効でも画像を表示する
  • エフェクト(効果)・・・fade-inまたはShow(エフェクトなし)のどちらか

サムネイル画像作成の管理

Luxeritas>管理機能>”サムネイル”管理タブ

できること

画像アップロード時に自動で作成するサムネイル画像サイズを設定する

  • 自動作成するサムネイル画像サイズを設定
    (デフォルトでは最大75x75px、100x100px、320x180px、530x530px、565x565px、710x710px、725x725pxの全てのサイズが選択状態)
  • 上記以外にも好きな画像サイズをユーザーサムネイルとして登録可能
    (元画像をcrop(切り抜き)するかどうかも指定できます)

※サムネイル画像サイズの新規の設定は、新規アップロードする画像に対して適用されます。すでにアップロード済の画像にも適用したい場合は、次の項『サムネイルをつくりなおす』を適用ください。

デフォルトのままでも使用に問題はありませんが、より鮮明にサムネイルを表示させたい場合、デフォルトよりも少し大きめのサイズをユーザーサムネイルとして登録するとよいでしょう。

サムネイル画像をつくりなおす

この機能によりプラグインRegenerate Thumbnailsが不要となります。

Luxeritas>管理機能>”サムネイル再作成”タブ

できること

サムネイル画像を一括再作成する(不要なサムネイル画像の削除も可能です)

パンくずリンク

パンくずリンクの表示・パディング・色・枠線

外観>カスタマイズ>パンくずリンク

できること
  • パンくずリンクの非表示
    (デフォルトは表示)
  • パンくずリンクの配置位置をコンテンツ領域の中・外を選択
    (デフォルトはコンテンツ領域の中)
  • パンくずリンクのパディング(上下・左右)
  • パンくずリンクの文字色
  • パンくずリンクの背景色
  • パンくずリンクを枠線で囲む
    (デフォルトは枠線なし)
  • パンくずリンク枠線に丸みをつける
  • パンくずリンク枠線色

ホームのテキスト(細部の見た目)

外観>カスタマイズ>細部の見た目→”ホーム”のテキスト

できること
  • ”ホーム”を別の表示に変更できる

ページトップボタン

外観>カスタマイズ>細部の見た目→PAGE TOPボタンのテキスト・アイコン

できること
  • テキストを”PAGE TOP”以外に変更
  • ボタンのアイコンを選択
    (デフォルトArrow up、caret up、Chevron up、Arrow circle up、Angle double up)
  • ボタンの角の丸み
  • PAGE TOP文字色
  • PAGE TOP背景色

Luxeritasで設定できるナビゲーション

Luxeritasで設定できるナビメニューは次の3種類です。

  • グローバルナビゲーション(ヘッダーナビ)
  • ヘッダー上の帯メニュー
  • フッターナビ
ヘッダー周辺のナビゲーション
フッターナビゲーション

ワードプレス標準機能である 外観>メニュー の画面で、メニューの位置として上記3カ所のいずれかを選択します。

メニュー機能でのメニューの位置

ワードプレス標準のメニュー機能設定方法については次の記事を参照ください。


グローバルナビゲーション(モバイル設定含む)

Luxeritasで準備されているグローバルナビゲーションの外観等の設定です。

外観>カスタマイズ>グローバルナビ(ヘッダーナビ)

できること
  • ナビの表示or非表示
  • ナビの位置
    ・ヘッダー下(ノーマル)
    ・ヘッダー上
  • モバイルメニューの種類
    ・豪華バージョン(on screen)
    ・グローバルナビのみ(on screen)
    ・豪華バージョン(in header)
    ・グローバルナビのみ(in header)
  • モバイルメニューの開閉方法
    ・親と子を個別に開閉
    ・一度に全開閉
  • 横幅の大きさ
    ・横幅を自動リサイズ
    ・横幅を自動リサイズ(横幅いっぱい)
    ・全て同じ幅
  • 中央揃えする・しない
  • メニュー項目ごとの区切り線(PC表示のとき)
    ・なし
    ・区切り線をつける
    ・両端を含めて区切り線をつける
  • スクロール固定
    ・しない
    ・スクロール固定する
    ・小デバイスだけスクロール固定する
    ・PCだけスクロール固定する
  • スクロール固定した場合
    ・固定時の影の濃さ
    ・スクロール固定で半透明にするorしない
    ・上スクロールのときだけ表示or常に表示
  • スクロールプログレスバーを表示or非表示(スクロール固定時のみ)
  • スクロールプログレスバーの進捗率
    ・ページの一番下で100%
    ・記事の一番下で100%
  • ナビゲーションの各色
    文字色・説明文字色・背景色・リンクホバー文字色・リンクホバー背景色・カレント文字色・カレント説明文字色・カレント背景色・ナビバー背景色・ナビ上の線の色・ナビ下の線の色・プログレスバーの色・区切り線の色
  • ナビ上の線の太さ、ナビ下の線の太さ
  • ナビ上下パディング、ナビバー上下パディング

※ここで設定できるモバイルナビは、画面上部に表示されるモバイルナビのことを指します。Luxeritasではこれとは別に画面下に表示されるモバイル用ナビボタンがあります。

モバイルナビ(豪華版on screen)

グローバルナビゲーションにキャプチャーをつける

メニューにキャプチャー(説明文)をつけることができます(Luxeritasバージョン3.21.0でリリース)。

キャプチャーのつけ方は次の記事で”オプションを設定する”を参照ください。

キャプチャーの文字色の変更もできるようになっています(”グローバルナビゲーション参照)。

カテゴリーページの説明文を設定していて、そのカテゴリーページをメニュー項目に設定している場合、ナビゲーションのキャプチャーにカテゴリーページの説明文が自動的に表示されてしまいます

キャプチャーとしてカテゴリー説明文を表示しないようにするには、外観>メニューのページでメニュー項目の説明欄を開け、内容を削除してください。

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

ヘッダー上の帯メニューには、自分で設定したナビ項目のほかに、SNSフォローボタンなどを設置する機能があります。

外観>カスタマイズ>ヘッダー上の帯メニュー

できること
  • ヘッダー上帯メニューの表示・非表示
  • 帯メニューを横幅いっぱいにするorしない
  • 帯メニューを固定表示にするorしない
  • 帯メニューの外観
    ・高さ
    ・文字色、ホバー文字色
    ・背景色
    ・帯メニューの下線の色、太さ
  • 検索ボックスを表示するorしない
  • 検索ボックスの文字色、背景色、背景透過率
  • SNSフォローボタンの表示方法
    ・アイコンのみorアイコン+SNS名
    ・フォローボタンをカラーにするorしない
  • 各SNSごとにフォローボタンの表示or非表示(表示の場合そのidも入力)
    ・Twitter、Facebook、Instagram、Pinterest、はてブ、YouTube、LINE
  • RSSボタンの表示or非表示
  • Feedlyボタンの表示or非表示

モバイル用ナビボタン

モバイルの場合、画面下にもナビゲーションが浮き上がって表示されるようになっています。

モバイル用ナビボタン

外観>カスタマイズ>モバイル用ナビボタン

できること
  • 表示するボタンの種類を選ぶ
    ・ホーム画面へ戻るボタン
    ・グローバルナビボタン
    ・SNSボタン
    ・サイドバーボタン
    ・目次ボタン
    ・コメントボタン
    ・検索ボタンの表示or非表示
    ・ページ上に戻るボタン
  • 下スクロールの時にボタンを隠すor隠さない
  • ボタンの外観
    ・文字色、背景色、背景色透過率
    ・角の丸み
    ・ボタンどうしの間隔
    ・アイコンのみorアイコン+テキスト
    ・アイコンとテキストの配置:縦並びior横並び
    ・文字サイズ(デフォルト12px)
    ・ボタンの最小幅(自動も選択可能)
    ・画面からはみ出す場合:横スクロールor折り返す

フッターナビゲーション

外観>カスタマイズ>フッターナビ

できること
  • ナビの位置
    フッターウィジェットの上or下(デフォルトは上)
  • デバイスごとのメニュー項目の並びを選択
    ・常に横並び
    ・スマホサイズ以下では縦並びにする(デフォルト設定)
    ・モバイルサイズ以下では縦並びにする
  • フッターナビの区切り文字を選択
    ・|(パイプ記号)
    ・/(スラッシュ記号)
    ・-(ハイフン記号)
    ・なし
  • 色の設定
    ・ナビリンク色、ナビリンク文字ホバー色、背景色、枠線色

サイトマップの作成

ここでいうサイトマップとはユーザーにサイト情報を示すHTMLサイトマップのことです。
(検索エンジンに情報を与えるXMLサイトマップとは異なります)

次の手順で作成します。

  1. 固定ページを”新規追加”
  2. 画面右の”ページ属性”のテンプレートを開けて”サイトマップ”を選択
    (ブロックエディターの場合は、ページ属性でなく直接”テンプレート”でOKです。下図参照)
  3. ページのタイトルを”サイトマップ”、パーマリンクを"sitemap"として公開
    (わかりやすいようにこうしましたが、それぞれ任意の名前でOKです)
テンプレート

以上でこの固定ページを表示させるとサイトマップとなっているのがわかります。

SNSリンク

RSS/Feedlyボタン

ウィジェットを使って表示する場合

外観>ウィジェット→

ウィジェット#8 RSS/Feedly購読ボタン(Luxeritasオリジナル)を
任意のウィジェットエリアに配置する

できること

RSS/Feedly購読ボタンを表示する

ヘッダー上の帯状メニューに表示する場合

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

SNSシェアボタン

SNSシェアボタンのデザイン・配置・キャッシュの設定

外観>カスタマイズ>SNSシェアボタン(1)

できること
  • SNSカウントをキャッシュの設定
    ・キャッシュするorしない
    ・キャッシュのインターバル時間(最短60秒~最長1日まで選択可)
    ・週に一度の自動キャッシュ整理(ゴミの自動削除をするorしない)
  • SNSシェアボタンのデザイン種類と配置を設定
    (記事上・記事下それぞれ設定可)
    ・シェアボタンの表示or非表示
    ・シェアカウント数の表示or非表示
    ・表示するボタンのデザイン種類の選択
    (可変幅フラットタイプ・名無しアイコンタイプ・固定幅タイプ、それぞれカラーorホワイト)
    ・配置の選択(左・中央・右)
    ・記事下のシェアボタンにはメッセージも表示可能
  • トップページ記事一覧下にSNSシェアボタンの表示or非表示
  • 固定ページにSNSシェアボタンの表示or非表示
  • 画像ホバー時にPinterestの保存ボタンを表示or非表示
  • コピーボタンのコピー対象を選択
    ・記事タイトルとURL
    ・URL
  • Facebookの設定(Facebookのシェア数を表示する際に必要)
    ・App IDの入力
    ・App Secret入力
    ・App Token入力

※SNSカウントキャッシュのクリーンアップはリセットで可能です。

表示するSNSを指定

外観>カスタマイズ>SNSシェアボタン(2)

できること
  • SNSシェアボタンを表示するSNSまたはコピーボタンを選択する
    (記事上、記事下それぞれ選択可)
    Twitter、Facebook、Pinterest、LinkidIn、はてブ,、Pocket、LINE、RSS、Feedly、コピーボタン

SNSフォローボタン

ウィジェットを使って表示する場合

外観>ウィジェット→

ウィジェット#7 SNSフォローボタン(Luxeritasオリジナル)を
任意のウィジェットエリアに配置する

できること

SNSフォローボタンを表示する
・Twitter、Facebook、instagram、Pinterest、はてブ、YouTube、LINE
 表示したい場合はそれぞれIDも入力する
・アイコンorアイコン+SNS名の選択可能

ヘッダー上の帯状メニューに表示する場合

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

外部リンクへのクラス・アイコン付与

外観>カスタマイズ>外部リンク

できること

外部リンクに対するクラスやアイコンの付与などの設定をする

  • 記事の外部リンクにclass="external"をつけるorつけない
    (デフォルト:つける)
  • 記事の外部リンクにアイコンをつける
    (デフォルト:つけない)
  • 外部リンクのアイコンのタイプと色の設定
    (External link または External link square)
  • 記事の外部リンクにtarget="_blank"をつける
    (デフォルト:つけない)
  • 記事の外部リンクにrel="nofollow"をつける
    (デフォルト:つけない)

※class="external"とつけることで、外部リンクを明示的にするためにCSSを付与することが可能となります。

※target="_blank"をつけると別タブで外部リンクが開くようになります。しかし内部・外部に限らずリンクを貼るときに設定可能なので、ここであえてつける必要はありません。

※rel="nofollow"ですが、付与すると検索エンジンがリンク先をたどらなくなるのでマナー違反となります。したがって非推奨です。

電話番号など外部リンクへの自動変換防止

Luxeritas>カスタマイズ>その他→

リンクへの自動変換防止

できること

以下のアイテムが外部リンクへ自動変換されるのを防止する

  • 電話番号
  • メールアドレス
  • 住所
  • コメントに書かれたURL

ヘッダー部のデザイン

Luxeritasではさまざまなヘッダーデザイン設定が可能です。

ヘッダーのデザイン

ヘッダーの位置・余白(高さ)・幅・枠線・タイトル位置

外観>カスタマイズ>ヘッダー/フッター

できること
  • サイトタイトルの位置
    左・中央・右 から選択
    (デフォルト:左)
  • ヘッダー上のマージン(デフォルト:ゼロ)
  • ヘッダーのパディング:上下左右別々に設定可
    (デフォルト値 上:20px、右:10px、下:20px、左:10px)
  • ヘッダーの位置:コンテナの外側or内側(デフォルト:外側)
  • ヘッダーを枠線で囲むor囲まない(デフォルトはなし)
  • ヘッダーの枠線を横幅いっぱいとするorしない

サイトタイトルの位置変更は、タイトルとキャッチフレーズとセットで変更されます。

ヘッダーのパディングによってヘッダーの高さを調整することができます。

ヘッダーの背景色・枠線色

外観>カスタマイズ>背景色/枠線色→

ヘッダー背景色・枠線色・背景透過

できること
  • ヘッダーの背景色
  • ヘッダー背景色の透過率
  • ヘッダー枠線色

ヘッダーのキャッチフレーズ表示

キャッチフレーズの非表示設定やサイト基本情報に入力したものとは別のものを表示するときに使います。

外観>カスタマイズ>細部の見た目

ヘッダーのキャッチフレーズ変更

できること
  • キャッチフレーズの表示・非表示(デフォルト:表示)
  • サイト基本情報とは別のものと表示する

タイトルの画像化

外観>カスタマイズ>背景・タイトル・ロゴ画像→

サイトタイトルを画像にする

できること
  • サイトタイトルを画像に置き替えて表示する

ワンポイントロゴ

外観>カスタマイズ>背景・タイトル・ロゴ画像→

ワンポイントロゴ画像

できること
  • サイトタイトルの左にワンポイント画像を表示する

ヘッダー背景画像

外観>カスタマイズ>背景・タイトル・ロゴ画像→ヘッダー背景画像

できること
  • 背景画像をアップロードして設置
  • 横幅いっぱいとするorしない
  • 画像に合わせて高さを自動的に調整するorしない
  • max-height、min-heightの設定
  • 背景画像の配置位置の選択
    (上・垂直中央・下×左・中央・右の組み合わせ)
  • 背景画像のrepeatまたはno-repeat
  • 背景画像サイズの選択
    (auto、contain、cover、幅:100%・高さ:自動、幅:自動・高さ:100%、幅:100%・高さ:100%)

画像に合わせて高さを自動的に調整する=元画像の縦横比に固定化する の意味です。

テーマカスタマイザーでは設定できない以下については参照記事をご覧ください。

ヘッダー背景画像をPCとスマホで変更したい場合

ヘッダー画像の高さをトップページとそれ以外で変えたい場合

ヘッダー内にウィジェットを配置したい場合

ロゴ画像

厳密にはヘッダー内に設置されるものではありませんが、トップページ上部に表示されるのでここで紹介しておきます。

外観>カスタマイズ>背景・タイトル・ロゴ画像→

ロゴ画像

できること
  • ロゴ画像を表示する
    (場所はグローバルナビの下だが、グローバルナビ上も設定できる)

フッターの位置・枠線・モバイル非表示・ウィジェット表示数

外観>カスタマイザー>ヘッダー/フッター→

フッターの位置

できること
  • フッターの位置
    コンテナの外側or内側
    (デフォルト:外側)
  • フッターを枠線で囲むor囲まない
    (デフォルト:囲む)
  • コピーライト部の上に線を入れるor入れない
    (デフォルト:入れない)
  • モバイル・スマホで非表示にするorしない
    (デフォルト:非表示にする)
  • フッターウィジェットエリア表示数の選択
    ・横3列(左・中央・右)
    ・横2列(左・右)
    ・横1列(中央)
    ・非表示

外観>カスタマイズ>背景色/枠線色→

フッター背景色・枠線色・背景透過

できること
  • フッターの背景色
  • フッター背景色の透過率
  • フッター枠線色

コピーライト表示

コピーライト部の背景色・枠線色

外観>カスタマイズ>背景色/枠線色→

コピーライト表示部背景色

できること
  • コピーライト表示部の背景色
  • コピーライト表示部枠線色

コピーライトの書式

Luxeritas>カスタマイズ>”コピーライト”タブ

できること
  • コピーライトの書式の設定
    ・webサイトの開始年
    ・サイト名(デフォルトではサイトタイトルを使用)
    ・書式9通りから選択または自由形式を設定も可

サイドバーの位置

カラム設定を参照ください

サイドバーの幅・枠線・モバイル非表示

コンテンツ領域とサイドバーの幅・余白・枠線を参照ください。

サイドバーの幅・枠線と余白・背景色・枠線色

コンテンツ領域とサイドバーの背景色・枠線色 を参照ください。

サイドバー背景画像

外観>カスタマイズ>背景・タイトル・ロゴ画像→

サイドバー背景画像

できること
  • サイドバーの背景画像をアップロードして配置

記事一覧・カテゴリー・アーカイブページのデザイン

記事一覧の表示方法(テキスト抜粋or全文・ページャの表示)

外観>カスタマイズ>全体レイアウト→

記事一覧の表示方法

できること
  • 記事一覧の表示を次のいずれかで設定
    ・記事抜粋テキスト+サムネイル画像
    ・記事全文表示(moreタグまで)
  • 先頭固定の投稿は全文表示にするorしない
    (デフォルト:しない)
  • ページャ表示をするorしない
    (デフォルト:表示する)

※”先頭固定の投稿”とは、記事作成のエディター画面右で”ブログのトップに固定”にチェックを入れると設定されるワードプレスの標準機能です。

先頭固定表示

※ページャとは記事一覧が複数ページに分かれた場合に一覧下に表示されるこんなやつです。

ページャ

記事一覧の表示投稿数

Luxeritas>カスタマイズ>ページネーション

できること
  • 記事一覧の1ページあたりに表示する最大投稿数の設定
    記事一覧トップページ、カテゴリー、アーカイブ、検索結果ページを個別に設定可

※ダッシュボードメニュー設定>表示設定の”1ページに表示する最大投稿数”でも設定可能ですが、ページ種ごと個別には設定できません。

記事一覧のレイアウト・抜粋文字数・記事を読むリンク

外観>カスタマイズ>グリッドレイアウト

できること
  • 記事レイアウトの選択(デフォルトは通常スタイル)
    ・通常スタイル・タイル型・カード型の3つから選択
    ・タイル型とカード型の最大列数を1~4列から選択
    ・タイル型とカード型の最初のX件は通常スタイルに設定できる
    ・トップページ、カテゴリー、アーカイブそれぞれ別々に設定できる
  • タイル型のサムネイル/記事タイトル/メタ情報の並び順設定
  • 抜粋文字数と文字の濃度設定
  • ”記事を読む”リンクの設定
    ・表示or非表示
    ・後ろにタイトルを短くつけるorつけない

3通りのレイアウトの見映えを紹介しておきます。
(タイル型、カード型は3列設定としました)

通常スタイル

横広がりのタイトルの下に真四角のサムネイル画像と抜粋テキストが横並びに表示されます。

通常スタイル記事一覧

タイル型

横長のサムネイルを使うので画像が一番大きく表示されるグリッド型です。このウェブチルサイトもタイル型を使用しています(2021年9月現在)。

タイル型記事一覧

カード型

通常スタイルとタイル型の間のようなレイアウトです。記事タイトルは真四角のサムネイルの横に表示されます。

カード型記事一覧

最初のx件は通常スタイルとする

例としてタイル型としたうえで最初の1件を通常スタイルとしてみました。

x件目を通常スタイルとする

サムネイル画像の表示設定とテキストの配置

外観>カスタマイズ>サムネイル(アイキャッチ)

できること
  • サムネイルの表示切替
    ・サムネイルを表示するorしない
    (デフォルト:表示する)
    ・アイキャッチ画像が設定していない記事はNo imageを表示するorしない
    (デフォルト:表示する)
    ・サムネイルに枠線をつけるorつけない
    (デフォルト:つける)
  • サムネイル画像に対するテキスト(抜粋)の位置の選択
    ・画像の右(画像下への回り込み非許可)・・・デフォルト設定
    ・画像の右(画像下への回り込み許可)
    ・画像の下
  • サムネイルの表示サイズを設定
    ・記事一覧レイアウト毎(リスト型・タイル型・カード型)に設定可能
    ・タイル型の場合、アイキャッチ画像を横幅いっぱい表示の設定可能

※上記の”サムネイルの表示サイズを設定”では、あらかじめ作成登録したサムネイル画像を選ぶことになります。サムネイル画像の作成登録はサムネイル画像作成の管理を参照ください。

サムネイル画像のNo imageの設定

No imageとはアイキャッチ画像を設定していない記事に対して表示するサムネイル画像です。

外観>カスタマイズ>サムネイル(アイキャッチ)→

No image

できること
  • No imageを設定する
    ・デフォルトでは”No image”と書いた画像が準備されている
    ・デフォルトから変更したい場合は任意の画像をアップロードする

メタ情報の表示設定(投稿日時・カテゴリー名など)

外観>カスタマイズ>メタ情報の表示→

一覧タイプのページ

できること
  • 投稿日時・更新日時・カテゴリー名・タグ名・タクソノミーの表示指定
    ・記事タイトル下に表示or非表示
    ・抜粋文上に表示or非表示
    ・カテゴリー、タグ、タクソノミーの最大表示数の設定可

カテゴリーページ冒頭に説明文をつける

外観>カスタマイズ>グリッドレイアウト

→カテゴリー

できること
  • カテゴリーページの冒頭に任意の説明文を表示する
    (HTML記述可)

このウェブチルサイトでもいくつかのカテゴリーページには、カテゴリーまとめ記事へのリンクとしてアイキャッチ・記事タイトルを表示しています(2021年9月現在)。

カテゴリー別記事一覧をトップページに表示する

テーマが準備した機能だけでは難しいですが、Luxeritas独自のウィジェットとCSSの調整だけで可能です。

各個別ページ(投稿・固定ページ)のデザイン

メタ情報の表示設定(投稿日時・カテゴリー名など)

外観>カスタマイズ>メタ情報の表示→

投稿・固定ページ

できること
  • 投稿日時・更新日時・カテゴリー名・タグ名・タクソノミーの表示指定
    ・記事タイトル下に表示or非表示
    ・記事本文下に表示or非表示

投稿者名の表示とリンク先の設定

外観>カスタマイズ>投稿者名の表示

できること
  • 投稿者名の表示or非表示(記事本文下)
  • 投稿者名のリンク先
    (デフォルトでは投稿者別アーカイブページへ飛ぶ)

投稿者名は記事本文下に次のように表示されます。

投稿者名表示

投稿者名のリンク先は個人のブログの場合、投稿者別アーカイブよりもプロフィールのページに設定するとよいでしょう。

投稿の行間設定(段落<p>・リスト<li>)

外観>カスタマイズ>投稿の行間

できること
  • 段落<p>の上下マージンの設定
    ・上マージン(デフォルト:1.3em)
    ・下マージン(デフォルト:1.3em)
  • 段落<p>内の行の高さ設定
    (デフォルト:1.9)
  • リスト<li>の上下マージン
    ・上マージン(デフォルト:ゼロ)
    ・下マージン(デフォルト:ゼロ)

目次を表示する

目次の自動挿入

外観>カスタマイズ>目次

できること
  • 自動で目次を挿入するorしない
    (ページ内最初の見出し<h2>の前に挿入。デフォルト:しない)

(目次の各設定:自動挿入と目次ウィジェットに適用)

  • Luxeritas標準のCSSを適用するorしない
    (デフォルト:適用する)
  • AMPページにも目次を挿入する
    (デフォルト:しない)
  • 目次を表示するページの選択
    (投稿・固定ページ にチェックする)
  • 目次を表示する条件
    (見出しの最低数)
  • 目次にする見出しの階層
    (<h2>のみ~<h6>まで全て)
  • 目次からのジャンプ先の高さ
    (デフォルト:0px)

(以下は自動挿入のみ。目次ウィジェットには適用しない)

  • 目次の開始状態
    (開いておくor閉じておく)
  • タイトル、表示ボタン、非表示ボタンの表記テキスト
    (デフォルトはそれぞれ”Contents”、”Show”、”Hide”)
  • 横幅
    (自動or100%)
  • 文字色、背景色、枠線色、ボタン文字色、ボタン背景色

目次をウィジェットで挿入

ウィジェットを使っても目次を挿入できます。
記事内の途中や、サイドバー、フッターなどに設置するのに便利です。

ウィジェットによる目次の設定は、1つ前の項目”目次を自動で挿入”と共通です(一部除く)。

記事毎の非表示設定

自動挿入設定した目次は、記事毎に非表示設定することができます。

編集エディタを開ける(投稿または固定ページ)

画面右の”目次の非表示”にチェックを入れる

ページ毎目次の非表示

アイキャッチ画像の記事内自動挿入

外観>カスタマイズ>サムネイル(アイキャッチ)→

サムネイル自動挿入

できること

アイキャッチ画像を記事内トップに自動挿入する(デフォルトはOFF)
以下の設定が可能

  • 挿入するページ種の設定
    (投稿・固定ページ・トップページ指定の固定ページ)
  • 挿入場所の設定
    (記事上・タイトル下・タイトル上・タイトルの背景(白基調or黒基調))
  • 横幅の設定
    (横幅いっぱい or 元画像のサイズ)
  • 画像の先読み(preload)をする

関連記事を非表示にする

外観>カスタマイズ>全体レイアウト→

投稿ページ

できること
  • 投稿記事下に関連記事を表示するorしない
    (デフォルトでは表示する)

Next/Prevナビを非表示にする

外観>カスタマイズ>全体レイアウト→

投稿ページ
固定ページ

できること
  • Next/Prvナビを表示するorしない
    (投稿・固定ページ 個別に設定可。デフォルトでは表示する)

コメント欄・トラックバック表示設定

外観>カスタマイズ>ディスカッション

できること
  • ページ下のコメント欄とトラックバックURLの表示or非表示
    投稿・固定ページ 個別に設定可(デフォルトは表示)
  • コメント欄の表示方法を選択
    ・コメントとピン(トラック)バックを分けて表示
    ・コメントとピン(トラック)バックを一緒に表示
    ・ピン(トラック)バックは表示しない
    ・ピン(トラック)バックに返信ボタンをつける

404 Not Foundページのデザイン

Luxeritas>カスタマイズ>その他→404 Not Foundページ

できること
  • 404 Not Found ページを指定の固定ページに変更することができる
    (デフォルトではLuxeritasで準備されたページを表示)

アニメーションをつける

さまざまなアニメーションを設定することができます。

外観>カスタマイズ>アニメーション

できること

以下のアニメーションを設定する(デフォルトはいずれもアニメーションしない)

  • ヘッダーのパララックス(視差スクロール)
  • オープニングアニメーション(サイトを開いたときのアニメーション)
    アニメーション種類を選択
    (カーテン・シャッター・横に伸張・縦に伸張・タイトル回転・フェードイン)
    適用するページの選択
    (全ページorトップページのみ)
  • サイト名
    (ズームイン・ズームアウト)
  • 記事一覧のサムネイル
    (ズームイン・ズームアウト)
  • SNSシェアボタン
    (上方移動・ズームイン・ズームアウト)
  • グローバルナビ
    (上方移動)

エディターでメインコンテンツ(記事)を作成

エディターの準備(記事を書く準備)

クラシックエディターを使う場合

ブロックエディターの無効化

デフォルトではブロックエディターが標準となっているので、無効化するとクラシックエディターが使用できるようになります。

Luxeritas>管理機能>”ブロックエディタ設定”タブ

”ブロックエディタ無効化”にチェックを入れる

※ただし、ブロックエディターとの併用はできません。

併用したい場合は、ブロックエディターは有効化のままでプラグインClassic Editorをインストール・有効化するとよいでしょう。

クラシックエディターの設定

前項でブロックエディターを無効化した場合に設定可能です。

Luxeritas>管理機能>”クラシックブロック&旧エディタ設定”タブ

できること
  • エディターのツールバーを使いやすく設定する
    ・ビジュアルエディターのツールバー各ボタンの表示・非表示
    ・テキストエディターのツールバー各ボタンの表示・非表示

ブロックエディターの設定

クラシックエディターを使用する場合は不要な設定です。

Luxeritas>管理機能>”ブロックエディタ設定”タブ

できること
  • Luxeritas固有機能を無効化する
    Luxeritas Block Toolbarを無効化
    Luxeritas Blocksを無効化
  • カラーパレットの設定
    デフォルトで表示されるカラーパレットを違う色に設定したり、独自の色をパレットに追加できます。
Luxeritas固有機能(ツールバーと独自ブロック)

Luxeritas Block Toolbar・・・ブロック内上部に表示されるツールバーです。文字装飾などに使います。
Luxeritas Blocks・・・Luxeritas独自のブロックです。使い勝手抜群です。

こちらの記事で紹介しています。

使い慣れたプラグインなどを使うので固有機能は不要という場合に無効化するとよいでしょう。

カラーパレット

これも便利なので私も独自カラーを登録しています。

記事作成での便利機能の設定

ブログカード

ブログカードはクラシックエディターでもブロックエディターでも利用可能ですが、そのデザイン設定をすることができます。

外観>カスタマイズ>ブログカード

できること
  • ブログカードの無効化(デフォルトは有効)
  • 直書きのURLをブログカード化する(デフォルトは無効)
  • ブログカードの最大幅(デフォルトは540px)
  • ブログカードの角の丸み
  • ブログカードに影をつける
  • アイキャッチ画像の設定
    ・位置(左or右) デフォルトは右
    ・画像を枠線で囲む
    ・画像に影をつける
    ・画像の丸み
  • キャッシュの有効期間

※ブログカードのキャッシュのクリーンアップはリセットで可能です。

Lightbox(画像ギャラリー)

Lightboxを有効化すると記事内の画像をクリックするとポップアップ表示されるようになります。
(ただし画像を記事内に配置する際、リンク先をメディアファイルに設定しておく必要があります)

外観>カスタマイズ>Lightbox(画像ギャラリー)

できること
  • 画像ポップアップの設定ができる(デフォルトでは無効)
    ・スライドタイプ4種、ポップアップタイプ3種から選択

画像が大きく浮き上がって見えるので、特に大きく見せたい画像のみリンク先をメディアファイルに設定しておくとよいでしょう。

シンタックスハイライター

ブロックエディターでのみ有効です。

Luxeritas独自ブロックのシンタックスハイライターブロックの見映え(CSS)を変更します。

Luxeritas>カスタマイズ>CSS

シンタックスハイライターのCSS

できること
  • シンタックスハイライターブロックに適用するCSSをなしまたは7種の中から選択する

見映えが大きく変わるので、シンタックスハイライターを使う場合はぜひ設定しておくとよいですね。

再利用ブロックの管理

ブロックエディターの再利用ブロックの管理画面です。

Luxeritas>再利用ブロック

できること
  • 再利用ブロックの登録・削除・編集
  • 再利用ブロックのインポート・編集

再利用ブロックは各編集エディター(ブロックエディター)でも登録できまが、登録した再利用ブロックをここで一括管理できます。

ブロックパターン登録

ブロックエディターで任意のブロックを登録しておく機能です。

Luxeritas>パターン登録>”ブロックパターン”タブ

できること
  • ブロックパターンを新規登録する
  • ブロックパターンをインポートする

ブロックパターンに登録するには、あらかじめ再利用ブロックに登録するのが推奨されています。

また、”すぐに使えるブロックパターン集”も準備されているのでインポートして利用可能です。

ショートコードの登録(吹き出し用あり)

Luxeritas>パターン登録>”ショートコード”タブ

できること
  • ショートコードの新規追加
  • ショートコードのインポート
  • ショートコードの”サンプル登録”を使って登録(以下の種類がある)
    ・単純に文字列を表示するだけのショートコード
    ・囲み型ショートコード
    ・引数を与えて表示するショートコード
    ・吹き出し用ショートコード(Luxeritas専用)

いちいちfunctions.phpに記述しなくてもよいので便利です。
(サンプル登録には雛形があるのでショートコードに慣れていない場合助かります)

定型文登録(HTML定型文 吹き出し用あり)

クラシックエディターを使って効率よく記事を書く場合は、ほぼ必須の機能といえるでしょう。

Luxeritas>パターン登録>”HTML定型文”タブ

できること
  • HTML定型文の新規登録
  • HTML定型文のインポート
  • HTML定型文の”サンプル登録”を使って登録(以下の種類がある)
    ・Google Adsense
    ・吹き出し(Luxeritas専用)

ブロックエディターの場合は次の理由でほぼ不要かと思います。

  • ブロックエディターには再利用ブロックやパターン登録機能がある
  • 吹き出し用ブロックがLuxeritas独自ブロックの中に準備されている

ウィジェットでコンテンツを作成

サイドバーやフッターなどメインコンテンツとなる記事部以外の部分に、関連情報コンテンツを表示するのにウィジェットを使います。

ワードプレスにおけるウィジェットの基本的な使い方は次の記事を参照ください。

Luxeritasのウィジェット基本設定

ウィジェットは、ダッシュボードメニュー 外観>ウィジェット のページで配置していくものですが、その前に知っておいた方がよい基本設定を紹介します。

ブロックベースのウィジェットを使うかどうか

ワードプレスversion5.8から導入されたブロックベースのウィジェットを使う場合にここでチェックを入れます。
(Luxeritasはデフォルトではブロックベースのウィジェットは無効となっています)

Luxeritas>管理機能>”ウィジェット管理”タブ

ウィジェットブロックエディタ

できること
  • ブロックベースのウィジェットとするかorしない
    (デフォルトではしない設定)
ウィジェットブロックエディターの有効化

ブロックベースのウィジェットについてはこちらを参照ください。

ウィジェットの表示・非表示

Luxeritas>管理機能>”ウィジェット管理”タブ→

ウィジェット
ウィジェット領域

できること
  • 指定したページごとにウィジェットを非表示にすることができます
    (トップページ、個別投稿記事、固定ページj、カテゴリーページ、アーカイブページ、検索結果ページ、プレビューページ、404ページ から指定)

    ・ウィジェット毎の非表示
    ・ウィジェット領域毎の非表示

設定画面は次のようになっているので、非表示したいページにチェックを入れます。

ウィジェット領域の非表示画面

ウィジェットの基本的な使い方

ダッシュボードメニュー 外観>ウィジェットを開けるとウィジェットの設定画面となります。

ウィジェットの基本的な使い方

上記のように、左の利用できるウィジェットから右のウィジェット配置エリアにドラッグ&ドロップでウィジェットを設置すればウィジェットが表示されるようになります。

ウィジェットの配置エリアの増やし方

Luxeritasのウィジェットの配置エリアはAMP用も含めて16カ所あります。

かなり細かくウィジェットを配置することができますが、さらにウィジェットエリアを増やしたい場合は次の記事が参考になるでしょう。

Luxeritas独自のウィジェット

Luxeritasには元々ワードプレスが準備したウィジェット以外に10種類の独自ウィジェットがあります。
ここで簡単に紹介していきます。

次の記事も参照ください。

#1 広告/アドセンス(Luxeritasオリジナル)

アドセンス広告コードを貼るのに使いますが、それ以外にもテキスト・HTML・ショートコードなども記述可能な万能ウィジェット。

できること
  • ”このウィジェットを表示しないページ”を設定できる
    ・トップページ、カテゴリー、投稿、固定ページなどのページ種から選択
    ・ページのidを入力して個別指定も可能
  • 広告サイズの指定
  • 中央揃えの指定
  • レスポンシブdata-full-width-responsiveの指定(true or false)
  • スポンサーリンクまたは広告のラベルの付与可
  • 構造化データの指定

このウィジェットを表示しないページを設定できる”のが標準ウィジェットのテキストやカスタムHTMLと違い便利です。

#2 再利用ブロック(Luxeritasオリジナル)

できること
  • 再利用ブロックをドロップダウンから選択して表示

私も頻繁に使用するウィジェットです。

ワードプレスversion5.8からブロックをウィジェットとして利用可能になりましたが、それ以前からもLuxeritasのこの機能を使えば結果的には同じことができていました。

#3 目次(Luxeritasオリジナル)

目次は記事内に自動挿入可能ですが、このウィジェットでも挿入することができます。

詳しくは、目次をウィジェットで挿入を参照ください。

#4 カルーセルスライダー(Luxeritasオリジナル)

各記事のアイキャッチ画像をスライダー方式で表示します。
ヘッダー下に設置しているブログサイトをよく見かけるように、注目記事をアピールするのに使われます。

できること
  • このウィジェットを表示するページの指定
  • 表示したいページの種類の指定
    ・属するカテゴリーの最新記事
    ・属するタグの最新記事
    ・全記事の最新
    ・固定ページの最新
    ・指定ページ(ページのidを指定)
  • 表示件数
  • サムネイル(アイキャッチ)のサイズ指定
  • 横幅、高さの指定
  • 背景色
  • スライダーナビゲーションの指定
  • エフェクト・効果の指定
  • オプション:どの記事を中央に配置するかor投稿日時順に表示
  • スライド回転時間
  • Lazy load無効化するorしない

#5 新着記事(Luxeritasオリジナル)

ワードプレス標準ウィジェットである”最近の投稿”よりも細かい設定が可能です。

できること
  • カテゴリー指定可
  • アイキャッチ画像のサイズ指定(正方形or横長)
  • 公開順or更新順
  • 表示する記事数指定
  • カテゴリorタグの表示
  • 日付なし・抜粋なし・アイキャッチ画像なしも選択可能

#6 最近のコメント(Luxeritasオリジナル)

できること
  • 最近のコメントを表示する
  • 表示するコメント数も設定可能

#7 SNSフォローボタン

SNSフォローボタン参照。

#8 RSS/Feedly購読ボタン(Luxeritasオリジナル)

RSS/Feedlyボタン参照。

#9 QRコード(Luxeritasオリジナル)

できること
  • QRコードを表示する。以下の設定が可能。
    ・サイズ、余白、配置(左・中央・右)
    ・背景色

#10 PWA インストールボタン(Luxeritasオリジナル)

サイトにPWA設定している場合、インストールしてもらうのに使うボタンを表示。

できること
  • PWAインストール用ボタンの表示。以下の設定が可能。
    ・インストールボタン名
    ・ボタンの説明文
    ・文字色・背景色・枠線色
    ・モバイルからのアクセスのみに表示する

検索ウィジェットの設定

検索ウィジェットはLuxeritasオリジナルではありませんが、Luxeritasでは検索結果の表示方法を設定することができます。

Luxeritas>カスタマイズ>”検索”タブ

できること
  • 検索結果の表示方法を選択
    ・検索でマッチした語句を中心に、その前後の文章を抜粋する(デフォルト)
    ・通常の抜粋を表示する
  • 半角・全角・ひらがな・カタカナを区別するか否か
    ・ワードプレスのデータベースの設定に従う(デフォルト)
    半角・全角・ひらがな・カタカナを区別せず広範囲に検索する
    ・半角・全角・ひらがな・カタカナを区別する
  • コメントを検索対象とする(デフォルト:対象としない)
  • 検索文字のオートコンプリート機能を使う(デフォルト:使わない)
  • 検索ワードをハイライトする(デフォルト:ハイライトする)
  • ハイライトの文字装飾
    ・太字
    ・斜体
    ・背景に色をつける

SEO関連の設定

SEOの基本設定

Luxeritas>カスタマイズ>”SEO”タブ

できること
  • 追加するタグの指定(基本的には全てチェックを入れておく)
    (carnonical、next/prev、RSS Feed、Atom Feed)
  • トップページのメタディスクリプション
    (デフォルトではサイトキャッチフレーズ)
  • 構造化データの設定
    ・検索エンジンに認識させるサイト名のタイプ(webサイト名or組織名)
    ・サイトロゴ
    ・組織ロゴ
  • メタキーワードの設定(次のいずれかを選択)
    ・タグとカテゴリ名をkeywordにする
    ・keywordなんていらない
  • Googleの検索結果に表示させる日付
    公開日or更新日
  • カテゴリ・タグページのどちらをインデックスさせるか(もしくはさせない)
  • 投稿・固定ページを分割した場合のインデックス設定
    2ページ目以降をインデックスさせるorさせない

個別ページのcanonical・メタディスクリプション

各記事別にcanonical URL、メタキーワード、メタディスクリプションが設定できるようになっています。

各編集エディター(投稿または固定ページ)の本文入力欄下

本文入力欄下に以下のように入力ボックスがあるので入力します。

個別記事のSEO設定欄

OGP設定

Luxeritas>カスタマイズ>”OGP”タグ

できること
  • OGPを追加するorしない(デフォルト:する)
  • Facebookの設定
    fb:admins または fb:app_id の入力
  • Twitterカードの設定
    Twitterカードのタイプ(Largイメージか否か)
  • デフォルトOGP画像の設定
    (投稿にOGP画像が設定されていない場合に適用される)

サイトタイトルの形式

Luxeritas>カスタマイズ>”タイトル”タブ

できること
  • サイトのタイトルとキャッチフレーズの表示形式を設定する
    タイトルとキャッチフレーズのセパレーター
    (デフォルトでは"|"(パイプ記号))
    一覧型トップぺージのタイトル形式
    (デフォルトではサイト名|キャッチ不レース)
    固定ページ型トップページのタイトル形式
    (デフォルトではサイト名|キャッチフレーズ)
    その他のページのタイトル
    (デフォルトではページタイトル|サイト名)

高速化設定

AMPの設定

サイトをAMP化することでモバイルでの高速表示ができるようになります。

ただし、使えないCSSやJavascriptがあるため、非AMPでのサイト表示とは異なるものとなる場合があります。

Luxeritas>カスタマイズ>”AMP”タブ

できること
  • AMPの設定
    ・AMPの有効化(デフォルトでは無効)
    ・コメント一覧を表示しないorする
  • AMPで有効化するプラグイン
  • AMP用ロゴ画像の設定

サイトをAMP化するためには上記のほか次の設定が必要です。

  • AMP用CSSの設定(Luxeritas>子テーマの編集>AMP用スタイルに記述する)
  • ウィジェットをAMP用のウィジェットエリアに配置する

PWAの設定

PWAはモバイル向けwebサイトをスマホ向けアプリのように使える仕組みです。

ユーザーはアプリをタッチするだけでサイトにアクセスでき、ブラウザAPIのキャッシュが使えるためページの表示速度が速くなります。

Luxeritas>カスタマイズ>”PWA”タブ

できること
  • モバイル用ブラウザのメインカラーと背景色の設定
  • PWAの有効化(デフォルトでは無効)
  • オフラインでの閲覧許可
  • インストールボタンの表示
  • マニフェストファイルの設定
    ・PWA無効時のマニフェストファイルの読み込み
    ・スタートページの選択
    ・アプリケーション名、説明の設定
    ・画面表示モード(ユーザーインターフェイス)の選択
    ・画面の向きの設定(回転を許可or向きを指定)
  • Service Worker(ブラウザAPI)とマニフェストファイルの出力方法
    (動的にするかどうか)
  • キャッシュコントロール

HTML・CSS・Javascript最適化

Luxeritas>カスタマイズ>”圧縮・最適化”タブ

できること
  • HTMLの圧縮設定
    (圧縮なし・低・高)
  • 子テーマCSSの圧縮設定
    (圧縮なし・圧縮する・親テーマのCSSと結合して圧縮する)
  • 子テーマJavascriptファイルluxech.jsの圧縮設定
    (圧縮なし・圧縮する・読み込まない)
  • 独自のJavascriptファイルの圧縮設定
    (luxech.js以外に独自のJavascriptファイルを3つまで登録すれば圧縮・結合できる)

※独自のJavascriptファイルを圧縮したい場合は、子テーマフォルダ直下に配置する必要があります。

CSSの取り扱い

Luxeritas>カスタマイズ>”CSS”タブ

できること
  • CSSのモードを選択(フルBootstrapを使うか否か)
    ・Luxeritas Mode(デフォルト。一番軽量)
    ・Bootstrap3 Mode
    ・Bootstrap4 Mode
  • 親テーマおよびワードプレスのブロックライブラリ用CSSをHTMLに埋め込むか否か
  • 子テーマのCSSを読み込むか否か(デフォルト:読み込む)
  • ウィジェット用CSSの読み込み選択
    (使わないウィジェット用のCSSは読み込まない設定ができる)

外部Javascriptの取り扱い

Luxeritas>カスタマイズ>”Javascript”タブ

できること
  • jQueryの読み込み方法の選択(デフォルトはGoogle CDN v3)
    ・Google CDNを使う(v1/v2/v3あり)
    ・ワードプレス内蔵を使う
    ・ワードプレス内蔵と関連scriptを結合して使う
    ・jQueryは使わない
  • jQuery-Migrateを読み込むか否か(デフォルト:読み込まない)
  • jQueryを非同期にする(デフォルトは同期)
  • bootstrap.jsを読み込む(デフォルトは読み込まない)
  • 子テーマのlexech.jsを読み込まない(デフォルト:読み込む)
  • ワードプレスの絵文字用スクリプトを読み込まない(デフォルト:読み込む)
  • ワードプレスのEmbed機能をOFFにする(デフォルト:ON)

※独自のJavascriptファイルも3つまでは圧縮することができます。HTML・CSS・Javascriptの最適化を参照ください。

Lazy Load

画像遅延読み込み(Lazy Load)参照

webフォントを非同期で読み込む

フォント”を参照。

バッファリングの逐次出力の有効化

Luxeritas>カスタマイズ>その他→サイトの表示設定

できること
  • バッファリングの逐次出力をすることで体感表示速度を向上する
    (キャッシュ系ブラグイン使用時は正常に動作しなくなる場合があります)

Gzip圧縮とブラウザキャッシュの有効化(高速化とセキュリティ向上)

Luxeritas>高速化一括設定>”高速化&セキュリティ向上用htaccess”タブ

できること
  • Apacheサーバーにおいてこのページで紹介しているコードをルートディレクトリのhtaccessに追記することで、ページの表示の高速化とセキュリティ向上をする
Luxeritasのセキュリティ向上用htaccess画面

こちらの記事でセキュリティ向上検証結果を紹介しています。

※同じLuxeritas>高速化一括設定に”高速化一括設定”タブがありますが、ここまでに紹介した高速化設定”HTML・CSS・Javascriptの圧縮・最適化”、”CSSの取り扱い”、”外部Javascriptの取り扱い”、”Lazy Load”、”webフォントを非同期で読み込む”でできることの抜粋版です。

アクセス解析

アナリティクス・タグマネージャーのコード挿入場所

Luxeritas>子テーマの編集>”アクセス解析(head)”タブ

アドセンス

アドセンス申請コードの挿入場所

Luxeritas>子テーマの編集>”Headタグ”タブ

AMP用アドセンスamp-auto-adsの挿入場所

Luxeritas>子テーマの編集>”AMP HTML(body)”タブ

アドセンス広告scriptの挿入

記事内に挿入する場合

クラシックエディターならテキストエディターに切り替えてscriptを貼ります。
あるいはHTML定型文に登録して呼び出します。

ブロックエディターならカスタムHTMLブロックを使うのが一般的でしょう。
私は再利用ブロックに登録して呼び出すようにしています。

ウィジェットを使う場合

ウィジェット#1 アドセンス(Luxeritasオリジナル)を使います。

サイドバーや記事一覧上・中央・下、投稿内で見つかったH2タグの上、記事下ウィジェット、記事下ウィジェットよりさらに下、関連記事上・下など、さまざまな場所に設置可能です。

コメント(画像認証)

Luxeritas>カスタマイズ>”コメント”タブ

できること
  • 次のいずれかの画像認証を選択して設定できます(デフォルト:画像認証なし)
    ・Google reCAPTCHA v3 による画像認証
    ・Google reCAPTCHA v2 による画象認証
    ・Securimage PHP CAPTCHA による画像認証

私は当初Luxeritasの画像認証機能を使っていましたが、今ではプラグインInvisible reCaptcha for WordPressを使っています。

カスタマイズのバックアップ・復元

Luxeritas>管理機能>”バックアップ”タブ

できること
  • カスタマイズ内容のバックアップと復元ができます。
    全カスタマイズをJSON形式でバックアップ、復元
    ・外観カスタマイズをJSON形式でバックアップ、復元
    ・子テーマをZIP形式でバックアップ、復元

管理バー(ログイン中のサイト画面左下)の非表示化

Luxeritas>カスタマイズ>その他→

ブログ画面の左下にある管理バー

できること
  • 左下の管理バーを非表示にする

リセット

Luxeritas>管理機能>”リセット”タブ

できること
  • Luxeritas全設定のオールクリア
  • SNSカウントキャッシュのクリーンアップ
  • ブログカードキャッシュのクリーンアップ

バージョン情報の確認

Luxeritas>管理機能>”バージョン”タブ

できること
  • Luxeritasテーマ(親テーマと子テーマ)のバージョン情報の確認
  • サーバー情報の確認
    (ホストネーム、IPアドレス、ドメインネーム、サーバーソフトウェア、PHPバージョン、SSL、メモリリミット、ポストマックスサイズ、アップロードマックスファイルサイズなど)
  • データベース情報の確認
    (MySQLバージョン、ホストネームなど)
  • ワードプレス情報の確認
    (ワードプレスのバージョン、path、デバッグモードか否かなど)

独自にカスタマイズするときのコード記述場所

サイト全体に適用するコードの記述

headタグにコードを記述

Luxeritas>子テーマの編集>”Headタグ”タブ

footerにコードを書く場合

Luxeritas>子テーマの編集>”フッター”タブ

子テーマのJavascriptファイルluxech.jsへの記述

Luxeritas>子テーマの編集>”Javascript”タブ

カスタムCSS

webサイトのCSS

Luxeritas>子テーマの編集>”スタイルシート”タブ

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

Luxeritas>子テーマの編集>”投稿エディタ用スタイル”タブ

AMP用CSS

Luxeritas>子テーマの編集>”AMP用スタイル”タブ

個別ページの<head>タグ内にコードを記述する場合

各編集エディターの下部の追加ヘッダー欄に記述します。

個別記事毎の追加ヘッダー欄

以下の書籍ではLuxeritasを使って具体的にブログサイトを構築していく手順を懇切丁寧に解説しています。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる