スポンサーリンク

【WordPressのテーマについて】Cocoonの最低限の使い方を説明します!!

Cocoon設定のアイキャッチ画像 WordPress

前回までで、WordPressの初期設定までは終わったと思いますので次はテーマの設定をしていきます。
WordPressの便利なところはこのテーマにいくつかのテンプレートが用意されているところです。
無料のものから有料のものまでたくさんあります。
用途に応じて向き不向きもあると思うので、
ブログをやりたいのか、それともネットショップなのかとかそれ次第ですね。

今回ご紹介するのは無料テーマの「Cocoon」なんですが、先に僕がめちゃくちゃ迷った有料のテーマだけご紹介しますね。
それは、こちらの【THE THOR(ザ・トール)】 です。

なんで、有料のテーマと迷ったかというと。
まあなんせ一度挫折もしていますし、今度こそブログを続けていきたい!!って思ったんです。
このテーマを使ったデモサイトなど見るとすごいおしゃれだし、
ホームページに「圧倒的なSEO対策」とか書かれてるし、初心者の僕からしたら飛びつきたくなるような有料テーマでしたね。

でもですよ。当たり前ですけど高いんですよ。(笑)
だから、無料テーマでリベンジしようと思いました。
後は、なんか個人的な意見ですけどどこか有料には頼りたくはない自分もいたんですよね。。

Cocoonの使い方

そんなわけで本題に入りまして、僕が迷った末に選んだ無料テーマ「Cocoon」の使い方を説明していきますね!

スポンサーリンク

■Cocoonの使い方

「Cocoon」のダウンロード

まず、このCocoonなんですけど最初からWordPressに入っているテーマではないのでダウンロードをしないといけないです。
まずこちらのサイトを開きましょう。
【Cocoonのダウンロード】

・サイトを開いたら、ヘッダーメニューのダウンロードをクリック。

WordPressの無料テーマ「Cocoon」のトップページの写真

そして、次の画面で下にスクロールして行くと「親テーマのダウンロード」と出てきますので
“Cocoonテーマ”をダウンロードをクリックしましょう。

てぃん
てぃん

え?親テーマ?

って思いますよね。安心してください。この後説明しますのでまず「親テーマ」をダウンロードしましょう。

「Cocoon」のダウンロード画面の写真

ダウンロードが終わったら、「WordPressの管理画面」を開いてください。
そしたら、左側のサイドバーから《外観》《テーマ》をクリックします。
次の画面で左上に《新規追加》ってボタンありますよね。そこをクリックします。
※この画像では僕のブログ管理画面なのですでにCocoonが入ってますが気にしないで下さい。

WordPressのテーマ新規追加画面の写真

そしたら、次の画面で今度は左上に《テーマのアップロード》ってボタンあると思います。
そこをクリックしましょう。
そして、ファイルを選択のところで先ほどダウンロードした「Cocoon」のテーマをアップロードします。
※ここで注意して欲しいのが、ZIP形式でって書いてあるのでZIPファイルをアップロードしてくださいね。macだと自動で解凍されちゃうので。

WordPressのテーマ新規追加画面の写真

うまくいけば、《外観》《テーマ》の中に「Cocoon」の親テーマが追加されているはずです。

「Cocoon(子テーマ)」のダウンロード

さあ次に「子テーマ」です。
先ほどダウンロードしたのが「親テーマ」になります。
さっきと同じ要領で、こちらの「Cocoon Child」をダウンロードしてアップロードまでしましょう。

「Cocoon」のダウンロード画面の写真

そしたら、管理画面でテーマを有効化します。
ダウンロードしてアップロードするだけでは反映されませんので。
※必ず子テーマ(Cocoon child)の方を有効化してくださいね。

WordPressの外観設定の写真

親テーマと子テーマ

さあここまでで、ひとまずCocoonの設定が完了です。
というわけで、「親テーマ」「子テーマ」について説明していきますね。

まあ名前の通りなんですが、親テーマのファイルの中ではWordPressでサイトを表示させるための重要なファイルが入っています。
そんな親ファイルは度々アップデートされます。
そんな時に、もし親テーマのファイルを自分でカスタマイズしていたとしたらアップデートの影響を受けてしまうかもしれません。

なので、カスタマイズをすることを考えると必ず子テーマを有効化した方がいいです。
子テーマは親テーマの情報を引き継いではいるものの、子テーマに施したカスタマイズは守られます。

なので今後ちょっとしたカスタマイズ方法などを紹介していきますが、全部子テーマですので覚えておいてくださいね。

Cocoonの初期設定

それではCocoonの設定をしていきましょう。
左側のサイドバーに《Cocoon設定》が追加されてますのでクリックします。
プレビューに表示されているのがCocoonの初期設定です。
そして上に何個もタブがありますよね。ここから色んな設定ができます。

Cocoon設定画面の写真

・スキン

じゃまずはスキンから。
ここでは、サイトのデザインを簡単に変更できます。
マウスを乗せるとプレビューが出ます。
一番下の「変更をまとめて保存」を忘れずクリックしてくださいね。

Cocoon設定のスキン設定画面の写真

・全体

全体設定では、サイトの背景色テキストの色文字サイズなどを変更できます。
またサイドバーの表示位置なども変更できます。
サイドバーとはここの赤枠のことです。

WordPressのサイドバーの写真

・ヘッダー

次はヘッダーです。
ヘッダーとはサイトの上部に表示されるもので、
まあサイト名とかの部分ですね。
ここでは、サイト名の表示の仕方やキャッチフレーズを表示するかしないか
後はナビゲーションボタンの色や配置の設定ができます。

WordPressのヘッダーの写真

・タイトル

次はタイトルです。
ここでは、検索エンジンで検索された時のサイト名表示の設定です。

Cocoonのタイトル設定画面の写真

・カルーセル

このカルーセルというところは、この赤枠の部分です。

WordPressのカルーセルの写真

この辺はもう好みだと思いますが、少しつまづいたところがあって自分なりに解決した方法があるのでもしカルーセルの設定が気になる方はこちらの記事をご覧ください。

・フッター

フッターはここです。
上部に表示されるヘッダーとセットで覚えるといいですね。
色や表示位置コピーライト設定を行えます。

WordPressのフッターの写真
今日はここまで

お疲れ様でした。最低限の基本的なCocoon設定について説明してきました。
まだまだ色んな設定がありますし、今回の記事で抜けている部分もあると思うのでどんどん記事を公開していきますのでもし良かったら参考にしてみて下さいね!

ブログランキング・にほんブログ村へにほんブログ村
WordPress
スポンサーリンク
てげてげブログ

コメント

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