ワードプレスのテーマ・プラグインをインストールして、SSLなどの初期設定をしたら、ようやくホームページのデザインを整えていく段階です。
テーマごとに独自の設定項目がありますので、まずはそこから設定していきましょう！
今回は、ワードプレス無料テーマ『Cocoon』で固定ページをトップページにしたコーポレートサイト風なブログ色の薄いホームページの作り方についてご説明していきます。
ワードプレスにログインして設定画面を開こう
ワードプレスにログインしたら、左側メニューから「Cocoon設定」をクリックしてください。
このような画面が開きます。
多くのタブがありますが、やっておいたほうがいい基本設定をしていきます。
「全体」タブの設定
全体タブをクリックすると、ウェブサイト全体に影響する部分の設定項目が表示されます。
下記を順番にチェックしていってください。記述がない箇所は変更なしで大丈夫です。
キーカラー
サイトキーカラーは、サイト全体のポイントとなる部分に適用される背景色です。例えば、ヘッダーの背景色やサイドバーの見出しの背景色、投稿の見出しの背景色などです。
目立つ部分に使われる色になるので、ホームページの印象を左右します。「こんなふうに見られたい」というイメージの色や好きな色にしましょう。
なお、色選びについては「ホームページを作り始める前にやっておくべき2つのこと」で選び方について書いていますので、参考になさってください。
サイトキーテキストカラーは、サイトキーカラーを背景色としている場所の文字色です。
サイトキーカラーを濃い色にしている場合は、白（#ffffff）がおすすめです。サイトキーカラーが薄めの色の場合、黒めがおすすめです（#333333）。
サイトフォント
ホームページの文字のフォントが選べます。フォントは「ご自身のホームページのテーマにあったもの」という選び方で大丈夫です。
ホームページ上のフォントはゴシックが見やすいと言われていますので、明朝体よりゴシック体を選ぶことをおすすめします。
文字サイズと文字色
文字サイズと文字色は、特にこだわりがない場合を除き、そのままで問題ありません。
サイトアイコンフォント
「Font Awesome 5」にチェックを入れましょう。（もし「Font Awesome 6」が追加されましたら、そちらにチェックを入れましょう）
サイト背景色・サイト背景画像
設定を変更しなければ、薄いグレーです。必要に応じて設定変更してください。（私はいつも背景は画像にせず白色にしています）
サイドバーの表示状態
サイドバーを設定する方は、どのページで設定するかチェックを入れてください。
例えば、トップページは1カラムにして、その他のページでは表示させたい場合、「フロントページで非表示」を選択します。
トップページと固定ページでは非表示にして、投稿ページでは表示させたい場合、「固定ページで非表示」を選択します。（トップページを固定ページにした場合に有効）
「ヘッダー」タブの設定
ヘッダータブでは、ヘッダーのロゴの位置を調整したり、文字を画像に変更したり、ヘッダーの背景色を変えたりできます。
ヘッダーの見せ方はお好みによりますので、設定してみて良いと思う選択を採用なさってください。
ヘッダー全体色
なお、全体タブで設定したヘッダー背景色とヘッダー文字色を変更したい場合は、このヘッダータブの「ヘッダー全体色」の項目で各色を変更すると、こちらが優先されます。
グローバルナビメニュー幅
「メニュー幅をテキストに合わせる」にチェックを入れておくと、メニューを設定した時に、各メニューの文字数に応じて幅を調整してくれるのでおすすめです。
「SEO」タブの設定
「日付の設定」の中の「表示する日付」は、お好みではありますが「更新日のみの表示」にチェックすることをオススメします。もし、これ以外の場合は、「投稿日・更新日を表示」にすることをオススメします。
SEO的に「更新日」は検索エンジンへ伝わった方が良いので上記の設定をオススメしています。
「広告」タブの設定
広告設定をしない方は、「全ての広告を表示」と「全てのアドセンス広告を表示」のチェックを外してしましましょう。
「本文」タブの設定
外部リンク設定
「外部リンクの開き方」を「新しいタブで開く」にしておくことをおすすめします。
テーブル設定
「レスポンシブテーブル」の「横幅の広いテーブルは横スクロール」にチェックを入れることをおすすめします。
投稿情報表示設定
ひとりで運営されている場合は、「投稿者名の表示」のチェックを外しておいてよいと思います。（お好みで大丈夫です）
「目次」タブの設定
各ページに目次を表示させるかどうかの設定です。
全てのページで目次を表示させない場合は、「目次を表示する」のチェックを外して終わりですが、表示させる場合は、どこで表示させるか等を設定しましょう。
設定はお好みですが、私は表示するページは「投稿ページ」のみにチェックをしています。
「SNSシェア」タブの設定
各ページにSNSシェアのボタンをどう表示させるかの設定です。
この設定もお好みですが、私は下記のように設定しています。
- 「メインカラムトップシェアボタンを表示」のチェックを外す。
- 「メインカラムボトムシェアボタンを表示」のチェック入れたまま。
- シェアメッセージを「＼ share please ／」などに変えています。
- シェアボタンを表示するページは「投稿ページ」のみにしています。
- ボタンカラーを「ブランドカラー（白抜き）にしています。
- 「ツイートにメンションを含める」にチェックを入れています。
「SNSフォロー」タブの設定
こちらもお好みですが、私は「本文下のフォローボタンを表示する」を外しています。
「フッター」タブの設定
こちらもお好みなんですが、デフォルトでは「ロゴ＆メニュー＆クレジット」となっていて、ヘッダー画像にロゴを設定していると、そのロゴが表示されるようになっています。
そのデザインで良いのであれば問題ありませんが、もっとシンプルな表示にしたい場合は、「フッター表示タイプ」を「メニュー＆クレジット（左右）」か「メニュー＆クレジット（中央揃え）」にすることをおすすめします。
また、クレジットにはデフォルトでホームページタイトルが表示されるようになっています。ここを屋号やお名前に変更したい場合は、「クレジット表記」内の「著作権者表記」に記入してください。
「ボタン」タブの設定
ボタンは、ホームページ右下に出てくる「トップへ戻る」ボタンの設定項目です。
デフォルトではシンプルな色合いになっているので、ホームページに合わせた色やお好みのアイコンに変更しましょう。画像の設定も可能です。
「モバイル」タブの設定
スマホでのメニュー表示などの設定項目です。
選択はお好みとなりますが、ぜひ設定しておきましょう。
まり子この時点で設定しておいた方が良い項目は以上の通りです。
ここまでできましたら、ぜひ、トップページの作成に入りましょう！
