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

ブログ

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

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

おかっぱ
おかっぱ

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

この記事で分かること
  1. スキンの設定
  2. 記事を二つに分割して表示させる方法と注意点
  3. ヘッダーロゴの設定について

スポンサーリンク

スキンの設定

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

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

そうすると

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

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

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

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

スポンサーリンク

記事を二つに分割して表示させる方法と注意点

おかっぱ
おかっぱ

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

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

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

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

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

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

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

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

ヘッダーロゴの設定について

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

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

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

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

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

商用利用も可能です!

ロゴメーカー | 【商用利用OK】無料で誰でも簡単に自分のショップのロゴが作れる
商用利用可能なロゴが誰でも簡単に無料で作れるサービスです。

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

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

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

すると

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

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

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

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

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

お疲れ様でした!!

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

コメント

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