今日はブログ作成で外観カスタマイズにおすすめな項目と画像サイズをご紹介します。
それでは早速、ご紹介していきましょう！
※Cocoon（コクーン）のテーマで解説
外観カスタマイズ
外観カスタマイズとはブログの見た目、デザインを自分好みにしよう！ということです。
何も設定していないと下記のような殺風景のデザインになっていると思います。
これをひとまず、こんな感じにしていきましょう。
今回は最初の外観カスタマイズにおすすめな項目として下記の４つをご紹介します。
- スキンの設定
- ヘッダーに画像設定
- NO IMAGE画像の設定
- サイトアイコンの設定
スキンの設定
「スキン」はブログのデザインを簡単に変更できるCocoon（コクーン）の機能です。
他のテーマだと「テンプレート」と呼ばれたりします。
まずは、WordPressの「Cocoon設定」＞「スキン」をクリック。
「スキン一覧」からお好みのデザインを確認して選択。
※デザインは上記の赤枠部分にマウスを合わせると確認できます。
一番下にいって「変更をまとめて保存」をクリックでOKです。
※「変更をまとめて保存」のクリック忘れが多いので注意。
そうすると殺風景なブログから一変して、下記画像のように一気にそれっぽくなります。
ヘッダー画像の設定と画像サイズ
ブログの中で一番目につきやすいヘッダー部分に画像を設定してオリジナリティを出しましょう。
まずは設定する画像を準備してください。
画像サイズは横1280×縦150がいいと思います。
ここら辺は実際に設定しながら、調整していきましょう。
なお、PC画面だけでなくスマホ画面での表示も必ずチェックしてください。
画像が準備できたら、WordPress「Cocoon設定」＞「ヘッダー」をクリック。
下に行って「ヘッダーのロゴ」から「選択」をクリック。（赤枠）
※今回はロゴの画像化でお話しますが、「ヘッダー背景画像」の設定でもOKです。（青枠）
下記赤枠のように「ファイルをアップロード」をクリック。
下記赤枠のように「ファイルを選択」をクリック。
※ここに画像をドラッグ＆ドロップでもOK
準備しておいた画像をクリック。
※ファイル名は何でもいいです。（私は「header_logo01」などにしています。）
準備した画像を選択し、右下の「画像を選択」をクリック。
「ヘッダーロゴ」に画像が設定されていることを確認。
※キャッチフレーズの配置も調整可能（青枠）
一番下にいって「変更をまとめて保存」をクリックでOKです。
※「変更をまとめて保存」のクリック忘れが多いので注意。
そうするとヘッダーに画像が設定されます。（赤枠）
※緑枠部分がキャッチフレーズ
NO IMAGE画像の設定と画像サイズ
アイキャッチ画像（リンクや記事の最初に表示される画像）などが設定されていない時。
「NO IMAGE」という殺風景な画像が表示されてしまいます。
それを防止するため、「NO IMAGE画像」を設定しましょう。
まずは設定する画像を準備します。
画像サイズは横640×縦360がいいと思います。
これはワイドスクリーンに対応した画像比率16:9から算出しています。
パソコンでもスマホでもちょうどいい大きさになるはずです。
※余談ですが、横640×縦480の画像比率4:3の場合も多いです。
画像が準備できたら、WordPress「Cocoon設定」＞「画像」をクリック。
一番下の「NO IMAGE画像」に画像を設定します。
設定方法はヘッダー画像と同様です。
※Cocoonのロゴ画像が設定されている場合は「クリア」をクリックしてから設定
赤枠の「変更をまとめて保存」をクリックも忘れずに。
※クリック忘れが多いので注意。
そうすると「NO IMAGE画像」が設定されます。（赤枠）
記事を投稿していない段階だと表示されませんが、設定はこれで完了です。
なお、この「NO IMAGE画像」はブログのトップページのリンクで表示される画像にもなります。
そのため、画像に文章を載せる際は「NO IMAGE」よりブログ名などの方がいいと思います。
サイトアイコンの設定と画像サイズ
細かい部分ですが、サイトアイコンも設定してオリジナリティを出しましょう。
下記画像の左上の赤枠部分です。
※設定しないと青枠のようにWordPressのアイコンになっていると思います。
まずはアイコン画像を準備します。
画像サイズは横512×縦512が推奨されています。
画像が準備できたら、WordPress「外観」＞「カスタマイズ」をクリック。
「サイト基本情報」をクリック。
「サイトアイコンを選択」をクリックして、画像を設定します。
設定方法はヘッダー画像などと同様です。
画像が設定されたことを確認し、上の「公開」をクリック。
※「公開」のクリック忘れにご注意！クリックしたら画像のように「公開済み」になります。
以上でサイトアイコンの設定は完了です。