マブログのような画面にしたいのですが、どうすればいい？
WordPress Cocoon のカスタマイズ方法が知りたい！
こういった疑問に答える記事です。
本記事を読めば以下の設定方法を知ることができ、初心者でも本サイトのような画面にすることができます。
本記事の信憑性は、私はブログ4サイト運用しており、本サイトはCocoonで構築しています。
Step1 スキン
スキンを変更することにより、本サイトのような水色基調に画面イメージが変わります。
- １）「Cocoon設定＞スキン」 タブをクリックする。
- ２）スキン一覧で「tecurio earth」を選択する。
- ３）画面下の「変更をまとめて保存」をクリックする。
Step2 ブログのタイトル、サブタイトル
サイト名、サブタイトルを設定します。
- １）「設定＞一般設定」 をクリックする。
- ２）「サイトのタイトル」、「キャッチフレーズ」を入力する。
- ３）画面下へスクロールし、「変更を保存」をクリックする。
Step3 トップメニュー
トップメニューを設定します。
- １）「外観＞メニュー」をクリックする。
- ２）「メニュー名」を入力、「ヘッダーメニュー」をチェックし、「メニューを作成」クリックする。
- ３）「カテゴリー」で「メニュー」に追加したいものを選択し、「メニューに追加」をクリックする。
- ４）表示する「メニュー」の順番を変更するのは、ドラッグ＆ドロップで順番を変更する。
- ５）「メニューを保存」をクリックする。
Step4 おすすめカード
おすすめカードを設定します。
- １）「外観＞メニュー」をクリックする。
- ２）「メニュー」画面で「新しいメニューを作成しましょう」をクリックする。
- ３）「メニュー名」に”おすすめカード”と入力し、「メニューを作成」をクリックする。
- ４）「メニュー項目を追加」の「投稿」から「おすすめカード」に表示したい記事を選択し、「メニューに追加」をクリックする。
- ５）画面右下の「メニューを保存」をクリックする。
- ６）「cocoon設定＞おすすめカード」タブをクリックする。
- ７）「おすすめカード」を設定する。
項目名 設定値 おすすめカードの表示 全ページで表示 メニュー選択 おすすめカード 表示スタイル 画像下段を黒背景にしタイトルを重ねる - ８）「変更をまとめて保存」をクリックする。
Step5 インデックス
インデックスを設定します。
- １）「Cocoon設定＞インデックス」タブをクリックする。
- ２）下記の項目を選択する。
項目名 設定値 表示形式 タブ一覧 表示カテゴリー 表示したいカテゴリを
選択する。（３つまで）あとは初期値のまま
- ３）「変更をまとめて保存」をクリックする。
Step6 サイドメニュー
サイドメニューを設定します。
- １）「外観＞ウィジェット」をクリックする。
- ２）「検索」の▼をクリックする。
- ３）「サイドバー」を選択し、「ウィジェットを追加」をクリックする。
- ４）同様に、「[C]人気記事」の▼をクリックし、「サイドバー」を選択し、「ウィジェットを追加」をクリックする。
- ５）同様に、「[C]プロフィール」の▼をクリックし、「サイドバー」を選択し、「ウィジェットを追加」をクリックする。
- ６）同様に、「カテゴリー」の▼をクリックし、「サイドバー」を選択し、「ウィジェットを追加」をクリックする。
- ７）同様に、「カテゴリー」の▼をクリックし、「アーカイブ」を選択し、「ウィジェットを追加」をクリックする。
Step7シェア、フォローボタン
記事の下にシェアボタン、フォローボタンを設定します。
- １）「Cocoon設定＞SNSシェア」タブをクリックする。
- ２）「トップシェアボタンの表示」の「メインカラムトップシェアボタンを表示」のチェックをはずす。
- ３）「ボトムシェアボタンの表示」の「メインカラムボトムシェアボタンを表示」をチェックする。
- ４）「変更をまとめて保存」をクリックする。
- ５）「Cocoon設定＞SNSフォロー」タブをクリックする。
- ６）「フォローボタンの表示」の「本文下のフォローボタンを表示する」をチェックする。
- ７）「変更をまとめて保存」をクリックする。
まとめ
７ステップで完成です！
ありがとうございます。
設定できました！
マー
Cocoonって無料なのに高機能ですよね。
あとは自分好みにカスタマイズしてください！！
コメント