新着記事

ワードプレスの無料テーマCocoonのおすすめ設定とカスタマイズ

  1. HOME >
  2. 新着記事 >

ワードプレスの無料テーマCocoonのおすすめ設定とカスタマイズ

ワードプレステーマCocoonの設定がわからない。

Cocoonの設定がうまくいかない。

ワードプレステーマCocoonのおすすめ設定が知りたい

こんな疑問にお答えします。

ワードプレスの無料テーマCocoonのおすすめ設定とカスタマイズ

今回は、ワードプレスの無料テーマCocoonのおすすめ設定を記事にまとめました。

ワードプレスのCocoonは無料テーマとは思えないほど完成度が高く、スキンやトップページのカスタマイズも自由にできてデザインもおしゃれなテーマになってます。

使い方も簡単で、ワードプレスの無料テーマの中では一番カスタマイズ無料テーマになってます。※個人的な見解含む

そんなワードプレスの無料テーマCocoonの簡単にできるおすすめ設定をご紹介します。

ワードプレステーマCocoonは、スキンを設定するだけでおしゃれに。

Cocoon設定のタブから【スキン】を選択します。

スキンとはサイトのデザインを自由に変更できます。(たくさん選択できます)

ちなみに私の使用してるスキンは【Fuwari -御召茶(おめしちゃ)-】を使ってます。

https://wp-cocoon.com/ Fuwari -御召茶(おめしちゃ)- [作者: アオイ]

たくさんスキンがあり悩みましたが、数日悩んで【Fuwari -御召茶(おめしちゃ)-】に決定しました。

↓これがPC画面です。シンプルで気に入ってます。


↓こちらはスマートフォン画面です。

どのスキンも素晴らしいデザインになっており、中でも私の気に入ってるデザインは

  • Fuwari -海老茶(えびちゃ)- [作者: アオイ]
  • Fuwari -海松茶(みるちゃ)- [作者: アオイ]
  • Fuwari -御召茶(おめしちゃ)- [作者: アオイ]
  • Fuwari -褐色(かちいろ)- [作者: アオイ]
  • Like Simplicity [作者: わいひら]

何度でも変更可能ですので、お気に入りがみつかるまで試してみましょう。

Cocoonのヘッダーロゴに画像を設定しておしゃれにする方法

次は【ヘッダー】を作成します。

タブからヘッダーを選択します。

ヘッダーとは、PC/スマートフォンでトップページ画面を表示したときに一番目につく場所です。

設定自体は難しくありませんが、画像の制作が必要です。様々な方法がありますが、

選択肢は、

文字のみで設定する

②フリー/有料画像を設定する

③自分で作る

一番目に付くところなので、気に入ったヘッダーにしたいものです。

※ヘッダーもいつでも変更可能ですので、気に入るまで何度も試してみましょう。

ヘッダーレイアウト 画像の設置場所を設定できます。(私の場合PC画面はロゴを左に、スマートフォン画面は中心にしてます。プルダウンの選択はトップメニュー)
ヘッダーロゴ 画像を挿入。※ヘッダー部分に表示する画像を設定します。jpg、jpeg、png形式の画像推奨です。

ワードプレスの自作ヘッダー画像の作成方法

ヘッダーの作り方がよく分からない。

自分で作成できるの?

ワードプレスでヘッダーを作成するのは簡単です。パワーポイントとペイントを利用して作成します。

1.パワーポイントでヘッダー画像を作成。

<参考例>

  1. アイコンとタイトル文字を作ります。(画像のフォントはメイリオ)
  2. スライドショーでスクリーンショットを撮ります。

2.ペイントに貼り付けて画像を保存
  1. スクリーンショットで撮影した画像をペイントに貼り付けます。
  2. 使いたい箇所を切り取る。
  3. 保存して完成です。

画像の大きさは自由に変更できます。

ヘッダー画像は、トップページに表示されます。ブログサイトで一番目立つ箇所です。

シンプル・おしゃれ・かっこいい・かわいいなど

どんなヘッダー画像にするか、いろいろ試してみましょう。

TwitterカードをCocoonテーマで簡単にOGPを設定する方法。

Twitterでこんな画面見たことありませんか?

これはCocoonの設定で【OGP】を設定しないとこの画面が表示されます。

これをオリジナルの画像にするには【OGP】タブをクリックして画像を挿入します。


Twitterカード設定

Twitterカードの有効化 ☑Twitterカードタグの挿入
Twitterカードタイプ ☑大きな画像のサマリー(summary_large_image)

ホームイメージ

画像のアップロード 画像を挿入(この画像がTwitterに表示されます)


次にTwitterに画像をアップロードします。

Card validatorのサイトに飛んであなたのブログサイトのURLを入力します。そして送信すれば画像が表示されます。

これでOGPの設定は完了です。

埋もれた記事をトップページに、ワードプレステーマCocoonのインデックス

「いい記事を書いたけど埋もれてしまってる。」ということはありませんか?

そんな時はンデックス】過去の記事をトップページに上げたい場合に使います。

使い方は簡単、チェックを入れるだけです。

並び順 更新日(降順)
(この設定で記事がトップにきます。)
カードタイプ 注目させたい記事のアイキャッチ画像を大きく表示できます。

ワードプレステーマCocoonの内部リンク方法。

  • あわせて読みたい
  • 詳細はこちら
  • 関連記事など

画像つきのURLを見たことありませんか?

↓こんな感じです↓

ブログを見てると目を引く【ブログカード】についてご説明します。

こちらも使い方は簡単、チェックを入れるだけです。

ブログカード表示 ☑ブログカード表示を有効にする
サムネイルスタイル 左側
※有名ブロガーさんもほとんどが左側にしてます。
日付表示 ☑更新日
古い記事はクリック率が下がるため更新日を選択。
リンクの開き方 ◻新しいタブで開く
※ブログはスマートフォンで見る人が多いのでタブがいくつも開くと邪魔になります。

Cocoonのブログカードの使い方・表示方法はどうするのか?

ブログカードを表示させるには、

1.表示させたいURLを入力する(コピペでもOK)→範囲を選択

<参考例>

2.スタイル→囲みブログカードラベル→表示させたいタイトルを選択

これで【ブログカード】のカスタマイズはOK。

Cocoonのイチオシ記事は目立つようにしたい!そんな時は

でっき
でっき

「イチオシ記事は目立つようにしたい!」そんな人におすすめするのは、【通知】のカスタマイズです。

【通知】タブをクリックします。

次に順番に設定します。

通知表示 ☑通知エリアの表示
通知メッセージ 記事のタイトルや任意のメッセージを入力。
通知URL 表示させたいURLを入力。
リンクの開き方 チェックは外してOK
通知タイプ 通知タイプはお好みで
好みで選択します。(私は#66cdaa
色の名前とカラーコードがわかるサイトがあります。(参考:原色大辞典


ワードプレステーマのCocoonのおすすめ設定 【カルーセル】

【カルーセル】とはブログ記事が自動で横にスクロールされるカスタマイズです。(パッとみ華やかに見えます。)

ブログのトップページでよく見ると思います。

この設定は先ほどの通知設定の下に表示されます。

カルーセルの表示 どのページで表示させるか選択
(私はフロントページのみで表示)
表示内容 どのカテゴリーを表示させるかを選択
カルーセルの並び替え ランダム・投稿日・更新日の中から選択
最大表示数 ブログ記事をいくつまで表示させるか入力
枠線の表示 ☑枠線があったほうが見やすいような気がしますが、お好みで
オートプレイ オートプレイを実行(自動的に送られます)
オートプレイインターバル カルーセルの自動送りの間隔を選択できます。3秒~30秒から選択

ワードプレスの無料テーマCocoonのおすすめ設定 まとめ

ワードプレスの無料テーマCocoonの設定は、おすすめした項目以外にもカスタマイズできます。

どれも難しい設定ではないので、少しずつカスタマイズしてコツを掴みましょう。

それでは、良いCocoonライフをお楽しみください。

月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

  • この記事を書いた人
  • 最新記事

-新着記事

© 2021 WING(AFFINGER5版)デモサイト Powered by AFFINGER5