ブログを開設してCocoonを入れたけど、デザインの変え方がわからない。
すぐにそれっぽくカスタマイズできたりするんだろうか？
そんな悩みを解決します！
本記事がおすすめな人
- Cocoonのデザインのやり方がわからない
- すぐにデザインを仕上げてブログを書きたい
- 初心者でもかっこいいブログを作りたい
記事の信頼性
当ブログだけでも150記事以上書いており、2つのブログを運営。
僕のサイトもCocoonを使用しています。
ブログを開設したばかりだと、さっぱりしすぎてとてもブログとは思えませんよね。
自分好みのデザインにしたい…けど、難しいことはできないし…。
この記事を読んでもらえれば、誰でもかんたんに「それっぽい」ブログデザインを仕上げることができます！
「Cocoon」のデザインをそれっぽくカスタマイズする方法
カスタマイズする箇所は以下の4つ。
- スキン
- ヘッダー
- フッター
- サイドバー
ヘッダーとかサイドバーとか何のことかわからない…。
大丈夫です。順番に説明していきますね。
まずはCocoonの子テーマを有効にする
カスタマイズをする前に、まずはCocoonを使う準備をしましょう。
①：WordPress管理画面にログイン
→「ユーザー名またはメールアドレス」、「パスワード」を入力後、「ログイン」を押します。
※画像のログイン画面は、以下のURLからアクセスできます。
https://自分のサイトURL/wp/wp-login.php
②：現在のブログデザインを確認
以下の画像がWordPressの管理画面です。
ここからブログの記事を書いたり、デザインをいじったりできます。
試しに現在のブログデザインを確認してみましょう。
上のほうに家のアイコン＋自分のブログ名が出ているはず。
ここを押すと、自分のブログを確認することができます。
このままだとあまりブログっぽくないですね。
では、上のメーターのようなアイコンを押して管理画面に戻りましょう。
③：テーマを変更する
→「外観」 > 「テーマ」を押してください。
→「Cocoon Child」を「有効化」
※ここにCocoonが表示されていないならインストールされていないので、公式を参考にインストールしてください。
以下の画像のようになったらOKです。
ブログのほうも確認しておきましょう。
最初とデザインがちゃんと変わってますね。
これで最初の準備はOK
ではカスタマイズしていきましょう。
①：スキンを選択する
Cocoonは、いろんな方がすでに完成されたデザインを作ってくれてるんですよね。
そしてそれを自由に使うことができます。なので、1から自分で作る必要がない。
では、好きなデザインを選んでいきましょう。
→「Cocoon 設定」を選択
→「スキン」を選択（デフォルトで選択されています）
下にスクロールしていくと、スキン一覧というのがズラッと並んでいます。
ここから好きなデザインを選んでいく感じですね。
僕のおすすめは、「Season」シリーズ。
このブログでもSeasonを使っています。
シンプルでカッコいいのに、丸い雰囲気もあるようなスタイリッシュなデザインになっています。
→スキンを選んだらチェックを入れて、「変更をまとめて保存」を押します。
※スキンは後からでも変えられるので、とりあえずでもいいです。
デザインがさっきと変わっているか確認してみましょう。
以上でスキンの選択は終わりです。
②：ヘッダーをカスタマイズする
ヘッダーってどこ？
ブログタイトルが出ている上の部分（赤い枠で囲んでいる箇所）です。
→「Cocoon 設定」 > 「ヘッダー」を選択
ここでは、ヘッダーの背景色やロゴを設定できたりします。
いろいろ触ってみてください。大体は説明されているので、何を変更できる箇所なのかわかるはず。
※ただ、スキンの種類によっては作者の意向で色とかを決められており、変えられない場合があります。
→設定が終わったら「変更をまとめて保存する」を忘れずに押しましょう。
キャッチフレーズの消しかた
ブログタイトルの上に表示されている「Just another WordPress site」っていうのを消したい場合は、「キャッチフレーズの配置」を「表示しない」にチェックすればOK
グローバルナビメニューとは？
メニュー部分（赤い枠で囲んでいる箇所）のことですが、今はメニューが表示されてないと思うので触らなくて大丈夫です。
③：フッダーをカスタマイズする
フッターってどこ？
一番下の「Copyright~」と書かれている部分（赤い枠で囲んでいる箇所）です。
Copyrightは著作権と同じ意味。
人によってはフッターの部分にロゴを表示させたり、メニューを表示させたり。
まぁ、あまり見られる部分でもないのでシンプルにCopyrightだけでもいいと思います。
→「Cocoon 設定」 > 「フッター」を選択
ヘッダーと同じように色を変えたりロゴを設定することができます。
→設定が終わったら「変更をまとめて保存する」を忘れずに押しましょう。
クレジット表記はどれがいい？
5つある項目の真ん中が自然かな、と。
このタイプにしている人が多い気がしますね。
④：サイドバーをカスタマイズする
サイドバーってどこ？
横に表示されている部分（赤い枠で囲んでいる箇所）です。
→「外観」>「ウィジェット」を選択
ここからサイドバーに表示する項目を変えることができます。
おすすめの組み合わせは以下のとおり。
- プロフィール
- 検索
- 人気記事
- アーカイブ
サイドバーに項目を追加する方法
どうやってサイドバーに追加すればいいの？
追加したい項目をドラックしてサイドバーに持っていくか、画像のように項目を開いて「サイドバー」>「ウィジェットを追加」で追加されるはず。
ウィジェットは自然に保存されるので、保存ボタンとかはないです。
順番の入れ替えかた
表示させる順番を入れ替えたい。
追加するときと同じようにドラックして入れ替えればOK
メタ情報の消しかた
サイドバーに入れてないのに、メタ情報ってやつが勝手に表示されている。
画像の赤枠のところですね。表示しておくのもよろしくないので、消し方を説明します。
→「Cocoon 設定」>「ウィジェット」を選択
→「除外ウィジェット」>「メタ情報」にチェック
→「変更をまとめて保存」を押す。
これで消えているはずです。
プロフィールの設定の仕方
プロフィールはどうやって設定すればいいの？
→「ユーザー」>「プロフィール」を選択
「ニックネーム」と「ブログ上の表示名」にて、プロフィールに表示する名前を変えられます
「プロフィール情報」にて、プロフィールの自己紹介文を設定することができます
「プロフィール画像」にてプロフィールの画像を設定することができます
→「プロフィール画像のアップロード」>「選択」を押します。
設定したい画像のファイルをアップロードしてください。
→画像にチェックが入っていることを確認して、「画像の選択」を押します
→「プロフィールを更新」を押せばOK
変更されているか確認してみてください。
アイコンを丸型にする方法
プロフィールのアイコンを丸くしたい。
→「外観」>「ウィジェット」を選択
→サイドバーからプロフィールを開く
→「画像を円形にする」にチェックを入れて「保存」
サイドバーに関するカスタマイズはこんな感じですね。
Cocoonで吹き出しを使いたい場合は、以下の記事を参考にしてくださいませ。
やっておいたほうがいいCocoonの設定
ここまででかなりブログっぽくなったと思います。
あとは、やっておいたほうがいいCocoonの設定をいくつか紹介します。
コメント欄を消す
スパムコメントとかアンチが来る可能性があるので、コメント欄は閉じておいたほうが平和です。
ユーザーとの交流はTwitterを使えば十分。
どうしてもコメント欄を残したい！とかじゃなければ閉じておきましょう。
→「Cocoon 設定」>「投稿」を選択
下の方にスクロールしていくと、「コメント設定」があるはず。
→「コメントを表示する」のチェックを外して、「変更をまとめて保存」を押します。
これでコメント欄は消えます。
「Cocoon」のデザインをそれっぽくカスタマイズする方法：まとめ
今回の記事だけでも、Cocoonの使い方がだいぶわかったのではないでしょうか。
他にもできることはたくさんあるので、調べてみてください。
しかし、ブログを開設したばかりだとあまりデザインに時間をかけるのは得策ではありません。
なぜならブログの本来の目的を見失ってしまいがちだからです。
詳しくは以下の記事に書いてあるので、ぜひご覧くださいませ。
>> ブログ初心者はデザインに時間をかけてはいけない【やることは1つ】
それではブログ生活を楽しんでください！
