ワードプレス Cocoon全体設定を初心者向けに分かりやすく解説

WordPress テーマ Cocoonでは、最初に「Cocoonの全体設定」をします。
「Cocoon設定」は、HTMLやCSSなどの専門知識がない初心者でも、不安なく希望のデザインのWordPressブログを設定できるシステムです。

国内シェアNo. 1のレンタルサーバーエックスサーバーには、WordPressでテーマCocoonを簡単に始められる「WordPressテーマインストール」機能があります。WordPressテーマCocoonをエックスサーバーに直接インストールできるので、専門知識がなくても心配性な初心者さんでも、気軽にブログやWebサイトを作ることができるので、まずはレンタルサーバーお試し10日間無料エックスサーバー

Cocoon設定では『設定した色はどこに反映されるのかな？』と作業中にプレビューを見ながら確認ができます。なのでCocoonは安心しWordPressブログを始められるテーマなのです。

ワードプレスを初めて使うかたや、アメブロのようにテンプレートのあるブログを使っていたかたには、『Cocoonではこの設定がこの部分の色になるよ』と、先に知っておくとさらにイメージしやすいと思い詳しく書き起こしてみました。

AREN

Cocoonをこれから使ってみようと思うかた、ダッシュボードの中を覗いてみませんか。

CSSの追加なしコクーン全体設定はプレビュー付きで安心

ワードプレスCocoonは、ダッシュボードの中の「cocoon設定」のタブを順番に開いて設定していけるようになっています。

初心者でも手順に迷うことなく、更にプレビューで確認しながら設定していけるのでとても安心です。

テーマ利用マニュアルも、丁寧に作られていますので分からないことがあったらすぐに見られるように別のタブで開いておくと便利です。

テーマ利用マニュアルは「開発者わいひらさん」のページで、もちろん日本語です。

Cocoon設定全体設定タブの解説

全体設定の中で設定する主な内容

サイトキーカラー
サイトフォント
サイト背景色やサイト背景画像
サイドバーの表示位置等の設定
ファビコン

ページ全体の設定をするときに、プレビュー画面を見て確認しながら操作ができるところが機能的です。

ままん

時間をかけずにスイスイと安心して作り上げていくことができます。

サイトキーカラー・サイトテキストカラーの表示場所

サイトキーカラーは、全体で使用する線をお好みの色でまとめてくれる設定です。見出しや引用部分、テーブルにも調整されたキーカラーが反映されます。

サイトキーカラー

段落の線の色、テーブルを作ったときの線の色、アイキャッチのタブ、引用タグのときの背景色が同系色の薄い色イメージとして反映されます。

仕事を遊びに
失敗した時に言い訳を考えるな
時間は人生だ
人類のあらゆる活動の起源は食に行き着く
人類はみな麺類だ

安藤百福

今回はサイトキーカラーを落ち着いたピンク系、サイトテキストカラーをホワイト（白色）に指定してみました。引用タグは↑こんな感じです。

AREN

好みの色をみつけるまで、何度でも確認しながら操作ができることは自分のサイトを作る上での楽しみですね。

サイトキーテキストカラー

サイトキーカラー内のテキストカラー（文字色）の指定です。CSSなしで簡単に設定ができます。

※ サイトフォント（文字色）の設定は次の項目での指定になり、サイトキーテキストカラー（文字色）の設定とは別の設定になっています。

サイトフォントの設定選べるフォントファミリーと文字色

AREN

ワードプレスデフォルトのフォントではなく、素敵なデザインのフォントを使って、おしゃれでハイセンスなブログを書きたいなぁと思っても、どうやって好みのフォントをインストールして追加したらいいのでしょう？

ままん

心配しなくて大丈夫です！
Cocoonには、日本語フォントで表示が素敵なデザインフォントが最初から用意されています。

【サイトフォント】
”メイリオ、ヒラギノ角ゴ”　にチェックを入れて、文字色はチョコレート色に指定してみました。

こちらが指定したあとの投稿の編集画面です。
↓

投稿の編集画面には、このように↑サイトフォントで選んだフォントファミリーのメイリオ(Meiryou)と、文字サイズ18pxが常に使えるように設定されます。

ままん

もちろん他のフォントファミリー（書体）を使いたい時は他の書体も選べるように用意されていて、とても便利です。

※ グローバルメニューの色は次のタブ「ヘッダー」の中にある【グローバルナビメニュー】の背景色で設定するので、サイトキーカラーとは別物です。

サイト背景色

サイト背景色は淡いピンク系を選んでみました。

サイト背景色は、ヘッダー下の区切り・フッター上の区切り・カラム間の余白に表示される区切りの色となります。

背景を画像に設定することもできます。

AREN

Cocoon設定の全体設定でサイトの模様替えも簡単にできるので、季節が変わったら色や背景画像を変更して衣替えしたりして、楽しめそうです。

ままん

カラム幅のサイズやコンテンツの余白幅、コンテンツ枠線幅等の設定で色とサイズを工夫すると、凝ったデザインにもなりますので慣れてきたら試してみるのもいいですね。

全体の幅＝コンテンツ幅+（コンテンツ余白幅×2）+（コンテンツ枠線幅×2）+カラム間の幅+サイドバー幅+（サイドバー余白幅×2）+（サイドバー枠線幅×2）

参照：https://wp-cocoon.com/column-settiongs/

リンク色　選択文字色　選択背景色って？

デフォルトのリンク色や訪問済みリンク色を自分好みに変更するには、CSSコードを追加しなければならないことが多いと思いますが、Cocoon設定の中で好みの色に指定できます。

【サイトリンク色】
別のページや別のサイトに行くために<a>タグで囲んだ部分の文字色

【サイト選択文字色】
リンクしている文字の上にマウスを乗せたときの文字色

【サイト選択背景色】
リンクしている文字の上にマウスを乗せたときの文字背景色

リンク部分の文字は↓このようになります。

リンクが貼ってある（aタグで囲まれている）文字色はブルー
マウスを乗せている時にはチョコレート色、背景色はなし。

サイドバーの設定はラジオボタンひとつだけで完了！

ワードプレステーマの多くは、サイドバーの位置は左右どちらかに決まっていることが多いように思いますが、Cocoonは左右どちらでも好みで選べるようになっています。
しかもラジオボタン一つで、すぐに位置や表示するページを変更することができます。

AREN

運営するサイトの目的によってサイドバーの表示・非表示を選べるのが便利ですね。

ファビコンの設定は管理画面から

ファビコンは、サイトのタイトルバーに表示されるサイトアイコンです。

あらかじめ、512×512pxの正方形のPNG画像を用意しておきます。

Cocoon設定の全体設定タブ内の指示通り「外観→カスタマイズ→サイト基本情報→サイトアイコン」と進み、「画像の変更→ファイルをアップロード」

ままん

これだけで出来上がりです。変更したい時も同じ操作手順で大丈夫です。

最後に、【変更をまとめて保存】を忘れずに！

ワードプレスブログでCSSの悩みがない Cocoon

インターネットをPCだけでなくスマホやタブレットで見ることが当たり前になり、従来よりレスポンシブ対応が望まれてきています。

ワードプレスの初心者とか、ブログデザインのCSSが難しくてとか…
こういう悩み事を体験しているので、同じようなかたがいらっしゃるのではないかと思いました。

CSSの書き換えや追加などの心配がなく、思い通りのデザインが作れるCocoonの解説を、WordPress初心者向けに作ってみました。

PC(パソコン)でHTML世代の中高年でも、CSSやプラグインにドキドキしちゃうかたでも、コクーンならワードプレスを使って思い通りのWebページのデザインができます。

Cocoonは開発者のわいひらさんにより無料で公開されています。

ワードプレスでブログサイトを作るには

アメブロなどのテンプレートのある無料ブログと違い、ワードプレスでブログサイトを開設するためには、最初にレンタルサーバーを用意する必要があります。

まずはレンタルサーバーエックスサーバーにアクセスし「サーバー新規お申し込み」から案内に沿って手続きしていきます。
エックスサーバーには「ワードプレス簡単インストール」という機能が備わっているので、レンタルサーバーが初めてのかた、ワードプレス初心者のかたでも分かりやすくサイトを開設することができます。