【Cocoonブログ】トップページをおしゃれにカスタマイズしよう!

Cocoon
 
きりみ
きりみ

こんにちは、

アメリカ在住のきりみです!

 

ブログ運営歴も早4年目となりましたワタクシです。

 

前回は【ブログのアクセス数を上げる方法】を書きました!

今回の記事はブログを始めて【半年から1年以内に見直したいCocoonのカスタマイズ】について書きたいと思います!

 

トップページはブログの顔なので、ここの良しあしでブログの滞在時間も変わってきます。

 

私も実際にその頃にブログのトップページのデザインをいじったら、だいぶ見栄えがよくなったのとPV数も上がったので良かったら参考にしてくださいね!

 

 

ロゴマーク

 

ロゴマークは一番最初に目に入るものなので、ブログに対する印象付けます。

ここがダサいのにオシャレ情報とかの記事だとなんとなく信憑性に欠けますよね。

 

ロゴマークを作るウェブサイトは色々あって、私も何回か無料で試しましたがあまりしっくりくるものはなくて、結局いつも使っている【Canva】で作成したときが一番満足いく仕上がりになりました!

 

 

検索バナーで【ブログ】と入力するだけで、おしゃれなヘッダーのテンプレートがたくさん表示されます。

私のブログのロゴマークは自分で【800×200】サイズで、背景は透過しています。

 

Cocoonのヘッダーは以下で設定しています。

 ヘッダーの表示形式を選択します。

 ページをスクロールしても、ヘッダーが追従してきます。こちらはパソコン環境のみの動作になります。IEでは動作しません。  解説ページ

 ヘッダーの高さをpx数で指定します。モバイル環境ではモバイル用設定のものが利用されます。未入力でデフォルトになります。(最小:0px、最大:800px)

 モバイルでのヘッダーの高さをpx数で指定します。834px以下のタブレット以下の幅の狭い端末用です。未入力でデフォルトになります。(最小:0px、最大:600px)

  

選択中の画像

 ヘッダー部分に表示する画像を設定します。jpg、jpeg、png形式の画像推奨です。

幅:  × 高さ: 

 ロゴの縦横幅を指定します。ロゴのRetina対応などに。サイズ設定が不要の場合は空欄にしてください。「ヘッダーレイアウト」が「センターロゴ」でないと、ロゴサイズの変更までは行われません(AMP用の幅と高さ属性は出力されます)。

 

【高さ】と【高さ(モバイル)】は肝で、私も何度もここは微調整しました。

基本私のブログ読者はモバイルで閲覧されているので、スマホで見たときに一番しっくりくるものを探ったところ【高さ:200、高さ(モバイル):50】になりました。

 

 

カルーセルの設置

 

【カルーセル】とは、ブログロゴマーク下でぐるぐるカルーセルのように回っているこれです。

個人的にこれを設置したとき【手入れされてるブログ感】が増したような気がしますw

 

ちなみにワタクシこのカルーセルという名前を知らず、Cocoonフォーラムで質問させてもらったら一発で解決しました!

 

 

いまでもフォーラムでブログのテコ入れについて質問させてもらうことはよくあって、私のトンチンカンな質問にもちゃんと答えていただけて感謝しています( ;∀;) カンドーシタ

 

 

ボックスメニューで個性を出そう

 

他の方のブログを見て自分のブログでも実装したいと思っていた一つに【ボックスメニュー】の設置があります。

 

 

ここでも無知の私はこれはカテゴリの編集から入るとばっかり思っていましたが、ボックスメニューというんですね(;^ω^)

 

 

【なるべくお金をかけずに個性を出す】が私の中のサイト作成のモットーなのですが、アイコンもなかなか分かりやすくてかわいいものを見つけられたと思います(ドヤッ)

 

 

人気記事の設置

 

人気記事がランキング形式で表示されていると「ふむふむ、こんなのもあるのね。ちょっと見てみようかしら。」と1人当たりのPVが増える傾向にあるようです。

 

私は人気記事の位置はウィジェットの【コンテンツ下部】で内容は以下で設定しています。

 

 

 

まとめ

 

デザインのテコ入れをしてからは、今まで以上に自分のサイトへの愛情が湧きます♡ウフフ

 

人気記事やボックスメニューを設定して【ブログの回遊率】を上げて、もっと読みたいなと思わせるホームページ作りを目指しましょう!!

 

ケチな私の御眼鏡に適った格安サーバー【ロリポップ】はこの広告から申し込めます(‘ω’)ノ

\ ブログの集客数を上げるための基本はコチラ /

 

 

??????? ????? ????(????·????)???????? ??????? ???????????????? ??????? ???????????

COMMENT

メルマガ登録

ブログ最新記事の更新情報を受け取る