
Cocoon(コクーン)でwordpress(ワードプレス)ブログのデザインを整える方法
それでは行きましょう!!
ブロガー ワードプレスでブログを始めたけど、テーマはどうしよう。 おすすめ記事をみてもテーマが10個も20個もでてくるし、どれがいいのかわからない。。。 もっと厳選してくれているものはな[…]
当サイトが使っているwordpressテーマ【THE THOR ザ・トール】
まずはCocoon(コクーン)をインストール
Cocoon(コクーン)をインストールしていない人もいるかと思いますので、まずはインストールするところから始めていきましょう!
Cocoon(コクーン)の公式ページからダウンロードを行います。
公式ページの【ダウンロード】をクリックします。
下のほうへスクロールしていくと【親テーマのダウンロード】が出てきますので、そこから親テーマをダウンロードしましょう!
親テーマがダウンロードできたら、さらに下へスクロールしていきます。
次に【子テーマのダウンロード】が出てきますので、そこから子テーマをダウンロードしてください。
どちらもダウンロードが出来たら、wordpress(ワードプレス)へアップロードしていきます!
wordpress(ワードプレス)のダッシュボードを開いて、【外観】→【テーマ】と進みましょう。
【新規追加】をクリック!
【テーマをアップロード】を選択すると、ファイルをアップロードすることが出来るようになるので【ファイルを選択】をクリックしてください。
【cocoon-master】と書いている親テーマが入ったzipファイルを選択。
【今すぐインストール】をクリックすると、、、
「テーマのインストールが完了しました。」と出てくるので、【有効化】をクリックしましょう!
これで、親テーマのアップロードが完了!
続いて子テーマもサクッとアップロードしちゃいましょう!
先ほどと同様に【テーマのアップロード】から【ファイルを選択】をクリックしていきます。
【cocoon-child-master】と書いているzipファイルを選択。
【今すぐインストール】をクリック!
こちらも【有効化】をクリックすれば完了です!!
全てのダウンロードが完了したらダッシュボードの【外観】→【テーマ】のところが、こんな感じになります。
【Cocoon child】という子テーマを有効化した状態のままでwordpress(ワードプレス)を使用するようにしましょう!
Cocoon(コクーン)のシステム改修が行われたときに、サイトのデザインやカスタマイズがリセットされてします!!
注意してください。

Cocoonのサイトデザインを整えていく
cocoon(コクーン)をインストールすることが出来たら、サイトのデザインを整えていきましょう!
スキンを設定する
スキンとは、サイトの外観のデザインを一瞬で着せ替えることが出来る機能のことです。
この機能を使用するだけで、一瞬でオシャレなサイトへと変えることが出来ますので早速やってみましょう!!
wordpress(ワードプレス)のダッシュボード【Cocoon設定】をクリックした後、【スキン】をクリックしてください。
下の方へスクロールしていくと【スキン一覧】が出てきます。
この一覧から自分の理想のサイトデザインに近いものを選択していきます。
スキン一覧の写真マークにカーソルを合わせると、どのようなデザインのスキンか確認を行うことが出来ますので自分好みのスキンを探してみましょう!
デザインを選択したらさらに下の方へスクロールして【変更をまとめて保存】をクリックして完了です。
ブログを確認して自分のサイトに反映されているかどうか確かめてみましょう!
ヘッダー画像を設定する
ブログの顔ともいえるヘッダーを設定していきます!
無料で使えるフリー素材の検索サイト『ODAN(オーダン)』がオススメです!
好きな画像、ブログのテーマに合った画像など自分好みの画像を見つけたら、その画像のページから【無料ダウンロード】をクリック!
ダウンロードをクリックすると、ダウンロードする画像のサイズを選ぶことが出来ます。
色々な画像サイズがあって迷うところですが、横幅1280のものがオススメですので選択してダウンロードをクリックしてください!
最後にダウンロードが出てきますのでそちらもクリック!
好みの画像がダウンロードできたらwordpress(ワードプレス)ブログへ設定してきます。
wordpress(ワードプレス)のダッシュボードから【Cocoon設定】→【ヘッダー】へとクリックしていきます。
下の方へ行くと【ヘッダー背景画像】という項目があるので、こちらの【選択】というボタンをクリックして先ほどダウンロードした画像をアップロードしましょう!
【選択】をクリックすると【ファイルを選択】と出てきます。
ファイルをアップロードしたら画面下の方へ進み、【変更をまとめて保存】をクリック!
これでヘッダー画像の登録完了です!!
グローバルメニューを作成する
次はグローバルメニューを作りましょう!
どんなカテゴリーの記事があるのかが一目でわかるようになり、ブログが見やすくなるという点です。
どんなメニューを表示させるか考えてから取り掛かりましょう!!

それでは行きましょう!
wordpress(ワードプレス)のダッシュボードから【投稿】→【カテゴリー】へと進みます。
【名前】の部分へ表示させるカテゴリー名を入力します。
次に、【スラッグ】の部分へ【名前】の部分に入力したカテゴリー名を英語にして入力しましょう。
※Google翻訳を使って簡単な英語に直せばOK。単語と単語の間は【-(ハイフン)】で繋ぎましょう。
入力できたら【新規カテゴリーを追加】をクリックして完成となります。
カテゴリーを追加クリックしたら↓こんな感じでカテゴリーが出来上がります。
表示させたいカテゴリーを作成したら、いよいよグローバルメニュー作成へと進みましょう。
ダッシュボードから【外観】→【メニュー】へと進みます。
メニュー名に今回作成するグローバルメニューの名前を入力します。
すると、【メニュー項目を追加】という部分から好きな項目を選べるようになります。
まずは、カスタムリンクをクリック!
ここでは任意のページに飛ぶことができるメニューを作ることが出来ます!
できたら【メニューに追加】をクリックしましょう!
次にカテゴリーをクリックします。
全て表示のタブをクリックすると、先ほど自分で作成したカテゴリーが表示されます。
グローバルメニューに表示させたいカテゴリーにチェックを入れて【メニューに追加】をクリック。
グローバルメニューに表示させる項目を追加したら表示させる順番を決めましょう!
表示させる順番が決まったら、【ヘッダーメニュー】にチェックを入れて、【メニューを保存】をクリック。
ちなみに、メニューの表示順番を変えるとき、↓のようにメニューをドラッグして少しずらしてメニューを保存すると、、、
プルダウン型の階層メニューを作成することも可能です!!

まとめ
このように無料のテーマ【Cocoon】でも簡単に見やすくオシャレなブログを作ることが出来ます!!
今回ご紹介した設定は30分あれば作業することが可能です!
ブログは自分のお店ともいうべきものですので、記事を読みながら整備してみましょう!!