基本的なCocoon設定

basic-cocoon-setting
スポンサーリンク
スポンサーリンク

Cocoon設定画面を開く

 

「Cocoon設定」を開きます。

ダッシュボード左サイドバー 
》 Cocoon設定   をクリック

下のタブは、Cocoon設定で使用できる機能です。多機能で初心者には戸惑いますよね。でも大丈夫です。初めから全てを使いこなす必要はありません。とりあえず、基本的な設定を進めていきましょう!

cocoon-setting

「最低必要だと思われるCocoon設定」にフォーカスして解説していきます。他は使っているうちに少しずつ理解できればいいでしょう。

 

スキンを選択

 

Cocoon開発者わいひらさんのお言葉を借りれば、スキンとは、
「洋服を着替える感覚で手軽にサイトの外観を変更できる」

ということです。 つまり、ブログのデザインを簡単な操作で変えることができる
Cocoonには数多くのスキンが用意されています。とても嬉しいことに、これも無料で選び放題♪

「スキン」タブをクリック 
》 ページ下にスクロール 
》 スキンのリスト

選ぶのに迷ってしまうほど、どれもかっこいいです。 マウスポインタを画像アイコンにあてると、デザインをプレビューできます。

どのスキンに設定するかで、ブログの印象もだいぶ違ってきますよね。

ブログ運営後、途中からスキンの変更は可能か?

このブログは当初「Season Winter」をスキン設定していました
途中から「Natural (グリーン)」にスキン変更をしました
スキン変更して問題ないのか?
と心配される方もいるかもしれませんが、私の場合、特に不具合等のトラブルありませんでした。
でも、使っているプラグインとの相性や、サーバー環境などで不具合発生の可能性あるので、スキン変更するときは必ずバックアップをとって、不測の事態に備えてから実行されることをおすすめします
 
選択したスキンのラジオボタンをクリック 
》  変更をまとめて保存   をクリック

スキン動作デモを見ながら、ブログのジャンルやお好みで選んで下さい。

 

エディターの設定

現在のWordPressの標準のエディタ”Gutenberg” 使いこなせれば便利なのですが、ぱっと見わかりにくいため、使いにくいとの評判です。習得するのに時間がかかります。 だから、旧エディタ「Classic Editor」のプラグインをインストール・有効化して使用するのが一般的です。

でも、Cocoon設定で、プラグインなしで旧エディタ「Classic Editor」が使用できるんです。 使い方は、

ダッシュボード左サイドバー 
》 Cocoon設定 をクリック

Cocoon設定画面に入ります。

「エディター」のタグ をクリック

「エディター共通設定の画面」に入ります。

「投稿・固定ページ管理画面の設定ができます」
「Gutenbergエディターを有効にする」のチェックマークをはずす

これで、旧エディタ「Classic Editor」で編集できるようになります。

「エディタースタイル」はお好みです。
当ブログは、テーマに合ったスタイルになるのでチェックを入れて使っています。

スポンサーリンク

ヘッダー設定

Cocon設定 
》 「ヘッダー」タブをクリック
ヘッダーの設定画面に入ります。ほとんどデフォルトでブログデザインは出来上がります。特に設定が必要と考えられる部分について解説していきます。

ヘッダーレイアウト

センターロゴ(デフォルト)

ヘッダーの高さ

お好みで設定してください。
当ブログの場合
☐ ヘッダーを固定する
ヘッダーを固定しないのでチェックなし。

ヘッダーの高さ

お好みで設定してください。
当ブログの場合
高さ      170px 
高さ(モバイル)170px
モバイルも同じ大きさに揃えて設定したほうがベターです。

ヘッダーロゴ・ヘッダー背景画像

私は、ヘッダーロゴ・ヘッダー背景画像は、Canvaで作成しました。Photoshop(フォトショップ)や Illustrator(イラストレーター)と異なり、使いやすく初心者向けです。無料の範囲でも十分な機能。とても便利なツールなのでご紹介させていただきます。
 
Canvaとは、オンラインで使える無料のグラフィックデザインツール
7500万点の素材が無料
42万点以上のテンプレート (内、無料テンプレートは25万点)
Canva Pro は、30日間の無料トライアル
透過画像を簡単作成 

このツールを使えば、それなりにかっこいいデザインが出来上がり♪


ヘッダーロゴサイズ

お好みで設定。

当ブログの場合
幅:700 × 高さ:700 

キャッチフレーズの配置

「キャッチフレーズ」て何だったかな?
WordPressの初期設定で「一般設定」でキャッチフレーズ文言を設定済み

ダッシュボード左サイドバー 》 設定 》 一般設定 をクリック

「一般設定」画面に入ります。
サイトのタイトルの下(2行目)で設定したキャッチフレーズを確認できるはずです。もし空白なら、ここで、自分のブログキャッチフレーズを入力しましょう。

キャッチフレーズ文言を入力したら、

ダッシュボード左サイドバー 》 Cocoon設定 》 ヘッダータブをクリック
ヘッダー画面に入ります。
「キャッチフレーズ」を
ヘッダーで表示するか
ヘッダーで表示するとしてトップまたはボトムに配置するか

ここでは、そのキャッチフレーズをどんな感じに表示するか?決めましょう。

グローバルメニュー幅

お好みで設定してください。

参考まで、当ブログの設定は以下の通り

トップメニュー幅 176
☑ メニュー幅をテキストに合わせる
サブメニュー幅 400
設定が完了したら
 
変更をまとめて保存 をクリック

フッター設定

お好みで設定してください。

参考まで、当ブログの設定は以下の通り

ダッシュボード左サイドバー 》 Cocon設定 》 「フッター」タブをクリック
フッター設定画面に入ります。

フッター表示タイプ

?「メニュー&クレジット(左右) ラジオボタンクリック

クレジット表記

サイト開設年を入力

フッターメニュー幅

お好みで選択して下さい。

フッターメニュー幅:120
☑ メニュー幅をテキストに合わせる
変更をまとめて保存 をクリック
 
次は、ブログ記事を書きましょう!