Ver1.6 Released !

【Ver1.4.1まで】SANGOのカスタマイザーの設定方法

SANGO

この記事では、Ver1.4.1時点でのカスタマイザーの設定方法を紹介しています。Ver1.5〜をご利用の場合には、以下のリンク先をご覧ください。

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

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

カスタマイザーの開き方

カスタマイザーはWordPress管理画面の[外観]⇒[カスタマイズ]で開くことができます。

カスタマイズを選ぶ

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

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

投稿ページからカスタマイズを選ぶ

1つずつ設定をしよう

注意
カスタマイザーのプレビュー画面でリアルタイムに変更が反映されないことがあります。その場合「公開」をクリックした後、ブラウザを更新してページを読み込み直して頂くようお願いします。

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

MEMO
右側に表示されるプレビュー画面に設定項目が反映されない場合があります。そのような場合には保存してページを読み込み直してご確認ください。

サイト基本情報

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

タイトルとロゴの設定 ブログのタイトルとロゴ画像を設定しよう

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

色の設定をする 色の設定をしよう

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

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

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

また、記事ページフッターの関連記事に「アイキャッチ画像が未登録の記事」が表示される際にも、ここで登録した画像が使われます。

関連記事に表示されるデフォルトサムネイル

サイズに注意
デフォルトのサムネイル画像には、必ず600px以上、高さ310pxのものを登録するようにしましょう(形式はJPEG、PNG、GIFのいずれか)。

背景画像

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


メニュー

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

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

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


ヘッダーアイキャッチ画像/2分割ヘッダーアイキャッチ

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

ヘッダーアイキャッチ画像の例

 

詳しい設定方法はこちらの記事で解説しています。

ヘッダーアイキャッチを設定する ヘッダーアイキャッチ画像を設定しよう

記事一覧レイアウト

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

①初期設定記事一覧カードタイプ
②横長タイプ横長の表示

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

MEMO
トップページとアーカイブページで別のレイアウトを選択することができます。アーカイブページとは「カテゴリーページ」「日付別ページ」「著者別ページ」「タグ別ページ」などを指します。

記事一覧タブ切替機能

タブ切替

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

SANGOのタブ機能 SANGOトップページのタブ切替機能の設定方法まとめ

ウィジェット

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

ウィジェットの設定をする ウィジェットの設定をしよう:広告の貼り方も解説

ホームページ設定

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

SANGOで固定ページをホーム固定する方法まとめ

関連記事(記事下)

同じカテゴリーの記事を表示する機能です。

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

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

MEMO
関連する記事(=同カテゴリーの記事)がない場合には、チェックをつけなくても表示されないことがあるのでご注意ください。

関連記事のタイトル

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

タイトルの入力例
<i class="fa fa-bookmark main-c"></i> 関連記事

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

関連記事のデザイン ver1.3〜

ver1.3〜関連記事のデザインをタイプA〜Cの3種類から選ぶことができるようになりました。

タイプA

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

タイプA スマホ表示

関連記事 タイプA スクロールあり

タイプA スマホ表示(スクロールなしにチェックを入れた場合)

関連記事 タイプA スクロールなし

タイプA PC表示

関連記事対応A PC

タイプB

タイプB スマホ表示

タイプB スクロールあり モバイル

タイプB スマホ表示(スクロールなしにチェックを入れた場合)

タイプB PC表示

タイプB PC表示

タイプC

タイプC スマホ表示

タイプCモバイル

タイプC PC表示

タイプC PC

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

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

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

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

関連記事の表示数

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


おすすめ記事(記事下)

記事下にサイト内の特におすすめしたい記事を4つまで表示させることのできる機能です。

おすすめ記事

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

おすすめ記事の設定

投稿IDの調べ方
確認したい記事の編集画面を開き、URLを見てみると「post=◯◯」というように数字が含まれているはずです。この数字が投稿IDになります。

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


フォローボックス(記事下)

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

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

フォローボックスの設定

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

コード
https://feedly.com/i/subscription/feed/サイトのURL/feed

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


CTA(記事下)

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

CTAのサンプル

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


ヘッダーお知らせ欄 ver1.3〜

ヘッダーお知らせ欄

ver1.3〜サイトのタイトル下に、お知らせ欄を設置できるようになりました。背景色にはグラデーションを設定することができます(背景色1と2を同色にすると、グラデーションでは無くなります)。


トップへ戻るボタン

トップへ戻るボタン

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


フッター固定メニュー(モバイルのみ)

フッター固定メニュー

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

モバイル用フッター固定メニューの設定方法

詳細設定

「詳細設定」では細かなテーマの設定を行うことができます。ここでは、1つずつ簡単に解説していきます。

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

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

デフォルトのシェアボタン

デフォルト

別デザインのシェアボタン

チェックをつけた場合

なお、別デザインのシェアボタンにするとGoogle+のシェアボタンは表示されなくなることにご注意ください(基本的に不要かとは思いますが)。

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

チェックを入れると、タイトル下にも記事下と同じようなシェアボタンが表示されるようになります。

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

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

このボタンですが、広がるようなアニメーションを含めHTMLとCSSだけで表現しています。オフにしてもほとんど軽くはなりませんが、ジャマだという場合には「円形シェアボタンをオフにする」にチェックをつけてくださいませ。

MEMO
円形シェアボタンは、過去のAndroid端末に含まれていた「標準ブラウザ」には対応していません(このブラウザは既にサポート外であることに加え、セキュリティ上の貧弱性も発見されているそうなのでさほど気にする必要はないかもしれません)。

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

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

MEMO
ただし、非表示になるのは記事/固定ページのみです。記事下にはおすすめ記事や、関連記事、CTA、広告などが配置されるため、サイドバーがさらにその下に表示されることにはメリットが小さい(ページが重くなるデメリットの方が大きい)と感じたので、この設定を用意しています。

リップルエフェクトをオフにする

リップルエフェクトとは、クリックしたときに波紋が広がるようなエフェクトのことです。Googleのマテリアルデザインではよくこの表現が取り入れられています。

フラットボタンへのリップルエフェクト

SANGOでは、リップルエフェクトの導入のためにRipplerというプラグインをデフォルトで導入しています。

参考 RipplerAuthor : blivesta

上記のリンク先で紹介されているクラス名をHTMLに追加することで、簡単にリップルエフェクトを使うことができます。また、ショートコードで挿入できるボタンの中には、リップルエフェクトを取り入れたボタンもあります。

ボタンの挿入方法とデザイン一覧 ボタンの挿入方法と種類一覧

リップルエフェクトと使用したくないという場合には「リップルエフェクトをオフにする」にチェックを入れてください。専用のCSSとJSが読み込まれなくなるため、少し軽くなります。

フォントサイズ

スマホ、タブレット、パソコン、それぞれの画面サイズでのフォントサイズを別に設定することができます。

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

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

NEWマーク

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

Google Analytics

Google Analyticsを導入したい場合には、ここに「UA-12345…」というようなコードを入力します。なお、SANGOのVer1.3.2〜は、新しいAnalyticsの解析タグであるgtag.jsに対応しました。gtag.jsのコードを使いたいときには「アクセス解析にgtag.jsを使う」にチェックを入れてください。トラッキングコードには、通常と同じものを入力すればOKです。

headタグ内にコードを挿入

Ver1.3.2〜、headタグ内に簡単にコードを入れられるようになりました。Search Consoleなどのメタタグやlinkタグを挿入したいときにご利用ください(参考:headタグ内に書くべきもの)。なお、こちらのフィールドに入力したコードは、ホーム、固定、投稿と全ページのhead内にそのまま挿入されます。head内では、全角スペースは使わないようにしましょう。

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

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

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

ここに名前

これが吹き出しのショートコードです

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


パブリッシャーを登録

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

MEMO

構造化データとは、ものすごくざっくりというと検索エンジン等に対して記事の情報をより詳細に伝えるものです。現状直接的なSEO効果のあるものではありませんが、検索結果に構造化データで指定した情報が表示されることもあるため、実装しておくにこしたことはありません。

といってもSANGOの場合、パブリッシャー情報の登録以外の設定は特に必要はありません(自動で実装されます)。

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


追加CSS

WordPressにデフォルトで実装されているCSS追記スペースです。こちらに記入しても良いのですが「誤って消えてしまうリスク」や「管理のしやすさ」を考えると子テーマを用いて、CSSを追記していくことをおすすめします。

WordPressで子テーマを活用して安全にカスタマイズを行う方法