【所要時間30分】Cocoon(コクーン)でwordpress(ワードプレス)ブログを整える

とりあえずwordpress(ワードプレス)でブログを始めてみたけど、ブログのデザインをどうしよう。。。

 

 

 

 

とりあえず早く記事を書きたいから、サッとブログデザインを整えたい!

 

 

 

 

そんな悩みに答えます。

 

 

 

【所要時間30分】
Cocoon(コクーン)でwordpress(ワードプレス)ブログのデザインを整える方法
画像付きでわかりやすく解説しています!

それでは行きましょう!!

 

 

関連記事

    ブロガー ワードプレスでブログを始めたけど、テーマはどうしよう。 おすすめ記事をみてもテーマが10個も20個もでてくるし、どれがいいのかわからない。。。 もっと厳選してくれているものはな[…]

 

当サイトが使っているwordpressテーマ【THE THOR ザ・トール】

 

スポンサーリンク

まずはCocoon(コクーン)をインストール

Cocoon(コクーン)をインストールしていない人もいるかと思いますので、まずはインストールするところから始めていきましょう!

 

Cocoon(コクーン)の公式ページからダウンロードを行います。

 

⇒Cocoon公式ページ

 

公式ページの【ダウンロード】をクリックします。

 

下のほうへスクロールしていくと【親テーマのダウンロード】が出てきますので、そこから親テーマをダウンロードしましょう!

 

 

親テーマがダウンロードできたら、さらに下へスクロールしていきます。

 

次に【子テーマのダウンロード】が出てきますので、そこから子テーマをダウンロードしてください。

 

どちらもダウンロードが出来たら、wordpress(ワードプレス)へアップロードしていきます!

 

wordpress(ワードプレス)のダッシュボードを開いて、【外観】→【テーマ】と進みましょう。

 

【新規追加】をクリック!

 

【テーマをアップロード】を選択すると、ファイルをアップロードすることが出来るようになるので【ファイルを選択】をクリックしてください。

 

【cocoon-master】と書いている親テーマが入ったzipファイルを選択。

※childと書いている方ではないので注意です!!!

 

【今すぐインストール】をクリックすると、、、

 

「テーマのインストールが完了しました。」と出てくるので、【有効化】をクリックしましょう!

 

これで、親テーマのアップロードが完了!

 

 

じゃこ
めちゃくちゃ簡単!!
続いて子テーマもサクッとアップロードしちゃいましょう!

 

 

再度【新規追加】をクリック。

 

先ほどと同様に【テーマのアップロード】から【ファイルを選択】をクリックしていきます。

 

 

【cocoon-child-master】と書いているzipファイルを選択。

 

【今すぐインストール】をクリック!

 

こちらも【有効化】をクリックすれば完了です!!

 

 

全てのダウンロードが完了したらダッシュボードの【外観】→【テーマ】のところが、こんな感じになります。

 

 

【Cocoon child】という子テーマを有効化した状態のままでwordpress(ワードプレス)を使用するようにしましょう!

親テーマを有効化した状態でwordpress(ワードプレス)を使用すると、、、
Cocoon(コクーン)のシステム改修が行われたときに、サイトのデザインやカスタマイズがリセットされてします!!
注意してください。
アップロードが終わるとサイトが↓こんな感じで白を基調としたシンプルサイトになります。

 

じゃこ
なんかこれだけでもオシャレ感ある!!

 

 

Cocoonのサイトデザインを整えていく

cocoon(コクーン)をインストールすることが出来たら、サイトのデザインを整えていきましょう!

 

スキンを設定する

スキンとは、サイトの外観のデザインを一瞬で着せ替えることが出来る機能のことです。

この機能を使用するだけで、一瞬でオシャレなサイトへと変えることが出来ますので早速やってみましょう!!

 

wordpress(ワードプレス)のダッシュボード【Cocoon設定】をクリックした後、【スキン】をクリックしてください。

下の方へスクロールしていくと【スキン一覧】が出てきます。

この一覧から自分の理想のサイトデザインに近いものを選択していきます。

 

スキン一覧の写真マークにカーソルを合わせると、どのようなデザインのスキンか確認を行うことが出来ますので自分好みのスキンを探してみましょう!

デザインを選択したらさらに下の方へスクロールして【変更をまとめて保存】をクリックして完了です。

 

ブログを確認して自分のサイトに反映されているかどうか確かめてみましょう!

 

じゃこ
めちゃくちゃ簡単!!

 

 

 

ヘッダー画像を設定する

ブログの顔ともいえるヘッダーを設定していきます!

 

 

 

じゃこ
ヘッダーを整えるだけでもオシャレなサイト感が出てきますので張り切っていきましょう!

 

 

無料で使えるフリー素材の検索サイト『ODAN(オーダン)』がオススメです!

 

 

 

好きな画像、ブログのテーマに合った画像など自分好みの画像を見つけたら、その画像のページから【無料ダウンロード】をクリック!

 

 

ダウンロードをクリックすると、ダウンロードする画像のサイズを選ぶことが出来ます。

 

色々な画像サイズがあって迷うところですが、横幅1280のものがオススメですので選択してダウンロードをクリックしてください!

 

じゃこ
他の大きさのものでも問題なく使用することが出来ます!

 

最後にダウンロードが出てきますのでそちらもクリック!

 

 

 

好みの画像がダウンロードできたらwordpress(ワードプレス)ブログへ設定してきます。

 

wordpress(ワードプレス)のダッシュボードから【Cocoon設定】→【ヘッダー】へとクリックしていきます。

 

 

下の方へ行くと【ヘッダー背景画像】という項目があるので、こちらの【選択】というボタンをクリックして先ほどダウンロードした画像をアップロードしましょう!

 

【選択】をクリックすると【ファイルを選択】と出てきます。

 

ファイルをアップロードしたら画面下の方へ進み、【変更をまとめて保存】をクリック!

 

 

これでヘッダー画像の登録完了です!!

 

グローバルメニューを作成する

次はグローバルメニューを作りましょう!

 

じゃこ
グローバルメニューを作るメリットとは、
どんなカテゴリーの記事があるのかが一目でわかるようになり、ブログが見やすくなるという点です。
どんなメニューを表示させるか考えてから取り掛かりましょう!!

 

グローバルメニューとは、下の画像のようにどんな内容のブログカテゴリーがあるのかを教えてくれる案内メニューです!

 

今から作成していきますが、自分がどんな内容のブログを書くのかで表示させる内容が変わってきますので

 

表示させるカテゴリー名を決めてから取り掛かりましょう!

 

じゃこ
といっても後でいくらでも変更ができますので、そこまでめちゃくちゃ悩まなくても大丈夫です!
それでは行きましょう!

 

 

wordpress(ワードプレス)のダッシュボードから【投稿】→【カテゴリー】へと進みます。

 

【名前】の部分へ表示させるカテゴリー名を入力します。

 

次に、【スラッグ】の部分へ【名前】の部分に入力したカテゴリー名を英語にして入力しましょう。

※Google翻訳を使って簡単な英語に直せばOK。単語と単語の間は【-(ハイフン)】で繋ぎましょう。

 

 

じゃこ
例えば、カテゴリー名が【ブログ開設】ならば【blog-opening】をスラッグのところへ入力するといった感じ

 

 

入力できたら【新規カテゴリーを追加】をクリックして完成となります。

 

カテゴリーを追加クリックしたら↓こんな感じでカテゴリーが出来上がります。

 

表示させたいカテゴリーを作成したら、いよいよグローバルメニュー作成へと進みましょう。

 

ダッシュボードから【外観】→【メニュー】へと進みます。

 

メニュー名に今回作成するグローバルメニューの名前を入力します。

 

じゃこ
僕の場合は、普通にグローバルメニューと入力しました。
入力したら【メニューを作成】をクリック。

 

すると、【メニュー項目を追加】という部分から好きな項目を選べるようになります。

 

まずは、カスタムリンクをクリック!

 

ここでは任意のページに飛ぶことができるメニューを作ることが出来ます!

じゃこ
今回はブログTOPに飛ぶことができるようにしたいと思います。

 

 

URLのところへ【ブログのURL】をコピペ。

 

リンク文字列のところへ【TOP】と入力。

 

できたら【メニューに追加】をクリックしましょう!

 

次にカテゴリーをクリックします。

 

全て表示のタブをクリックすると、先ほど自分で作成したカテゴリーが表示されます。

 

グローバルメニューに表示させたいカテゴリーにチェックを入れて【メニューに追加】をクリック。

 

グローバルメニューに表示させる項目を追加したら表示させる順番を決めましょう!

じゃこ
項目をドラッグして表示の順番を変更させることが出来ます!

 

表示させる順番が決まったら、【ヘッダーメニュー】にチェックを入れて、【メニューを保存】をクリック。

 

じゃこ
サイトを表示すると↓こんな感じでグローバルメニューが完成しています!

 

ちなみに、メニューの表示順番を変えるとき、↓のようにメニューをドラッグして少しずらしてメニューを保存すると、、、

 

プルダウン型の階層メニューを作成することも可能です!!

じゃこ
自分のブログに合ったグローバルメニューを作成しましょう!

まとめ

このように無料のテーマ【Cocoon】でも簡単に見やすくオシャレなブログを作ることが出来ます!!

 

今回ご紹介した設定は30分あれば作業することが可能です!

 

ブログは自分のお店ともいうべきものですので、記事を読みながら整備してみましょう!!

 

じゃこ
僕の記事【副業ブログの始め方】を読んで作業してくださっていた方は戻って次の項目に進んでください!!

 

副業ブログの始め方  TOPはこちら

最新情報をチェックしよう!