WordPress サイト制作（2.基本設定）

７．サイトの全体構成
８．仮ページの作成
９．ヘッダー
10．フッター
11．メインの基本設定
- ・メインの不用な初期設定の削除
- ・メインの全ページ共通設定
12．ブロックの基本操作
13．検索時のブラウザでの表示設定

７．サイトの全体構成

サイトの全体構成を決める

最初に、どのようなサイトを作るのかサイト全体のページ構成を決めます。
利用者にとって見やすくて扱いやすいサイトにするためにも、一般的にトップページを基準に各ページを振り当ててサイトは制作されます。どのようなページを制作するかは自由ですが、基本としてサイトの全ぺージの数や内容は最初に決めておく必要がございます。

一般的なサイトの構成例です。青枠が固定ページ、赤枠が投稿ぺージで作成します。

・『固定ページ』と『投稿(ぺージ)』

WordPressには『固定ページ』と『投稿(ぺージ)』の２種類のページがあり、作成するぺージの内容に合わせてどちらかを選んで作成する事になります。

　　　　　　　　　固定ページとは

一度作成したらサイト公開後に内容を変更することが少ないぺージです。例えば以下のページが該当します

・トップページ
・商品やサービスの紹介
・お問い合わせページ
・会社のプロフィール
・会社案内ページ

などが固定ページに該当します。一般的な会社のサイトはほぼ固定ページのみで作成してもよいでしょう。

　　　　　　　　　投稿(ぺージ)とは

ブログ記事やお知らせのようにページの内容を日常的に更新したり追加が必要なページのことを指します。

・ブログ投稿ぺージ
・ニュース記事ぺージ
・最新情報ぺージ

などが投稿ページに該当します。投稿ページは、カテゴリーやタグなどの分類によってグループ化され、日付に基づいて表示順が変わることがあり最新の情報を常に提供できます。また、コメント機能を有効にすることができるため、読者からのコメントや対話が生まれる場所としても機能します。

・各ページの構成

サイトの各ページは基本的に以下の４つの領域で構成します。①から順に解説していきます。

① ぺージ
WEBサイトのぺージそのものです。以下の②③④で構成されます。

② ヘッダー
ぺージ上部に配置され、サイトの全ページに同一のものが表示されます。各ページへのリンク先などを設置します。

③ フッター
ぺージの下部に表示されます。ヘッダーと同じく全ページに同一のものが表示されます。

④ メイン
各ページのコンテンツを設定します。各ページごとに異なる内容を設定します。サイト制作の大半はこちらでの作業となります。

８．仮ページの作成

ページの作成(仮)

まずはそれぞれのページを作成します。この段階ではページの内容などは設定しません。内容は無しでまず仮として空のページのみを作成します。ページごとの内容設定は後の「④メイン」で解説いたします。

・例として以下の全５ページで構成されるサイトを作る解説をします。

・トップ、商品紹介、会社概要、利用規約、のページを「固定ページ」で作成 ▼

まずページを作る前に最初から設定されているぺージが不要なので全て削除します。前項で削除済の場合は②③④は省いて⑤からはじめてください。
①「固定ページ」
② 削除するぺージすべてにチェックを入れる
③「ゴミ箱へ移動」を選択
④「適用」
続いて新規にページを作ります
⑤「新規追加」をクリックして固定ページの新規作成へ移動

・新規にページを作る

⑥「タイトルを追加」とある場所をクリックして「トップのページ」と入力してください。こちらで入力した言葉がそのぺージの名前になります。※いつでも変更可能
⑦ 「公開」をクリックして作成したぺージを保存します。
　※保存方法には「公開」と「下書き保存」の二種類がございます。
　・公開………………インターネットに公開して保存します。
　・下書き保存………インターネットに公開しない状態で保存します。
Webブラウザで作成中のぺージを確認できるので、当サイトでは「公開」の保存で解説します。なので「公開」で保存してください。作成中のぺージを見られたくないという方は⑧「下書き保存」で保存しても問題はございませんが、Webサイトを公開するときは「公開」で保存してください。
⑨「W」をクリックして「固定ページ」のぺージに戻る

・作成したトップのページが固定ページ一覧に表示される。

⑩ の箇所に作成した「トップページ」が表示される
※「下書き保存」をしたぺージは⑪の箇所に「下書き」と表示される。
※ 今後、作成したページを編集する時はこちらをクリックして行います。

以下、同じ手順で商品紹介、会社概要、利用規約のページを作ります。

①「固定ページ」
②「新規追加」

⑥「タイトルを追加」とある場所をクリックして「商品紹介のページ」と入力してください。
⑦ 「公開」をクリックして保存します。
※以後同じ手順で「会社概要のページ」と「利用規約のページ」も作成してください

⑤ 作成した「商品紹介のページ」が表示される

・お知らせのページを「投稿」で作成 ▼　　　　　　　　　　　　　　　　　　

・お知らせのページは「投稿」で作成します

①「投稿」
②「新規投稿を追加」

③「タイトルを追加」とある場所をクリックして「お知らせのページ」と入力してください。こちらで入力した言葉がそのぺージの名前になります。※いつでも変更可能
④「公開」をクリックして作成したぺージを保存します。
⑤「W」をクリックして「投稿」に戻る

・作成したお知らせのページが投稿一覧に表示される。

⑥ の箇所に作成した「お知らせのページ」が表示される
※ 今後、作成したページを編集する時はこちらをクリックして行います。

「トップのページ」をフロントページに設定する

フロントページとは、一般的にサイトの最初に表示されるページのことを指します。サイトの訪問者が最初に目にするページです。フロントページは一般的に「トップページ」と呼ばれます。前項で「トップのページ」と名付けたページを「トップページ＝フロントページ」として設定します。

・前項で作成した「トップのページ」と名前を付けたぺージをフロントページに設定します。 ▼

①「設定」
②「表示設定」
③「固定ページ(以下で選択)」をクリック
④「ホームページ: 」欄から「トップのページ」(前項で作成したぺージ) を選択
⑤「変更を保存」

ページの基本設定

ページの基本設定をします。前項で作成したページ全てに共通する設定となります。以下の３つの設定を解説します。

▶ パーマリンクの設定　

パーマリンクとは作成中のぺージのURLとなる部分の一部でドメインの最後尾に配置される文字です。日本語でも構いませんが英語で表記されるのが一般的です。

──────────（例）────────────
https://www.●●●.●●/●●●
─────────────────────────

●●●がドメインで全ぺージ共通となります。
●●●がパーマリンクで各ページごとに設定します。

※このパーマリンクはいつでも変更できますが、なるべく設定した後は変更しないようにしてください。パーマリンクの変更はぺージのドメインを変更するのと同等です。サイトが完成して公開した後、あなたのサイトをお気に入り登録したユーザーがお気に入りからアクセスできなくなるので、できる限り変更する事がないような文字にしてください。

①「設定」
②「パーマリンク」
③「パーマリンク構造」の以下に☑を入れる
　・基本
　・日付と投稿名
　・月と投稿名
　・数字ベース
　・投稿名※こちらに☑してください
　・カスタム構造
④「変更を保存」

各ページごとにパーマリンクを設定する
・まず「トップのページ」のパーマリンクを設定します。
①「固定ページ」
② トップぺージにカーソルを合わせて「クイック編集」
③「スラッグ」にパーマリンクとなる言葉として「top」と入力
④「更新」
⑤「適用」

同じ手順で商品紹介、会社概要、利用規約のページのパーマリンクを設定してください。
それぞれスラッグに入力する文字は以下の通りです。
────────────────────────
商品紹介のページ‥‥‥「menu」と入力
会社概要のページ‥‥‥「profile」と入力
利用規約のページ‥‥‥「rule」と入力
────────────────────────
続けてお知らせページのパーマリンクも設定します。手順は同じです。
①「投稿」
② お知らせのページにカーソルを合わせて「クイック編集」
③「スラッグ」にパーマリンクとなる言葉として「info」と入力
④「更新」
⑤「適用」

▶ ぺージのタイトル設定

各ページごとにタイトルを設定します。
タイトルとはページ自体の名前です。任意の言葉で構いませんがブラウザのタブにも表示されるのでページの内容がわかるような言葉にしてください。いつでも変更できます。

各ページごとにタイトルを設定する
・まずトップページのタイトルを設定します。
①「固定ページ」
② トップのページにカーソルを合わせて「クイック編集」
③「タイトル」にぺージのタイトルにしたい言葉を入力してください。
ここでは例文として「当サイトのトップのページです」と入力
④「更新」
⑤「適用」

同じ手順で商品紹介、会社概要、利用規約のページのタイトルを設定してください。
それぞれスラッグに入力する文字は以下の通りです。
トップページ
商品紹介のページ‥‥‥「当サイトの商品紹介のページです」と入力
会社概要のページ‥‥‥「当サイトの自己紹介のページです」と入力
利用規約のページ‥‥‥「当サイトのご利用規約ページです」と入力

続けてお知らせページのパーマリンクも設定します。手順は同じです。
①「投稿」
② お知らせのページにカーソルを合わせて「クイック編集」
③「タイトル」にタイトルとなる言葉として「当サイトのお知らせページです」と入力
④「更新」
⑤「適用」

▶ サイトアイコン設定　

※こちらは任意の設定です。必ず設定しなくてはいけない項目ではありません。
アイコンとはブラウザータブやブックマークなどに表示される小さな画像のことです。一般的にファビコンと呼ばれ、ウェブサイトを識別するための重要な役割を果たしており、ウェブサイトのブランドイメージを強化するためにも役に立ちます。
・サイトアイコンにする画像を用意する
あまり大きくないサイズのものを用意してください。通常は16×16ピクセルまたは32×32ピクセルのサイズが望ましいです。

・画像をメディアにアップロードする
①「メディア」
② に用意した画像をドラッグ

・アップした画像をサイトアイコンに設定する
③「外観」
④「カスタマイズ」
⑤「サイト基本情報」
⑥「サイトアイコン」の「サイトアイコン」をクリック

⑦「メディアライブラリ」からサイトアイコンにする画像を選択
⑧「選択」
⑨「画像切り抜き」画面で画像を編集
※特に何もしなくてよい
⑩「切り抜かない」
※切り抜く場合は「画像切り抜き」

９．ヘッダー

ヘッダーの作成

ヘッダーとはぺージの上部に表示される領域です。全てのぺージに同一のヘッダーが表示されます。以下の５つの設定を解説します。

▶ キャッチフレーズの作成　　　　　　　　　　　　　　　　

キャッチフレーズとはヘッダーに入れる任意の文章です。主に会社情報、問合せ電話番号やメールアドレス、所在地、挨拶文などを入れるのが一般的ですが、必ず設定する必要はありません。シンプルにすっきりしたヘッダーにしたい場合はこちらは設定しなくても構いません。

①「設定」
②「一般」
③「キャチフレーズ」にキャッチフレーズにしたい文章を入力
④「変更を保存」

・キャッチフレーズの配置を設定
⑤「Cocoon設定」
⑥「ヘッダー」
⑦「キャッチフレーズの配置」の任意の以下のどれかに☑を入れる
・表示しない…………キャッチフレーズを表示しない
・ヘッダートップ……ヘッダーの上に配置
・ヘッダーボトム……ヘッダーの下に配置
※詳しい配置は後の項目で行いますのでキャッチフレーズを設定したい場合は現段階ではヘッダートップかヘッダーボトムのどちらかを選択してください
⑧「変更をまとめて保存」

▶ ロゴ、またはサイトのタイトルの作成　　　　　　　　　　

「ロゴ」と「サイトのタイトル」の設定です。
ロゴとは主に会社やお店のロゴ画像です。サイトのタイトルとは、サイト自身の題名を表示します。サイト全体で最も目立つ場所に配置となります。
※こちらの設定は『ロゴ』か、『サイトのタイトル』のどちらかしか表示できませんのでご留意ください。ロゴの設定をしてもサイトのタイトルを表示設定にするとロゴは表示されません。　

■ サイトのタイトルの設定
※サイトのタイトルはサイトの検索結果画面などにも表示されます。他の設定にも相互影響する事を念頭に設定してください。
①「設定」⇨「一般」
②「サイトのタイトル」に記入 ⇨
③「変更を保存」

■ ロゴの設定
①「Cocoon設定」⇨
②「ヘッダー」⇨
③ ヘッダーロゴの「選択」⇨
④「ファイルをアップロード」⇨
⑤「ファイルを選択」からロゴ画像を選択 ⇨
⑥「画像の選択」
⑦「変更をまとめて保存」

▶ ヘッダーメニューの作成　　　　　　　　　　　　　　　　　

ヘッダーメニューを作成します。ヘッダーメニューとはサイトのページへのリンクです。サイト内のページにいつでもアクセスできるようにヘッダー内に配置し全てのページのヘッダーに同一に設置します。

①「外観」
②「メニュー」
③「メニュー名」に任意の名前を入力
※ ヘッダーメニューと記入でよい
④「ヘッダーのメニュー」にチェックを入れる
⑤「メニューを作成」

・ヘッダーメニューに作成したぺージを追加してゆく

────────── 固定ページを追加する ──────────
⑥「固定ぺージ」
⑦「全て表示」
⑧ 前項で作成したページが表示されるので全てに☑を入れる
※作成していない『ホーム』というページが存在する場合は前項の『指定ぺージをトップページ(ホームぺージ)にする』設定をすれば表示されなくなります
⑨「メニューに追加」
⑭ に☑したページがメニューとして追加される
⑮「メニューを保存」

────────── 投稿ページを追加する ──────────
⑩「投稿」
⑪「全て表示」
⑫ 前項で作成したページが表示されるので☑を入れる
⑬「メニューに追加」
⑭ に☑したページがメニューとして追加される
⑮「メニューを保存」

・各メニューの名前設定

現段階ではメニュー名が前項で設定したタイトル名となっているので、こちらでメニュー名を設定する。
①「外観」
②「メニュー」
③ 編集するメニュー右の「▼」をクリック
④「ナビゲーションラベル」にメニュー名を入力

※それぞれのメニューを以下のように記入
───────────────────────────────────────
・当サイトのトップのページです ⇨「トップ」
・当サイトの商品紹介のページです ⇨「商品紹介」
・当サイトの会社概要のページです ⇨「会社概要」
・当サイトの利用規約のページです ⇨「利用規約」
・当サイトのお知らせのページです ⇨「お知らせ」
───────────────────────────────────────

⑤「メニューを保存」
※こちらの設定ではメニューの名前のみ変更され、固定ぺージや投稿ぺージの編集画面の各ページのタイトルは変更されません

・ヘッダーメニュー内の配置
メニューの配置順は自由にカスタムできます。

①「外観」
②「メニュー」
③ 配置順を変更したいメニューをドラッグして任意の位置に配置する
④「メニューを保存」

・ヘッダーメニューの編集

ヘッダーメニューの編集です。背景色、メニューの文字の色、メニューの幅を設定します

メニューの編集
①「Cocoon設定」
②「ヘッダー」

・背景色の編集
③「グローバルナビメニュー色」の「グローバルナビ色」から任意の色を選択

・文字色の編集
④「グローバルナビメニュー色」の「グローバルナビ文字色」から任意の色を選択

・メニュー間の幅の編集（⑤か⑥のどちらかの設定となります）
■ ⑤「グローバルナビメニュー幅」の「トップメニュー幅」に任意の数値を入力
■ ⑥「グローバルナビメニュー幅」の「メニュー幅をテキストに合わせる」にチェックを入れる
※こちらの設定をお勧めします

⑦「変更をまとめて保存」

▶ サブメニューの作成　　　　　　　　　　　　　　　　　　

サブメニューとは、メニューの中にさらにメニューを入れたいときに使います。メニューの数が多くなった場合や、ページの種類ごとにメニューをまとめたいときなどに使います。一般的にメニューを入れるメニューを「親メニュー」として、そこに入れるメニューを「小メニュー」とします。親メニュー端の「ｖ」をクリックすると子メニューが展開表示されます。
下図はメニュー⑤を「親メニュー」とし、「子メニュー」としてメニュー⑥とメニュー⑦を入れています。

サブメニューの作成
①「外観」
②「メニュー」
③ 設定するメニューを選択
④ 子メニューをドラッグして親メニューの一段下に配置する
⑤「メニューを保存」

サブメニューの幅の設定
①「Cocoon設定」
②「ヘッダー」
③「グローバルナビメニュー幅」の「サブメニュー幅」に任意の数値を入力
④「変更をまとめて保存」

▶ その他の設定（固定、高さ、背景画像、全体色、文字色）

ヘッダー内の各設定を解説します

①「Cocoon設定」
②「ヘッダー」

■ 固定：ヘッダーを固定してページをスクロールしてもヘッダーが追従するようにする：
③ ヘッダーの固定の「ヘッダーを固定する」にチェックを入れる

■ 高さ：ヘッダーの高さの設定：
④「高さ」に任意の数値を入力

■ 背景画像：ヘッダーの背景画像の設定：
⑤ ヘッダーの背景画像の「選択」から「ファイルをアップロード」⇨「ファイルを選択」から背景画像を選択 ⇨「画像の選択」

■ 全体色：ヘッダーの全体色の設定：
⑥ ヘッダー全体色の「ヘッダー全体背景色」から色を選択

■ 文字色：ヘッダーの文字色の設定：
⑦ ヘッダー全体色の「ヘッダー全体文字色」から色を選択

⑧「変更をまとめて保存」

▶ 各配置　　　　　　　　　　　　　　　　　　　　　　　　　

①「Cocoon設定」
②「ヘッダー」
③「ヘッダーレイアウト」から任意で選択
④「キャッチフレーズの配置」から任意で選択
⑤「変更をまとめて保存」

各レイアウトの詳しい設定はこちら

③「ヘッダーレイアウト」
　 ⇨ センターロゴ(デフォルト)
④「キャッチフレーズの配置」
　 ⇨ ヘッダートップ(デフォルト)
⑤「変更をまとめて保存」

③「ヘッダーレイアウト」
　 ⇨ センターロゴ(トップメニュー)
④「キャッチフレーズの配置」
　 ⇨ ヘッダーボトム
⑤「変更をまとめて保存」

※こちらの設定はキャッチフレーズは強制的に表示されなくなります。
③「ヘッダーレイアウト」
　 ⇨ トップメニュー
④「キャッチフレーズの配置」
　 ⇨ ・表示しない
　　・ヘッダートップ(デフォルト)
　　・ヘッダーボトム
⑤「変更をまとめて保存」

※こちらの設定はキャッチフレーズは強制的に表示されなくなります。
③「ヘッダーレイアウト」
　 ⇨ トップメニュー小
④「キャッチフレーズの配置」
　 ⇨ ・表示しない
　　・ヘッダートップ(デフォルト)
　　・ヘッダーボトム
⑤「変更をまとめて保存」

③「ヘッダーレイアウト」
　 ⇨ センターロゴ(デフォルト)
④「キャッチフレーズの配置」
　 ⇨ ヘッダーボトム
⑤「変更をまとめて保存」

③「ヘッダーレイアウト」
　 ⇨ センターロゴ(トップメニュー)
④「キャッチフレーズの配置」
　 ⇨ ヘッダーボトム
⑤「変更をまとめて保存」

※こちらの設定はキャッチフレーズは強制的に表示されなくなります。
③「ヘッダーレイアウト」
　 ⇨ トップメニュー(右寄せ)
④「キャッチフレーズの配置」
　 ⇨ ・表示しない
　　・ヘッダートップ(デフォルト)
　　・ヘッダーボトム
(どれを選んでも、キャッチフレーズは表示されません)
⑤「変更をまとめて保存」

③「ヘッダーレイアウト」
　 ⇨ トップメニュー(右寄せ)
④「キャッチフレーズの配置」
　 ⇨ ・表示しない
　　・ヘッダートップ(デフォルト)
　　・ヘッダーボトム
⑤「変更をまとめて保存」

10．フッター

フッターの作成

フッターとはウェブページの一番下に表示される領域です。全てのぺージに同一のものが表示されます。
当サイトではフッターには必要最低限の設定のみ解説いたします。基本的にフッターまで閲覧する利用者は稀なので、まず初期のうちは基本的な設定のみでも問題ありません。※より詳しい設定をしたい場合はWordpressでの作成に慣れからの方が良いでしょう。フッターに設定する項目は以下の3つです。

▶ 基本設定（背景色、文字色）　　　

フッターの背景色と文字の色を設定します。
①「Cocoon設定」
②「フッター」
③「フッター背景色」に希望のフッター全体の背景色を選択
④「フッター文字色」に希望のフッター全体の文字色を選択
⑤「変更をまとめて保存」

▶ 利用規約（プライバシーポリシー）

利用規約とは利用者の個人情報の収集、使用、保護、開示に関する方針を明示する文書です。一般的にプライバシーポリシーとも呼ばれます。

フッターに前項で作成した「利用規約」ぺージへのリンクを設定します。

・フッターメニューの作成
まずはフッターに利用規約へのリンクを設置するためにフッターメニューを作成します。
①「外観」
②「メニュー」
③「新しいメニューを作成しましょう」
④「メニュー名」に『フッターメニュー』と記入
⑤「フッターメニュー」にチェックを入れる
⑥「メニューを作成」

・フッターメニューに「利用規約」のリンクを設置する
⑦「固定ページ」欄から「当サイトの利用規約のページです」にチェックを入れる
⑧「メニューに追加」
⑨ の欄にメニューが追加される
⑩「当サイトの利用規約のページです」右端の「▼」をクリック
⑪ ナビゲーションラベル欄に「利用規約」と入力
⑫「メニューを保存」

最後に作成した『フッターメニュー』の設定をします。
①「Cocoon設定」⇨
②「フッター」⇨
③「フッタ表示タイプ」欄の左から以下のどちらかを選択
　◎メニュー＆クレジット(左右)
　◎メニュー＆クレジット(中央揃え)※こちらがお勧め
④「変更をまとめて保存」

▶ 著作権情報（コピーライト）　　　

・著作権情報とはサイトの運営者がそのサイトやその内容に対する著作権を主張するために提供する情報です。他の人がサイトのコンテンツを無断で使用したり複製したりしないようにするための法的な通知として機能しますので必ず設定しましょう。一般的にコピーライトとも呼ばれます。表示には一般的に「©」（円マーク内に”C”）や「Copyright」などの表示が使われます。語尾に「. All rights reserved.」と記載することもあります。

──────　著作権情報の構成　──────
© ●●● ●●●.
Copyright ●●● ●●●.
Copyright © ●●● ●●●.
Copyright © ●●● ●●● All Rights Reserved.

●●●は著作年（サイトを公開した年など）
●●●は著作権者（サイトの管理者や社名など）
最後は「.」を入れる

・フッターに『著作権情報(コピーライト)』を表示させます。

①「Cocoon設定」
②「フッター」
③ クレジット表記欄の「独自表記」に☑を入れる
④ に著作権情報（コピーライト）にする文章を記入──────────　例　──────────
Copyright © 2023 My Site All Rights Reserved.
───────────────────────
⑤「変更をまとめて保存」

11．メインの基本設定

メインの編集

ページが全て作成できたら次はページごとの内容を作成します。ページの内容は全てメインに表示されます。

メインの編集の基本

メインでの編集は基本的にメインの領域に『ブロック』という要素をあてはめてページの内容を構築してゆきます。
ぺージ内の『 ⊞ 』をクリックすると『ブロック』の一覧が表示されます。このブロック一覧からブロックを指定して『編集領域』に当てはめて行く形で行います。『ブロック』とは、『テキスト、画像、見出し、リスト』などのページを構成する要素の事です。

ブロックの詳細設定

各ブロックの主な操作は「ツールバー」と「オプション」から行います。
編集領域（ブロックで指定した領域）をクリックすると上部に「ツールバー」が表示され、右端の「：」をクリックすると「オプション」が表示されます。そちらよりそれぞれの設定にあった操作を行います。

・メインの不用な初期設定の削除

メインを作成する前にWordpressで最初から設定してあるものが邪魔なのでそれぞれ非表示にします。以下の項目をクリックしてそれぞれ非表示にしてください

▶ １．ページタイトルを非表示にする________________________

初期設定ではぺージタイトルはブラウザで全ページの上段に表示されるので全ページで非表示にする。

：CSSを使います：
①「外観」
②「カスタマイズ」
③「追加CSS」
④ に以下のコードを追加
________________________________

h1.entry-title{
display:none;
}
_______________________________
⑤「公開」
※プラグインを使って非表示にする方法もありますがこちらは動作しなくなるリスクがあります。

▶ ２．トップシェアボタンとボトムシェアボタンを非表示にする

①「Cocoon設定」
②「SNSシェア」
③「メインカラムシェアボタンを表示」の☑を外す
④「メインカラムボトムシェアボタンを表示」の☑を外す
⑤「変更をまとめて保存」

▶ ３．フォローボタンを非表示にする________________________

①「Cocoon設定」
②「SNSフォロー」
③「本文下のフォローボタンを表示する」のチェックを外す
④「変更をまとめて保存」

▶ ４．サイドバーとサイドスクロール追従を非表示にする______

①「外観」
②「ウィジェット」
③「サイドバー」欄と「サイドスクロール追従」欄にある「ブロック」の右端の「▼」をクリック
④「削除」
※全ての「ブロック」を削除してください

▶ ５．アーカイブぺージのリンクと６．日付を非表示にする____

★日付は投稿ページでは必要なので固定ページのみ非表示にします。

①「外観」
②「テーマファイルエディター」
③「編集するテーマを選択」爛から「Cocoon Child」を選択
④「選択」
⑤「選択したファイルの内容:」内の一番下の行に以下のコードを追加

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

⑥「ファイルを更新」

▶ ７．「カテゴリー・タグ、投稿ぺージの関連記事、ページ送りナビ、コメント、パンくずリスト」を非表示にする

①「Cocoon設定」
②「投稿」
③「カテゴリー・タグ表示」から「カテゴリーもタグも表示しない」を選択
④「関連記事を表示する」のチェックを外す
⑤「ページ送りナビを表示する」のチェックを外す
⑥「コメントを表示する」のチェックを外す
⑦「パンくずリストの配置」を「表示しない」にチェックを入れる
⑧「変更をまとめて保存」

同時に固定ページのパンくずリストも非表示にする：
①「Cocoon設定」
②「固定ページ」
③「パンくずリストの配置」を「表示しない」にチェックを入れる
④「変更をまとめて保存」

・メインの全ページ共通設定

こちらで設定する内容は全てのページのメイン領域で共通となります。

▶ 背景の設定　　　　　

①「Cocoon設定」
②「全体」
以下からそれぞれの設定を行った後に
⑤「変更をまとめて保存」

・背景色
③「サイト背景色」の「背景色」から任意のカラーを選択

・背景画像
④「サイト背景画像」の「選択」から背景にする画像を選択(※事前にメディアにアップロードしておく。前項の（・サイトに使用する画像の用意）を参照)

▶ メイン内の背景の設定

※こちらの設定は難易度が高いので、特に理由がなければこちらは設定はせずにデフォルトの状態をお勧めいたします。デフォルトでは背景は白色となります。※当ページもデフォルト状態です。

設定方法：各ページごとのCSS(スタイルシート)にコードを書く。
・設定するページの設定画面を開く
①「固定」
②「設定するページ」
③ ページ下部にある「カスタムCSS」欄の最後尾をEnterキーを押して改行し、以下のCSSコードを記述する

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

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

▶ 文字の設定　　　　　

①「Cocoon設定」
②「全体」
以下からそれぞれの設定を行った後に
⑧「変更をまとめて保存」

・文字の種類
③「フォイント」からフォントの種類を選択(※デフォルトは「ヒラギノ角ゴ、メイリオ」)

・文字の大きさ
④「文字サイズ」に任意の数値を選択(※デフォルトは18px)

・モバイルサイトの文字の大きさ
⑤「モバイルフォントサイト」に任意の数値を選択(※デフォルトは16px)

・文字の色
⑥「文字色」に任意の色を設定(※デフォルトは無選択(黒))

・文字の太さ
⑦「文字の太さ」に任意の数値を設定
※デフォルトは400

▶ リンクの設定　　　　

①「Cocoon設定」
②「全体」
以下からそれぞれの設定を行った後に
④「変更をまとめて保存」

・リンクの色
③「リンク色」に任意の色を設定(※デフォルトは無選択(黒))
(※リンク色とは『リンクに設定した文字』の色の事を言います。リンクとはクリックすると指定のぺージに移動する文字のことです
リンク色を赤色にした場合の例：
ここをクリックするとトップページ移動します)

▶ 幅と余白の設定　　　

______ ■ メインの幅の設定 ■ _________
①「Cocoon設定」
②「カラム」
③「コンテンツ幅」に600～1600pxの範囲で指定する。
※参考までに以下の有名なWebサイトの横幅です。（2023年現在）
・ヤフーサイト‥‥‥950px
・ZOZOタウン‥‥‥980px
・YouTube‥‥‥‥‥1024px
・当サイト‥‥‥‥‥800px
⑤「変更をまとめて保存」

____ ■ メインの余白の設定 ■ _________
④「コンテンツ余白幅」に10～80pxの範囲で指定する。※参考までに当サイトは10pxに指定指定しています。
⑤「変更をまとめて保存」

▶ 文字選択時の設定　　

____ ■ 文字選択時の設定 ■_________
①「Cocoon設定」
②「全体」
以下からそれぞれの設定を行った後に
⑤「変更をまとめて保存」

(ヘッダー、フッターメインを含むサイト全体の文字を選択した時の色を設定となります)
・選択時の文字色
③「選択文字色」に任意の色を設定(※デフォルトは無選択(黒）)
⑥「変更をまとめて保存」

・選択時の背景色
③「選択文字色」に任意の色を設定
※デフォルトは無選択(黒）
⑥「変更をまとめて保存」

12．ブロックの基本操作

・ブロックの基本操作一覧

▶ 次の編集領域を作成する

既存の編集領域をクリックして「Enter」キーを押すと『 ⊞ 』が表示される

▶ 編集領域をコピーする

操作手順：
①「コピーしたい編集領域」をクリック
②「：」をクリック
③「複製」

▶ 編集領域を移動させる(表示順番を変更する)

①「移動させたい編集領域」をクリック
②「移動」ボタンで上下に移動

▶ 編集領域間に編集領域を追加する

追加したい集領域の間にカーソルを合わせて①『 ⊞ 』をクリック

▶ 編集領域を削除する

①「削除したい編集領域」をクリック
②「：」をクリック
③「(ブロック名)を削除」

・文章

文章を入れる

メインに文章(テキスト)を入れていきます。基本的に文章はまず『見出し』を配置しその下に『段落』を配置する構成となります。
『見出し』‥‥文章の題名、タイトル、となる部分です。『見出し』ブロックを使って設定します。
『段落』‥‥‥文章の全容です。『段落』ブロックを使って設定します

─────────────────── 見出しの設置 ───────────────────

▶ 見出しの配置手順

まずはトップページに設置します。前項でトップぺージに指定したページを開きます
①「固定ページ」
②「トップページーフロントページ」

①「⊞」をクリックしブロック一覧を表示します。（⊞が表示されていない場合は①の箇所にカーソルを合わせると表示されます）
②「見出し」ブロックを選択
※一覧に「見出し」がない場合は③に「見出し」と記入すると下部に表示されます。
④ の場所に「見出し」の設定領域が設置されますので、そちらに文章を記入してください。

※備考
こちらの『トップページ』の表示は前項の設定により公開ページでは非表示となっています。

▶ 見出しの各詳細設定

▶ 文字の大きさの変更

文字の大きさを変更するには２つの方法がございます。
方法１：
① 変更する見出しの領域をクリックしてツールバーを表示する
②「見出しレベルを変更」アイコンをクリック
③「H1～H6」の範囲で大きさを選択
※後の「目次」設定などに影響しますので、文字の大きさの設定はこちらの方法１での設定をお勧めします。

方法２：
① 変更する見出しの領域を全選択してツールバーを表示する
②「フォントサイズ」アイコンをクリック
③ 任意のサイズを選ぶ

▶ 文字の一部の大きさを変更見出

① 大きさを変更する文字の範囲を選択する
②「フォントサイズ」タグをクリック
③ 任意のサイズを選ぶ

▶ 文字の色の変更

① 変更する見出しの領域をクリックしてサイドバーを表示する
②「文字」タグをクリック
③ 任意の色を選択

▶ 文字の一部の色を変更

① 変更する文字を選択する
②「文字」タグをクリック
③ 任意の色を選択

▶ 文字の太さの設定

① 見出しをダブルクリックしてすべての見出しを選択
② サイドバーから「太文字」タグをクリック

▶ 文字にリンクを張る

① リンクを貼りたい文章を選択する
②「リンク」タグをクリック
③ にリンク先のURLを入力
※リンクをクリックしたときに新しいタブでページを表示させたいときは④「新しいタブで開く」をクリックする

▶ 文字の配置位置の設定

① 変更する見出しの領域をクリックしてサイドバーを表示する
②「テキストの配置」タグをクリック
③ 任意の配置位置を選択

▶ 見出しの領域の背景色の設定

※デフォルトでは背景色はグレーとなっています。
① 変更する見出しの領域をクリック
②「設定」タグをクリック
③「背景」をクリック
④ 任意の色を選択

─────────────────── 段落の設置 ───────────────────

▶ 段落の配置手順

見出しの下に段落を設置します。使用するブロックは「段落」です

① 見出しの設定領域の下の「⊞」をクリックしブロック一覧を表示します。（⊞が表示されていない場合は①の箇所にカーソルを合わせると表示されます）
②「段落」ブロックを選択
※一覧に「段落」がない場合は③に「段落」と記入すると下部に表示されます。
④ の場所に「段落」の設定領域が設置されますので、そちらに文章を記入してください。

・写真、画像

写真や画像の配置

メインに写真や画像を配置します。使用するグロックは「画像」です

▶ 配置する写真や画像について詳しい解説はこちら

サイズ：
縦横のサイズはできるだけ配置したい画像のサイズと同じものを用意する。Wordpressの編集で縦横のサイズは自由に変更できるが、画像が荒くなったりぼやける可能性があるので、できるだけしない方がよい。

表示：
写真や画像はサイトの全体幅（コンテンツ幅）や設置する場所の横幅に合わせて表示されます。それぞれの横幅を超える画像を配置すると横幅に合わせて縮小される。

解像度：
サイトに配置する写真や画像の解像度は「72 dpi」です。72dpi以上でもサイズには影響はありませんが、画像がゆがんだり、画質に影響が出る場合

▶ 写真や画像の配置手順

ページに画像を配置します。工程は基本的に以下の3ステップです。

１．写真画像のアップロード
まず配置する写真や画像をご用意いただき「メディアライブラリ」にアップロードしてください。Wordpressでは、サイトに必要な画像はまず管理者ぺージの「メディア」ぺージから各画像をアップロードして一括で管理します。

写真や画像のアップロード
①「メディア」⇨
② に画像をドラッグする ⇨

アップロードした写真や画像の削除
アップロードした画像から削除したい画像を選択 ⇨
③「完全い削除する」

２．写真画像を配置する
ページに写真画像を任意の場所に配置してゆきます。

①「⊞」をクリックしブロック一覧を表示します。（⊞が表示されていない場合は①の箇所にカーソルを合わせると表示されます）
②「画像」ブロックを選択
※一覧に「画像」がない場合は③に「画像」と記入すると下部に表示されます。
④「メディアライブラリ」をクリック
⑤ 事前にアップロードしておいた写真や画像を選択
⑥「選択」をクリック
⑦ の位置に画像が配置される

※画像がぼやけていたり、小さく表示されている場合は以下の手順を試してください
⑧「設定」をクリックしてサイドバーを表示
⑨「ブロック」
⑩「Setting」
⑪「画像サイズ」から「フルサイズ」を選択

３．画像に説明文を付ける
配置した画像が何を表しているのかを説明する文章を付けます

説明文を付ける意味は？
ウェブページにおいて配置した画像が読み込まれない場合や読み込みに時間がかかる場合、またはユーザーが画像を表示できない状況で表示される文章です。必ず設定しなければならないものではありませんが、SEO(検索結果)の観点からも設定しておいて損はありません。
文章例：商品画像、会社設備写真、業務説明画像、像社員写真、など
① 設定する画像をクリック
②「設定」をクリックしてサイドバーを表示
③「ブロック」
④「Setting」
⑤「ALT テキスト (代替テキスト)」に記入する

・カラム

カラムを使って見出しや画像などのブロックをまとめる

カラムとはブロックを収納し、整頓する棚のようなものだとお考え下さい。
WordPressでは「見出し」「段落」「画像」などの各ブロックは通常設定では縦に１つずつ順に配置されますが『カラム』を使うと各ブロックを横（隣同士）に配置することができます。

▶ カラムの詳しい解説

まずカラムを設定しそのカラム内に各ブロックを配置してゆきます。

モバイルでの表示順は以下の通りとなります。

▶ カラムの設置手順

右図のように配置する手順を解説します。
以下は「２カラム」を設置し「見出し、段落、画像」をそれぞれ配置します。

① カラムを配置したい箇所にカーソルを合わせるか、配置したい一つ手目のブロックをクリックして「Enter」キーを押し「⊞」をクリックする
②「カラム」を選択
※ブロック内にカラムがない場合は③に「カラム」と入力する
④ カラムの種類から「２カラム」を選択
⑤「⊞」をクリック
⑥「見出し」を選択

⑦ ⑥で設置した「見出し」欄をクリック
⑧「⊞」をクリック
⑨「段落」を選択

⑩ 左側のカラムをクリックし「⊞」をクリック
⑪「画像」を選択

▶ カラムの各詳細設定

▶ カラム内のカラムの幅変更

① 幅を変更したいカラムをクリックし「▲」キーでカラム内のカラムが青い枠線で囲まれた状態にする
②「設定」をクリック
③「ブロック」をクリック
④「Settings」をクリック
⑤ 幅を任意の数値で設定する(以下参照)
※「px」か「%」の仕様をお勧めします

各単位の説明

『 PX 』
任意の幅にPX単位で指定

『 % 』
幅を％で指定

『 EM 』
親要素の文字サイズに対して相対的に幅が変化。
親要素のフォントサイズが16pxの場合1EMのカラム幅は16px、2EMは32px、0.5EMは8px

『 REM 』
ルート要素(html要素)の文字サイズに対して相対的に幅が変化。
ルート要素(html要素)の文字サイズが16pxの場合1REMのカラム幅は16px、2REMは32px、0.5REMは8px
※ブラウザの文字サイズを変更した場合やモバイルデバイスで表示した際にも、カラムの幅が柔軟に対応できるメリットがある

『 VW 』
ビューポートの幅に対して相対的に幅が変化。1VWはビューポートの幅の1%に相当。（ビューポートとは、ウィンドウ領域のことでブラウザのウィンドウサイズやモバイルデバイスの画面サイズによって幅が変わります）
ブラウザの幅が1000pxの場合、10VWのカラム幅は1000pxの幅の10%である100px。5VWのカラム幅はビューポートの幅の5%となる
※VWはレスポンシブデザインに非常に便利

『 VH 』
ビューポートの高さに対して相対的に高さが変化。1VHはビューポートの高さの1%に相当（ビューポートとは、ウィンドウ領域のことでブラウザのウィンドウサイズやモバイルデバイスの画面サイズによって高さが変わります）
ラウザの高さが800pxの場合、10VHのカラムの高さは800pxの高さの10%である80px。5VHのカラム高さはビューポートの高さの5%となる。
※VWはレスポンシブデザインに非常に便利。特定の状況でカラムが非常に小さくなりすぎるといった問題が発生する可能性があるため、適切な値を設定することが重要

▶ カラム内にカラムを追加する

① 追加したいカラムのどこでもよいのでクリックし「▲」キーでカラム全体が青い枠線で囲まれた状態にする
②「設定」をクリック
③「ブロック」をクリック
④「Settings」をクリック
⑤ 追加した後のカラムの合計数値を選択
・２カラムにカラムを１つ追加したいときは合計３カラムなので『３』を選択

▶ カラム内のカラムの配置変更

① 位置を変更したいカラムをクリックし「▲」キーでカラム内のカラムが青い枠線で囲まれた状態にする
②「＜＞」で変更したい方向を選択
＜ ‥‥‥左に移動し左のカラムと入れ替わる
＞ ‥‥‥右に移動し右のカラムと入れ替わる

▶ カラムの余白の設定

① 余白を変更したいカラムのどこでも良いのでクリックし「▲」キーでカラム全体が青い枠線で囲まれた状態にする
②「設定」をクリック
③「ブロック」をクリック
④「Styles」をクリック
⑤「パディング」を任意の幅まで調整する

▶ カラム全体に枠線を入れる

① 枠線を入れたいカラムのどこでも良いのでクリックし「▲」キーでカラム全体が青い枠線で囲まれた状態にする
②「設定」をクリック
③「ブロック」をクリック
④「Styles」をクリック
⑤「枠線」を任意の数値に設定
・枠線の角を丸くしたいときは⑥「角丸」に任意の数値を設定

▶ カラム内のカラムに枠線を入れる

① 枠線を入れたいカラムをクリックし「▲」キーでカラム内のカラムが青い枠線で囲まれた状態にする
②「設定」をクリック
③「ブロック」をクリック
④「Styles」をクリック
⑤「パディング」を任意の幅まで調整する

▶ カラムをモバイルでもPCブラウザと同じ横配置にする

① 設定するカラムのどこでも良いのでクリックし「▲」キーでカラム全体が青い枠線で囲まれた状態にする
②「設定」をクリック
③「ブロック」をクリック
④「Setting」をクリック
⑤「モバイルでは縦に並べる」のチェックをオフ（左に移動）にする

・ウィジェット

ウィジェットを使ってまとめて編集する

ウィジェットとは：
WEBサイトのサイドバー、フッター、または他の特定のエリアに様々な機能のコンテンツを設置できるのがウィジェットです。ウィジェットは設置すると全てのページに同じコンテンツを表示機能させる事ができ、設置したウィジェットを編集することで全てのページに編集内容を一括で反映させる事ができます。
代表的なウィジェットとして以下のものがあります
・テキストウィジェット‥‥‥‥‥文章を表示させる。広告、バナーなどに使用
・投稿ウィジェット‥‥‥‥‥‥‥最新の投稿を表示します。訪問者に最新のコンテンツを知らせるのに役立ちます。
・目次ウィジェット‥‥‥‥‥‥‥各ページへのリンクです。スムーズなページ移動ができます。

ウィジェットを設置できる箇所 ※赤色のバーが設置できる箇所です。

▶ ウィジェット　の詳細説明

例：サイドバー領域に「目次」のウィジェットを設置すると。すべてのページのサイドバーエリアに目次が表示されます。

指定したページのみ表示させることも可能です。
例：サイドバー領域に「目次」のウィジェットを設置して、トップページとお知らせページのみ表示させるように設定

▶ ウィジェットの配置手順

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

▶ ウィジェットをページごとに表示・非表示にする

・固定ページのみ表示

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

・投稿ページのみ表示

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

・指定ページのみ表示

外観 ⇨
ウィジェット ⇨
右欄の配置した場所の右にある「▼」⇨
「指定したいページのみに表示したいウィジェット」の右にある「▼」⇨
表示設定 ⇨
表示したいページを選ぶ（投稿、固定ページ）⇨
「固定ページ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］広告