【Cocoonトップページの外観設定】スキン・記事の2分割・ヘッダーロゴの設定

ブログを始めたばかりの方は、Cocoonテーマを利用している方が多いと思います。

Cocoonテーマでも設定すればサイトの外観がよくなります。

おかっぱ

この記事では何が分かるの？

この記事で分かること

スキンの設定

まずはwordpressの管理画面を開いて

Cocoon設定をクリックしてください。

そうすると

Cocoonの設定画面が出てきます。

そして、スキン設定から自分の好きなスキンを選んでください。

ちなみにこのサイトのスキンはVeilnui Simplog(blue)を使っています。

記事を2分割にして表示させる方法の時に詳しく触れますが、スキンによっては2分割にできないものがあるので注意してください！

おかっぱ

記事を2分割にするってどういうこと？

トップページの記事の表示を2分割にするとスマートフォンでは次のように表示されます。

このように分割して表示させたい場合は先ほどのCocoon設定のインデックスをクリックしてください。

下にスクロールしていくとカードタイプの設定があります。

縦側カード2列に設定して、変更をまとめて保存で完了です。

この時の注意点は、スキンによってカードタイプの変更が制御されていることがあることです。

カードタイプの変更が制御されているスキンではトップページの記事の表示を2分割することができないので、スキンを変更してもう一度試してみてください。

このサイトのスキンVeilnui Simplog(blue)では2分割表示が可能なので迷ったらVeilnui Simplogのシリーズにしてみましょう。

最後にヘッダーロゴの設定です。

Cocoon設定のヘッダーをクリックしてください。

下にスクロールするとこのような画面が表示されます。

ヘッダーロゴは画像（png）で登録するのがおすすめです。

ヘッダーロゴの作成はロゴメーカーというサイトで簡単に作成できます。

商用利用も可能です！

↑のリンクから飛べます。

では、ヘッダーロゴを作っていきましょう！！

まずは、ここのショップ名の所にヘッダーに表示したい自分のブログの名前などを入力してください。

すると

こんな画面がでてきてロゴを作ることができます。

出来上がったら、完成させるボタンを押して小さいサイズ、png(透過)で保存しましょう。

保存が完了したら、先ほどのCocoonヘッダー設定画面に戻ってヘッダーロゴの選択をクリックしてください。

先ほど保存した画像をアップロードして変更をまとめて保存で完了です。

簡単なCocoonのトップページの設定は以上です。

お疲れ様でした！！

【あわせて読みたい記事】