カスタマイザーでデザインや細かな設定をしよう

v2.0〜のカスタマイザーの設定方法を紹介しています。v1.8.7以前のバージョンをご利用の場合には、以下のリンク先をご覧ください。

【v1.8.7まで】カスタマイザーでデザインや細かな設定をしよう

SANGOでは「テーマカスタマイザー」により、Webデザインの専門知識が無くとも自分好みにブログのスタイルを変えていくことができます。

カスタマイザーの開き方

カスタマイザーはWordPress管理画面の［外観］⇒［カスタマイズ］をクリックすると開きます。

投稿ページをプレビューしながらカスタマイズしたい場合

各ページ上部に表示される管理バーから「カスタマイズ」をクリックしてもカスタマイザーが開きます。これにより、そのページをプレビューしながらカスタマイズができます。

1つずつ設定をしよう

SANGOのカスタマイザーにはたくさんの項目が並んでいます。上から順番に1つずつ設定していきましょう。

なお、詳細設定より下にある項目（メニューなど）は、WordPress標準の設定項目です。これらはテーマに関わらず使い方が同じなので、このページでは解説を行いません。

カスタマイズの設定項目

1. サイトの基本設定

1-1. 基本情報とロゴの設定

必須サイト名やキャッチフレーズ、ロゴ画像の登録などをこちらから行います。詳しい設定方法の解説は、別のページにまとめました。

2019年10月3日ブログのタイトルとロゴ画像を設定しよう

1-2. デフォルトのサムネイル画像

必須トップページやアーカイブページの記事一覧において、アイキャッチ画像が未登録の記事に使われるサムネイル画像です。

また、投稿ページ下の関連記事に「アイキャッチ画像が未登録の記事」が表示される場合などにも、ここで登録した画像が使われます。

1-3. Google Analyticsの設定

Google Analyticsを導入したい場合には、ここにUA-12345...というようなトラッキング・コードを入力します。

新しいAnalyticsの解析タグであるgtag.jsを使用したい場合には、アクセス解析にgtag.jsを使うにチェックを入れます。トラッキングコードには、通常と同じものを入力すればOKです。

1-4. 背景画像

背景画像は基本的に登録する必要はありません。登録した場合、背景色の代わりに画像が背景に表示されるようになります。

1-5. トップページのOGP画像

トップページがTwitterやFacebookなどのソーシャルメディアでシェアされたときに使われる画像を登録します。未登録の場合は、デフォルトのサムネイル画像が使われます。

1-6. パブリッシャーを登録

構造化データに使用される「パブリッシャー（発行組織）情報」を登録します。

個人の場合には、パブリッシャー名はニックネーム等で良いかと思います。また、発行組織体を表す画像には、サイトロゴと同じものを使えば良いでしょう（PNG/JPEG推奨）。

著作権者名

各ページの最下部に「◯◯ All rights reserved」という形で表示されるコピーライト表記の設定です。空欄の場合には、○○の部分にサイト名が表示されます。

著作権者名

各ページの最下部に「◯◯ All rights reserved」という形で表示されるコピーライト表記の設定です。空欄の場合には、○○の部分にサイト名が表示されます。

2. 色

メインカラーやアクセントカラー、ヘッダーメニュー、ウィジェットタイトル、リンクなどの色をこちらから変えることができます。自分好みに色を変えたい場合に設定を行いましょう。

2020年8月13日色の設定をしよう

3. デザイン・レイアウト

3-1. 記事一覧レイアウト

SANGOでは記事一覧のレイアウトを2種類から選ぶことができます。

初期設定では、記事へのリンクが①のような縦長のカードタイプになります。②の横長タイプにしたい場合には「記事一覧のカードを横長にする」にチェックを入れましょう。

3-2. フォントサイズ

スマホ、タブレット、パソコン、それぞれの画面サイズでのフォントサイズを別に設定することができます。現在のフォントサイズを変えたい場合にのみ設定すればOKです。

3-3. フォント種類

日本語ウェブフォントを使用することができます。［デフォルト］以外を選ぶとテキストは美しくなりますが、フォントデータを読み込むぶんだけ表示速度が遅くなることにご注意ください。

4. SANGOオリジナル機能

4-1. 記事一覧タブ切替

トップページのタブ切替機能の設定です。新着記事に加えて、カテゴリー別、タグ別に記事一覧を表示することができます。詳しい設定方法は、こちらの記事で解説しています。

2018年12月20日SANGOトップページのタブ切替機能の設定方法まとめ

4-2. モバイルフッター固定メニュー

スマホ/タブレットのみで表示される画面下の固定メニューです。詳しい設定方法は下記リンク先をご覧ください。

2020年8月13日モバイル用フッター固定メニューの設定方法

4-3. ヘッダーお知らせ欄

サイト内の各ページのヘッダー下に表示される帯状のお知らせ欄です。背景色にはグラデーションを設定することができます。背景色1と2を同じ色にすると、グラデーションでは無くなります。

4-4. フォローボックス

フォローボックスとは、記事下（シェアボタンの下）に表示されるソーシャルメディアのフォローを促すパーツです。カードの背景画像には、その記事のアイキャッチ画像が使用されます。

設定は簡単。「フォローボックスを表示する」にチェックをつけ、各ソーシャルメディアのユーザー名やURLを掲載するだけです。空欄にしたメディアのフォローボタンは表示されないので、例えばTwitterのユーザー名だけを入力する、という形でも構いません。

FeedlyのURLは以下のような形になるかと思います。

例えばサルワカのFeedlyURLはhttps://feedly.com/i/subscription/feed/https://saruwakakun.com/feedですね。カスタマイザーへの貼り付け前にURLにアクセスして正しく表示されるか確認しておきましょう。

4-5. 関連記事

投稿ページのコンテンツ下に、同じカテゴリーの記事を表示する機能です。

記事下に関連記事を表示しない

ここにチェックをつけると、記事下の関連記事が非表示になります。「Googleアドセンスの関連記事型広告を掲載する」などの場合には、非表示にしておくのが良いかもしれません。

関連記事のタイトル

関連記事の上に表示されるタイトルです。空欄にするとタイトルは表示されません。タイトルにはアイコンを使うこともできます。

<i class="fa fa-bookmark main-c"></i> 関連記事

アイコンのクラス名の中にmain-cと入力すると、アイコンをメインカラーにすることができます。accent-cと入力すると、アイコンをアクセントカラーにすることができます。

参考：SANGOのFontAwesome対応

バージョンや設定により使用可能なFontAwesomeのアイコンが異なります。SANGO v1.7以上をご利用の場合、FontAwesome5がデフォルトで有効になっています。詳しくは下記リンク先をご覧ください。

2019年3月27日SANGOでFontAwesome4.7から5へと切り替える方法と注意点

関連記事のデザイン

以下の選択肢の中から選ぶことができます。

タイプA

👆こちらが初期設定のデザインです。スマホ表示の「スライダー（横スクロール）」はオフにすることができます。

タイプB

タイプC

モバイル表示で関連記事をスライダー表示にしない

タイプAもしくはBを選んでいるときにこちらにチェックを入れると、スマホ表示での横へのスライダー（スクロール）機能がオフになります。

親カテゴリーに属する記事も含める

デフォルトでは同カテゴリーの記事のみが関連記事として出力されます。こちらにチェックを入れると「親カテゴリー」と「親カテゴリーに含まれる子カテゴリー」の記事も合わせてランダムで出力されるようになります。

関連記事の表示数

最大の表示数を半角の数字で入力します。初期値は6です。

関連記事の取得順

新着記事を優先的に関連記事として表示するか、ランダムで記事を取得するか選ぶことができます。

4-6. おすすめ記事

投稿ページのコンテンツ下に、サイト内の特におすすめしたい記事へのリンクを4つまで表示させることのできる機能です。

設定方法は簡単。「おすすめ記事を記事下に表示」にチェックをつけ、表示させたい記事の投稿IDを入力するだけです。

「見出し」欄に入力したフレーズは、おすすめ記事一覧の上部に表示されます。「おすすめ記事のタイトル」欄には、記事の本来のタイトルとは別の名前でリンクを表示させたいときに入力します。空欄にすると、本来のタイトルが表示されます。

4-7. CTA

CTAは記事下に表示される「ユーザーに特定のページへのアクセスを促す」ためのパーツです。「見出し」「画像」「説明」「ボタン」を自由に設定することができます。説明文や見出しにHTMLタグは使用できないのでご注意ください。

「一部のカテゴリーの記事にはCTAを表示したくない」という場合には、以下の画像のように「CTAを表示しないカテゴリーのID」という欄にID名を半角カンマ区切りで指定します（カテゴリーIDの調べ方）。

4-8. トップへ戻るボタン

記事ページにおいて画面右下に表示される「トップ（上へ）戻る」ボタンの表示設定ができます。

4-9. シェアボタンの設定

記事下のシェアボタンを別デザインにする

チェックを入れると、記事下のシェアボタンのデザインが変わります。

記事タイトル下の円形シェアボタンをオフにする

初期設定では記事下に円形のシェアボタン（FABと呼ばれたりします：Floating Action Button）が設置されています。クリックにより、画面全体にシェアボタンが広がるというものです。

非表示にしたい場合は［タイトル下の「SHARE」をオフにする］にチェックを入れてください。

タイトル下にシェアボタンを並べて表示

チェックを入れると、タイトル下にも記事下と同じようなシェアボタンが表示されるようになります。このオプションにチェックを入れる場合、記事タイトル下の円形シェアボタンをオフにするにも合わせてチェックを入れることをおすすめします。

シェアボタンからのツイートに表示するアカウント名

サイト内の記事がTwitterでシェアされたときに@saruwakakunというようにメディアのアカウント名をツイートに含めることができます。フィールドにはsaruwakakunというようにアカウント名は除いて、入力してくださいませ。

FacebookのApp ID

重要ではないため、内容が分かる方のみご入力ください。

5. ヘッダーアイキャッチ

トップページの上部に「画像」「テキスト」「ボタン」を魅力的に表示する機能です。サイト訪問者の目を引きたい場合、誘導したいページがある場合にご活用ください。

詳しい設定方法は下記のリンク先で解説しています。

2018年7月22日ヘッダーアイキャッチ画像を設定しよう

6. 高速化

投稿/固定ページ内の画像を遅延読み込み

コンテンツ内の画像を遅延読み込みすることで、ページの表示速度を向上させます。Googleが推奨する「Intersection Observer」という仕組みを使っているためSEOの観点からも安心して使用できます。

投稿ページの記事下コンテンツを遅延読み込み

投稿ページのコンテンツ下の領域（フォローボックスや関連記事など）を遅延して読み込むことで、ページの表示速度を向上させます。

メインコンテンツ外の画像にloading=”lazy”を指定する

Chrome75〜追加された画像を遅延読み込みするための機能です。チェックをいれるとChromeでウィジェットや記事下内の画像が遅延読み込みされ、ページの読み込み速度が向上します。

Gutenberg用のCSSを読み込まない

WordPress5.0〜デフォルトでGutenberg用のCSSファイルが読み込まれるようになりました。Gutenbergを一切使わない場合は、こちらにチェックを入れることで読み込みを解除できます。

なお、エディターについては下記のページをご覧ください。

2019年3月27日SANGOで使用するエディタを選ぶ

PVを計測しない

人気記事ウィジェットを使わない場合（また使う予定がない場合）、PVの計測をオフにすることで高速化に繋がります。

7. 詳細設定

headタグ内にコードを挿入

サイトのheadタグ内にコードを挿入することができます。入力されたコードは、ホーム、固定、投稿と全ページのhead内にそのまま挿入されます。

Search Consoleなどのメタタグやlinkタグを挿入したいときにご利用ください（参考：headタグ内に書くべきもの）。なお、head内では全角スペースは使わないようにしましょう。

FontAwesome4.7を使用する

新しいサイトでSANGOを使う場合には、チェックを入れる必要はありません。

使用するFontAwesome5のバージョン番号

特定のバージョンのFontAwesomeを使いたい場合に入力します（ただしバージョン5以上にのみ対応しています）。

投稿のタイトル下にアイキャッチ画像を表示しない / 固定ページのタイトル下にアイキャッチ画像を表示しない

エディターでアイキャッチ画像を登録すると、デフォルトではタイトル下に画像が表示されます。これらの設定にチェックを入れると自動出力されなくなります。

スマホ/タブレットではサイドバーを非表示にする

PC閲覧時には右側に表示されているサイドバーは、一定より画面が小さくなると、ページ下側に配置されるようになります。「モバイル（スマホ/タブレット）表示では、サイドバーを非表示にしたい」という場合はここにチェックをつけてください。

モバイルのヘッダー検索ボタンを非表示にする

「スマホ用ヘッダー検索ボタン」を非表示にします。

絵文字用のJSを読み込まない

WordPressの初期設定では絵文字出力を調整するためのJavascriptが読み込まれます。サイト内で絵文字を使わない場合にはチェックを入れることをおすすめします。

【非推奨】自動整形をオフにする（Classic Editor）

WordPressでは標準機能により、インラインタグにpタグが自動適用されたり、改行コードがbrタグに変換されたりします（自動整形機能と言います）。チェックを入れると、wpautopと呼ばれる自動整形を行っている関数を停止します。

Gutenbergエディタに移行した際に互換性が崩れる可能性があること、WordPressの標準機能を停止するため、今後のWordPressのアップデート次第で問題が生じる可能性がゼロではないことから基本的にチェックは入れないことをおすすめします。

日付を非表示にする

記事一覧カード上/投稿ページ上の日付を非表示にします。特に理由がない限りチェックをつける必要はありません。

更新された投稿では更新日のみを表示する

チェックを入れると、更新されている記事では更新日だけが表示されるようになります。

何日前の記事までNEWマークをつけるか

記事一覧カード上には、初期設定では約3日以内に投稿された記事には、NEWマークがつきます。

このNEWマークが表示される基準日数を変えたい場合には、ここに半角数字を入力してください。0と入力すると非表示になります。

吹き出しショートコードのデフォルト設定

アイコン画像と、名前を登録しておくと、[say]テキスト[/say]というショートコードを使用したときに、ここで登録した画像・名前が表示されます。
なお、[say img="画像URL" name="名前"]テキスト[/say]と書くことで、デフォルト以外の画像・名前を使った吹き出しを挿入できます。

WordPress標準搭載の設定項目

ここから紹介する設定項目はSANGO独自のものではなく、WordPressであらかじめ用意されている項目です。

メニュー

SANGOでは、以下の3箇所にメニューを設定することができます。

1. ヘッダーメニュー（PCでのみ表示）
2. スライドメニュー（モバイルのみ）
3. フッターメニュー（ページ最下部。PC/モバイル共通）

こちらはカスタマイザー上ではなく［外観］⇒［メニュー］から設定するのが分かりやすいかと思います。詳しくは下の記事を参照ください。

ウィジェット

SANGOではウィジェットにより、サイドバーや広告、ハンバーガーメニューなどを設置することができます。ただし、カスタマイザー上ではなく、管理画面の外観⇒ウィジェットから行いましょう。詳しくはこちらの記事を参考にしてください。

2020年1月13日ウィジェットの設定をしよう：広告の貼り方も解説

ホームページ設定

ホームページ設定は、WordPressの標準機能です。この機能を活用することで、トップページに固定ページを表示させることができます。基本的には設定は不要ですが、もしトップページに固定ページを使用したい場合は、こちらの記事を参考にして頂ければと思います。

2019年12月14日SANGOで固定ページをホーム固定する方法まとめ

追加CSS

WordPressにデフォルトで実装されているCSS追記スペースです。テーマのスタイルを上書きしたい場合にこちらをご利用ください。

2019年5月13日WordPressの子テーマとは？安全にカスタマイズを行う方法