9月10日の内容『Cocoon設定』いろいろ

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

Cocoonはとても多機能なテーマなので、混乱してしまうかもしれませんが、利用したい機能だけ利用すれば大丈夫です。

復習:アイキャッチの設定

本題の前に、アイキャッチの設定をおさらいしました。

↓アイキャッチの設定はこちらをご覧ください

アイキャッチの設定 | ゼロからはじめるWordpress入門

復習:スキンの変更

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

設定を変更した場合は、 上か下にある(どちらでも同じです) 青い『変更をまとめて保存』ボタンを押します。

アピールエリアの非表示

今回は、トップページの大きな画像『アピールエリア』を非表示にします。

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

ヘッダー下アピールエリアの使い方
ヘッダー下の目立つ位置で歌いたい事柄や誘導したいページがある場合は、アピールエリアを利用してみてください。

ヘッダーの設定

アピールエリアを非表示にした代わりに、ヘッダー画像を設定します。

↓ヘッダー画像の設定方法はこちら

ヘッダーの背景画像を変更する方法
ヘッダーの背景画像設定の方法です。背景画像の固定機能もあります。

高さに数字を入れることで、お好みの高さにすることもできます。
※モバイルは、スマートフォンで見た時の見栄えです。

画像のメイン部分をヘッダーに入れる場合

たとえばこのような画像があったとします

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

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

画像のトリミングについては次回詳しくやる予定です。

インデックスの設定

インデックスとは、複数の記事を表示するページのことです。トップページ(一番最初のページ)等がそうです。

Cocoonは、そのインデックスの見栄えをおしゃれに変えることができます。

↓インデックスの詳細はこちら

エントリーカードの設定方法(一覧ページのカードの種類)
インデックスページ(一覧ページ)のカードスタイルの見本です。スタイルの変更方法も。

※投稿の一つ一つのことを『カード』と言います。

いろいろカスタマイズして自分だけのブログデザイン

今回習った設定の変更だけでも、無限の組み合わせがあります。いろいろいじってみて自分だけのデザインにしてみましょう。

スマホでの見た目をチェックする

スマートフォンでは、パソコンで見る場合とはまた違った見栄えになります。

スマートフォンでの見栄えを確認するには、自分のスマートフォンでブログを開いてみるほかにも、パソコン上でシミュレーションする方法があります。

Cocoonには便利なシミュレーター(スマホでの見た目を再現する機能)があります。

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

するとこのようにスマートフォンで見た場合のブログの見栄えが再現されます。

パソコンで見て良くても、スマートフォンで見ると見づらい場合もありますので、折にふれ確認してみてください。

まとめ:設定で見栄えが大きく変わる

Cocoonは大変高機能でまだまだ他にも設定箇所がありますが、全部を覚えなくても大丈夫です。

スキンとヘッダー、インデックスを変えるだけでもずいぶんと見た目が変わります。

今回やった部分については、好きに変更してもブログが壊れたりすることはありませんので、安心していろいろさわってみてください。

次回の予定

次回はCocoonの他のWordpressテーマをご紹介します。

今回の復習としてヘッダーの変更もやってみます、画像のトリミングもやってみましょう。

タイトルとURLをコピーしました