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

ネットショップと趣味のブログをいくつか運営しています。
◆ 神テーマ「SWELL」のすべて!◆ 特徴 ~ エディタ ~ 移行手順 ~ デメリット ~ 感想 ~ 比較まで!記事へ GO!

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

次の動画へ⇒

\ 300円クーポン進呈中 /

ココナラ:https://coconala.com/


Cocoonの外観をカッコよくするには、スキンを設定しよう!

でも、スキンを適用したけど同じ見た目にならない…

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

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

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

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

目次

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

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

ぽんひろさん製作のスキン「Season」で素敵な見た目を設定しよう!

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

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

用意するもの

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

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

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

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

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

※事前にヘッダー画像を自作するか、プロに依頼する場合はココナラなどで検索してみてください(1000円程度~)。

スキンを適用する

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

STEP
Cocoonのスキンを適用する

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

Cocoon設定画面
STEP

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

下に移動します。

スキン設定
STEP

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

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

Cocoonスキンの一覧
STEP

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

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

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

スキンを選択
STEP

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

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

スキン適用直後

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

ヘッダー設定

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

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

ヘッダーロゴサンプル

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

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

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

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

Cocoon設定
STEP

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

ヘッダー
STEP

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

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

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

Cocoon設定、ヘッダー設定
STEP

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

変更を保存
STEP

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

ヘッダーロゴ画像が表示された

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

ヘッダーメニューサンプル

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

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

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

WordPressの管理画面で、外観ーメニュー
STEP

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

新しいメニューの作成
STEP

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

ヘッダーメニューを作成
STEP

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

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

メニューを追加
STEP

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

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

メニュー追加画面
STEP

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

メニュー画面
STEP

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

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

メニューの表示オプションを設定
STEP

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

メニューに説明を入力
STEP

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

メニューの説明をすべて入力
STEP

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

メニューを保存
STEP

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

カテゴリー名と英語が表示された

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

通知バーの説明

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

STEP
通知バーの表示

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

Cocoon設定
STEP

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

Cocoon設定の通知エリア

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

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

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

STEP

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

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

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

通知エリアの背景色を設定
STEP

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

通知エリアが表示された

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

カルーセルの説明

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

STEP
カルーセルの表示

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

Cocoon設定
STEP

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

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

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

Cocoon設定のカルーセル
STEP

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

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

カルーセルの設定
STEP

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

カルーセルが表示された

フッター設定

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

フッターメニューの説明

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

フッターメニューについては、すでに「WordPressブログでフッターを設定する」で作成しました。まだの方はそちらを参照してください。

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

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

Cocoon設定
STEP

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

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

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

Cocoon設定のフッター
STEP

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

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

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

WordPressの管理画面で、ウィジェットを選択

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

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

STEP
フッター左の設定

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

STEP

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

フッター左にカテゴリーを入れる
STEP

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

カテゴリーを保存、完了
STEP

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

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

サイドバー設定

サイドバーの説明

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

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

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

STEP
サイドバー設定

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

WordPressの管理画面で、ウィジェットを選択
STEP

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

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

ウィジェットのサードバー
STEP

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

不要なウィジェットを削除
STEP

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

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

新着記事のウィジェットをサイドバーへ入れる

STEP

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

新着記事ウィジェット設定
STEP

完了 をクリックします。

完了をクリック
STEP

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

サイドバーが完成した

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


次に進んでね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次