前回に引き続きWordpressテーマ『Cocoon』の設定をいじってみます。

Cocoonはとても多機能なテーマなので、混乱してしまうかもしれませんが、利用したい機能だけ利用すれば大丈夫です。
復習:アイキャッチの設定
本題の前に、アイキャッチの設定をおさらいしました。
↓アイキャッチの設定はこちらをご覧ください

復習:スキンの変更
Cocoonにはスキンという機能があって、あらかじめ用意されたデザインを簡単に変更できます。

設定を変更した場合は、 上か下にある(どちらでも同じです) 青い『変更をまとめて保存』ボタンを押します。
アピールエリアの非表示
今回は、トップページの大きな画像『アピールエリア』を非表示にします。

↓Cocoonのアピールエリアの詳細はこちら

ヘッダーの設定
アピールエリアを非表示にした代わりに、ヘッダー画像を設定します。
↓ヘッダー画像の設定方法はこちら


高さに数字を入れることで、お好みの高さにすることもできます。
※モバイルは、スマートフォンで見た時の見栄えです。
画像のメイン部分をヘッダーに入れる場合
たとえばこのような画像があったとします

これをそのままヘッダーにすると、上の部分だけになってしまう場合があります。

それを防ぐには、画像編集ソフトなどであらかじめトリミングしておくと良いです。

画像のトリミングについては次回詳しくやる予定です。
インデックスの設定
インデックスとは、複数の記事を表示するページのことです。トップページ(一番最初のページ)等がそうです。
Cocoonは、そのインデックスの見栄えをおしゃれに変えることができます。
↓インデックスの詳細はこちら

※投稿の一つ一つのことを『カード』と言います。
いろいろカスタマイズして自分だけのブログデザイン

今回習った設定の変更だけでも、無限の組み合わせがあります。いろいろいじってみて自分だけのデザインにしてみましょう。
スマホでの見た目をチェックする
スマートフォンでは、パソコンで見る場合とはまた違った見栄えになります。
スマートフォンでの見栄えを確認するには、自分のスマートフォンでブログを開いてみるほかにも、パソコン上でシミュレーションする方法があります。
Cocoonには便利なシミュレーター(スマホでの見た目を再現する機能)があります。

ログインしている状態でブログの下部に現れる、『レスポンシブテスト』というところをクリックします。

するとこのようにスマートフォンで見た場合のブログの見栄えが再現されます。
パソコンで見て良くても、スマートフォンで見ると見づらい場合もありますので、折にふれ確認してみてください。
まとめ:設定で見栄えが大きく変わる
Cocoonは大変高機能でまだまだ他にも設定箇所がありますが、全部を覚えなくても大丈夫です。
スキンとヘッダー、インデックスを変えるだけでもずいぶんと見た目が変わります。
今回やった部分については、好きに変更してもブログが壊れたりすることはありませんので、安心していろいろさわってみてください。
次回の予定
次回はCocoonの他のWordpressテーマをご紹介します。
今回の復習としてヘッダーの変更もやってみます、画像のトリミングもやってみましょう。