Cocoonのデザインをカッコよくカスタマイズする方法【WordPress】

お金をかけずにCocoonを有料テーマのように
カッコ良くしたいのならば、少し読んでいってくださいな

まさ

最近
何だか有料テーマの話題でもちきりですよね

テーマって何ですか?

まさ

ブログの飾りつけです
文字が書いてあるだけだと
寂しいじゃないですか

つまり、記事の内容のショボさを
見た目でごまかそうとしているのですね

まさ

ドゴッ!

記事の内容を引き立てるため
ブログをカッコよくしましょう

初心者のブロガーさんって、色々な人のブログを参考のために見に行きますよね。
そして・・・

このブログのデザイン
カッコいいなー
きっと
有料のテーマを使っているんだろうな

などと思っても

Cocoonは無料のテーマなので
ショボくても仕方がない
あきらめていませんか?

実はホームだけなら
かっちょよ~く仕上げるコトができるのです!

アピールエリアの設定を追記しました(2020/12/4)
 ※画像をクリックで飛んでいきます

画像をクリックでアピールエリアの設定に飛んでいきます

スポンサーリンク

目次

Cocoonのホームをカスタマイズするには

Cocoonのホームをカスタマイズするには
Cocoon設定」をクリックします

ものすごい数の設定タグが
現れます (゚Д゚;)

これを見て拒否反応を起こしたあなた
安心してください!
デザインに必要なタグは
それほど多くはありません

「ヘッダー」をカスタマイズするには

ヘッダーをカスタマイズするには「ヘッダー」をクリック

ヘッダーはヘッダー背景画像の「選択」からパソコンやスマホに保存してある画像を選ぶことができます

ヘッダー画像は表示する高さを変更できます

しかも
パソコン用とモバイル用で分けて設定できます
意外とこまかいぞCocoon Σ(゚Д゚)

高さ(モバイル) 「150の場合

高さ(モバイル) 「300の場合

「おすすめカード」を設定してみませんか?

おすすめカード」とは、自分が絶対に見てほしい記事を表示する機能です

おすすめカード」を表示させるためには

  1. メニューの作成
  2. おすすめカードの表示

上記2つの設定をする必要があります

メニューの作成とは

メニューの作成とは・・・


おすすめカード」を表示するには、どの記事を
おすすめにするか決めなくてはなりません

それには
外観
  ↓
メニュー 新しいメニューを作成しましょう」と進んで

メニュー名を入力します
分かりやすいように「おすすめ」として

ヘッダーメニューを作るなら「ヘッダーメニュー」
フッターメニューを作るなら「フッターメニュー」
のように用途をあわせて名前を付けましょう

メニュー項目を追加から
投稿」をクリック

メニューを作りたい項目を選んでください
 ・固定ページ  
 ・投稿     
 ・カスタムリンク
 ・カテゴリー  

表示させたい記事にチェックをいれて
メニューに追加」をクリック

表示させたい記事は偶数にしてください
スマホの画面には2つずつ表示されるので
奇数だと空白ができて、カッコ悪いです

画像の順番はドラッグで変更できます

並べ替えが終わったら
メニューを保存」をクリックします

おすすめカードを表示させるには

おすすめカードを表示させるには
Cocoon設定」をクリック「おすすめカード」のタブを選択

おすすめカードの表示
どのページでおすすめカードを表示するかを設定できます

メニュー選択で、さきほど作成した
おすすめ」を選択

表示スタイル
カードのタイトルの表示を選択できるので
お好みで選択してみてください (*^▽^*)

例えばこんな感じです

画像中央にラベルでタイトル
画像下段を黒背景にしタイトルを重ねる

ひととおり設定が終わったら
変更をまとめて保存」をクリック

※このボタンはページの下部にもあります

これで設定が反映されます

「カルーセル」を設定してみませんか?

カルーセル」を設定してみませんか?
と言われても
なんやねんそれっ!ってなりますが、たぶん見たことありますよ

こんな感じでカードが ビュイーン と動くやつです
Cocoonでもこんなことが、できちゃいます (゚Д゚;)

カルーセルを設定をするには
Cocoon設定」をクリック「カルーセル」のタブを選択

カルーセルの表示」で表示したいページを選択します

表示内容で「カテゴリー」か「タグ」で表示したい記事を選んで

オートプレイ」にチェックを入れて
オートプレイインターバル」で時間を決めます

ひととおり設定が終わったら「変更をまとめて保存」をクリック

※このボタンはページの下部にもあります

「カードタイプ」の設定をしてみましょう

「カードタイプ」の設定とは、画像赤枠部分の設定です

カードタイプを変えるには
Cocoon設定」をクリック「インデックス」のタブを選択

カードタイプ」の中から選択します

この赤枠部分をポイントするとサンプルが表示されます

エントリーカード(デフォルト)
※初期値はこうなっていますね

大きなカード(先頭のみ)

タイルカード2列

お好みのカードタイプが決まったら「変更をまとめて保存」をクリック

「フロントページタイプ」の設定をしてみましょう

フロントページタイプ」の設定とは、画像赤枠部分の設定です

※デフォルトにはこの赤枠部分はありません

フロントページタイプの設定
Cocoon設定」をクリック「インデックス」のタブを選択
※ここまではカードタイプと同じです

この赤枠部分をポイントするとサンプルが表示されます

タブ一覧
 先頭にカテゴリータブが出現します

カテゴリごと(2カラム)
 新着記事のあとにカテゴリーが2列で
 表示されます

※私はこの設定にしてありますが、モバイルでは 1カラム(1列)表示になります

お好みのフロントページタイプが決まったら
変更をまとめて保存」をクリック

「SNSボタン」の設定をするには

SNSボタンとはこのようなボタンで、2種類あります
上側の「SNSシェア」ボタン
下側の「SNSフォロー」ボタン

この2種類は、それぞれデザインを変更できます

SNSシェアボタンの設定をするには
Cocoon設定」をクリック「SNSシェア」のタブを選択

シェアボタンは表示する位置が2か所あり
それぞれ表示することができます
・トップシェアボタン
・ボトムシェアボタン

トップシェアボタン」の設定

トップシェアボタン」は記事の上部に表示されます

トップシェアボタンの「表示」「非表示」は
切り替えることができます

ボタンの詳細設定こちらをご覧ください

ボトムシェアボタン」の設定

ボトムシェアボタン」はページの最後に表示されます

ボトムシェアボタンの「表示」「非表示」は
切り替えることができます

ボトムシェアボタンは「シェアメッセージ」を表示させるコトができます

ボタンの詳細設定こちらをご覧ください

SNSフォローボタン」の設定

SNSフォローボタンの設定をするには
Cocoon設定」をクリック「SNSフォロー」のタブを選択

フォローボタンの「表示」「非表示」は
切り替えることができます

フォローボタンは「フォローメッセージ」を表示させるコトができます

ご自身のSNSは「あなたのプロフィール」から
設定することができます

ボタンの詳細設定

ボタンの詳細設定をしてみましょう

画面に表示させたいボタンを選択できます

表示をさせたいページを選択できます

ボタンカラーは3種類から選べます

ブランドカラー

シェアボタン ※デフォルトではこうなっていますね

ブランドカラー(白抜き)

シェアボタン

モノクロ

シェアボタン

設定が終わったら変更をまとめて保存」をクリック

アピールエリアの設定

アピールエリアの設定」を
してみましょう
アピールエリアは、ホームの先頭に
自分のぜひとも見てもらいたい

  • 画像
  • 文章
  • 記事のリンクボタン

を設定できます

あなたがアピールしたい
画像」だけでもいいですし
文章」だけでもいいですし
組み合わせは自由です

まさ

しかし
これはちょっと怪しすぎますね

アシスタントA

師匠が登場する匂いが
プンプンするんですけど・・・

アピールエリアの設定をするには
Cocoon設定」をクリック「アピールエリア」のタブを選択

アシスタントA

はじめに
画像をどのページに表示するか
決めましょう

アピールエリアの表示」で
アピールエリアを表示したいページを選択する
 ※どのページでも表示できます

高さ
エリアの高さを変えられます
 ※パソコンのみで反映されます

エリア画像
スマホやPCに保存してある画像を選択できます

画像がスクロールに追従しなくなります
 ※試してみれば分かります

アシスタントA

アピールしたい文章があれば
入力してください

テキストエリア表示を入れると
タイトル②□
メッセージ③□に文章を入力できます

アシスタントA

URL付きのボタンはこのように

ボタンメッセージ
に入力した文章がボタンに表示されます

ボタンリンク先
にボタンのリンク先の URL を貼り付けます

ボタン色
ボタンの色を選択できます
 緑色のクリック率が高いという都市伝説があります

設定が終わったら変更をまとめて保存」を
クリック

まさ

これで
怪しさ全開のアピールエリアの完成です

アシスタントA

悪用厳禁!でお願いします

まとめ

Cocoon でもブログをかっちょよ~く見せるコトができます
あなたのブログはこの記事を読む前よりかっちょよ~くなったでしょうか?
どこをどういじればいいかが分かれば、結構簡単にかっちょよーくなりますね

もし、この記事が気に入っていただけたなら
サイドバーをカスタマイズする方法もご覧ください

そして、この記事を「シェアしていただけると、とても喜びます(´▽`)


にほんブログ村

バナーをポチッとしてもらえると、飛び跳ねます

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね (´艸`*)

コメント等、お気軽にどうぞ ( ̄▽ ̄)

コメントする

目次
閉じる