【Cocoon】ワードプレスのデザインを無料テーマでランクアップ

ブログ運営

このページでは実際にワードプレスの無料テーマ「Cocoon」を使ってブログのデザインを綺麗に仕上げる方法を解説していきます。

rei
rei

このサイトも「Cocoon」のテーマで作ったの!

ワードプレスのテーマとは

テーマ

ワードプレスのテーマとは管理画面の中にある外観というボタンから確認することができます。

サイトの構成や色合いがテーマごとに異なっているので自分の好みに合ったブログサイトを簡単に作成することができます。

WEBデザイナーに頼まなくても簡単に見た目を整えられるのもワードプレスの魅力ですね。

rei
rei

テーマとは分かりやすく言い換えると「テンプレート」のようなものです。テーマを変更するだけで難しそうなサイト作りが一発で綺麗に整えることが出来るんです!

 

 

テーマ【Cocoon】をダウンロードする

まずCocoonの公式サイトでダウンロードをします。

ダウンロードは親テーマと子テーマの2種類してください。

Cocoonの公式サイトで上のボタンの箇所をクリックして親テーマのダウンロードをします。

おなじくCocoonの公式サイトで上のボタンの箇所をクリックして子テーマのダウンロードをします。

するとダウンロード先にZipファイルが2つできます。

ダウンロード先を設定していない人は「PC」≫「ダウンロード」のフォルダに入っていると思います。

 

【Cocoon】をインストールしてテーマに追加する

ワードプレスの管理画面にログインして、左メニューの中から「外観」≫「テーマ」のページを開きます。

上のほうにある【新規追加】ボタンをクリックします。

画面が変わったらファイルを【テーマのアップロード】をクリックします。

 

すると以下の画面に切り替わります。

真ん中の【ファイルを選択】ボタンを押してダウンロードした親テーマの「cocoon-master.zip」Zipファイルを選択し【今すぐインストール】をクリックします。

  上記の画面に切り替わったら【テーマのページに戻る】をクリックします。

すると最初の画面に戻るので同様にアップロードページを開いて今度は子テーマ「cocoon-child-master.zip」をインストールします。

子テーマのインストールを終えたら「有効化」をクリックしてください。

テーマ

上記のような画面表示になれば親テーマ・子テーマのインストールが完了し子テーマが有効化されているのでこれでインストールは完了です。

rei
rei

なんで2つもダウンロードが必要なの?親テーマと子テーマってなに?

こちらはテーマの作者さんのわいひらさんが以下のように推奨しています。

Cocoonテーマは「親テーマ」「子テーマ」双方をインストールして、「子テーマ」を有効化して利用することを推奨します。

後から、テーマをカスタマイズしたくなった時に必ず活きてきます。

参照元 https://wp-cocoon.com/theme-install/

Cocoonの設定を使ってスキンを決めよう

Cocoonのテーマを有効化すると左のメニューバーに「Cocoon設定」というメニューが加わります。

開いてみるとたくさんのタブメニューで構成されていてデザインやサイト構成を細かく編集することができます。

一番最初の「スキン」をスキン一覧から好きなデザインに設定すると以下のように一気にサイトの見栄えが良くなりますよ!

 

rei
rei

ちなみにこの吹き出しもコクーンなら吹き出し機能がついているから簡単に設定できるんです!みんなも使ってみてね!

 

 

タイトル画像を設定してみよう

ブログのタイトルがそのまま表示されていた部分をこのブログのような「タイトル画像」に設定してみましょう。

メニューの【メディア】を開いて【新規追加】をクリックしてタイトルに表示したい画像をアップロードします。

好きな写真を使ったり自分でペイントでロゴを作成してみるといいでしょう。

フリー素材のサイトを活用すると素敵な写真やイラストが無料で使うことができますよ。

おすすめフリー素材のサイト

 

 

【Cocoonの設定】から【ヘッダー】を選択します。

下にいくと【ヘッダーロゴ】という項目があるので選択から画像を選択してください。

 

画像が表示されたら左上の【変更をまとめて保存】をクリックして完成です。

アイコン画像を設定してみよう

ブログのページが表示されたときやスマホのホーム画面にショートカットを作成した時に表示されるアイコンをオリジナル画像に設定してみましょう。

アイコンがあることでホームページのような綺麗なサイトに見栄えが良くなります。

メニューの中の「外観」≫「カスタマイズ」をクリックします。

一番上の「サイト基本情報」をクリックすると以下のような画面になります。

そしてサイトアイコンの欄で「画像を変更」から好きなアイコンを選択しましょう。

変更を公開で保存すればアイコンの完成です。

Cocoonの基本デザイン設定完成

rei
rei

お疲れさまでした!お好きなデザインのブログが出来ましたか?

次のステップでは実際に記事を書くことに挑戦しましょう!

ステップ③記事をかこう

タイトルとURLをコピーしました