【WordPress講座】第10回:「Cocoon(コクーン)」のデザインをガラッと変えるよ!

wordpress-lesson10

さてさて、はじめましょうか。
この回ではWordPessの無料テーマ「cocoon」の各種設定について触れていきたいと思います。

ここでは実際に私が運営している育児ブログを見本にやっていきますね。

この回が終わるころには一通り、設定が完了し、見た目もおおっ!!ってなっていることでしょう!

有料テーマ「THE THOR」を使用したい方はここは飛ばして下さい。
「THE THOR」の設定については、第12回~やりますので、そちらをご覧ください。

関連記事

さてさて、はじめましょうか。この回ではWordPessの有料テーマ「THE THOR(ザ・トール)」の購入→インストールまでを解説していきたいと思います。ここでは実際に私が運営している本サイト「フリカツママ部」を見本にやっていき[…]

wordpress-lesson12

「Cocoon(コクーン)」のマニュアル

毎回説明しますが、「Cocoon」には日本語のマニュアルが用意されていますのでそちらをご覧いただければ、詳しく載っています。
難しいのが得意な方・ある程度の知識がある方は、こちらの方がいいかもしれません。

ここでは、公式マニュアルではわからない方のために、補足を交えて説明していきます。

 

「スキン」の設定

ダッシュボード:左メニュー「Cocoon設定」> 「スキン」タブをクリック

rarulog-dashboard-skin

下の方にスクロールしていくと…

「スキン一覧」なるものが出てきますので、そこから選んでいきます!
私の場合、デザインはカスタマイズして、自分仕様に少しづつ変えていこうと思っていたので、シンプルで何も装飾のない「[Child]スキンテンプレート [作者: わいひら]」を選びました。

各スキン名の左の画像マークに、マウスで矢印を乗っけると(マウスホバー)、イメージが見られます。

結構たくさんのスキンが用意されているので、自分好みのスキンをじっくり選んでみてください。

 

らる
これ、ずっと見てたら結構時間が経つんですよね…(汗)

決まったら、反映させたいスキン名の左のボタンをポチっと選択して、一番下のボタン「変更をまとめて保存」をクリックしてください。

確認で、実際のご自分のブログを見てみてください。

うまみ
どう?反映されてる??

ガラッと雰囲気が変わったんじゃないでしょうか?
これ、結構「おお!」ってなりますよね。

 

らる
ボタン一つで、こんなに一気に変わるんですよーすごいですよね!

 

「全体」の設定(配色・フォントなど)

ダッシュボード:左メニュー「Cocoon設定」> 「全体」タブをクリック

ここでは、いろんな設定が出来ますが、必要そうなところのみ、説明していきます。

 

キーカラー

先程の設定で、お好みのスキンを設定した方は、既に色は付いているので不要かと思います。

 

サイトフォント

私は「メイリオ、ヒラギノ角ゴ」を使用しています。
こちらもお好みでいいと思います。

WEBフォントは、見た目がかわいいのがいい!などのこだわりがある人は、使ってみてもOKです。

特にこだわりがない・見やすい方がいい人は普通に、WEBフォントじゃない方がいいです。
私も、初めは気になってWEBフォントを設定してみましたが、太字がわかりにくかったり、ちょっとボヤっとした感じに見えたり(←老眼かもしれません)、表示速度が遅くなったり(重いんですよね)するのでやめました。

文字サイズは私は「16px」です。これも好みでOKです。

らる
文字色も好みですが、真っ黒より、ちょっとグレーの方が読みやすいです。

モバイルサイトフォント

こちらもお好みですが、私はPCより少し小さい「15px」です。

 

その他

私はいじってません。今後いじるかもしれませんが…。
いじりそうなところで言えば、「 サイト背景色 」「 サイトリンク色 」とかぐらいですかね…。

背景色は、変更したい方はどうぞ。あまりガチャガチャした色になると、一番見てほしいコンテンツ(記事や写真など)の邪魔になるので、シンプルな色がおすすめです。

サイトリンク色は、「これ、リンクだよ」ってわかる色がいいです。

サイドバーに関しては必要な方は「表示」で。表示位置は右がおすすめですよ。

 

ファビコン

ファビコン(サイトアイコン)の設定は、ここの「スキン」ではないのですが、一応デザイン設定という事で、追記しておきます。

ダッシュボード:左メニュー「外観」> 「カスタマイズ」タブをクリック

ご自分のブログが表示され、左側にカスタマイズのメニューが表示されますので、そこから「サイト基本情報」をクリックして設定してください。

設定する画像は512px × 512px のサイズで作って、PNG画像で書き出して使用してください。

 

ファビコンは、サイトを見た時に上のタブにすっごく小さく表示されるものなので、あまりごちゃごちゃしたデザインだとわかりにくい&見にくいので、シンプルなものを作るようにおすすめします。

 

ブログのヘッダー設定(背景画像・ロゴ・メニューなど)

ダッシュボード:左メニュー「Cocoon設定」> 「ヘッダー」タブをクリック

ここでは、ヘッダーの設定を行っていきます。

ブログ全ページのページ上部に表示されるロゴやメニューの設定なので、ここも重要なデザインポイントです。
ご自分のブログに訪れた人が、最初にパッと目に入るものなので、ぜひこだわってみてください。

 

ヘッダーレイアウト

ロゴの位置を設定します。お好みで。

ヘッダーの固定

これもお好みですが、スクロールした時に、環境によっては動作がおかしいこともあるのであまりお勧めしません。

 

高さ・高さ(モバイル)

私はここはデフォルトのまま、何もいじっていません。変更したい場合はお好みでどうぞ。

 

ヘッダーロゴ ・ ヘッダーロゴサイズ

ここは重要ですので、これだー!ってロゴを作ってみてください。

私はPNG形式で作りました。背景色が変わっても、余白部分が透過できるので後が楽です。

お好みのサイズでOKです。あまり大きすぎると場所を取りすぎて、ロゴがでかでかと鎮座して、コンテンツがパッと見た時に出てこないので、横長であまり大きくないロゴがおすすめです。

ちなみに、私は現在大きめの画像を作って、設定では横幅400px、縦幅は空欄(設定していない)状態です。

 

キャッチフレーズの配置

こちらも、お好みで、表示させたい人は表示させてください。

 

ヘッダー背景画像

こちらもお好みですが、私はシンプルにしたかったので、設定していません。
おしゃれな画像を入れると、一気にこじゃれた感じになりますよ!
※著作権の関係があるので、使う時はフリー素材や、ご自分で撮影したものにしてくださいね。

個人的なおすすめは、ちょっと濃い目の色の背景画像の上に白いロゴです。(完全に好みの問題)
一気におしゃれ感が増します。
背景画像を設定&ロゴ(PNG形式)だと、色によっては目立たなくなるので、そのあたりも考えて選んでみてください。

 

ヘッダー全体色・ヘッダー色(ロゴ部)・グローバルナビメニュー色

こちらもお好みで設定してください。いろいろチャレンジして、プレビュー確認してみてください。
色を変えるだけで、イメージがガラッと変わります。

いろいろやりすぎるとごちゃごちゃしたり、わけがわからなくなるので、困った時は無難に同系色(例えば、濃い青と、薄い青と、白とか)などで統一感のある色合いにするとまとまりやすいです。

うまみ
たくさん色を使いすぎたら見にくいよ!多くても3色以内がおすすめだよ

グローバルナビメニュー幅

こだわりがある方や、もうちょっと!という方はいじってみてください。
何もいじらず、デフォルトのままでも十分です。

「メニュー幅をテキストに合わせる 」にチェックを入れておくと、文字が多少多くてもキレイに収まります。

 

らる
メニュー名は短く簡潔にするのをおすすめします。

と、以上でざっとデザイン設定の説明を終わります。

とにかく、ここの「スキン」「全体」「ヘッダー」タブの中にざっと目を通しておいて、後で「ここの色変えたい!」って時が来たらここをいじってみてください。

次回は、WordPress(ワードプレス)でブログを作る際に重要な「SEO」についてのお話です!