この記事ではWordPressテーマSANGOの購入後の初期設定、特にデザイン設定をピックアップして丁寧に解説していきます。
SANGOはカスタマイズが非常に豊富で迷うことがあるかもしれませんが、この記事ではポイントを押さえ大切な設定のみを網羅していきます。
順に読み進めていくだけで簡単にセットアップが完了します！
前回はSANGOの機能設定をまとめました。この記事ではデザイン面の設定を中心に解説していきます。
まずは機能設定(前回)、そしてデザイン設定(今回)の2つに分けて解説していきます。
記事執筆時のバージョン：v3.3~
[広告]おすすめサーバー
デザイン設定の大まかな流れ
のデザインの設定は主に外観 ＞カスタマイズにある設定から行います。
まずは左サイドバーからカスタマイズを開きましょう。
これがカスタマイザーになります。
これからSANGOの基本設定を行っていきましょう。
🛠️サイトの基本設定(外観) 重要
アイコンを作るのが難しい場合、すぐに用意せずあとからでもOKです。
| 画像を選択 | 1つ1つの記事に、画像を設定しないときに表示する代わりの画像を設定します。 設定しなければ海の写真が使われます | |
| ウィジェットでデフォルトのサムネイル画像を使用する | ウィジェットでも👆で設定した画像が使われるようになります。 オンにしておきましょう。 |
設定すると画像のように背景画像を設定することができます。
もし設定する場合、薄く・目立たない画像を使うと目に優しいです、
[広告]おすすめサーバー
🎨色の設定 重要
ここからは色の設定をしていきます。まだインストールしたてなのでデフォルトの青色ですが、さまざまな部分の色を変えることができます。
色の組み合わせが難しい場合はサルワカの配色パターンを使うと、好きな色の組み合わせが見つかるかもしれません。
好きな色が見つかったら、色の下に書かれているカラーコードを貼り付けましょう。
| 背景色 | サイトの背景の色を選びます。薄めの色がおすすめです | |
| メインカラー | サイトの多くの場所で使われる色です。好きな色を選びます。 | |
| 薄めの下地色 | サイトの一部の場所で使われる色です。少し薄めの色を選びます。 メインカラーと同じような色がおすすめです！ | |
| アクセントカラー | サイトの一部の場所で使われる色です。目立つ色を選ぶとワンポイントになります。 | |
| リンク色 | 青系の色がおすすめです。そのままでOK. | |
| ヘッダー背景色 | サイトのロゴやタイトルが憑依されるページ上、ヘッダーの背景色を選びます。メインカラーと合わせておくといい感じです。 | |
| ヘッダータイトル色 | ヘッダーに画像でなくタイトルを使っているときの文字色設定です。 見やすい色を付けておきましょう。 | |
| ヘッダーメニュー文字色 | ヘッダーにメニューを設定したときに使われる色です。見やすい色を付けておきましょう。 | |
| ウィジェットのタイトル色 | ページ右側に表示されるウィジェットのタイトル文字色設定です。 | |
| ウィジェットタイトルの背景色 | ージ右側に表示されるウィジェットのタイトル背景色設定です。 | |
| フッターウィジェットの背景色 | HOMEボタンなどが表示されるページ下、フッターの背景色を選びます。メインカラーと合わせておくといい感じです。 | |
| フッターウィジェットの文字色 | HOMEボタンなどが表示されるページ下、フッターの背景色を選びます。 見やすい色を付けておきましょう。 |
色設定は多いので、必須とつけた部分だけの設定でも十分です！
デフォルトの青色が好きな方はそのまま使うのも全然アリです。
✨デザイン・レイアウト お好み
サイトの細かいデザインなどを変えることができます。そのままで問題ありません。
トップページの記事一覧カードを横長にする
SANGOではトップページの記事デザインは2種類選択できます。(自由レイアウトで作ればスライダーなど6種類使えます)
お好みで選びましょう。
【モバイル】トップページの記事一覧カードを2カラム表示にする
モバイルなどで画面が小さくなると初期設定では記事が1列に表示されます。
2列に表示したい場合はオンにしておきましょう。
カテゴリー/アーカイブページの記事一覧カードを横長にする
カテゴリー/アーカイブページでも記事を横長タイプにしたいときはオンにしましょう。
何日前の記事までNEWマークをつけるか
例えば「2」にすると、2日前以降に公開された記事に一覧ページでNEWがつきます。デフォルトは「3」。表示しない場合は0にします。
| 投稿のタイトル下にアイキャッチ画像を表示しない | アイキャッチ画像を登録している場合でも非表示にします。 | |
| 固定ページのタイトル下にアイキャッチ画像を表示しない | アイキャッチ画像を登録している場合でも非表示にします。 | |
| 日付を非表示にする | 投稿の投稿日時を非表示にします。 | |
| 更新された投稿では更新日のみを表示する | 更新した投稿で、投稿日を非表示にします。 | |
| ページ内リンクスクロール位置 | ヘッダーを固定表示している場合にリンクとび位置を調整することができます。 |
スマホ・タブレット・PC別にフォントサイズを指定することができます。
| 規定値 | 優先度 | |
|---|---|---|
| スマホでのフォントサイズ | 100 | |
| タブレットでのフォントサイズ | 107 | |
| PCでのフォントサイズ | 107 |
大きすぎたり小さすぎると読みづらくなりますので、初期設定のまま使うのがおすすめです。
Webフォントを読み込むことでサイトの文字の見た目を簡単に変えることができます。
通常であればCSSなどが必要ですが、SANGOでは簡単にフォントを使えるようになっています。
フォントを読み込むとサイトが遅くなります。サイトを高速化したい方はデフォルトのままにしておきましょう。
| スマホ/タブレットではサイドバーを非表示にする | スマホ/タブレットでサイドバーを非表示にします。 | |
| 固定サイドバーの位置 | ヘッダーを固定表示している場合に追尾サイドバーの表示位置を調整することができます。 |
ヘッダーやフッター、404ページや記事下のコンテンツを自由に組み立てられるようにする設定です。
各コンテンツをカスタマイズし柔軟にコンテンツを配置することができます。
[広告]おすすめサーバー
💻SANGOオリジナル機能 推奨
ここからはSANGOで独自に搭載されている機能の設定をしていきます。
様々な設定がありますが、自分が使いたい機能のみ有効化していきましょう。
必要・便利な機能を厳選しました。
👆はSANGOカスタマイズガイドに掲載されている画像です。
このようにページの下に常に表示されるメニューを作ることができます。
シェアなども設置することができ便利です。設定すると利便性向上につながります！
👆画像のようにヘッダーの後に文字やアイコン、URLを設定できます。
見てほしいページの宣伝や、目立たせたいメッセージにちょうどいいですね。
| お知らせ文 | 伝えたいこと・宣伝したいことを入力します。 | |
| 背景色1 | 背景色を選びます。両方同じ色に設定すれば単色で表示できます。 | |
| 背景色2 | 背景色を選びます。両方同じ色に設定すれば単色で表示できます。 | |
| 文字色 | 文字の色を指定します。見やすい色を選びます。 | |
| リンク先URL | クリックしたときに飛ぶURLを設定します。入力しなければ文字のみのお知らせ欄になります。 |
👆記事の下におしゃれなフォローボックスを設置することができます。
TwitterやFacebook、LINEなどのフォローボタンを設置することができます。
フォローボックスを表示するにチェックを入れると表示されるようになります。
エディター(記事を書く画面)の設定
👆画像のように記事の下に同じカテゴリのほかの記事を表示することができます。
設定しておくことで回遊率のアップが見込めるので、ぜひやっておきましょう。
| 記事下に関連記事を表示しない | チェックを外すことで表示されます。 | |
| 関連記事のタイトル | 関連記事などのタイトルを入力します。 | |
| 関連記事のデザイン | 3種類のデザインから選ぶことができます。 | |
| モバイル表示で関連記事をスライダー表示にしない | タイプAもしくはBのとき、スマホでスライドしないようにしたいとき有効化します | |
| 親カテゴリーに属する記事も含める | 親カテゴリ、その子カテゴリの記事も表示するようになります。通行化しておくのがおすすめです。 | |
| 関連記事の表示数 | お好みで加減してください。規定値は6です。 | |
| 関連記事の取得順 | ランダムまたは新規順で選びます。 | |
| ○日前より後に公開された記事のみ表示 | 10にすれば10日前以降に投稿された記事のみ表示します。基本的に0にするのがおすすめです。 |
👆クリックするとページの一番上までスクロールする機能の設定です。ページの下から上に戻るのは大変なので、つけておくのがおすすめです。
すべてチェックを入れておくのがおすすめです。
| トップへ戻るボタンを表示する(モバイル) | スマホ・タブレットでトップに戻るボタンを表示します | |
| トップへ戻るボタンを表示する(PC) | PCでトップに戻るボタンを表示します | |
| ボタン色 | ボタンの色を設定します。メインカラーと合わせておくのがおすすめです。 |
シェアボタンからのツイートに表示するアカウント名
シェアボタンを押したとき、ここで設定したアカウント名を出すことができます。
自分のTwitterアカウント名を@を含めないで入力します。
⚙詳細設定(外観)お好み
サイトの見た目に関する細かい設定をすることができます。
| モバイルのヘッダー検索ボタンを非表示にする | |
| アイテムを表示する際のアニメーションを無効にする | |
| 【非推奨】自動整形をオフにする（Classic Editor） | |
| 吹き出しショートコードのデフォルト設定 | |
| 投稿ページのシェアボタンを常に非表示にする |
前回の記事ではSANGOの機能設定をまとめました。まだみていないかたは是非ご覧ください。
疑問点や質問があったら…
SANGOテーマについての質問、仕様、不具合報告、SANGO Landのリクエストに関するお問い合わせはすべて、SANGO公式のフォーラムから直接運営の方にお問い合わせください！
最後に
この記事がお役に立ちましたら、ぜひほかのSANGOユーザーさんにも広めて頂けるととてもうれしいです。
Xでの拡散やフォローをお待ちしています！
