この記事では
- cocoonのダウンロード方法を知りたい
- cocoonでホームページ(サイト)を始めたけど、デザインをどうして良いかわからない…
- こだわりたいわけじゃないけど、「ピアノ教室の魅力が伝わるデザイン」にしたい…
そんな方のために、Cocoonを使ってホームページ(サイト)を30分で「ピアノ教室の魅力が伝わる」デザインにカスタマイズする方法を、画像付きでわかりやすく解説します。
Cocoonのダウンロード方法
まずは「Cocoonの公式ページ」から、テーマファイルをダウンロードします。
Cocoon公式ページトップにある、「ダウンロード」をクリックします。
下にスクロールし、「”Cocooテーマ”をダウンロード」をクリックし、親テーマをダウンロードします。
さらに下にスクロールし、「”Cocoon子テーマ”をダウンロード」をクリックして、子テーマをダウンロードします。
WordPressのダッシュボードにアクセスし、
「外観」→「テーマ」→「新規追加」とクリックします。
「ファイルを選択」をクリックし、
先ほどダウンロードした、「Cocoon親テーマ」をアップロードします。
「Cocoon親テーマ」は上記のように「child」と記載のないファイルです。
ファイルを選択できたら、「今すぐダウンロード」をクリックします。
その後、「有効化」をクリックします。
再びテーマページから「新規追加」をクリックします。
「ファイルを選択」をクリックし、
先ほどダウンロードした、「Cocoon子テーマ」をアップロードします。
「Cocoon子テーマ」は上記のように「child」と記載のあるファイルです。
ファイルを選択できたら、「今すぐダウンロード」をクリックします。
その後、「有効化」をクリックします。
これでCocoonのテーマのダウンロードは完了です。
サイトにアクセスすると、
こんな感じでCocoonのテーマでカスタマイズされたサイトが表示されるはずです。
逆に親テーマでカスタマイズしていると、アップデートした時にサイトのデザインやカスタマイズ内容が消えてしまいます！
Cocoonのデザインを変更、カスタマイズする
さらにオシャレで便利なデザインにカスタマイズするために、
これからCocoonaのデザインのカスタマイズ方法を説明します。
スキンの設定
「Cocoon設定」→「スキン」とクリックします。
下にスクロールしていくと、上記のようにスキン一覧が表示されます。
これらのスキンを適用することで、自分のホームページ(サイト)・サイトが選択したスキンと同じデザインに変更されます。
写真マークをクリックすると、スキンデザインのサンプルを見られます！
好きなスキンを選択した後に下にスクロールし、
「変更をまとめて保存」をクリックします。
その後、自分のサイトを表示してみると、こんな感じでデザインが適用されます。
ヘッダー画像を入れる
ホームページ(サイト)をパッと見オシャレにする方法はヘッダー画像を入れることです。
今回は無料素材を利用して、ヘッダー画像を挿入する方法を解説します。
ちなみに無料素材はおすすめフリー素材記事でも紹介した「ODAN」というサイトで取得できます。
好きな画像を見つけたら、そちらを選択し、
画像右の「Free Download」をクリックします。
「1280 × 816」を選択し、「DownLoad」をクリックします。
他の大きさでも大丈夫ですが、大体1280くらいがちょうどいいです！
認証画面で適切な画像を選択し、
「Download」をクリックして画像をダウンロードします。
次にこちらの画像をヘッダーに反映します。
「Cocoon設定」→「ヘッダー」をクリックします。
「ヘッダー背景画像」の「選択」をクリックします。
「ファイルを選択」をクリックして、画像をアップロードします。
その後、下にスクロールし、
「変更をまとめて保存」をクリックします。
サイトを表示してみると、
上記のような形でヘッダー画像が適用されているのが確認できます。
ちなみにヘッダーの縦幅を調整したい場合は、
上記「高さ」に数値を入力することで調整可能です。
スマホのデザインにも反映したい場合は、高さ(モバイル)にも数値を入力しましょう
また、上記のようなサイトのキャッチフレーズを削除したい場合は、
「キャッチフレーズの配置」で「表示しない」を選択することで非表示にできます。
ヘッダー画像はサイトの看板で、デザイン的にはとっても重要です。
個人的にデフォルトの文字はあまり格好良くないので、
- Canva
- ロゴメーカー
などを使って自身で文字入りヘッダー画像を作成するのがオススメです。
ココナラなどのサービスで、有料で作ってもらうこともできます！
サイドバーのメタ情報の削除
次にサイドバーを調整します。
上記のメタ情報はデフォルトで設定されていますが、必要ありません。
管理者情報のため、プライバシーの観点からも、削除することをおすすめします。
WordPressの左メニューから、「外観」→「ウィジェット」とクリックします。
「サイドバースクロール追従」をクリックします。
「メタ情報」をクリックします。
削除をクリックすることで、サイドバーの「メタ情報」の削除が完了です。
サイドバータイトルの英語表記を日本語表記に変える方法
サイドバータイトルはデフォルトだと英語表記になっています。
こちらを日本語に変更します。
「外観」 → 「ウィジェット」とクリックします。
サイドバーをクリックすると、
上記のように「ブロック」が表示されます。
この「ブロック」のままだと、日本語表記に変えられません。
したがって、これからブロックを削除して作り変えます
サイドバーの中にある「ブロック」をクリックします。
そして「削除」をクリックします。
サイドバー内のブロックを全て削除し、
サイドバースクロール追従にあるブロックも、同様に削除します。
その後、欲しいメニューを選び、右のサイドバーや「サイドスクロール追従」にドラッグ&ドロップします。
例えば「検索」メニューが欲しい場合は、左のウィジェットから「検索」を見つけてサイドバーにドラッグ&ドロップし、
タイトルに「検索」と入力して「保存」をクリックします
同様に、「サイドバー」に
- 最近の投稿
- 最近のコメント
を、「サイドバースクロール追従」に
- アーカイブ
- カテゴリー
を設定すると、
上記のように日本語表記に変更することができます。
グローバルメニューを作る
続いては当サイト(carpe diem)にもあるような、メニューバーを作成します。
グローバルメニュー用の、カテゴリーを作成していないという方は、
WordPressダッシュボードから「投稿」 → 「カテゴリー」 とクリックし、
カテゴリー名を入力して「新規カテゴリーを追加」をクリックすることで、簡単にカテゴリーを作成できます。
カテゴリーは後から変更もできるから、仮でも大丈夫です！
WordPressのダッシュボードから、「外観」→「メニュー」とクリックします。
メニュー名を自由に入力します。
今回は「グローバルナビゲーション」とします。
メニュー名を入力し終えたら、「メニューを作成」をクリックします。
その後、画面左の「メニュー項目を追加」の欄から、
メニューに入れたい項目を選択し、「メニューに追加」をクリックして、メニューに追加します。
ちなみにメニューの項目は、
- 固定ページ
- 投稿
- カスタムリンク
- カテゴリー
などから自由に追加できます。
カスタムリンクを使えば、好きなページとリンク文字列を、個別で指定できます！
メニュー項目は上記のように、ドラッグ移動させて順番を変えることを可能です。
(一番上がメニュー左、一番下がメニュー右)
選択し終えたら、「ヘッダーメニュー」にチェックを入れて、「メニューの保存」をクリックします。
サイトを表示してみると、こんな感じで、ヘッダー画像下にメニューが表示されます。
ちなみにメニューは、上記のように少し後ろ側にずらしてメニューを保存すると、
上記のようにプルダウン型の階層メニューを作成可能です。
ピックアップコンテンツ(おすすめカード)を作る
続いては当サイト(carpe diem)にあるような「ピックアップコンテンツ」(おすすめカード)を作成します。
ピックアップコンテンツはデザイン上、4つがおすすめです。
事前にコンテンツを考えておきましょう♪
WordPressのダッシュボードから、「外観」→「メニュー」とクリックします。
「新しいメニューを作成しましょう」をクリックします。
メニュー名を自由に入力します。
今回は「ピックアップ」と名前をつけます。
入力し終えたら、「メニューを作成」をクリックします。
ピックアップコンテンツに追加したいメニュー項目を選択し、「メニューに追加」をクリックします。
その後、反映されたメニュー項目を好きな順番に並べ替え、
「メニューの保存」をクリックします。
今回は「メニュー設定」には何もチェックを入れなくても問題ありません。
その後、WordPress左メニューの「Cocoon設定」をクリックし、
「おすすめカード」をクリックします。
「おすすめカードの表示」部分で全ページで表示を選択します。
メニュー選択でピックアップを選択し、表示スタイルで好きな表示方法を選択します。
カード余白、カードエリア余白は完成イメージに合わせて調節しましょう！
最後に「変更をまとめて保存」をクリックします。
サイトを見てみると、上記のような感じで、ピックアップコンテンツが表示されていると思います。
画像にはアイキャッチ画像が自動的に反映されます！
まとめ：オシャレにカスタマイズして、ホームページ(サイト)を運営しよう！
このように、無料テーマ「Cocoon」を利用すればオシャレなサイトを簡単に作ることができます。
今回の内容は１時間もあれば行えます。
ぜひカスタマイズして、おしゃれなサイト・ホームページ(サイト)を作ってみましょう。
コメント