前回に引き続きWordpressテーマ『Cocoon』の設定をいじってみます。
Cocoonはとても多機能なテーマなので、混乱してしまうかもしれませんが、利用したい機能だけ利用すれば大丈夫です。
復習：アイキャッチの設定
本題の前に、アイキャッチの設定をおさらいしました。
↓アイキャッチの設定はこちらをご覧ください
復習：スキンの変更
Cocoonにはスキンという機能があって、あらかじめ用意されたデザインを簡単に変更できます。
設定を変更した場合は、 上か下にある（どちらでも同じです） 青い『変更をまとめて保存』ボタンを押します。
アピールエリアの非表示
今回は、トップページの大きな画像『アピールエリア』を非表示にします。
↓Cocoonのアピールエリアの詳細はこちら
ヘッダーの設定
アピールエリアを非表示にした代わりに、ヘッダー画像を設定します。
↓ヘッダー画像の設定方法はこちら
高さに数字を入れることで、お好みの高さにすることもできます。
※モバイルは、スマートフォンで見た時の見栄えです。
画像のメイン部分をヘッダーに入れる場合
たとえばこのような画像があったとします
これをそのままヘッダーにすると、上の部分だけになってしまう場合があります。
それを防ぐには、画像編集ソフトなどであらかじめトリミングしておくと良いです。
画像のトリミングについては次回詳しくやる予定です。
インデックスの設定
インデックスとは、複数の記事を表示するページのことです。トップページ（一番最初のページ）等がそうです。
Cocoonは、そのインデックスの見栄えをおしゃれに変えることができます。
↓インデックスの詳細はこちら
※投稿の一つ一つのことを『カード』と言います。
いろいろカスタマイズして自分だけのブログデザイン
今回習った設定の変更だけでも、無限の組み合わせがあります。いろいろいじってみて自分だけのデザインにしてみましょう。
スマホでの見た目をチェックする
スマートフォンでは、パソコンで見る場合とはまた違った見栄えになります。
スマートフォンでの見栄えを確認するには、自分のスマートフォンでブログを開いてみるほかにも、パソコン上でシミュレーションする方法があります。
Cocoonには便利なシミュレーター（スマホでの見た目を再現する機能）があります。
ログインしている状態でブログの下部に現れる、『レスポンシブテスト』というところをクリックします。
するとこのようにスマートフォンで見た場合のブログの見栄えが再現されます。
パソコンで見て良くても、スマートフォンで見ると見づらい場合もありますので、折にふれ確認してみてください。
まとめ：設定で見栄えが大きく変わる
Cocoonは大変高機能でまだまだ他にも設定箇所がありますが、全部を覚えなくても大丈夫です。
スキンとヘッダー、インデックスを変えるだけでもずいぶんと見た目が変わります。
今回やった部分については、好きに変更してもブログが壊れたりすることはありませんので、安心していろいろさわってみてください。
次回の予定
次回はCocoonの他のWordpressテーマをご紹介します。
今回の復習としてヘッダーの変更もやってみます、画像のトリミングもやってみましょう。