Cocoon ブログを作ろう！ウォーミングアップ

この記事は

WordPressテーマCocoonを使ってブログを作ろうという記事です。

無理なくスタートできるように簡単な作業のみをピックアップしました。自分らしいブログを作りたい方や、WordPressをはじめたばかりの方に活用していただければ嬉しいです。

Cocoonの初期設定の方法をお探しの方や本格的なCocoonカスタマイズを楽しみたい方は、Cocoon公式 テーマ利用マニュアル　を御活用ください。

広告｜ConoHa WING　

高性能レンタルサーバーConoHa WING

デザインを変更してみよう

＊今回はスキン（Cocoonデザインテンプレート）を使わずに行います。

開設時は上記のようなシンプルなデザインです。このままでも十分にブログとして活用できますが、ウォーミングアップもかねて、ブログのデザインを変更してみましょう！

ヘッダーアイコン・フッターアイコンの変更

まずは、ヘッダーロゴとフッターロゴを設定します。

画像はペイントツールなどで準備しましょう。私は無料のデザインツール『デザインAC』を使って作成しました。登録も簡単ですし、つくるのも簡単なのでおすすめです。

作り方が知りたい人は：デザインACどんなツール？またはデザインACでブログのアイコンを作ろうをご覧ください。PNG画像の背景透過も無料で作成できます。↓↓おすすめです。

広告 ｜デザインつくるなら

無料デザインテンプレートサイト【デザインAC】

準備するもの

できるだけPNG画像（背景透過）を用意してください。

＊JPG・JEPG画像でも設定可能です。

この画像を、配置していきます。

※アイコンの作成方法が知りたい方は>> デザインACでブログのアイコンをつくろう！で作り方を解説しています。参考になさってください。

ヘッダーロゴの設置

手順.

WordPress管理画面から[Cocoon設定]→[ヘッダー]→[ヘッダーロゴ]→[選択]の順にクリックし、デバイス上の画像をアップロードします。

↓

フッターロゴの設置

手順.

[Cocoon設定]→[フッター]→[フッターロゴ]→[選択]から画像をアップロードします。

↓

3.変更をまとめて保存

画像のアップロードなど変更したら[変更をまとめて保存]をクリックします。

4.変更内容が反映されているか確認

↓

サイトに戻って、変更内容が反映されているか確認してみましょう。画像が反映されていれば成功です。

サイトアイコンを変更しよう

検索タブの左側に表示されるアイコン〇がサイトアイコンです。ファビコンともいいます。このアイコンを変更してみましょう。

準備するもの

※アイコンの作成方法が知りたい方は>> デザインACでブログのアイコンをつくろう！で作り方を解説しています。参考になさってください。

手順.

1.WordPress管理画面を開きます。

2.[外観]→[カスタマイズ]の順にクリックします。

3.カスタマイズ画面の[サイト基本情報]をクリックします。

4.サイト基本情報の[サイトアイコンを選択]をクリックします。

5.画像をクリックし[選択]をクリックします。

6.アイコンが選択されていることを確認し、[公開]をクリックします。

＊背景透過の画像を選択した場合は、以下の画像のように黒く表示されます。

7.最後に自分のサイトを表示してみましょう。サイトアイコンが表示されていれば変更は完了です。

広告｜ConoHa WING　

【国内最速No.1】高性能レンタルサーバー

レイアウトを変更してみよう

サイドバーの削除

PC画面で表示されるサイドバーを削除します。

1.WordPress管理画面→[外観]→[ウィジット]→[サイドバー]の順にクリックします。

2.[検索] のプルダウン▼をクリックし削除をクリックします。

3.同じように[新着情報]のプルダウンメニュー▼をクリックし、削除をクリックします。

＊サイドバースクロール追従にもアイテムが入っている場合は同じ要領で削除します。

サイドバーに追加する

サイドバーにアイテムを追加す場合は、

1.WordPress管理画面→[外観]→[ウィジェット]→利用できるウィジェットから追加したいアイテムを選びクリックします。

2.追加したい場所（サイドバー）にチェックを入れ、[ウィジェットを追加]をクリックします。

3.追加されると右側のサイドバーの項目にアイテムが表示されます。必要事項入力し[完了]をクリックします。

サイトカラーを変更する

キーカラーを変更する

キーカラーは見出しやタグ、ヘッダー・フッターの背景などに反映されます。

1.[Cocoon設定]→[全体]→[サイトキーカラー]をクリックし、色を選びましょう。

2.次に[サイトキーテキストカラー]を同じように選びましょう。

サイト背景を変更する

次はサイトの背景色を変更してみましょう

[Cocoon設定]→[全体]をクリックし、画面を下にスクロールしていきます。

サイト背景色の[色を選択]クリックし色を変更します。

[変更をまとめて保存]をクリックして、確認してみましょう。

広告｜ConoHa WING　

【国内最速No.1】高性能レンタルサーバー

固定ページを作ろう

内容が変わりにくい情報は固定ページで作りましょう。

固定ページの作り方

1.WordPress管理画面→[固定ページ]→[新規追加]クリックします。

新規追加した固定ページにはあらかじめタイトルと段落が挿入されています。まずはこの二つに入力してみましょう。各ブロックの上で改行すると新しい段落ブロックが下方向に追加されます。

２.黄色枠で囲った＋ボタンをクリックすると、ブロック挿入ツールが展開され、使いたいアイテムを挿入することができます。

3.記事が書き終わったら、画面右側の[固定ページ]タブをクリックし、[URL]をクリックします。パーマリンクと表示された枠に日本語で書かれたタイトルがデフォルトで設定されています。これを半角英数字に書き換えます。

例）プロフィール　→　profile

4.変更できたら、[公開]または[更新]ボタンを押して、固定ページを公開します。

固定ページをグローバルメニューに追加する

グローバルナビゲーションに表示させる

1.[WordPress管理画面]→[外観]→[メニュー]をクリックします。

2.メニュー構造の項目を入力していきます

• メニュー名に「グローバルナビゲーション」と入力します。
• メニュー設定の項目で☑ヘッダーメニューにチェックをいれ、一度[メニューを保存]をクリックします。

3.メニュー項目を追加 から、先ほど作った固定ページを選択します。最後に [メニューを保存] をもう一度クリックします。

4.メニューが保存されるとヘッダーロゴの下に、このように表示されます↑

広告｜ConoHa WING　

【国内最速No.1】高性能レンタルサーバーConoHa WING

投稿ページを作ろう

投稿ページは時系列で整理されたページです。固定ページは時系列に影響を受けないので、この点が二つの違いです

新規投稿の開き方

手順.

WordPress管理画面→[投稿]→[新規投稿]の順にクリックして、新規投稿ページを開きます。

記事内容の作り方は固定ページを作ろうを参照してください。

記事は公開されると、Webサイトのトップページに時系列で表示されるようになります。

デザインカスタマイズをすることで、表示方法を変えることもできます。

広告｜レンタルサーバーならConoHa WING＝どこよりも簡単

まとめ

今回は、WordPressテーマCocoonを使ったブログ作りをご紹介しました。すぐににできる設定ばかりだったので、もしかしたら物足りなく感じる方もいるかもしれませんね。

もっとブログカスタマイズを楽しみたい方は、 開発元のテーマ利用マニュアル や、おすすめブログとして紹介させていただいたkoikenote.comさん・Turiccoさんを参考にブログカスタマイズに挑戦してみてください。沢山のカスタマイズ方法が紹介されています。

すぐに記事を書きだしたい人は、早速記事つくりをはじめましょう！広告を心配をすることなく、ブログ作りを楽しんでくださいね。ではまた次の記事でお会いしましょう。

最後までご覧いただきありがとうございました。

＼まだWordPressのインストールが済んでいない方は、／

関連記事WordPressのはじめ方を御活用ください。

おまけ　ブロック各種

固定ページと投稿ページで使えるブロックの一部を紹介します。テーマ由来のブロックは主に黒一色です。色がついている物は、プラグインの由来のブロックになります。

画像中の緑色のブロックはプラグインJET PACKのブロックです。沢山の機能が他にもあります。一部だけ掲載します。

はじめの内は、どれがどの機能かわかりにくいと思いますが、いろいろ試しながら機能を確認してみてください。

広告｜ConoHa WING　

【国内最速No.1】高性能レンタルサーバーConoHa WING