サイト基本情報の設定方法

サイト基本情報の設定方法

2019.07.22
サイト基本情報

サイトのタイトルやロゴなどの基本情報の設定について解説します。

ロゴ画像の設定

画像の選択

ロゴ画像の設定を始める

ロゴ画像は「ロゴ」設定の「ロゴを選択」部分をクリックして設定をします。

ロゴ画像のアップロード・選択

画像のアップロード・選択画面が表示されるので、画像をアップロードするか、アップロード済みの画像を「メディアライブラリ」から選択します。

画像の切り抜き設定

画像の切り抜き設定画面が表示されるので、好みに応じて画像を切り抜きします。

白い四角をドラッグすると切り抜き領域を変更できます。

切り抜き領域を変更できたら右下の「画像切り抜き」をクリックします。

切り抜きしない場合

画像を切り抜きしない場合は「切り抜かない」ボタンをクリックします。

選択したロゴ画像が表示される

選択したロゴ画像がヘッダー部分に表示されました。

画像サイズが大きい場合は、後述の「画像の表示サイズ設定」で表示サイズを調整しましょう。

画像の表示サイズ設定

選んだ画像が大きい場合のサイズ調整

選んだロゴ画像が大きく表示されてしまう場合、「ロゴの表示幅」設定で調整しましょう。

入力欄に表示する画像の横幅(px)を入力します。高さは画像縦横比を保つように自動で決定されます。

PC・タブレットでの表示サイズ

「ロゴの表示幅(PC・タブレット)」ではタブレット・PC表示でのロゴ画像のサイズを入力します。

200〜300程度がおすすめです。

スマホ表示のロゴ画像サイズを入力する

「ロゴの表示幅(スマホ)」ではスマートフォン表示でのロゴ画像表示サイズを入力します。

100〜200がおすすめです。

PCで設定をしている場合、上の画像を参考に、画面左下のスマートフォンアイコンをクリックすると簡易的にスマートフォンサイズでプレビューができます。

(元に戻す場合、左側にあるデスクトップモニターのアイコンをクリックします。)

画像ではなく、サイト名を表示する方法

ロゴ画像を表示せず、テキストを表示する

ロゴ画像ではなく、サイトタイトルを表示したい場合「ロゴを非表示にする」にチェックを付けるとロゴ画像が表示されなくなります。

※SNSでシェアされたときのプレビュー画像など、システム的にロゴ画像を使っている部分がいくつかあるため、タイトルを表示したい場合でもロゴ画像の設定をおすすめします。

サイト名・キャッチフレーズの設定

サイトタイトル・キャッチフレーズの設定

サイトタイトルとキャッチフレーズの入力

サイト名とサブタイトルとなるキャッチフレーズを「サイトのタイトル」「キャッチフレーズ」に入力します。

titleの区切り文字

ブラウザのタブや検索結果に表示される際にタイトルとキャッチフレーズの区切り文字を「titleタグの区切り文字」で設定できます。

「-」や「|」などがおすすめです。

キャッチフレーズを非表示にする方法

キャッチフレーズを非表示にする

ヘッダーにキャッチフレーズを表示したくない場合は「キャッチフレーズを非表示にする」にチェックを入れると、ヘッダーからキャッチフレーズ部分が取り除かれます。

サイトアイコン(ファビコン)の設定

サイトアイコンの設定

ブラウザのタブに表示されるアイコン画像(ファビコン)を設定できます。

縦横512px以上の正方形画像がおすすめです。

apple touch iconの設定

iPhoneなどのホーム画面に追加した時の画像設定

apple touch iconの設定ではiPhoneの「ホーム画面に追加」などでホーム画面に追加される画像を設定できます。

サイトアイコンに設定した画像が背景透過の場合、ホーム画面に追加する画像が黒くなってしまう為、サイトアイコンとapple touch iconは別々の画像を設定することをおすすめします。