【超簡単】無料テーマcocoonを使ってブログを可愛くカスタマイズする方法【WordPress】

cocoon

無料ワードプレステーマの中で最も人気で多くの人から愛されていると言っても過言ではない「cocoon」

当ブログでもテーマはcocoonを使用しています。

\ 今のデザインはこんな感じ /

 

こんな感じでおしゃれで可愛いデザインが素人でも簡単に設定することができるのがcocoonの魅力の1つ。

このブログを見ていただければ可愛いデザインに一瞬でカスタマイズ出来ちゃいます!

どんだけピンクが好きやねん!
って感じのデザインですが、女性はみんなピンクが好きでしょ?

人によるでしょ・・・

では早速cocoonを使ってブログをカスタマイズする方法を解説していきます!

スポンサーリンク

cocoonのスタマイズが簡単な理由は、デザインテンプレートが豊富なため!

その数80種類(色違い含む)のスキンからブログデザインを選んで設定することができます。

スキンがたくさん用意されているので自分のお気に入りのデザインを選んで設定してみてください♪

管理画面→「Cocoon設定」→「スキン」→「スキン一覧」から好きなデザインを選択→「変更をまとめて保存」

私のブログスキンは「Momoo(ピンク)」を使用しています。

おすすめカードを設定する

おすすめカードはメニューバーの下に4枚表示することが可能です。

固定ページやおすすめの投稿ブログなど自分の好きなコンテンツを選んで設置します。

設定手順を解説します!

おすすめカードに表示したいコンテンツをメニューに登録する

管理画面→「外観」→「メニュー」→「新しいメニューを作成しましょう」

任意のメニュー名を入力

任意のメニュー名を入力(おすすめカード用など)→「メニューを作成」

おすすめカードに表示したいコンテンツを選ぶ

「メニュー項目を追加」から任意のメニューを選択→「メニューを保存」

これでおすすめカード用のメニューの準備ができました!

これが完了したら次は「Cocoon設定」からおすすめカードを設定していきます

おすすめカードを設定する

「Cocoon設定」→「おすすめカード」→「メニュー選択」→「おすすめカード用」を選択→「変更をまとめて保存」

私のブログでの設定

おすすめカードの表示:全ページで表示
表示スタイル:画像のみ
カード余白:✔️おすすめカード毎に余白を設ける
カードエリア左右余白:✔️おすすめカードエリアの左右に余白を設ける

カルーセルを設定する

カルーセルとはここの部分です。

カルーセルでは自分で設定した期間の人気記事などを表示させることができます。

管理画面→「Cocoon設定」→「カルーセル」

参考

  • カルーセルの表示:表示範囲を設定できます
  • 表示内容:カルーセルに表示したいカテゴリーを選ぶことができます。
  •      また、カルーセルには設定した期間の人気記事が表示されます
  • カルーセルの並び替え:ランダム、投稿日、更新日から選べます
  • 表示数:最小12、最大120記事を表示できます(デフォルトは18)

カテゴリータブを表示する

カテゴリータブはここの部分です。

管理画面→「インデックス」→フロントページタイプ(β版):「タブ一覧」を選択→表示カテゴリーを3つ選択

新着記事の他に3つのカテゴリーを表示させることができます。

カテゴリを設定する方法

管理画面→「投稿」→「カテゴリー」→新規カテゴリーを追加から、任意の名前を設定する→「新規カテゴリーを追加」

※カテゴリーを設定しなければ、表示は「未分類」になってしまうので、カテゴリーを設定して記事ごとにカテゴリー分けをしてあげましょう。

サイドメニューの設定方法

プロフィールや人気記事ランキング、サイト内の検索バー、InstagramのフィードやTwitterの投稿など様々なコンテンツを表示させることができます

作業手順

管理画面→「外観」→「カスタマイズ」→「ウィジェット」→「サイドバー」→「ウィジェットを追加」から任意のメニューを追加していく

※ランキング、人気記事、広告(アドセンスなど)、新着記事、目次、アーカイブ、カテゴリー、カレンダー、検索バーなどなど選択するだけで表示をさせることが可能です。

プロフィール:「テキスト」使用

メディアも追加することができるので、テキストを使用することで自由にカスタマイズができます

※ツイッターやインスタグラムのフィードも「テキスト」を使用してリンクやタグを挿入して表示しています。

※インスタのフィードはプラグインを使用:Smash Balloon Instagram Feed

※Twitterの投稿:https://publish.twitter.com/#
上記のサイトを使用してリンクを発行→ウィジェットのテキストに貼り付け

スポンサーリンク
タイトルとURLをコピーしました