WordPressにテーマ「Cocoon(コクーン)」をインストールする(画像付き)

ブログ
スポンサーリンク

こんにちは、サブです。

WordPressの無料で使える人気テーマとして「Cocoon(コクーン)」があります。

今回は、CocoonをWordPressにインストールする手順をまとめます。

スポンサーリンク

Cocoonをダウンロードする

Cocoonの配布サイトにいきます。
https://wp-cocoon.com/

「ダウンロード」をクリックします。

「テーマのダウンロード」のページに来ますので、下にスクロールします。

目次から「親テーマのダウンロード」をクリックします。

「親テーマのダウンロード」の部分に飛びますので、「”Cocoonテーマ”をダウンロード」をクリックします。

「cocoon-master-2.1.2.1.zip」がダウンロードされます。

以上で、Cocoonのダウンロードは完了です。

スポンサーリンク

Cocoonをインストールする

WordPress管理画面から、「外観」>「テーマ」と進みます。

「テーマ」の画面にきますので、「新規追加」をクリックします。

「テーマを追加」の画面にきますので、「テーマのアップロード」をクリックします。

「ZIP 形式のテーマファイルをお持ちの場合、こちらからアップロードしてインストールできます。」と表示されますので、「ファイルを選択」をクリックします。

ファイルの選択画面が出てきますので、先ほどダウンロードした「cocoon-master-2.1.2.1.zip」を選択します。

「今すぐインストール」をクリックします。

インストールが始まるので、少し待ちます。

「テーマのインストールが完了しました。」「翻訳が正常に更新されました。」と表示されれば、インストール完了です。

再び、「外観」>「テーマ」でテーマ画面にいくと、「Cocoon」が追加されていることが確認できます。

Cocoonのパネルにマウスを乗せて、「有効化」をクリックします。

Cocoonが有効化されていることが、確認できます。

ブログを見てみると、テーマが変わっていることが確認できます。

いろいろ嬉しい変化がありましたので、並べていきます。

まず、アイキャッチ画像の上に、カテゴリのバッチが付いています。

前回のテーマでは、このバッチの付け方が分からなかったのですが、Cocoonを入れるだけで簡単に実現できました。

アイキャッチに画像を設定しておくと、記事ページのタイトル下に自動で画像が設定されます。

記事を作るたびに、タイトル下の画像は自分で設定をしていましたが、その手間が省けます。
(ただ、画像が重複したままになってしまうので、手動で設定した方の画像を消していく必要はありそうです)

外部リンクのURLを貼るだけで、カードにして表示してくれます。

他にも、記事編集画面で「文字色」「文字サイズ」「マーカー」など、簡単に装飾ができるようになっています。

まとめ

今回は、人気テーマの「Cocoon」をWordPressにインストールする手順をまとめました。

Cocoonの設定はカスタマイズしていませんが、早くも下記のようなメリットを感じています。

  • アイキャッチ画像の上に、自働でカテゴリのバッチが付く
  • アイキャッチ画像が、記事ページのタイトル下に自働で表示される
  • 外部リンクのURLを貼ると、自動でカード表示にしてくれる
  • 記事編集画面で、文字の装飾が簡単にできる
  • 記事ページのフォントサイズが、見やすいサイズになる
  • 囲み枠・吹き出し・ボタンなどを、簡単に作れる

CSSをカスタマイズしなくても、自動だったり、簡単な操作でいい感じの表示になりますし、設定のカスタマイズなどもありそうですので、少しずつ機能を覚えていきたいです。

下記では、Cocoonの機能を使って簡単に作れる「囲み枠・吹き出し・ボタン」などを、一覧化しています。

コメント

タイトルとURLをコピーしました