【簡単】WordPress テーマCocoonをカスタマイズしてマブログのようにしたい！【7ステップ】

マー — Sun, 25 Apr 2021 03:58:02 +0000

マブログのような画面にしたいのですが、どうすればいい？

WordPress Cocoon のカスタマイズ方法が知りたい！

こういった疑問に答える記事です。

本記事を読めば以下の設定方法を知ることができ、初心者でも本サイトのような画面にすることができます。

スキン設定
トップメニュー
おすすめカード
インデックス
サイドメニュー
シェアボタン、フォローボタン

本記事の信憑性は、私はブログ4サイト運用しており、本サイトはCocoonで構築しています。

Step1 スキン
Step2 ブログのタイトル、サブタイトル
Step3 トップメニュー
Step4 おすすめカード
Step5 インデックス
Step6 サイドメニュー
Step7シェア、フォローボタン
まとめ

Step1 スキン

スキンを変更することにより、本サイトのような水色基調に画面イメージが変わります。

１）
「Cocoon設定＞スキン」　タブをクリックする。
２）
スキン一覧で「tecurio earth」を選択する。
３）
画面下の「変更をまとめて保存」をクリックする。

Step2 ブログのタイトル、サブタイトル

サイト名、サブタイトルを設定します。

１）
「設定＞一般設定」　をクリックする。
２）
「サイトのタイトル」、「キャッチフレーズ」を入力する。
３）
画面下へスクロールし、「変更を保存」をクリックする。

Step3 トップメニュー

トップメニューを設定します。

１）
「外観＞メニュー」をクリックする。
２）
「メニュー名」を入力、「ヘッダーメニュー」をチェックし、「メニューを作成」クリックする。
３）
「カテゴリー」で「メニュー」に追加したいものを選択し、「メニューに追加」をクリックする。
４）
表示する「メニュー」の順番を変更するのは、ドラッグ＆ドロップで順番を変更する。
５）
「メニューを保存」をクリックする。

Step4 おすすめカード

おすすめカードを設定します。

１）
「外観＞メニュー」をクリックする。
２）
「メニュー」画面で「新しいメニューを作成しましょう」をクリックする。
３）
「メニュー名」に”おすすめカード”と入力し、「メニューを作成」をクリックする。
４）
「メニュー項目を追加」の「投稿」から「おすすめカード」に表示したい記事を選択し、「メニューに追加」をクリックする。
５）
画面右下の「メニューを保存」をクリックする。
６）
「cocoon設定＞おすすめカード」タブをクリックする。
７）
「おすすめカード」を設定する。

項目名 設定値
おすすめカードの表示全ページで表示
メニュー選択おすすめカード
表示スタイル画像下段を黒背景にしタイトルを重ねる
８）
「変更をまとめて保存」をクリックする。

Step5 インデックス

インデックスを設定します。

１）
「Cocoon設定＞インデックス」タブをクリックする。
２）
下記の項目を選択する。

項目名 設定値
表示形式タブ一覧
表示カテゴリー表示したいカテゴリを
選択する。（３つまで）

あとは初期値のまま
３）
「変更をまとめて保存」をクリックする。

Step6 サイドメニュー

サイドメニューを設定します。

１）
「外観＞ウィジェット」をクリックする。
２）
「検索」の▼をクリックする。
３）
「サイドバー」を選択し、「ウィジェットを追加」をクリックする。
４）
同様に、「[C]人気記事」の▼をクリックし、「サイドバー」を選択し、「ウィジェットを追加」をクリックする。
５）
同様に、「[C]プロフィール」の▼をクリックし、「サイドバー」を選択し、「ウィジェットを追加」をクリックする。
６）
同様に、「カテゴリー」の▼をクリックし、「サイドバー」を選択し、「ウィジェットを追加」をクリックする。
７）
同様に、「カテゴリー」の▼をクリックし、「アーカイブ」を選択し、「ウィジェットを追加」をクリックする。

Step7シェア、フォローボタン

記事の下にシェアボタン、フォローボタンを設定します。

１）
「Cocoon設定＞SNSシェア」タブをクリックする。
２）
「トップシェアボタンの表示」の「メインカラムトップシェアボタンを表示」のチェックをはずす。
３）
「ボトムシェアボタンの表示」の「メインカラムボトムシェアボタンを表示」をチェックする。
４）
「変更をまとめて保存」をクリックする。
５）
「Cocoon設定＞SNSフォロー」タブをクリックする。
６）
「フォローボタンの表示」の「本文下のフォローボタンを表示する」をチェックする。
７）
「変更をまとめて保存」をクリックする。

まとめ

７ステップで完成です！

Step1 スキン
Step2 ブログのタイトル、サブタイトル
Step3 トップメニュー
Step4 おすすめカード
Step5 インデックス
Step6 サイドメニュー
Step7シェア、フォローボタン

ありがとうございます。
設定できました！

マー

Cocoonって無料なのに高機能ですよね。

あとは自分好みにカスタマイズしてください！！

【まず初めに読んでね！】ブログ初心者がネット広告で月1万円稼ぐ！

マブログのスタートページです。ブログ初心者がネット広告で月1万円稼ぐ方法を順を追って説明しています。まず初めに読んでね！　

【初心者】2chまとめサイトの始め方を教えて！【10ステップで解説】

2chまとめサイトの始め方を10ステップで解説します。まとめサイトの戦略やサーバー、ドメイン選び、まとめくすの設定を説明します。

項目名	設定値
おすすめカードの表示	全ページで表示
メニュー選択	おすすめカード
表示スタイル	画像下段を黒背景にしタイトルを重ねる

項目名	設定値
表示形式	タブ一覧
表示カテゴリー	表示したいカテゴリを選択する。（３つまで）

カスタマイズ | マブログ