Cocoonを入れたけど、何から手を付ければいいのか、わからないわ。
では、これだけは最初からやっておいたほうがいいって設定をご紹介しますね。
全体
キーカラー
ウェブサイトのイメージに大きく影響する２つの項目
- サイトキーカラー
- サイトキーテキストカラー
を設定しましょう。
上のサンプル図では、牡丹色（ピンク）の部分がサイトキーカラーです。
表や引用部分にも使われていますね。
そして、サイトキーカラー中の文字（「Ｈ２見出し」「カテゴリー」「新着記事」等）の色がサイトキーテキストカラーです。
上のサンプル図では、生成り色（白）を設定しています。
同じく色を設定する項目
- サイトフォントの文字色
- サイト背景色
も合わせて設定しましょう。
いま読まれている文字の色がサイトフォントの文字色、その背景の色がサイト背景色です。
有名どころの文字色を調べてみました。背景色はすべて＃FFFFFFでした。
具体的な色の決め方は、次の記事で紹介します。
サイトフォント
ウェブサイトで使われるサイトフォントの種類と文字サイズ、文字の太さを設定しましょう。
私の場合は、プロのデザイナーさんが運営されている読みやすいブログ（心の師匠）に、見た目が近くなるように設定しました。
変更をまとめて保存 しないと設定が反映されないから、様子を見ながら設定するのがちょっと面倒ね。
当ブログの設定は以下の通りです。
| フォント | 游ゴシック体、ヒラギノ角ゴ |
| 文字サイズ | 16 px |
| 文字の太さ | 500 |
「本文」タブにある行の高さや余白の設定も、読みやすさに影響しますよ。
サイトアイコンフォント
Cocoon では、Font Awesome というサービスを利用して、 これらのような Web アイコンフォントを手軽に使えます。
Font Awesome には異なるバージョンがあり、使用できる無料アイコンの数がちがいます。
Cocoon が正式対応しているのは 5 までですので、Font Awesome 5 に設定しておきましょう。
アイコンを使うと表現力が上がるかも。
ヘッダー
ウェブサイトを開いたときに、最初に表示されるヘッダーに関する設定です。
ヘッダーロゴ
ヘッダーロゴの有無で、ウェブサイトの印象はかなり変わります。
お～いぇ～
ロゴに使用する画像は自分で用意しなければなりません。
シンプルなロゴなら、Canvaで無料で作れます。
タイトル
「タイトル」では、検索エンジンの検索結果に表示させる内容を設定します。
フロントページタイトル
ウェブサイトのフロントページ（トップページ）を検索結果にどう表示させるかを設定します。
設定項目と表示結果の関係は、次のようになります。（検索エンジンの仕様変更で同じになる保証はありませんが。）
さらに、投稿ページ、固定ページ、カテゴリーページ、タグページについても、同様に設定できます。
- フロントページ
- http://ドメイン名 で表示されるウェブサイトのトップページ。
- 投稿ページ
- ブログの記事が掲載されたページ。自動的に時系列に従って表示される。
- 固定ページ
- プライバシーポリシーや免責事項、問い合わせフォームなど、時系列に関係なく常に表示する必要がある情報に使用する。
- カテゴリーページ
- カテゴリー名をクリックしたときに表示されるページ。
WordPressの管理画面＞投稿＞カテゴリーで表示されるカテゴリーの一覧から、各カテゴリーの「編集」をクリックすると、カテゴリーページの編集ができる。 - タグページ
- タグをクリックしたときに表示されるページ。
カテゴリーページ同様、WordPressの管理画面＞投稿＞タグからタグページの編集ができる。
OGP
TwitterやFacebookにウェブサイトへのリンクを貼ったときに表示されるカードに関する設定です。
デフォルトのままだと、Cocoonの画像が表示されてしまいます。
あたしにピッタリの画像に替えるわ！
ホームイメージ
ホームイメージとして登録した画像がカードに使われます。
サマリーカードに使用される画像の要件は、Twitterの公式サイトによると次の通りです。
| サマリーカード | サマリーカード大 | |
|---|---|---|
| アスペクト比 | １：１ | ２：１ |
| 画像サイズ | 最小 144×144px 最大 4096×4096px | 最小 300×157px 最大 4096×4096px |
| サイズ | ５MB未満 | ５MB未満 |
| ファイル形式 | JPG, PNG, WEBP, GIF | JPG, PNG, WEBP, GIF |
Facebookの推奨する画像の要件は、公式サイトによると次のようになります。
| アスペクト比 | 1.91：１ |
| 画像サイズ | 最小 600×315px 1200×630px 以上推奨 |
| ファイルサイズ | 8 MB以下 |
| ファイル形式 | PNG |
これら２つの要件を満たす、お勧めの様式はこれです！
| 画像サイズ | 1200×630px |
| ファイルサイズ | 5 MB未満 |
| ファイル形式 | PNG |
画像サイズは1,200×630px（1.91：１）で、正方形（１：１）にカットされた場合を意識してデザインします。
ちょっと地味だったかしら。
……イエ、ステキデス。
本文
ここでは、行間や段落間の余白の大きさを設定します。
本文余白
当ブログの設定は以下の通りです。
| 行の高さ | 1.8 |
| 行の余白 | 1.4 em |
読者数の多いウェブメディアなんかを参考にするといいかもしれないわね。
し、仕事を増やすようなことを……で、調べてみました。
| WIRED.jp | GIGAZINE | CNET | Lifehacker | BuzzFeed | |
|---|---|---|---|---|---|
| 日本語フォント | 游ゴシック体 Medium | メイリオ | Meiryo UI | Yu Gothic | Meiryo |
| 欧文フォント | Helvetica | Segoe UI | Proxima Nova | ||
| 文字サイズ (px) | 16 | 16 | 18 | 17.5 | 18 |
| 文字の太さ | 400 | 400 | 400 | 400 | 400 |
| 行の高さ | 1.75 | 1.6 | 1.6 | 1.9 | 1.5 |
| 行の余白 (em) | 1.0 | 0 | 1.1 | 1.7 | 1.3 |
他にも記事の書き方とか、図や写真の使い方とか、いろいろ参考になると思います。
投稿関連情報
投稿記事の最後に投稿者名を表示すると、そのリンクアドレスからログインＩＤがわかってしまいます。
ログインＩＤを晒したくなければ、「投稿者名の表示」のチェックを外しておきましょう。
Cocoonテーマのインストールのときも、同じこと言ってたわね。
念のためです、念のため。
コード
Cocoonのカスタマイズの記事等で、HTMLやCSSなどプログラムのソースコードを掲載する人は、ここで表示方法をカスタマイズできます。
ブロックエディターでコードブロックを使用すると、ソースコードがハイライト表示されます。
/*** ブログカードのカスタマイズ ***/
.internal-blogcard-footer{
display: none; /* 内部ブログカードのアイコンとURLを非表示 */
}
.blogcard-type .blogcard-label {
background-color: var(--my-white-color); /* ラベルの背景色 */
color: var(--my-black-color); /* ラベルの文字色 */
}あたしには関係なさそうね。
いえ、実はこのハイライト表示ですが、デフォルトのままだと「整形済みテキスト」「詩」の両ブロックにも影響があります。
「ハイライト表示するCSSセレクタ」の設定を、次のように書き換えてください。
.entry-content pre:not(.wp-block-preformatted):not(.wp-block-verse)
デフォルトの「.entry-content pre」に、整形済みテキストブロック「.wp-block-preformatted」と詩ブロック「.wp-block-verse」の除外指定を追加した形になっています。
エディター
よく使う色をエディターのカラーパレットに登録できます。
拡張カラーパレット色
ウェブサイトの配色を決めたら、色をここに登録しておきましょう。
サイトキーカラーは１番目に自動で登録されます。
ここでは拡張色として６色登録できます。
「全体」タブの設定のときに決めたサイトフォントの文字色、サイト背景色に加えて、サイトキーカラーの補色に相当するアクセントカラーなどを登録するとよいでしょう。
注意点が１つあります！
なので、拡張色Ａ～Ｆには機能別に色を割り振ることをおすすめします。
あ～、なるほど、わからん。
た、例えばこういうことです。
これなら後でガラリと配色を変えたくなった時も、それぞれの色の役割ごとに拡張色を変更すれば、過去の記事も色崩壊しにくくなります。
なるほどね～
メディア設定
WordPressに画像をアップロードすると、オリジナル画像とは別に、メディア設定に登録した大きさにリサイズされた画像が自動生成されます。
サムネイルのサイズ、中サイズ、大サイズの３種類です。
記事の編集時に、どの画像サイズで表示するかを選びます。
フルサイズは、アップロードした元の画像の大きさです。
ただ、Cocoonテーマのデフォルトの最大表示幅は800pxなので、それより大きい画像はフルサイズを選んでも800pxに縮小表示されます。
このメディア設定はブログの表示速度に影響します。
表示が遅いブログは読者を逃すって聞いたわ。
画像が小さいほど、数が少ないほど表示速度は上がります。
だけど、画像が見づらく、記事がわかりにくくなったのでは本末転倒です。
Cocoonテーマの作者わいひらさんのおすすめ設定は次の通り。
- サムネイルのサイズ：幅 300、高さ 0
- 中サイズ：幅の上限 500、高さの上限 0
- 大サイズ：幅の上限 800、高さの上限 0
高さの値を０にすると、画像の縦横の比率を維持したまま、高さ無制限で横幅だけを基準に縮小されます。
私は次のように設定しています。
私は画像はほとんど大サイズで掲載しています。
幅が800未満の小さい画像はフルサイズを指定しています。
サムネイルのサイズは使用しないので、幅と高さを両方とも０にして画像を生成しないようにしています。
生成しないとサーバーの容量をちょっと節約できるのね。
まとめ
以上、Cocoonの最初にやっておきたい知っておきたい設定でした。
これ以外にも、まだまだ設定項目はあるわよ？
確かにそうなんですが、何より大事なのはコンテンツ！ WordPressの下準備は終わったので、どんどん記事を書いてください。
そうね。あたしのブログで世界を震撼させるわ！
