テーマ「Cocoon」 使い方と基本設定の方法【WordPress】

blog

こんにちは、山梨でホームページ制作をしている桃井です。

ホームページを作るためにサーバー契約をして、ドメインを取得し、基本的な設定はできたけど、そのあとどうやってどう進めていったらいいか悩む方も多いのではないでしょうか。

今回は、WordPressをインストールし、無料テーマ「Cocoon」を利用する方に向けて、「Cocoon」の基本的な設定と使い方について解説します。「Cocoon」には、ホームページ運営に役立つ多くの機能が備わっているので、最初にしっかりと設定を整えておくことで、スムーズにブログを運営できます♪

 Cocoon設定メニューについて

Cocoonには独自の設定メニューが用意されています!ここでテーマの詳細な設定を行っていきます。

Cocoon設定

ダッシュボードから「Cocoon設定」をクリックすると、さまざまな設定項目が表示されます。Cocoon設定メニューでは、以下の主要項目を確認・設定していきましょう!

Cocoon設定前のサイトの基本情報の設定については、下記の記事をご覧ください。

https://cocoon-connect.com/335/

基本の設定

サイトロゴ(ヘッダーロゴ)

Cocoon設定」から「ヘッダー」をクリックし、 「ヘッダーロゴ」にサイトのロゴを設定します。

ファビコン

外観」から「カスタマイズ」をクリックし、「サイトアイコンを選択」で、ファビコンを設定します。

ファビコンは、ブラウザのタブに表示される小さなアイコンです。自分のサイトのオリジナルのものをアップロードすることで、ブランド感が強まります!

 スキンの設定

Cocoon設定」から「スキン」をクリックし、スキンを設定します。

Cocoonテーマの魅力の1つが、あらかじめ用意されているスキンの種類の多さです。自分でテーマカラーや背景色を設定することもできますが、スキンを使うことでデザインやカラーが簡単に統一されていて、手軽にいい感じのサイトにすることができます。

初めての人には特におすすめです!自分のブログに合ったスキンを選びましょう。

気になるスキンの画像アイコンにカーソルを合わせるとデモサイトを見ることができます。

サイドバーの設定

外観」から「ウィジェット」をクリックし、サイドバーを設定します。

サイドバーには以下のようなウィジェットを追加することがおすすめです。

    • プロフィール: ブログ運営者の簡単なプロフィールを表示し、読者に親しみを持ってもらいます。
    • 最新記事: ブログに訪問してきた読者が、他の記事も読めるように最新記事を表示します。
    • カテゴリ: カテゴリごとに記事が整理されていると、訪問者が見たい情報を探しやすくなります。

 SEO設定を整える

SEOは検索エンジンにブログを正しく認識してもらい、検索結果で上位に表示されるための施策です。

タイトルタグとメタディスクリプション

Cocoon設定」→「タイトル」で、以下の設定を行います!

サイト全体のメタ情報を設定します。これは検索エンジンに表示される情報で、サイトの魅力を簡潔に伝えるために重要です。

OGP

Cocoon設定」→「OGP」で、以下の設定を行いましょう。

SNSでシェアされたときに表示される情報を設定します。アイキャッチ画像や説明文をここで指定することで、SNS上でも魅力的に見えるようにします。

SNSシェアとSNSフォローのボタン削除

Cocoon設定」→「SNSシェア」「SNSフォロー」から、記事の上下にSNSシェアボタンを削除します。必要な時に設定できるので、私はいったん全てのボタンを削除します。

SNSシェアボタン

SNSフォローボタン

保存してチェック

最後に、すべての設定が終わったら、忘れずに「変更をまとめて保存」をクリックしましょう。実際のブログを確認して、設定が反映されているかチェックしてみてください。

ちなみに、各ページにも「変更をまとめて保存」があるので、毎回保存した方が確実なので私はそうしていますし、おすすめです!

まとめ

これでCocoonテーマの基本設定が完了です。初期設定を整えておくことで、ホームページを運営する上でのトラブルも少なくなり、スムーズにブログ記事作成やカスタマイズに取りかかれます。Cocoonの便利な機能を使いこなして、魅力的なホームページを作ってみてください。

次は、ホームページを構成するページには固定ページと投稿ページの2つのページがあります。それぞれのページの違いとホームページを制作する上で私がサイトを制作するうえで最低限必要だと思う5つのページについて解説するので、ぜひ次回の記事も楽しみにしていてください♪

コメント