ブログで最初にやるべき 外観のカスタマイズ情報 を共有します
1.Cocoon作者の”わいひらさん”が変更を推奨している3つの画像変更
▪ホームイメージ画像の変更
▪NOIMAGE画像の設定
▪ファビコン(サイトアイコン)の設定
2.ヒトデブログさんが動画で紹介しているスキン変更
この二つについて解説しています
ブログ初心者がやるべきCocoonの外観カスタマイズ【画像変更】
![](http://junjunblog.org/wp-content/uploads/2021/04/c342e585a9b31ee9d5386b5fc618c676.jpg)
わいひらさんやヒトデさんが、なぜ変更を推奨や紹介しているか というと、変更すると見やすくなったり個性が出て、初心者っぽさが薄れるからです
特にホームイメージ画像はもろCocoon画像なので、いかにも・・な感じです
それでは画像ですが
画像は変更が推奨されている、ホームイメージ画像、NOIMAGE画像、ファビコン(サイトアイコン)の3つを変更していきます
あとでわかりやすく画像で解説しますので、そちらを見てください
続いてスキンですが
スキンは変更するとサイト全体のデザインをガラッと変えることができます(公式解説)
こちらもあとでわかりやすく解説しています
ホームイメージ画像
自分のサイトを紹介するときに表示される画像です
![](http://junjunblog.org/wp-content/uploads/2021/04/2854fc7c48596788fb303ddecfdfbfef.jpg)
NOIMAGE画像
記事のアイキャッチ画像を設定しなかったときに表示されるサムネイル画像です
初期設定では未設定になっているため、NOIMAGEの文字だけ表示されます
![](http://junjunblog.org/wp-content/uploads/2021/04/318b33b2fa649ebaea7ca8fd84511c81.jpg)
![](http://junjunblog.org/wp-content/uploads/2021/04/3808ea1ed1bb065262ecd1866500f5a1.jpg)
ファビコン
ファビコンはタブの横に表示される画像などです
「ブックマーク」や「スマホのアイコン」で表示されます
![](http://junjunblog.org/wp-content/uploads/2021/04/09e206f5750b6541346a7f1bf563bbe7.jpg)
スキン
変更するだけで外観をガラッと変えることができます
Cocoonには50を超えるスキンがあり、カンタンに自分好みの外観に変えることができます
![](http://junjunblog.org/wp-content/uploads/2021/04/8b8789f06dc43be77b074dae304adee3.jpg)
ホームイメージ画像の変更方法
Cocoon設定 > OGP → ホームイメージ → 画像のアップロード
→変更をまとめて保存
画像サイズ:880px × 660px(デフォルトのサイズ)
公式でサイズの公表をしていないので、デフォルト画像と同じサイズにしておけば問題ないと思います
![](http://junjunblog.org/wp-content/uploads/2021/04/52140ede35c37629d59d1051706f50e4-1.jpg)
デフォルト画像サイズの確認方法
![](http://junjunblog.org/wp-content/uploads/2021/04/946bd93b6ac68fb03947b92f8a26b0ce-559x1024.jpg)
![](http://junjunblog.org/wp-content/uploads/2021/04/44f0bf62cb86cdf8c6d4ec1dbcbbffd6.jpg)
NOIMAGE画像の変更方法
Cocoon設定 > 画像 → NOIMAGE画像 → 選択 →画像をアップロード
→変更をまとめて保存
画像サイズ:横幅 800px~1280px くらいを推奨
設定する画像の注意点として、なるべく大きめの画像を設定することをおすすめします
(Cocoon公式解説)
![](http://junjunblog.org/wp-content/uploads/2021/04/e386e78095ff2f0ea8bc99852242c7f5-1.jpg)
ファビコン(サイトアイコン)画像の変更方法
外観 > カスタマイズ > サイト基本情報 > サイトアイコンを選択 → 画像をアップロード
→変更をまとめて保存
WordPress推奨の画像サイズ:512px × 512px
![](http://junjunblog.org/wp-content/uploads/2021/04/580611192035c600283b0cbf7c8797a9.jpg)
![](http://junjunblog.org/wp-content/uploads/2021/04/ab34a657658fcd2c37be85439b2a887a-1.jpg)
スキンの変更方法
Cocoon設定 > スキン
→変更をまとめて保存
Cocoon設定の中のスキンを選択します
スキン設定→スキン一覧(四角で囲ったところ)の中から、自分好みのスキンを選択していきます
![](http://junjunblog.org/wp-content/uploads/2021/04/a2b4f9556714dc21398b7423b1988017.jpg)
四角で囲ったアイコンに、マウスカーソルを移動すると参考画像が表示されます
公式で記事にまとめているので、より詳細が知りたい人はそちらで見ると楽で便利です
選んだスキンの細部が 自分の好みじゃないこともあるので、私は後悔しないように公式で確認することをオススメします
もしくは、自分でカスタマイズできるようにプログラミング知識をつけるといいです
![](http://junjunblog.org/wp-content/uploads/2021/04/8ccd53fe1103524956d2e6b1b891da64.jpg)
変更を保存すると、プレビューが変更されます
![](http://junjunblog.org/wp-content/uploads/2021/04/7476a116498319ff23db7de8b6f01220-1.jpg)
コメント