インストール時に設定されているデザインを変更する必要がない場合、このページの作業は不要です。
Cocoonにはスキン機能(サイト全体のデザインを着せ替えのように変更できる機能)があります。
外観を変更するにはスキン機能を使用するほか、パーツごとに背景色や文字色を細かく指定する方法があります。
両方を組み合わせてオリジナルのデザインにすることも可能です。
スキンを変更する方法
STEP1:WordPressメニューからCocoon設定をクリック
スキンタブが選択されていることを確認してください。
STEP2:スキンを選択
設定したいスキンのラジオボタンを選択してください。
- スキン名の左にあるアイコンにマウスカーソルを乗せるとプレビュー画像を確認できます。
- スキン名をクリックするとスキン紹介のページが開きます。
STEP3:「変更をまとめて保存」をクリック
スキンが反映されますのでプレビューや実際のサイトで表示を確認してください。
※ インストール直後はナビや見出しの文字色が白に設定されていますので、背景が白系のスキンでは文字が見えにくい場合があります。
その場合はこのあとのパーツごとに設定する方法でテキストの色を変更してください。
パーツごとに設定する方法
STEP1:WordPressメニューからCocoon設定をクリック
STEP2:「全体」タブをクリック
STEP3:サイトキーカラー欄の「色を選択」をクリック
色選択が表示されますので、お好みの色をクリックしてください。
STEP4:「変更をまとめて保存」をクリック
サイトキーカラーで設定した色が見出しや画像内のカテゴリーラベルなどに反映されます。
(下の画像で赤くなっているところに、ご自身で選択した色が反映されます。)
同様にヘッダータブ・フッタータブなどで変更したいパーツの背景やテキストの色を変更できます。
背景や文字色以外の設定につきましてはCocoon公式サイトのマニュアルをご参照下さい。
ウィジェットの設定
一部のパーツはWordPressのウィジェット機能で配置されています。
(ウィジェット機能とは、用意されたパーツを特定の位置に表示できる機能です)
ヘッダーロゴの両脇にあるSNSアイコンやサイト内検索、サイドバーにあるプロフィールなどはすべてウィジェットで配置されています。
WordPressの外観>ウィジェットでも変更ができますが、慣れるまでは決定前に表示を確認できる外観プレビューを使用した変更をおすすめします。
外観プレビューでウィジェットを編集する手順は下記のとおりです。
STEP1:WordPressメニューから外観>カスタマイズをクリック
STEP2:プレビュー画面の左側のメニューから「ウィジェット」をクリック
配置場所のリストが表示されます。
リストから配置場所の名前をクリックすると、下のような詳細画面が表示されます。
追加・削除・順番の変更などの作業はこの画面から始めてください。
ウィジェットを追加する
ここでは人気記事を自動表示するウィジェットを追加します。
STEP1:ウィジェットを追加ボタンをクリック
STEP2:リストから「人気の投稿とページ(Jetpack)」を探してクリック
STEP3:「固定ページ」のチェックを外し、「適用」ボタンをクリック
設定したウィジェットがプレビューに追加されますので、タイトルや表示件数などをお好みで調整してください。(実際のサイトはまだ更新されません)
※ タイトル下に「表示する人気の記事がありません。」で始まる文章が表示される場合がありますが、この文章はサイト訪問者には表示されません。
STEP4:公開ボタンをクリック
公開ボタンを押すと実際のサイトにも変更が反映されます。
不要なウィジェットを削除する
STEP1:削除したいウィジェットの三角をクリック
STEP2:削除をクリック
プレビューが更新されます。(実際のサイトはまだ更新されません)
STEP3:公開ボタンをクリック
公開ボタンを押すと実際のサイトにも変更が反映されます。
ウィジェットの順番を変更する
ドラッグで並べ替えるとプレビューが更新されます。(実際のサイトはまだ更新されません)
公開ボタンを押すと実際のサイトにも変更が反映されます。
サイトアイコン(ファビコン)の設定
サイトアイコンはブラウザのタブやブックマーク、検索結果などで使用されるアイコンです。
※ 縦横512ピクセル以上の画像を事前にご準備ください。
※ 設定変更後のサイト表示に反映されない場合はブラウザのキャッシュをクリアしていただき、再度表示をご確認ください。
STEP1:WordPressメニューから外観>カスタマイズを開く
STEP2:「サイト基本情報」をクリック
STEP3:「サイトアイコンを選択」をクリック
STEP4:画像を選択
ファビコン用の画像がアップロードされていない場合は「ファイルをアップロード」をクリックしてアップロードするか、画像一覧に画像ファイルをドラッグすることでアップロードしてください。
アップロード後、使用したい画像をクリックしてチェックマークがついたことを確認の上、選択ボタンをクリックします。
STEP5:画像の使用範囲を指定して切り抜き
画像上の点線をドラッグするとサイズ変更ができます。
画像上でカーソルが十字の矢印に変わるところでドラッグすると、選択範囲の移動が可能です。
右側に表示されるプレビューを確認しながら調整し、最後に「画像切り抜き」をクリックします。
※ もともとの画像が小さすぎる場合はそれ以上の縮小はできません。
STEP6:公開ボタンをクリック
以上でデザイン設定は終了です。