WordPress 制作早見図

■ 初期準備
- ・ドメインの取得（お名前ドットコム）
- ・レンタルサーバーの設定（ロリポップ）
■ 初期設定
■ 検索設定
■ サイト全域の全ページ共通設定
■ ヘッダー全域の設定
■ コンテンツ上部
■ メインカラム全域の共通設定
■ メインカラムスクロール追従
■ サイドバー
■ サイドバースクロール追従
■ コンテンツ下部
■ フッター全域
■ フッターメニュー
■ フッター左
■ フッター中
■ フッター右
■ ウィジェットの設定
■ ウィジェットをぺージごとに表示、非表示にする設定
■ ウィジェットの種類

サイト公開後に行う作業
その他のエラーや不具合とその解決策

■ 初期準備

・ドメインの取得（お名前ドットコム）

・レンタルサーバーの設定（ロリポップ）

独自ドメイン

Word pressサイトのURLを独自ドメインにする設定（●●.jp）
：ロリポップの設定：
サーバーの管理・設定 ⇨ 独自ドメイン※普通は設定済なので特に何もしなくてよい

サブドメイン

Word pressサイトのURLをサブドメインにする設定（○○.●●.jp）
：ロリポップの設定：
サーバーの管理・設定 ⇨ サブドメイン設定 ⇨ 新規作成 ⇨ サブドメイン爛 ⇨
http://「任意の文字を入力（○○）」.「独自ドメインを選ぶ（●●.jp）」 ⇨

●Word pressデータのアップロードフォルダ(保存先)をサブディレクトリに設定する。
公開 (アップロード) フォルダ ⇨ アップロードフォルダにする名前を入力
※何も入力しないとドメイン直下にインストールされる。ドメイン直下だと後の管理が大変なのでサブディレクトリにインストールする方が良い
※セキュリティのためにワードプレスだと分からない名称にする

⇨「アクセレータを有効にする」をチェック ⇨ 作成

アップロードフォルダ

Word pressデータのアップロードフォルダ(保存先)の確認設定
：ロリポップの設定：
サーバーの管理・設定 ⇨ 独自ドメインかサブドメインを選択 ⇨ サイトのURL右の「確認・変更」

アップロードフォルダの変更

Word pressデータのアップロードフォルダ(保存先)を変更する
：ロリポップの設定：
サーバーの管理・設定 ⇨ 独自ドメインかサブドメインを選択 ⇨ サイトのURL右の「確認・変更」 ⇨ 公開 (アップロード) フォルダ ⇨ アップロードフォルダにする名前を入力 ⇨ 更新
※ワードプレスだと分からない名称にする

SSL化

ドメインをSSL化する（http➡https）
：ロリポップの設定：
セキュリティ ⇨ 独自SSL証明書導入 ⇨ SSL保護されていないドメイン ⇨ 独自SSL(無料)を設定する ⇨ 「SSL設定作業中」となりしばらく経つと「SSL保護有効」となる ⇨ 以下へ続く ⇩

「SSL化の設定続き（wordpressでの設定）」

Word pressのインストール

Word pressをサーバーにインストールする
：ロリポップの設定：
サイト作成ツール ⇨ word press簡単インストール ⇨ サイトURL ⇨
http://『上記で設定済の独自ドメインまたはサブドメインを選択』/『上記で設定済のサブディレクトリをに入力』

■ 初期設定

不用な初期設定を削除

WordPressで新規にサイトを作る上で、最初から設定してあるものが邪魔なのでそれぞれ非表示にする

① トップシェアボタンを非表示にする：
Cocoon設定 ⇨ SNSシェア ⇨「メインカラムシェアボタンを表示」のチェックを外す

② ボトムシェアボタンを非表示にする：
Cocoon設定 ⇨ SNSシェア ⇨「メインカラムボトムシェアボタンを表示」のチェックを外す

③ フォローボタンを非表示にする：
Cocoon設定 ⇨ SNSフォロー ⇨「本文下のフォローボタンを表示する」のチェックを外す

④ サイドバーを非表示にする：
外観 ⇨ ウィジェット ⇨「サイドバー」内にあるウィジェットを削除

⑤ サイドスクロール追従を非表示にする：
外観 ⇨ ウィジェット ⇨「サイドスクロール追従」内にあるウィジェットを削除

日付の非表示

日付を非表示にする
・すべての固定ページで非表示にする場合：
外観 ⇨ テーマファイルエディター ⇨「選択したファイルの内容：」内の一番下の行に以下のコードを追加↓↓↓↓

/*日付けを消す*/
.page .date-tags { display: none; }
/*日付けを消す*/

・指定した固定ページのみ非表示にする場合：
固定ページ ⇨ 固定ページ一覧 ⇨ 消したいページのIDをメモする ⇨ 外観 ⇨ カスタマイズ ⇨ 「追加CSS」⇨ 以下のコードを追加↓↓↓↓
(※〇〇にはメモしたIDを記入)

/*日付けを消す*/
.post-〇〇 .date-tags,
.post-〇〇 .date-tags,
.post-〇〇 .date-tags {
display: none; }
/*日付けを消す*/

アーカイブページのリンク

フッターの上にあるアーカイブページ(auther)のリンクを消す
：CSSを編集して投稿者名を非表示にする：
外観 ⇨ テーマファイルエディター ⇨「選択したファイルの内容:」内の一番下の行に以下のコードを追加↓↓↓↓
※間違えて編集してしまうと戻せなくなる可能性があるので十分注意

/*著者情報を消す*/
.page .author-info {
display: none;
}
/*著者情報を消す*/
.post .author-info {
display: none;
}

初期設定のぺージ削除

・初期にある不用な固定ページ(サンプルページ)を削除する
固定ページ ⇨ 不用なページにチェックを入れる ⇨ ゴミ箱に移動 ⇨ 適用

・初期にある不用な投稿ページ(Hello world!ページ)を削除する
投稿 ⇨ 不用なページにチェックを入れる ⇨ ゴミ箱に移動 ⇨ 適用

ぺージタイトルの非表示

初期設定ではぺージタイトルはブラウザで全ページの上段に表示されるので全ページで非表示にする。
：CSSを使う：外観 ⇨ カスタマイズ ⇨『追加CSS』に以下のコードを追加

h1.entry-title{
display:none;
}

※プラグインを使うと動作しなくなるリスクがあるがこちらの方法だと一つのコードでまとめて消せるのでお勧め。

管理ページの表示変更

WordPress管理ページの「固定ぺージ」や「投稿」などの表示を変更する
各ページ右上の「表示オプション」から変更。※コンパクト表示がお勧め

フロントページ

最初に表示されるぺージ（ホームぺージ）の設定
設定 ⇨ 表示設定 ⇨ ホームページの表示 ⇨ 「固定ページ(以下で選択)」にチェックを入れる ⇨ 「ホームぺージ」の右欄からトップページにしたいぺージを選択

■ 検索設定

サイトアドレス

検索結果画面の最上段に表示されるサイトのアドレス（URL）の設定。
設定 ⇨ 一般 ⇨ サイトアドレス (URL) ⇨ 記入
※絶対やってはダメ※『WordPress アドレス (URL)』を変更すると管理ページもHPも表示できいなくなる

サイトアドレスの変更

サイトのURLがサブディレクトリまで含まれている場合に、サブディレクトリを消してすっきりしたURLにするための設定です
https://www.iyes.jp/wp　⇨　https://www.iyes.jp
：ユーザー設定：
①「ユーザー」
②「プロフィール」
③「サイト」欄のURL『http://〇〇.〇〇/■■』を『http://〇〇.〇〇』にする
④「プロフィールを更新」
：一般設定：
①「設定」
②「一般」
③「wordpressのアドレス（URL）」右欄の『http://〇〇.〇〇/■■』を『http://〇〇.〇〇』にする
⑩「サイトアドレス（URL）」右欄の『http://〇〇.〇〇/■■』を『http://〇〇.〇〇』にする
※注意事項：「wordpressのアドレス」右欄の『http://●●.●●』の『●●.●●』は絶対に変更してはいけない。変更すると管理ページもサイトも表示されなくなる
⑪「変更を保存」⇨ 管理者画面のログイン画面に移動します

サイトのタイトル

サイトのタイトル設定。検索画面でもっとも大きく表示される箇所。
①「各ページのタイトル」＋ ②「サイト全体のタイトル」で構成される。

①「各ページのタイトル」の設定
設定するぺージ(固定ページか投稿)を選択 ⇨ 設定するぺージにカーソルを合わせる ⇨ クイック編集 ⇨「タイトル」に入力 ⇨ 更新
※こちらを変更するとメニューの名前もこちらで設定した名前に変更されるので、メニュー名を別途設定したい場合は以下を参照

メニュー名の変更へ➡

②「サイト全体のタイトル」の設定
設定 ⇨ 一般 ⇨ サイトのタイトル ⇨ 記入

サイトの説明

サイトの説明文になる。検索結果でタイトルの下に表示される文章。各ぺージごとに設定可能。
：プラグイン『Yoast SEO』使用：
設定するぺージ(固定ページか投稿)を選択 ⇨ ぺージ最下部の「Yoast SEO」⇨ 「メタディスクリプション」に記入

■ サイト全域の全ページ共通設定

サイト全体のマージン(外余白)とパディング(内余白)の設定

マージンの設定
外観 ⇨ カスタマイズ ⇨ 追加CSSに以下を追加し■に任意の数値を入れる

/* マージン設定 /
body { margin-top: ■px; / 上部のマージン /
margin-bottom: ■px; / 下部のマージン /
margin-left: ■px; / 左側のマージン /
margin-right: ■px; / 右側のマージン */
}

パディングの設定
外観 ⇨ カスタマイズ ⇨ 追加CSSに以下を追加し■に任意の数値を入れる

/* パディング設定 /
body { padding-top: ■px; / 上部のパディング /
padding-bottom: ■px; / 下部のパディング /
padding-left: ■px; / 左側のパディング /
padding-right: ■px; / 右側のパディング */
}

/* パディング設定 / body { padding-top: 0px; / 上部のパディング / padding-bottom: 20px; / 下部のパディング / padding-left: 20px; / 左側のパディング / padding-right: 20px; / 右側のパディング */
}

サイト全域の背景色

サイト全体の背景色の設定
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ 全体 ⇨ サイト背景色

サイト全域の背景画像

サイト全体の背景画像の設定
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ 全体 ⇨ サイト背景画像

文字の大きさ

サイト全体の文字の大きさを変更する。※初期は18px
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ 全体 ⇨ 文字サイズ
※文字の大きさ調整はブラウザの表示を１００％にして行う事（Ctrlと＋－でできる）

文字の太さ

サイト全体の文字の太さを変更する。※初期は400
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ 全体 ⇨ 文字の太さ

サイトタイトル

サイトのタイトル設定。検索画面でもっとも大きく表示される箇所。
「各ページのタイトル」＋「サイト全体のタイトル」で構成される。

■ 各ページのタイトルの設定
設定するぺージ(固定ページか投稿)を選択 ⇨ 設定するぺージにカーソルを合わせる ⇨ クイック編集 ⇨「タイトル」に入力 ⇨ 更新

■ サイト全体のタイトルの設定
設定 ⇨ 一般 ⇨ サイトのタイトル ⇨ 記入

サイトのアドレス

サイトのアドレス（URL）の設定
設定 ⇨ 一般 ⇨ 「サイトアドレス (URL)」に記入

SSL化

「SSL化の設定続き（レンタルサーバーの設定からの続き）」
設定 ⇨ 一般 ⇨ ■「wordpressのアドレス」右欄の『http://』を『https://』にする ⇨ ■「サイトアドレス」右欄の『http://』を『https://』にする
※注意事項：「wordpressのアドレス」右欄のhttp://以降は絶対に変更してはいけない。変更すると管理ページもサイトも表示されなくなる

パーマリンク

各ページごとの住所の設定　https://—-.com/【パーマリンク】
・初期状態は「日付と投稿名」になっているので「投稿名」に変更する
設定 ⇨ パーマリンク ⇨ 「投稿名」にチェック ⇨ 変更を保存
・各ページごとに設定する
設定するぺージ(固定ページか投稿)を選択 ⇨ 設定するぺージにカーソルを合わせる ⇨ クイック編集 ⇨「スラッグ」に入力 ⇨ 更新
※注意事項：パーマリンクの頻繁な変更は避ける。お気に入り登録していた人のお気に入りから消えてしまう。

アイコン

サイトを表すアイコン（ファビコン）の設定

①画像をメディアにアップロードする：
メディア ⇨ 新規追加 ⇨ ファイルを選択 ⇨ 画像をアップロードする

②アップした画像を設定する：
外観 ⇨ カスタマイズ ⇨ サイト基本情報 ⇨「サイトアイコン」に画像をアップロード ⇨「メディアライブラリ」からアップした画像を選択 ⇨ 選択

アイキャッチ画像

それぞれのぺージのアイキャッチ画像（メニューなのどのサムネイル画像になる）を作成
⇨ 右欄「固定ページ」⇨「アイキャッチ画像」欄で画像を選択
※このままだとアイキャッチ画像がメインカラム内の上部に表示されるので非表示にする：
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ 画像 ⇨「アイキャッチの表示」の「本文上にアイキャッチを表示する」のチェックを外す

ぺージトップに移動

ぺージのトップ（最上段）に移動するボタンの設定
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ボタン ⇨「トップへ戻るボタンを表示する」にチェックを入れる。非表示にする場合はチェックを外す

■ ヘッダー全域の設定

高さ

：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ 高さ

高さ（モバイル）

：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ 高さ（モバイル）

背景色

ヘッダー全体の色を設定する
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ ヘッダー全体色

背景画像

ヘッダー全体の背景を画像にする
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ ヘッダー背景画像 ⇨ 画像を選択する

背景画像の固定

ヘッダーに設定した背景画像を固定します。上下にスクロールしたときに背景画像が背景に対して移動しなくなる。
：プラグイン『Cocoon』使用：
Cocoon ⇨ ヘッダー ⇨ ヘッダー背景画像 ⇨『ヘッダー背景画像の固定』にチェックを入れる

文字色

ヘッダー全体の文字の色を設定する
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ ヘッダー全体文字色

文字の大きさ

ヘッダー全体の文字の大きさを設定
※ヘッダーのみ文字の大きさを変更することはできない。ヘッダーの文字の大きさを変更するにはサイト全体の文字の大きさを変更する事になる。
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ 全体 ⇨ 文字サイズ

ヘッダーを固定

画面を下にスクロールしてもヘッダーが追従してくる設定
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ ヘッダーの固定 ⇨「ヘッダーを固定する」にチェックを入れる ⇨ 変更をまとめて保存

・ヘッダー内のタイトルの設定

※ヘッダーにロゴ画像を設定している場合はこちらのタイトルは表示されないのでロゴ画像は非表示にしてから設定する。

タイトルの設定

ヘッダー内に配置するタイトルを設定する
設定 ⇨ 一般 ⇨「サイトのタイトル」に記入

※ヘッダーにロゴ画像を設定している場合はこちらのタイトルは表示されないのでロゴ画像は非表示にする
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ ヘッダーロゴ ⇨ クリア ⇨ 変更をまとめて保存

タイトルの位置

ヘッダー内のタイトルの表示位置の設定
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ ⇨「ヘッダーレイアウト」を以下のどれかを選択しチェックを入れる
・センターロゴ(デフォルト)
・センターロゴ(トップメニュー)
・センターロゴ(スリムメニュー)
・センターロゴ(スリムトップメニュー)
⇨ キャッチフレーズの配置 ⇨ 以下の２パターンから選択してチェックを入れる
・ヘッダートップ(デフォルト)
・ヘッダーボトム

それぞれの表示位置は以下のようになる（上、中、下の順で表示。列は全て中央表示）
●センターロゴ(デフォルト)にチェックした場合
・ヘッダートップ…上：キャッチコピー　中：ロゴまたはタイトル　下：メニュー
・ヘッダーボトム…上：ロゴまたはタイトル　中：キャッチコピー　下：メニュー

●センターロゴ(トップメニュー)にチェックした場合
・ヘッダートップ…上：メニュー　中：キャッチコピー　下：ロゴまたはタイトル
・ヘッダーボトム…上：メニュー　中：ロゴまたはタイトル　下：キャッチコピー

●・センターロゴ(スリムメニュー)にチェックした場合
・ヘッダートップ…上：キャッチコピー　中：ロゴまたはタイトル　下：メニュー
・ヘッダーボトム…上：ロゴまたはタイトル　中：キャッチコピー　下：メニュー

●センターロゴ(スリムトップメニュー)にチェックした場合
・ヘッダートップ…上：メニュー　中：キャッチコピー　下：ロゴまたはタイトル
・ヘッダーボトム…上：メニュー　中：ロゴまたはタイトル　下：キャッチコピー

タイトルの文字色

ヘッダー内に配置したタイトルの文字色を設定する
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ ヘッダー色（ロゴ部）⇨「ロゴ文字色」から色を選択 ⇨ 変更をまとめて保存

タイトルの背景色

ヘッダー内に配置したタイトル周囲の背景色を設定する
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ ヘッダー色（ロゴ部）⇨「ロゴエリア背景色」から色を選択 ⇨ 変更をまとめて保存

・ヘッダー内のロゴ画像の設定

ロゴ画像の設定

ヘッダー内に配置するロゴに画像を設定する
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨「ヘッダーロゴ」に画像をアップロード ⇨ 「メディアライブラリ」からアップした画像を選択 ⇨ 変更をまとめて保存
※注意：こちらを設定するとヘッダーにサイトのタイトルが表示されなくなる。ヘッダーには「サイトのタイトル」か「ロゴ画像」のどちらかしか表示できない

ロゴ画像を非表示

ヘッダー内にロゴ画像を設定しない(表示しない)
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨「ヘッダーロゴ」に画像をアップロードしないかアップロード済の場合は「クリア」をクリック

ロゴ画像の位置

ヘッダー内に配置するロゴ画像の位置を設定する
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ ヘッダーレイアウト ⇨ 以下８パターンから選択
・センターロゴ(デフォルト)………………ヘッダーの左端に表示
・センターロゴ(トップメニュー)…………ヘッダーの中央、メニューの下に表示
・センターロゴ(スリムメニュー)…………ヘッダーの中央、メニューの上に表示
・センターロゴ(スリムトップメニュー)…ヘッダーの中央、メニューの下に表示
・トップメニュー……………………………ヘッダーの左端に表示
・トップメニュー(右寄せ)…………………ヘッダーの左端に表示
・トップメニュー小…………………………ヘッダーの左端に表示
・トップメニュー小(右寄せ)………………ヘッダーの左端に表示
⇨ 変更をまとめて保存

ロゴ画像のサイズ

ヘッダーに配置するロゴのサイズを設定する
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨「ヘッダーロゴサイズ」入力 ⇨ 変更をまとめて保存

ロゴ画像の背景色

ヘッダー内に配置したロゴ画像の背景色を設定する
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ ヘッダー色（ロゴ部）⇨「ロゴエリア背景色」から色を選択 ⇨ 変更をまとめて保存

・ヘッダー内のキャッチコピーの設定

キャッチコピー

ヘッダー内にキャッチコピーを配置する
方法①設定 ⇨「キャッチフレーズ」に記入
方法②外観 ⇨ カスタマイズ ⇨ サイト基本情報「キャッチフレーズ」に

キャッチコピーの位置

ヘッダー内のキャッチコピーの表示位置の設定
：プラグイン『Cocoon』使用：
上記の手順でキャッチコピーを配置する ⇨ Cocoon設定 ⇨ ヘッダー ⇨ ⇨「ヘッダーレイアウト」を以下のどれかを選択しチェックを入れる
・センターロゴ(デフォルト)
・センターロゴ(トップメニュー)
・センターロゴ(スリムメニュー)
・センターロゴ(スリムトップメニュー)
⇨ キャッチフレーズの配置 ⇨ 以下の２パターンから選択してチェックを入れる
・ヘッダートップ(デフォルト)
・ヘッダーボトム

それぞれの表示位置は以下のようになる（上、中、下の順で表示。列は全て中央表示）
●センターロゴ(デフォルト)にチェックした場合
・ヘッダートップ…上：キャッチコピー　中：ロゴまたはタイトル　下：メニュー
・ヘッダーボトム…上：ロゴまたはタイトル　中：キャッチコピー　下：メニュー

●センターロゴ(トップメニュー)にチェックした場合
・ヘッダートップ…上：メニュー　中：キャッチコピー　下：ロゴまたはタイトル
・ヘッダーボトム…上：メニュー　中：ロゴまたはタイトル　下：キャッチコピー

●・センターロゴ(スリムメニュー)にチェックした場合
・ヘッダートップ…上：キャッチコピー　中：ロゴまたはタイトル　下：メニュー
・ヘッダーボトム…上：ロゴまたはタイトル　中：キャッチコピー　下：メニュー

●センターロゴ(スリムトップメニュー)にチェックした場合
・ヘッダートップ…上：メニュー　中：キャッチコピー　下：ロゴまたはタイトル
・ヘッダーボトム…上：メニュー　中：ロゴまたはタイトル　下：キャッチコピー

キャッチコピーの非表示

ヘッダー内にキャッチコピーを表示しない
方法①：設定 ⇨「キャッチフレーズ」に記入
方法②：外観 ⇨ カスタマイズ ⇨ サイト基本情報「キャッチフレーズ」に

方法①：設定 ⇨ 一般 ⇨「キャッチフレーズ」に何も記入しない
方法②：外観 ⇨ カスタマイズ ⇨ サイト基本情報「キャッチフレーズ」にに何も記入しない
方法③：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ キャッチフレーズの配置 ⇨「表示しない」にチェック

・ヘッダーのメニューの設定

メニュー作成

ヘッダーに配置するメニュー（ナビゲーションメニュー）を設定する

①　まずは各ページ（固定ページ、投稿ページ）を作ってタイトル（メニューの名前）を設定する。
「固定ページ」もしくは「投稿」 ⇨ 新規追加 ⇨「タイトルを追加」に入力（それぞれのメニューの名前になる※1）⇨ 公開※2
※1：後にメニュー名はタイトルと違うものに変更可能（詳細は次項）
※2：公開しないで作成している場合は「下書き保存」にする

②　作った各ページをヘッダーメニューとして設定する
外観 ⇨ メニュー ⇨「メニュー構造」内の「メニュー」に任意のメニュー名を入れる。この場合は『ヘッダーメニュー』と記入すればよい ⇨「メニュー設定」爛の「ヘッダーメニュー」にチェックを入れる ⇨ メニューを保存

③　初期にある不要なメニューを削除※初期設定時のみ
「メニュー構造」内の削除したい項目の右端の【▼】⇨【削除】⇨ メニューを保存

④　各メニューを設定する
「メニュー項目を追加」内の、メニューにしたいぺージ（固定ページ、投稿、カスタムリンク、カテゴリー）をクリックし各項目にチェックを入れる ⇨ メニューに追加 ⇨「メニュー構造」内に追加される ※配列はドロップで位置を決める。

⑤　各メニューの配列を設定する
「メニュー構造」内の各メニューをドラッグして位置を決める。
⇨ メニューを保存

メニューの編集

作成済みのメニューを編集する
外観 ⇨ メニュー ⇨ 「編集するメニューを選択」から編集するメニューを選択

メニュー名の変更

メニュー名を各ページのタイトル以外の物に変更する
外観 ⇨ メニュー ⇨「メニュー構造」内の各項目の右の【▼】をクリック ⇨「ナビゲーションラベル」に入力 ⇨ メニューを保存

メニューの背景色

メニュー全域の背景色を設定する
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ グローバルナビメニュー色
⇨「グローバルナビ色」から色を選択 ⇨ 変更をまとめて保存
※ヘッダーの背景色と同じにする場合は設定しなくてもよい

メニューの文字色

メニュー全域の文字色を設定する
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ グローバルナビメニュー色
⇨「グローバルナビ文字色」から色を選択 ⇨ 変更をまとめて保存
※ヘッダーの背景色と同じにする場合は設定しなくてもよい

メニューの幅

●メニューの間隔を一定(任意のサイズ)に設定する場合
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ グローバルナビメニュー幅 ⇨「トップメニュー幅」に記入 ⇨ 変更をまとめて保存

●メニューの間隔をメニュー(テキスト)の幅に合わせて設定する場合※おすすめ
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ グローバルナビメニュー幅 ⇨「メニュー幅をテキストに合わせる」にチェックを入れる ⇨ 変更をまとめて保存

・ヘッダーのサブメニューの設定

サブメニュー作成

サブメニュー（メニュー内にメニューを入れる）の設定
外観 ⇨ メニュー ⇨ 「編集するメニューを選択」から編集するメニューを選択 ⇨「メニュー構造」内のサブメニューにしたいメニューをドラッグして一段下げて配置する。

サブメニューの横幅

：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ヘッダー ⇨ グローバルナビメニュー幅 ⇨「サブメニュー幅」に記入

・ヘッダーとヘッダーメニューの非表示

指定したページのヘッダーを非表示にする

「カスタマイズ」⇨「追加CSS」に以下のコードを記述
●●にはヘッダーを非表示にしたいページのIDを入力

.page-id-●● .header{
   display:none;
}

ヘッダーを非表示にしたいページが複数ある場合は以下のコードを記述

.page-id-●● .header,
.page-id-●● .header { display: none;
}

指定したページのヘッダーメニューを非表示にする

「カスタマイズ」⇨「追加CSS」に以下のコードを記述
●●にはヘッダーを非表示にしたいページのIDを入力

■ コンテンツ上部

画像を入れる

外観 ⇨ ウィジェット ⇨ 左欄から『画像』を選んで右欄『コンテンツ上部』にドラッグする ⇨ 画像を追加
●入れた画像を中央表示にする
画像を編集 ⇨ 画像CSSクラスに『aligncenter』と入力

●入れた画像をページごとに表示（ぺージごとに異なる画像にする場合）
表示設定 ⇨ ウィジェットの表示 ⇨『チェック・入力したぺージで表示』を選択 ⇨ 下記から表示したいぺージを選ぶ ⇨『固定ページID入力』に表示したいぺージのIDを入力 ⇨ 保存

ウィジェット配置

コンテンツ上部にウィジェットを配置する
外観 ⇨ ウィジェット ⇨ 左爛「利用できるウィジェット」 ⇨ 追加したいウィジェットを選択 ⇨
・右側の「▼」⇨「コンテンツ上部」を選択 ⇨ ウィジェットを追加
・もしくは左爛「コンテンツ上部」にドラッグ

ウィジェットをぺージごとに表示、非表示にする設定…………

こちらを参照

ウィジェットの種類…………………………………………………

こちらを参照

■ メインカラム全域の共通設定

メインカラムの枠線

メインカラム全域に枠線を設定する
Cocoon設定 ⇨ カラム ⇨ コンテンツ枠線色 ⇨「ボーダー色」から任意色を選択 ⇨ 変更をまとめて保存
※枠線を削除するときは「クリア」をクリック

メインカラムの枠線の太さ

メインカラム全域の枠線の太さを設定する
①Cocoon設定 ⇨ カラム ⇨ コンテンツ枠線色 ⇨「ボーダー色」から任意色を選択 ⇨
②コンテンツ枠線幅 ⇨ 0～10pxの範囲で選択 ⇨ 変更をまとめて保存

・メインカラムの横幅設定

メインカラムの幅

メインカラム全域の幅の設定（最小：600px、最大：1600px）
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ カラム ⇨「コンテンツ幅」に入力 ⇨ 変更をまとめて保存

・メインカラム内の背景設定

メインカラムの背景色

各ページごとのCSS(スタイルシート)にコードを書く

①「設定するページ」
② ページ下部にある「カスタムCSS」欄に以下のCSSコードを記述する

.main{
background-color: #000;
}
.a-wrap {
color: #fff;
}

000 の部分は背景色となりますので任意の数値を入れてください。上記コードでは黒色となっています。
fff の部分は文字色となります。任意の数値を記入してください。上記のコードでは白色となっています

・メインカラムの余白設定

メインカラムの余白

メインカラム全域の両サイドの余白の設定（最小：10px、最大：80px）
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ カラム ⇨「コンテンツ余白幅」に入力 ⇨ 変更をまとめて保存

・ページタイトルの設定

ぺージタイトル

ページタイトル（各々のぺージの名前になる）を決める
「投稿」か「固定ページ」 ⇨ 新規追加 ⇨ 最上部にある『タイトルを追加』の箇所に入力

ぺージタイトルを非表示にする

初期の段階ではぺージタイトルはブラウザで表示されるので全ページで非表示にする。
：CSSを使う：外観 ⇨ カスタマイズ ⇨『追加CSS』に以下のコードを追加

h1.entry-title{
display:none;
}

※プラグインを使うと動作しなくなるリスクがあるがこちらの方法だと一つのコードでまとめて消せる

・テキストの設定

文章を書く

：編集するぺージ（固定ページ、投稿）へ移動 ⇨ ：
⊞ ⇨ 段落 ⇨ 文章を入力する ⇨ 更新

文章の改行

「Shift」＋「Enter」

新しい項目を追加する

「Enter」

項目のコピー

コピーしたい項目を選択（※項目全体を選択） ⇨ 上段「オプション」⇨ 複製 ※直下にコピーが作成される

項目の移動

移動したい項目を選択（※項目全体を選択） ⇨ 上段「Λ」「Ⅴ」で上下に移動

文字のサイズ

：編集するぺージ（固定ページ、投稿）へ移動 ⇨ ：
⊞ ⇨ 段落 ⇨ 入力欄をクリック ⇨ 上段「フォントサイズ」 ⇨ 12～48pxで ⇨ 更新
※サイズの参考※
12px……いろはにほへと1,2,3,a,b,c,A,B,C
14px……いろはにほへと1,2,3,a,b,c,A,B,C
16px……いろはにほへと1,2,3,a,b,c,A,B,C
18px……いろはにほへと1,2,3,a,b,c,A,B,C
20px……いろはにほへと1,2,3,a,b,c,A,B,C
22px……いろはにほへと1,2,3,a,b,c,A,B,C
24px……いろはにほへと1,2,3,a,b,c,A,B,C
28px……いろはにほへ1,2,3,a,b,c,A,B,C
32px……いろはにほ1,2,3,a,b,c,A,B,C
36px……いろはに1,2,3,a,b,c,A,B,C
40px……いろはに1,2,3,a,b,A,B,C
44px……いろはに1,2,3,a,b,A,B,C
48px……いろはに1,2,3,a,b,A,B,C

文字の太さ

指定した文字を太字にする
：編集ぺージ（固定ページ、投稿）へ移動 ⇨ ：
⊞ ⇨ 段落 ⇨ 入力欄をクリック ⇨ 上段「太字」 ⇨ 更新
※参考までに「こちらの文字」は太字にしています。

文章全体の文字色

文章すべての文字の色を変更する
：編集ぺージ（固定ページ、投稿）へ移動 ⇨ ：
⊞ ⇨ 段落 ⇨ 右上「設定」 ⇨ ブロック ⇨ 色 ⇨ 「テキスト」から任意の色を選択 ⇨ 更新
※参考までに当文章の文字は薄い青色に設定しています。

指定した文字の色変更

文章内の指定した文字のみ色を変更する
：編集ぺージ（固定ページ、投稿）へ移動 ⇨ ：
⊞ ⇨ 段落 ⇨ 右上「A」から以下の６パターンから選択 ⇨ 更新

太字（boldクラス指定）……いろは(この文字を変更)にほへ
赤色……………………………いろは(この文字を変更)にほへ
赤太字…………………………いろは(この文字を変更)にほへ
青色……………………………いろは(この文字を変更)にほへ
青太字…………………………いろは(この文字を変更)にほへ
緑色……………………………いろは(この文字を変更)にほへ
緑太字…………………………いろは(この文字を変更)にほへ
キーボードキー………………いろは(この文字を変更)にほへ

文字にマーカーを入れる

：編集するぺージ（固定ページ、投稿）へ移動 ⇨ ：
⊞ ⇨ 段落 ⇨ 右上「文字」から以下の６パターンから選択 ⇨ 更新

黄色マーカー………………………いろはにほへと1234abcdABCD
黄色アンダーラインマーカー……いろはにほへと1234abcdABCD
赤色マーカー………………………いろはにほへと1234abcdABCD
赤色アンダーラインマーカー……いろはにほへと1234abcdABCD
青色マーカー………………………いろはにほへと1234abcdABCD
青色アンダーラインマーカー……いろはにほへと1234abcdABCD

文字を色で囲う

：編集するぺージ（固定ページ、投稿）へ移動 ⇨ ：
⊞ ⇨ 段落 ⇨ 右上「バッジ」から以下の9パターンから選択 ⇨ 更新

オレンジ………………………いろはにほへと1234abcdABCD
赤色……………………………いろはにほへと1234abcdABCD
ピンク…………………………いろはにほへと1234abcdABCD
紫色……………………………いろはにほへと1234abcdABCD
青色……………………………いろはにほへと1234abcdABCD
緑色……………………………いろはにほへと1234abcdABCD
黄色……………………………いろはにほへと1234abcdABCD
茶色……………………………いろはにほへと1234abcdABCD
灰色……………………………いろはにほへと1234abcdABCD

文章範囲の背景色

：編集するぺージ（固定ページ、投稿）へ移動 ⇨ ：
⊞ ⇨ 段落 ⇨ 右上「設定」 ⇨ ブロック ⇨ 色 ⇨ 「背景※1」から任意の色を選択 ⇨ 更新
※参考までに当文章範囲は薄い赤色に背景色を設定しています。
※1.背景爛の「テーマ内」の色を選択すると四隅に余白ができるので白に戻したいときは「デフォルト」内の白を選択してください

見出しを書く

記事全体の内容を表す文章となる見出しの設定
：編集するぺージ（固定ページ、投稿）へ移動 ⇨ ：
⊞ ⇨ 見出し ⇨ 文章を入力する ⇨ 更新

見出しのサイズ

見出しのサイズを変更します
：編集するぺージ（固定ページ、投稿）へ移動 ⇨ ：
⊞ ⇨ 見出し ⇨ 入力欄をクリック ⇨ 上段「見出しレベルを変更」 ⇨ 「H1～H6」で変更 ⇨ 更新

・画像の設定

画像の配置

：編集するぺージ（固定ページ、投稿）へ移動 ⇨ ：
画像を配置したい場所をクリック ⇨ ⊞ ⇨ 画像 ⇨ 「メディアライブラリ」から画像を選択 ⇨ 更新

画像のぼやけ修正

画像がぼやける場合の対処
対処①：解像度を72dpiにしてサイズをブラウザ上の表示と合わせる
対処②：修正する画像をクリック ⇨ 右爛「ブロック」⇨「画像サイズ」から「フルサイズ」を選択

画像の上に文字や画像を重ねる

①画像をクリックして出てくるバーの「四角の中にAが入っているボタン」を押します。
②ブロック選択画面が図の上に表示されます。
③好きな字を入れて、必要であれば装飾をします

ここに入力

●●●

●●●http://＃

・リンクの設定

テキストリンク

テキストにリンクを貼る
リンクを張る文章をドラックで選択 ⇨ 上部「リンク」(鎖のアイコン) ⇨ 「検索またはURLを入力」にリンク先のURLを入力※テストの場合は『＃』を入力
例)このテキストをリンクにする

画像リンク

画像にリンクを貼る
①画像を配置
⊞ ⇨ 画像 ⇨ メディアライブラリから画像を選択
②配置した画像にリンクを張る
リンクを張る画像を選択 ⇨ 上部「リンクを挿入」 ⇨「URLをペーストまたは検索して入力」にリンク先のURLを入力※テストの場合は『＃』を入力

リンクを新しいタブで開く

リンク先を新しいタブで開く設定
リンクを選択 ⇨ 上部テキストリンクの場合は「リンク」(鎖のアイコン) 、画像リンクの場合は「リンクを挿入」 ⇨ 「新しいタブで開く」をONにする
例)このテキストリンクを別タブで開く

テキストリンクの色変更

・テキストリンクの色を変更する
「Cocoon設定」⇨「全体」⇨「リンク色」から変更したい色を選択
・テキストリンクにマウスを合わせたときの色設定
「Cocoon設定」⇨「全体」⇨「選択文字色」から変更したい色を選択
⇨「変更をまとめて保存」

・もくじの設定

※目次になる項目は［見出し］タグです。大きさの順に表示順が決まります。
※詳しい設定は「Cocoon設定」⇨「もくじ」から行えます

もくじの設定

：編集するぺージ（固定ページ、投稿）へ移動 ⇨ ：
もくじを配置したい場所をクリック ⇨ ⊞ ⇨ HTMLとして編集 ⇨ [] の中にtocと記入

文章内に設定

：編集するぺージ（固定ページ、投稿）へ移動 ⇨ ：
⇨ ⊞ ⇨ 段落 ⇨ もくじを配置したい場所に [] の中にtocと記入

・ページ内リンクの設定

ページ内リンク

クリックすると同ページ内の指定の場所に移動する設定
：アンカーリンクを使う：
●移動元の設定：移動元を選んで ⇨ ⊞ ⇨ HTMLとして編集 ⇨ 以下を記述
<a href=”#●●”>移動元</a>
●移動先の設定：移動先を選んで ⇨ ⊞ ⇨ HTMLとして編集 ⇨ 以下を記述
<□ id=”●●“>移動先</□>
※●●には任意の文字を入れる
※□には移動先のコードを入れる。例)見出しの場合はh、段落の場合はp

・メインカラム内のウィジェットの配置

ウィジェット配置

メインカラム内にウィジェットを配置する
外観 ⇨ ウィジェット ⇨ 左爛「利用できるウィジェット」 ⇨ 配置したいウィジェットを選択 ⇨ 右側の「▼」から配置したい場所を選択

配置できる場所（固定ページの場合）
・固定ページタイトル上
・固定ページタイトル下
・固定ページ本文上
・固定ページ本文中
・固定ページ本文下
・固定ページSNSボタン上
・固定ページSNSボタン下

配置できる場所（投稿ページの場合）
・投稿タイトル上
・投稿タイトル下
・投稿本文上
・投稿本文中
・投稿本文下
・投稿SNSボタン上
・投稿SNSボタン下

ウィジェットをぺージごとに表示、非表示にする設定…………

こちらを参照

ウィジェットの種類…………………………………………………

こちらを参照

・その他の設定（展開・折りたたみ)(区切り線)(スペース)

展開・折りたたみ①
（アコーディオン）

テキストをクリックすると中身が展開、折りたたむ設定その①
：編集するぺージ（固定ページ、投稿）へ移動 ⇨ ：
⇨ ⊞ ⇨ ブロックを追加 ⇨「アコーディオン(トグル)」

アコーディオン見出し

こちらに中身を設定

・「アコーディオン見出し」に任意の文字を入力
・「アコーディオン見出し」をクリックし展開された中に各設定をする

アコーディオンの色変更

●通常時の色変更：
⇨ 色を変更するアコーディオン ⇨ 右欄「ブロック」⇨ ボーダー色 ⇨ 任意の色を設定する
●展開した時の色変更：
⇨ 色を変更するアコーディオン ⇨ 右欄「ブロック」⇨ 背景色 ⇨ 任意の色を設定する
●文字の色変更：
⇨ 色を変更するアコーディオン ⇨ 右欄「ブロック」⇨ 文字色 ⇨ 任意の色を設定する
●展開内部の背景色変更：
⇨ 色を変更するアコーディオンを展開させ内部をクリック ⇨ 右欄「色」⇨ 背景 ⇨ 任意の色を設定する
●展開内部の文字色変更：
⇨ 色を変更するアコーディオンを展開させ内部をクリック ⇨ 右欄「色」⇨ テキスト ⇨ 任意の色を設定する

色変更：赤 ➨ 黒

色変更：緑

展開・折りたたみ②
（見出し）

テキストをクリックすると中身が展開、折りたたむ設定その②
※こちらはCOCOON汎用ブロックです。
⇨ ⊞ ⇨ ブロックを追加 ⇨「見出し」

見出し

こちらに中身を設定

展開・折りたたみ③
（タブ見出しボックス）

テキストをクリックすると中身が展開、折りたたむ設定その③
※こちらはCOCOON汎用ブロックです。
⇨ ⊞ ⇨ ブロックを追加 ⇨「タブ見出しボックス」

見出し

こちらに中身を設定

展開・折りたたみ④
（ラベルボックス）

テキストをクリックすると中身が展開、折りたたむ設定その③
※こちらはCOCOON汎用ブロックです。
⇨ ⊞ ⇨ ブロックを追加 ⇨「ラベルボックス」

見出し

こちらに中身を設定

区切り線

■ 区切り線(水平線)の設定
：編集ぺージ（固定ページ、投稿）へ移動 ⇨ ：
設置する場所をクリック ⇨ ⊞ ⇨ 区切り ⇨ 更新

■ 区切り線の色設定
区切り線を配置する ⇨ 右上の「設定」⇨ ブロック ⇨ 色 ⇨「背景」から任意の色を選択 ⇨ 更新

■ 区切り線のスタイル設定
区切り線を配置する ⇨ 右上の「設定」⇨ ブロック ⇨「スタイル」から以下の３パターンを選択 ⇨ 更新

デフォルト⇩

幅広線⇩

ドット⇩

スペース

■ 各項目の間隔を開けるスペースの設定
：編集ぺージ（固定ページ、投稿）へ移動 ⇨ ：
設置する場所をクリック ⇨ ⊞ ⇨ スペ－サー ⇨ 更新

■ スペースの高さの設定
スペ－スを設置 ⇨ 右上の「設定」⇨ ブロック ⇨ 設定 ⇨「高さ」に任意の値を入力

※参考：以下は高さ50pxのスペーサー
————————-始まり————————-

————————終わり————————-

・メインカラム内のカラムの設定

ー

：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ⇨ ⇨ ⇨ ⇨「」⇨ ⇨ 変更をまとめて保存
外観設定 ⇨ ⇨ ⇨ ⇨ ⊞ ⇨「」⇨ ⇨ 更新

カラムの設定

⊞ ⇨ カラム ⇨ パターンを選ぶ

カラムの比率の変更

変更するカラムをクリック ⇨ 右欄「ブロック」 ⇨ カラム設定の「幅」に％で入力

カラムを増やす

変更するカラム全体をクリック ⇨ 右欄「カラム」の数値を変更する

ブロックの間隔

カラム内のカラム間の間隔の設定：
設定するカラム全体をクリック ⇨ 右欄「寸法」横の「:」 ⇨「ブロックの間隔」をチェック ⇨「ブロックの間隔」を7段階から調整する

カラムの中にカラムを設定する

カラムを入れたいカラムを選択する ⇨ ⇨ ⇨ ⇨ ⊞ ⇨ カラム ⇨ パターンを選ぶ

■ メインカラムスクロール追従

解説：メインコンテンツの下に位置します。サイドバーよりもメインコンテンツが短い場合は追従してきます。

ー

：：
⇨ ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ ⇨

ウィジェット配置

メインカラムスクロール追従にウィジェットを配置する
外観 ⇨ ウィジェット ⇨ 左爛「利用できるウィジェット」 ⇨ 追加したいウィジェットを選択 ⇨
・右側の「▼」⇨「メインカラムスクロール追従」を選択 ⇨ ウィジェットを追加
・もしくは左爛「メインカラムスクロール追従」にドラッグ

ウィジェットをぺージごとに表示、非表示にする設定…………

こちらを参照

ウィジェットの種類…………………………………………………

こちらを参照

■ サイドバー

非表示

サイドバーを非表示にする
方法①：
外観 ⇨ ウィジェット ⇨ 右欄「サイドバー」内のウィジェットを表示設定で非表示にするか、全て削除する

方法②：
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ サイドバーの表示状態 ⇨「全てのぺージで非表示」にチェック

表示位置変更(左)

サイドバーの表示位置を左にする(初期では右表示)
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ サイドバーの位置 ⇨ 「サイドバー左」にチェック

固定ページのみ表示

サイドバーを固定ページのみ表示する
方法①：
外観 ⇨ ウィジェット ⇨ 右欄「サイドバー」に表示したいウィジェットを左爛から選んでドラッグ ⇨ 追加したウィジェットの右にある「▼」 ⇨ 表示設定 ⇨ ページ ⇨「固定ページ」にチェックを入れる

方法②：
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ サイドバーの表示状態 ⇨「投稿ぺージで非表示」にチェック

投稿ページのみ表示

サイドバーを投稿ページのみ表示する
方法①：
外観 ⇨ ウィジェット ⇨ 右欄「サイドバー」に表示したいウィジェットを左爛から選んでドラッグ ⇨ 追加したウィジェットの右にある「▼」 ⇨ 表示設定 ⇨ ページ ⇨「投稿ページ」にチェックを入れる

方法②：
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ サイドバーの表示状態 ⇨「固定ぺージで非表示」にチェック

指定ページのみ表示

サイドバーを指定したページのみ表示する
外観 ⇨ ウィジェット ⇨ 右欄「サイドバー」に表示したいウィジェットを左爛から選んでドラッグ ⇨ 追加したウィジェットの右にある「▼」 ⇨ 表示設定 ⇨ 表示したいページを選ぶ（投稿、固定ページ）⇨「固定ページID入力」に表示したいぺージのIDを記入
※IDは「固定ページ」「投稿」の設定ページで確認できる

サイドバーの横幅

：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ カラム ⇨ サイドバー設定 ⇨「サイドバー幅」に任意の数値を記入（最小：200px、最大：500px）⇨ 変更をまとめて保存

サイドバーの余白

サイドバーの左右の余白の設定
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ カラム ⇨ サイドバー設定 ⇨「サイドバー余白幅」に任意の数値を記入（最小：5px、最大：40px）⇨ 変更をまとめて保存

カラム間余白

メインカラムとサイドバーの間の幅を設定
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ カラム ⇨ カラム間余白設定 ⇨「カラム間の幅」に任意の数値を記入（最小：0px、最大：60px）⇨ 変更をまとめて保存

サイドバーの枠線

サイドバーに枠線を設定する
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ カラム ⇨ サイドバー設定 ⇨「サイドバー枠線幅」に任意の数値を記入（最小：0px、最大：10px）⇨ 変更をまとめて保存

サイドバー枠線色

サイドバーの枠線に色を設定する
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ カラム ⇨ サイドバー設定 ⇨「サイドバー枠線色」に任意の色を選択 ⇨ 変更をまとめて保存

サイドバーの背景色

設定方法：各ページごとのCSS(スタイルシート)にコードを書く。
①「設定するページ」⇨
② ページ下部にある「カスタムCSS」欄に以下のCSSコードを記述する。スタイルシートに書く場合は子テーマでもスキンでもどちらでもよいです。どちらかに下記を入れます。

.sidebar {
background-color: #000;
}

.widget_recent_entries ul li a, .widget_categories ul li a,
.widget_archive ul li a,
.widget_pages ul li a,
.widget_meta ul li a,
.widget_rss ul li a,
.widget_nav_menu ul li a {

color: #fff;
}

000 の部分は背景色となりますので任意の数値を入れてください。上記コードでは黒色となっています。
fff の部分は文字色となります。任意の数値を記入してください。上記のコードでは白色となっています。

ウィジェット配置

サイドバーにウィジェットを配置する
外観 ⇨ ウィジェット ⇨ 左爛「利用できるウィジェット」 ⇨ 追加したいウィジェットを選択 ⇨
・右側の「▼」⇨「サイドバー」を選択 ⇨ ウィジェットを追加
・もしくは左爛「サイドバー」にドラッグ

ウィジェットをぺージごとに表示、非表示にする設定…………

こちらを参照

ウィジェットの種類…………………………………………………

こちらを参照

■ サイドバースクロール追従

サイドバーの下に位置します。ぺージを下にスクロールしてもサイドバーが追従してくる設定。メインコンテンツよりもサイドバーが短い場合は追従してきます。タブレットやモバイルではサイドバーボタンとして機能する。

スクロールに合わせて追従する

外観 ⇨ ウィジェット ⇨ 左欄からサイドバーに入れたいウィジェットを選択して右欄『サイドバースクロール追従』にドラッグする

ぺージを下にスクロールしてもサイドバーが追従してくる。タブレットやモバイルではサイドバーボタンとして機能する

画像を入れる

外観 ⇨ ウィジェット ⇨ 左爛から『画像』を選び右欄の『サイドバー』または『サイドバースクロール追従』にドラック ⇨ 画像の『▼』 ⇨ 画像を追加 ⇨ メディアライブラリから設定する画像を選択 ⇨ ウィジェットに追加

：ウィジエットに追加した画像の編集：
画像の『▼』 ⇨ 画像を編集

表示位置の変更
（右→左）

：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ 全体 ⇨ サイドバーの位置 ⇨ 『サイドバー左』にチェック

横幅の変更

：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ カラム ⇨ サイドバー幅 ⇨ 数値を入力

内側の余白の変更

：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ カラム ⇨ サイドバー余白幅 ⇨ 数値を入力

外側の余白の変更

：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ カラム ⇨ カラム間の幅 ⇨ 数値を入力

ウィジェット配置

サイドバースクロール追従にウィジェットを配置する
外観 ⇨ ウィジェット ⇨ 左爛「利用できるウィジェット」 ⇨ 追加したいウィジェットを選択 ⇨
・右側の「▼」⇨「サイドバースクロール追従」を選択 ⇨ ウィジェットを追加
・もしくは左爛「サイドバースクロール追従」にドラッグ

ウィジェットをぺージごとに表示、非表示にする設定…………

こちらを参照

ウィジェットの種類…………………………………………………

こちらを参照

■ コンテンツ下部

非表示にする

コンテンツ下部に何も表示させない(コンテンツ下部のウィジェットを全て非表示にする)
外観 ⇨ ウィジェット ⇨ 右欄「コンテンツ下部」内のウィジェットを表示設定で非表示にするか、全て削除する

ウィジェット配置

コンテンツ下部にウィジェットを配置する
外観 ⇨ ウィジェット ⇨ 左爛「利用できるウィジェット」 ⇨ 追加したいウィジェットを選択 ⇨
・右側の「▼」⇨「コンテンツ下部」を選択 ⇨ ウィジェットを追加
・もしくは左爛「コンテンツ下部」にドラッグ

ウィジェットのページごとの表示

ウィジェットとは、さまざまな機能を備えたパーツでそれぞれ特定の場所に配置できる。

ウィジェット配置

ウィジェットを指定の場所に配置する
外観 ⇨ ウィジェット ⇨ 左爛「利用できるウィジェット」から追加したいウィジェットを選択 ⇨
・右側の「▼」⇨「配置したい場所」を選択 ⇨ ウィジェットを追加
・もしくは左爛「配置したい場所」にドラッグ
※ウィジェットが配置できる場所は以下を参照

■ ウィジェットをぺージごとに表示、非表示にする設定

固定ページのみ表示

配置したウィジェットを固定ぺージのみ表示する
外観 ⇨ ウィジェット ⇨ 右欄の配置した場所の右にある「▼」
⇨「固定ページのみに表示したいウィジェット」の右にある「▼」
⇨ 表示設定
⇨「ウィジェットの表示」から「チェック・入力したぺージで表示」を選択
⇨「ページ」爛の「固定ページ」にチェックを入れる
⇨ 保存

投稿ページのみ表示

配置したウィジェットを投稿ページのみ表示する
外観 ⇨ ウィジェット ⇨ 右欄の配置した場所の右にある「▼」
⇨「投稿ページのみに表示したいウィジェット」の右にある「▼」
⇨ 表示設定
⇨「ウィジェットの表示」から「チェック・入力したぺージで表示」を選択
⇨「ページ」爛の「投稿ページ」にチェックを入れる
⇨ 保存

指定ページのみ表示

配置したウィジェットを指定したページのみ表示する
外観 ⇨ ウィジェット ⇨ 右欄の配置した場所の右にある「▼」
⇨「指定したいページのみに表示したいウィジェット」の右にある「▼」
⇨ 表示設定
⇨ 表示したいページを選ぶ（投稿、固定ページ）
⇨「固定ページID入力」に表示したいぺージのIDを記入
⇨ 保存
※IDは「固定ページ」「投稿」の設定ページで確認できる

■ ウィジェットの種類

RSS

他サイトの更新情報を自動で表示してくれる。
同時に自サイト(あなたのサイト)の更新情報を受け取りたいユーザーに自動で更新情報を届けるので、サイトの訪問率が上昇するメリットあり

RSS フィードの URL:………自サイトのURLを入力
このフィードにタイトルをつける (オプション):……任意の名前を入力。何も入力しないとサイトのタイトルが表示される

［C］CTAボックス

見出し、文章、画像、リンクをひとまとめにできる

外観 ⇨ ウィジェット ⇨
・タイトル…………………タイトル
・CTA見出し………………見出し
・画像とメッセージのレイアウト……文章、主に説明文
・CTA画像…………………画像を張る
・CTAボタンテキスト……ボタンの名前
・CTAボタンURL…………リンク先
・CTAボタン色……………ボタンの色

［C］Facebookボックス

「この記事が気に入ったらいいね！しよう」ウィジェット

［C］SNSフォローボタン

SNSサービスのフォローアイコンボタンを表示するウィジェット

［C］テキスト(PC用)

PC用のブラウザでのみ表示されるテキスト

［C］テキスト(モバイル用)

モバイルでのみ表示されるテキスト

［C］おすすめカード

画像付きのメニュー。見て欲しい記事のリンクやカテゴリーを設定することができる

①まず「おすすめカード」用のメニューを作成する
外観 ⇨ メニュー ⇨ 新しいメニューを作成しましょう ⇨ メニュー構造爛の「メニュー名」に任意の名前を入力（例：ナビカード用メニュー） ⇨ メニューを作成 ⇨ 右上「表示オプション」 ⇨ 「CSSクラス」と「説明」にチェック ⇨ メニューを保存 ⇨ 左欄「メニュー項目を追加」からメニューにする項目を選んで「メニューに追加」

②それぞれのメニューの画像を設定する
設定するぺージ（固定ページ、投稿） ⇨ 編集ぺージへ ⇨右欄「固定ページ、または投稿」⇨ アイキャッチ画像

③ウィジェットでの設定
外観 ⇨ ウィジェット ⇨「［C］おすすめカード」右の「▼」
・タイトル…………おすすめカードのタイトル
・メニュー名………①で設定したメニューを選択
・表示スタイル……任意で選択

［C］ナビカード

画像付きのメニュー

①まず「ナビカード」用のメニューを作成する
外観 ⇨ メニュー ⇨ 新しいメニューを作成しましょう ⇨ メニュー構造爛の「メニュー名」に任意の名前を入力（例：ナビカード用メニュー） ⇨ メニューを作成 ⇨ 右上「表示オプション」 ⇨ 「CSSクラス」と「説明」にチェック ⇨ メニューを保存 ⇨ 左欄「メニュー項目を追加」からメニューにする項目を選んで「メニューに追加」

②リボンの設定（メニュー画像に付くラベル）
外観 ⇨ メニュー ⇨ メニュー構造爛の各メニュー右の「▼」 ⇨「CSS class(オプション)」に1～5の数字を入力
各ラベルの表示：
「１」………おすすめ
「２」………新着
「３」………注目
「４」………必見
「５」………お得

③それぞれのメニューの画像を設定する
設定するぺージ（固定ページ、投稿） ⇨ 編集ぺージへ ⇨右欄「固定ページ、または投稿」⇨ アイキャッチ画像

④ウィジェットでの設定
外観 ⇨ ウィジェット ⇨「［C］ナビカード」右の「▼」
・タイトル…………ナビカードのタイトル
・メニュー名………①で設定したメニューを選択
・表示タイプ………任意で選択

［C］プロフィール

画像付きプロフィール

外観 ⇨ ウィジェット ⇨「［C］プロフィール」右の「▼」
・タイトル……………………プロフィールのタイトル
・肩書きラベル………………プロフィールの肩書きラベル
・あなたのプロフィール……以下から設定
：ユーザー ⇨ プロフィール ⇨
○名前の設定……「ニックネーム(必須)」に入力して「ブログ上の表示名」に入力した名前を選択
○説明文…………「プロフィール情報」に入力

［C］ボックスメニュー

星画像付きのメニュー

①まず「ボックスメニュー」用のメニューを作成する
外観 ⇨ メニュー ⇨ 新しいメニューを作成しましょう ⇨ メニュー構造爛の「メニュー名」に任意の名前を入力（例：ナビカード用メニュー） ⇨ メニューを作成 ⇨ 右上「表示オプション」 ⇨ 「CSSクラス」と「説明」にチェック ⇨ メニューを保存 ⇨ 左欄「メニュー項目を追加」からメニューにする項目を選んで「メニューに追加」

②それぞれのメニューの画像を設定する
設定するぺージ（固定ページ、投稿） ⇨ 編集ぺージへ ⇨右欄「固定ページ、または投稿」⇨ アイキャッチ画像

③ウィジェットでの設定
外観 ⇨ ウィジェット ⇨「［C］ボックスメニュー」右の「▼」
・タイトル…………ボックスメニューのタイトル
・メニュー名………①で設定したメニューを選択

［C］ランキング

商品（サービス）のランキングを表示できる

①まずランキングを作成する
：プラグイン『Cocoon』使用：
Cocoon設定 ⇨ ランキング作成 ⇨ 新規追加 ⇨
・タイトル……………任意のタイトルを入力
・商品等の名前………任意の商品名を入力
・説明文………………商品の説明文を入力
・詳細ページURL……詳細ページへリンクするためのURLを入力
・ページURL…………公式ページ等のURLを入力（もしくはアフィリエイトタグ）
※商品は追加可能

②ウィジェットでの設定
外観 ⇨ ウィジェット ⇨「［C］ランキング」右の「▼」

［C］人気記事

人気の記事のランキングを表示できる

①記事(投稿ページ)の画像を設定する
投稿 ⇨ 設定するぺージ ⇨ 右欄「アイキャッチ画像」 ⇨ 画像を設定する

②ウィジェットでの設定
外観 ⇨ ウィジェット ⇨「［C］人気記事」右の「▼」
・表示モード………………表示す記事の設定
・人気記事のタイトル……「人気記事ウィジェット」のタイトル
・表示数……………………表示す記事の数
・表示タイプ………………記事の表示方法
・集計期間…………………表示する記事の期間
・ランキング表示…………画像の左上に表示されるランニングの数値「1」
・PV表示……………………画像の右上に表示される「○○ views」
・横型表示…………………ランキングを横に並べて表示
・タイトルを太字にする…人気記事のタイトルを太字にする
・矢印表示…………………記事間の矢印「＞」の表示
・除外投稿ID………………表示しない記事(投稿ページ)をIDで指定
・除外カテゴリーID………表示しないカテゴリーを選択

［C］広告