MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
永久無料ドメイン付き!超高速サーバーConoHa Wing! 詳細

Cocoonおすすめスキン ぽんひろさんの「Season」と同じ見た目を作る

Cocoonのスキンを適用したけど、同じ見た目にならない

そんな経験はありませんか?

実は、スキンを選択しただけでは同じ見た目になりません。

フッター、ヘッダー、サイドバーなどを手動で設定する必要があります

ここでは、ぽんひろさんの「Season」というスキンを使って、同じ見た目に設定する方法を解説します。

Season以外のスキンをお使いの方にも、ご参考にしていただけます。

目次

Cocoonスキン「Season」と同じ見た目を作る

Seasonデモページ: https://ponhiro.com/season/

「Season」スキンで素敵な見た目を設定しよう!

今回は、Cocoonのおすすめスキン、ぽんひろさん製作の「Season」と同じ見た目を作る方法を解説します。

Cocoonのスキンの設定は、「Cocoon設定」の「スキン」タブ上で簡単に行うことができますが、スキンを選択しただけでは同じ見た目になりません

トップ画像カルーセル通知バーカテゴリーフッターメニュー、フッター右、サイドバーの7つを手動で設定する必要があります。これらを一緒に設定していきましょう。

用意するもの

以下のオブジェクトを事前に用意してください。

ヘッダーロゴ画像下記参照

300 x 100 ピクセル png 画像(背景透過または背景白)

写真入りの記事7本以上下記参照

カルーセル設定用(7本以上ないと回転しません)

早速スキンを適用していきましょう。

スキンを適用する

以下の手順でスキンを適用します。

STEP
Cocoonのスキンを適用する

WordPressの管理画面で、 Cocoon設定 > Cocoon設定 を選択します。

STEP

Cocoon設定の画面内で、 スキン のタブをクリックします。

下に移動します。

STEP

スキンの一覧が表示されます。

各スキン名の左側にある写真アイコンをクリックすると、スキンの見本が表示されます。

STEP

ここでは、ぽんひろさん製作の「Season (Winter)」というスキンを選択します。

スキン名の左横のボタンにチェックを入ます。

下にスクロールして、 変更をまとめて保存 をクリックします。

STEP

ブラウザで新しいウィンドウ開き、自分のサイトを確認してみましょう。

スキンは適用されましたが、まだ色々な設定がされていないので見た目が寂しいですね。

次はヘッダーの設定を行います。

ヘッダー設定

ヘッダーの設定は、ヘッダーロゴヘッダーメニュー通知バーの3つに分けて解説します。

ヘッダー設定①|ヘッダーロゴ画像の貼り方

まずはじめにヘッダーロゴを設定します。

事前にヘッダー画像を準備しておいてください

STEP
ヘッダーロゴ画像の貼り方

WordPressの管理画面で、 Cocoon設定 > Cocoon設定 を選択します。

STEP

ヘッダー をクリックします。下に移動します。

STEP

ヘッダーロゴ選択 ボタンを押して、画像を選択します。

ヘッダーロゴサイズ を「130」と入力します。

キャッチフレーズの配置で「表示しない」をチェックします。

STEP

下に移動して、変更をまとめて保存 をクリックします。

STEP

ヘッダーロゴが表示されました。

ヘッダー設定②|ヘッダーメニューの表示

次は、「ヘッダーメニュー」を作成します。ヘッダーメニューには、カテゴリーホームボタンを配置してみましょう。

STEP
ヘッダーメニューの表示

WordPress管理画面で 外観 > メニュー を選択します。

STEP

新しいメニューを作成しましょう のリンクをクリックします。

STEP

ヘッダーメニュー」と入力し、メニューを作成 をクリックします。

STEP

固定ページ」内の すべて表示 タブをクリックします。

ホーム」のチェックボックスをチェックし、メニューに追加 をクリックします。

STEP

ホーム」が追加されました。

カテゴリー」横の をクリックして展開し、「すべて選択」をチェックして メニューに追加 ボタンを押します。

STEP

カテゴリーがすべて追加されました。

STEP

次に、表示オプション をクリックして開きます。

説明」にチェックを入れ、表示オプション を閉じます。

STEP

ホーム」の をクリックして展開し、説明に「Home」と入力します。

STEP

他のすべての項目でも、「説明」に英語を入力します。

STEP

メニューの位置」の「ヘッダーメニュー」横にチェックを入れ、メニューを保存 ボタンをクリックします。

STEP

ヘッダーメニューに、「ホーム」と「カテゴリー」が英語付きで追加されました。

ヘッダー設定③|通知バーの表示

次は、「通知バー」を表示します。通知バーには、お知らせ事項宣伝したいメッセージを表示できます。リンクを付けることも可能です。

STEP
通知バーの表示

WordPressの管理画面で、 Cocoon設定 > Cocoon設定 を選択します。

STEP

通知 タブをクリックします。

通知表示」で「通知エリアの表示」にチェックを入れます。

通知メッセージ」に表示するメッセージを入力します。

リンクを設定したい場合は、「通知URL」にリンクURLを入力します。

STEP

通知エリア背景色」で 色を選択 ボタンを押します。

入力ボックスに「#84ccc9」と入力します。

変更をまとめて保存 をクリックします。

STEP

通知バーが表示されました。

ヘッダー設定③|カルーセルの表示

次は、記事が回転するカルーセルを設定します。表示するだけなら6記事でかまいませんが、自動で回転させるには7記事以上が必要になります。

STEP
カルーセルの表示

WordPressの管理画面で、 Cocoon設定 > Cocoon設定 を選択します。

STEP

カルーセル をクリックします。

カルーセルの表示」で「フロントページのみで表示」を選択します。

表示内容」で対象となるカテゴリーをチェックします。

STEP

オートプレイ」で「オートプレイを実行」にチェックを入れます。

変更をまとめて保存 をクリックします。

STEP

カルーセルが表示されました。

フッター設定

フッター設定①|フッターメニューの配置を変更

次は、フッターメニューの配置を変更します。フッターを左に、コピーライト情報を右に表示します。

フッターメニューについては、すでに「8-6 お問い合わせの設定」で作成しました。まだの方はそちらを参照してください。

STEP
フッターメニューの配置を変更

WordPressの管理画面で、 Cocoon設定 > Cocoon設定 を選択します。

STEP

フッター タブをクリックします。

フッター表示タイプ」で「メニュー&クレジット(左右)」にチェックを入れます。

保存をまとめて保存 をクリックします。

STEP

フッターの位置が変更されました。

フッター設定②|フッター左の設定

フッターリンクの上に、「フッター右」「フッター中」「フッター左」のウィジェットを置くことができます。

ここでは、「フッター左」にカテゴリーを追加します。見本では「フッター中」にタグが設定されていますが、見本の記事ではタグが設定されていないため、ここでは設定しません。

STEP
フッター左の設定

WordPressの管理画面で、外観 > ウィジェット を選択します。

STEP

左側にある「カテゴリー」ウィジェットを、「フッター左」の中にドラッグして入れます。

STEP

カテゴリー」を 保存 > 完了 します。

STEP

フッター右にカテゴリーが表示されました。

サイドバー設定

次はサイドバーをカスタマイズします。

見本では、プロフィールカテゴリー人気記事が入っています。

人気記事はビューがない場合は「表示する記事がありません」と表示されてしまうので、サンプルでは新着記事を入れていきます。

STEP
サイドバー設定

外観 > ウィジェット を選択します。

STEP

サイドバー横の をクリックして展開します。

プロフィール」と「カテゴリー」のみを残し、不要な項目をサイドバーから消していきましょう。

STEP

不要な項目を消すには、項目横の をクリックして展開し、削除 をクリックします。

STEP

次に、左側のウィジェットの項目の中から「新着記事」を見つけます。

をクリックして展開し、サイドバーが選択されているのを確認してから、ウィジェットを追加 をクリックします。

STEP

「新着記事」の「表示タイプ」で、「大きなサムネイル」を選択して 保存 をクリックします。

STEP

完了 をクリックします。

STEP

サイドバーにプロフィール、カテゴリー、新着記事が入りました。

これで、「Season」スキン設定のための手順が終了しました。

これでアフィリエイトブログ作成のすべての手順が終了しました!
お疲れさまでした!


次はいよいよ記事を書き始めるよ。

次の記事では、執筆に必要なブロックエディタの基本的な使い方について説明します。

次は「記事の書き方 1

よかったらシェアしてね!
目次
閉じる