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

WordPress

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

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

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

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

AREN
AREN

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

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

ワードプレス無料コクーン設定の解説

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

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

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

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

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

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

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

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

ままん
ままん

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

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

Cocoon全体設定の色指定の表示を解説

 

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

Cocoon設定 全体設定のサイトキーカラーとサイトテキストカラーの設定と表示場所

 

サイトキーカラー

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

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

安藤 百福

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

AREN
AREN

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

 

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

サイトキーテキストカラーの設定

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

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

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

Cocoon設定 全体設定の中でサイトフォントの設定をする

AREN
AREN

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

ままん
ままん

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

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

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

Cocoon全体設定のサイトフォントの設定

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

ままん
ままん

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

 


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

cocoon設定のヘッダー設定 グローバルナビ色の設定


サイト背景色

Cocoon設定の全体設定 サイト背景色を選ぶ

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

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

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

AREN
AREN

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

ままん
ままん

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

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

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

 

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

Cocoon設定 全体設定 リンク色の設定

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

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

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

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

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

Cocoon全体設定の中でリンク文字色の指定ができる

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

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

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

AREN
AREN

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

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

ファビコン(サイトアイコン)の設定のしかた

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

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

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

ままん
ままん

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

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

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

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

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

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

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

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

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

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

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

コクーンはフォーラムも充実しています。
グーグル翻訳をしなくても大丈夫!何より日本語なのが安心です。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPL...

 

 

コメント

  1. ばずはっく より:

    Cocoonを使い始めたばかりだったので参考になりました。
    ありがとうございます。
    今後も参考にさせて頂きたいと思いますのでよろしくお願いいたします。

  2. アバター画像 ままん より:

    こんばんは。コメントありがとうございます。
    コクーンの設定は、ワードプレスの無料テーマの中ではとても親切で優秀な機能も充実していると思います。
    コクーンのわいひらさんの解説ページも、とても丁寧でいいですよね!

  3. あおい より:

    コクーンのわかりやすいサイトをさがしていて見つけました。
    わかりやすくてとてもためになり、また助かりました。ゆっくり読んで自身のブログに反映させたいです。ありがとうございました。

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