今回は、WordPressのブログデザイン『Cocoon』のカスタマイズ方法についてまとめていきたいと思います。私が実際にカスタマイズした内容についてまとめていきますので、参考にしてみてください。
・Cocoonのオススメ基本設定
・Cocoonのカスタマイズ
見た目が変わることで、サイト全体が見やすくなるので、自分好みにカスタマイズすることがオススメです。私が、実際に取り組んできたことを紹介していきたいと思いますので、是非参考にしてみてください。
Googleアドセンスの合格を目指すならこちらを参考にしてみてください。
Cocoonの基本設定
CocoonChildの有効化
まずは、テーマの設定をします。Xserverで契約したときにダウンロードした子テーマの『CocoonChild』をデザインに反映させます。WordPress管理画面の「外観」→「テーマ」から「CocoonChild」が有効化されているか確認します。
ブログを表示すると、デフォルトのシンプルなデザインになっています。
スキンの設定
Cocoonでは「スキン」機能があり、好きなデザインをクリック1つで実装することができます。
私のサイトのカスタマイズでは、スキンの「カラフルライン」を実装しています。
１．WordPressメニューから「Cocoon設定」を開き、表示されたページの「スキン」のタブから、好みのデザインを選択します。
２．スキン一覧から「カラフルライン」を選択します。
３．スキンを選択できたら「変更をまとめて保存」をクリックします。
すると、選択したスキンがプレビュー画面に反映されます。
オススメのCocoon設定
「Cocoon設定」では、自分好みの細かい調整が可能です。
※今後、具体的な方法について追加していきます。
ヘッダーとトップページ記事一覧のカスタマイズ
ヘッダーロゴ
ブログの最上部に表示されて、全体のイメージに大きく影響を与えるのがヘッダーロゴです。自分で画像を作成して挿入したり、フォントをアレンジして文字入力することができます。私は、今後画像を作成して挿入していく予定です。
ヘッダーロゴのカスタマイズはこちら
ヘッダーメニュー
ページ上部に表示され、ブログ内のアクセスをスムーズにするのがヘッダーメニューです。常に表示されることになるので、サイトに合ったデザインカスタムしておくと良いです。私の場合は、記事を書くときにカテゴリーを追加していく段階で、修正を加えるようにしています。
ヘッダーメニューのカスタマイズはこちら
アピールエリア
アピールエリアはヘッダーメニューの下部の読者の目に留まりやすい位置にリンクを張ることができます。アクセスを伸ばしたい記事やページを目立たせることができるので、PVを伸ばしていくことに役立ちます。
アピールエリアのカスタマイズはこちら
おすすめカード
オススメしたい記事やカテゴリーの画像リンクを、ヘッダー下の目立つ場所に表示させることができます。こちらもブログ読者に画像付きのアピールができるので、設定することをオススメします。私は、テンプレート画像を1つ作って、画像の中に文字を組み込む形で作成しています。1つずつ異なる画像を使用するのもオシャレでいいかと思います。
おすすめカードのカスタマイズはこちら
モバイル版ヘッダーメニュー
デザインを工夫することで、読みやすい印象を与えることができます。投稿内容やカテゴリーなど自分が表示したいものを並び替えることができるのですっきりと見やすい形にアレンジすることができます。
モバイルメニューのカスタマイズはこちら
エントリーカード
エントリーカードは見やすさが大事です。タイトルとスニペットをバランスよく表示すると、読者に記事を読んでもらえやすくなります。
お問い合わせフォーム
アフィリエイトをしていくのには、お問い合わせフォームが必要になります。簡単に作ることができましたので、追加しておきましょう。
お問い合わせフォームのカスタマイズはこちらからどうぞ
プライバシーポリシーと免責事項
ブログを運営していく上で重要なものとして、プライバシーポリシーと免責事項の記載です。GoogleAdsenseの申請をしていく上でも重要なものなので、忘れずに設置しましょう。
プライバシーポリシーと免責事項の作成方法はこちら
サイドバーのカスタマイズ
ここからは、Cocoonのサイドバー部分のカスタマイズについて紹介していきます。
プロフィール
できるだけシンプルにまとめていくことで、効果的な自己紹介をすることができます。ブログの上部に表示されるので、印象に残るカスタイマイズをすることをオススメします。
プロフィールのカスタマイズはこちらからどうぞ
カテゴリー/タグクラウド/アーカイブ
カテゴリーやタグ、アーカイブ、お問い合わせなど読者が記事を探しやすくすることや、問い合わせができるように自分好みのアレンジをしていくことができます。
人気記事ランキング
人気記事を表示させることができ、読者が興味を持ちやすくなります。私はまだ投稿記事が少ないので、投稿数が増えてきたら、人気記事ランキングを取り入れていこうと思います。
人気記事ランキングのカスタマイズはこちら
Twitterの埋め込み
Twitterと併用してブログをしている人は、Twitterの埋め込みをすることでブログとの連携をすることができます。是非取り入れてみてください。
Twitterの埋め込みカスタマイズはこちら
投稿記事内で使えるカスタマイズ
記事タイトル・アイキャッチ画像
記事タイトルは読者の目に入る場所なので、デザインを整えておくとブログの印象が良くなります。私は、Canvaというツールを使って画像を作成しています。投稿・更新日・カテゴリー・タブのデザインも含めてカスタマイズすることが可能です。
見出し
文中の中に見出しを入れることで、読者にとって読みやすいブログになります。カラフルラインでの見出しは画像のように表示されます。見出しを設定することで、目次が作成されます。
リスト（箇条書き）
リスト（箇条書き）・ボックスはブログに欠かせません。基本的なリストから応用したリストなど様々な種類のデザインを手軽に作ることができます。
目次
見出しを活用することで、段落ごとの内容が分かりやすくなるので、読みたい部分を探しやすくなります。基本設定で目次を表示した状態にしたり、非表示にして必要な時に開くことができる状態のすることができます。
吹き出し
吹き出しを使用することで、記事の導入や話の展開をスムーズにすることができます。左右の配置や、画像の設定、吹き出しの種類や色など、様々なアレンジができるので、イメージキャラクターなどを作ってみてもいいかもしれませんね。
吹き出しのカスタマイズはこちら
ブログカード（ファビコン）
ブログ内で他の記事を表示させるときのブログカードもカスタマイズすることで、より効果的に表示することができます。
ブログカードのカスタマイズはこちら
あわせて、ファビコン（サイトアイコン）も工夫することで印象が良くなります。
ファビコン（サイトアイコン）のカスタマイズはこちら
まとめ
Cocoonは無料なのに非常に使いやすいテーマです。私もまだまだ始めたばかりなので、色々な機能を楽しみながら、ブログを楽しみたいと思います。
コメント