カスタマイザーの設定

カスタマイザーでは、サイトのタイトルやヘッダーロゴの設定などの基本的な部分から、見出しやボタンの装飾といった細かなデザインに関する部分まで、様々な項目を設定できます。

カスタマイザーの開き方

カスタマイザーは管理画面の「外観」⇒「カスタマイズ」から開くことができます。

サイトの基本設定

タイトル・メタディスクリプション設定

トップページが検索結果にどう表示されるかを決める重要な項目です。

「キャッチフレーズ」は必須ではありませんが、「サイトのタイトル」と「サイトの説明」は大事な項目なので、必ず設定しておきましょう。

記事ページのメタディスクリプション

何もしなければ本文の内容を前から順番に抜粋して表示するようになっていますが、記事投稿画面で「抜粋」を入力すれば、その内容が優先されます。

「抜粋」欄が表示されていないときは、右上の「表示オプション」から「抜粋」にチェックを入れると表示されるようになります。

カテゴリー・タグページのメタディスクリプション

カテゴリー別の記事一覧ページやタグ別の記事一覧ページのメタディスクリプションは、「投稿」⇒「カテゴリー/タグ」から編集できる各カテゴリー・タグの「説明」欄に入力したものが反映されます。

ヘッダーロゴ

ヘッダーロゴは画像かテキストのどちらかで設定できます。

サイトアイコン(ファビコン)

デフォルトのサムネイル画像

Google Analytics・Search Console・Google AdSenseのコードの貼り付け

サイト全体のレイアウト設定

この項目では、以下のスタイルが設定できます。

OGP・noindex設定

OGP設定

OGPの設定をしておくと、サイトがSNSでシェアされたときによりリッチに表示されるようになります。

「Twitterカードの種類」の設定は必須で、それ以外は任意です。

↓「Twitterカードの種類」は「summary」だと左の画像、「summary_large_image」だと右の画像のように表示されます。

noindex設定

noindexを指定したページはGoogleの検索結果に表示されないようになります。

どのページをnoindexにするかは場合によりますが、404ページ検索結果ページはnoindexに指定しておくとよいでしょう。

あらゆる要素の背景色・文字色をカラーピッカーから自由に選べるようになっています。

また、ホバー(カーソルが乗った)時に色が変わる箇所は、ホバー後の色も設定することができます。

ボタン1つで全体的なデザインが変わる設計ではないのでカスタマイズは少し大変ですが、裏返せば、より柔軟なカスタマイズができるということでもあります。

記事リスト部分

いろいろなページに表示される記事リストのデザインを設定できます。

文字色・背景色、カードの幅を設定できます。

人気記事の順位

サイドバーや記事ページにウィジェットで挿入した人気記事にはデフォルトで順位が表示されていますが、この順位ラベルの設定を行うことができます。

記事ページ

個別の記事ページのデザインを設定できます。

プラグイン「Easy Table of Contents」で挿入した目次のカラーもここで設定します。

見出し

見出しはh2、h3、h4のみデザインを設定できるようになっています。

デザインは予め何パターンか用意されているものではなく、完全に1からスタイルを作っていきます

例えば、文字のサイズ、文字色・背景色、上下左右それぞれの枠線のスタイル(太さ・色・破線/点線など)、角丸にするか、影の有無、などを値を入力するだけで設定できます。

ボタン

ボタンも見出しと同じように、デザインをオリジナルでカスタマイズします。

ボタンのデザインは3パターンまで設定でき、それぞれショートコードで本文中に挿入できます。

押すとへこむボタンも簡単に作ることができます!

ボックス

ボックスのデザインは5パターンまで設定でき、それぞれショートコードで本文中に挿入できます。

ボックスの見本
これはボックスの見本です。

リスト

Chemオリジナルのリストはショートコードで挿入できます。

ここでは、リストの前に表示されるアイコンの色や種類を設定します。

リスト4・5でFont Awesomeアイコンの種類を指定するには、「Unicode」と「Icon Style」を調べる必要があります。UnicodeとIcon Styleはアイコン詳細ページで確認できます。

リンク

ショートコード[link1][/link1]などで挿入できるリンクの文字色を設定できます。

蛍光マーカー

エディタで挿入できるマーカーの色を最大で4パターン設定できます。

Author

Nauts

WordPressテーマを作ったり、YouTubeでピアノを弾いたりしています。

Related

インストール方法 「外観」⇒「テーマ」へと進みます。 「新規追加」をクリック。 「テーマのアップロード」をクリック。 ZIPファイルを選択し […]

テーマのインストール方法・アップデート方法

CSSを追加したい CSSを追加したいときは、以下の3つの方法があります。どの方法でもいいですが、ファイルのアップデートがあったときの手間が […]

CSSやPHPファイルを独自にカスタマイズする方法【子テーマの導入方法】

プログラミングの知識がなくても手軽にお問い合わせフォームを設置できるプラグイン「Contact Form 7」をご紹介します。 インストール […]

お問い合わせフォームを手軽に設置できるプラグイン「Contact Form 7」

Chemで使えるウィジェットエリア・メニューエリア Chemで使えるウィジェットエリア・メニューエリアは以下のようになっています。 ウィジェ […]

ウィジェット・メニューの設定

画像・ボタンなどの中央寄せ ボタン ボタンのデザインは「外観」⇒「カスタマイズ」⇒「ボタン」から設定できます。 デザインは最大で3パターン設 […]

ショートコード一覧

ここでは、デフォルトのエディタにはないChem独自の機能を紹介していきます。 ビジュアルエディタ マーカー 文字にマーカーを引くには、マーカ […]

マーカーを引く・画像にエフェクトをかける