Cocoon(コクーン)でコーポレートサイトを作ってみよう

ワードプレスは、無料テーマでも有名どころがいくつかありまして、実務でも使用していますので、コーポレートサイトのサンプル作成がてら、作り方をブログに残しておこうかと思います。

コーポレートサイトというのは、ブログではない形のものです。企業のホームページっぽいものを作りたい方の参考になれば嬉しいです!

今回使うテーマは、Cocoon(コクーン)。

公式サイト https://wp-cocoon.com/

”ワードプレス 無料テーマ”などで調べると必ずと言っていいほど、おすすめされているテーマ。

こういう有名なテーマを使うと、何か困ったことがあっても調べれば、大抵解決策が見つかります!

という訳で、実務で使ったことがあり、有名なテーマ、ということでCocoon(コクーン)を使って、ブログではないコーポーレートサイトを作っていきますね。

注意点は、レンタルサーバーの契約やドメイン取得が終わっている、ワードプレスのインストール済み、どんなホームページを作るか決めてあることが前提で、やり方を載せていきます。

ちなみに、無料テーマというと、Lightning(ライトニング)も有名です。よく使ってるので、こちらが終わったら、Lightningでも作ってみようかと思ってます。Lightningの方がかっちりしていて企業向けなイメージです。

目次

コクーンの公式サイトからテーマをダウンロードする

コクーンの公式サイトにダウンロードページがあります。

https://wp-cocoon.com/downloads/

まずは確認から!

このテーマが正常に動くPHPやワードプレスのバージョンも記載されているので、確認しましょう!

PHPは契約しているサーバーのPHPのバージョンです。
私はXサーバーなので、こんな画面です。

バージョンが低い場合は、バージョンアップを。

ワードプレスはインストールして、管理画面に入って、ワードプレスのバージョンを見てください。
左上のアイコンから「Wordpressについて」をクリックすると、こんな画面になります。

こちらもバージョンが低ければ、バージョンアップを。(念の為、バックアップ取ってから)

要件満たしてますね!

ダウンロードします

手順が公式サイトに書いてあるのでそのままですが、親テーマと子テーマをダウンロードしましょう。

子テーマが必要な理由は、子テーマでカスタマイズしていくからです。

親テーマをカスタマイズすると、公式サイトで親テーマのバージョンアップされた時に、カスタマイズ内容が消えてしまうなど、影響が出てしまいます。

これはどのテーマでも同じです。カスタマイズするために子テーマを使いましょう。

ワードプレスにテーマをインストールする

外観のテーマをクリックします。「新規追加」があるので、そちらをクリックします。

「テーマのアップロード」から、Zipファイルのままアップロードします。まずは、親テーマを入れて、次に子テーマを。

最後に、子テーマを有効化します。childと書いてある方です。

外観→テーマを見ると、このようにテーマが入っている状態になります。

Cocoon設定

Cocoon設定というテーマ独自の設定画面があります。

左側にCocoon設定を探しましょう。

設定できる箇所がこんなにありますね。

スキン設定

まずは、スキン設定から。ここでいうスキンは、見た目のデザインですね。

なしにして、ゴリゴリ自分でCSS使ってカスタマイズするもよし、好みのスキンを使うも良しです。

スキンを使ってみようと思いますので、「スキン」のタブをクリック。

いっぱいスキンあります〜。写真(イメージ)アイコンにカーソルを合わせるとプレビューが表示されます。

イメージに合いそうなものを探してみましょう。決まったらそのままクリックするか、左横の丸(ラジオボタン)をクリックすると決定となります。

もちろん何度も変更できますよ。

表示スキンを選択して、保存します。

随時、更新していきますね〜!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次