こんにちは、yuji（@yuji_invest）です。
このブログでは、WordPressとアフィリエイトのノウハウについて詳しく解説しています。
ブログ初心者なりに、WordPressブログをおしゃれにカスタマイズしたいです。
以上のような、ブログデザインについての要望に丁寧にお答えします。
このブログではWordPressテーマのCocoonを使っています。
Cocoonを利用する最大のメリットは、細かくカスタマイズできることと、デザインのポテンシャルが高いことです。
このように、ブログ全体のデザインが整っていると、記事読者からの印象は大幅に改善されます。
そこでこの記事では、以上のようなCocoonのカスタマイズを簡単に再現できる方法を解説したので、参考にしていただけたらと思います。
※収益化を目指している方には、おしゃれなWordPressテーマのSWELLをおすすめしています。詳しくは以下の記事をご覧ください。
▶【最新】SEOに強いおすすめWordPressテーマ16選
▶【保存版】ブログ初心者が月5万稼ぐまでの全手順を解説
▶ブログをアクセスアップするには？【初心者がやるべき対策は1つだけ】
まずはCocoonを利用するうえで、事前に設定しておくことをまとめておきます。
Cocoonの事前設定
まずは文字の大きさやスタイルなど、Cocoonの全体的な初期設定をします。
WordPressブログのCocoon導入方法は【重要】WordPressブログで最初にするべき3つのことをご覧ください。
CocoonChildの有効化を確認
WordPressメニュー「外観」の「テーマ」から「CocoonChild」が有効化されていることを確認してください。
ブログを表示すると、以上のようなデフォルトのデザインになっています。
スキンの設定
Cocoonでは「スキン」機能があり、洗練されたデザインを1クリックで実装することができます。
yujiblogではスキンの「ホワイトラーメン」を実装し、そこから若干の変更を加えています。
WordPressメニューから「Cocoon設定」を開きます。
表示されたページの「スキン」タブから、好みのデザインを選ぶことができます。
スキン一覧の中から「ホワイトラーメン」を選択します。
スキンを選択出来たら「変更をまとめて保存」をクリックします。
その他SEO対策と、おすすめのCocoon設定
「Cocoon設定」では、その他の細かい調整が可能です。
SEOに強く機能性の高いブログにするために、おすすめのCocoon設定を以下の記事で詳しく紹介しています。
▶【初心者向けSEO対策】おすすめの『Cocoon設定』をまとめて紹介
全体の見た目のバランスを整える
「外観」から「テーマエディター」に進み「style.css」を開きます。
スタイルシートに以下のコードをコピペしてください。メモ書きも残しておいたので、参考にしていただけたらと思います。
✔スタイルシートに入力するときの注意点
・編集前に必ずスタイルシートのバックアップを取る
・編集するテーマが「CocoonChild」になっていることを確かめる
・「@charset “UTF-8”;」から始まる部分（最初から入力されている内容すべて）は消さずに下に追記していく
スタイルシートにコピペするコードはこちらです。
✔コード
/************************************
全体のバランス
************************************/
.entry-content {
padding:1em;
padding-top:0;
margin: 0 auto;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}
img{/*すべてのイメージに影を*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}
コピペができたら「ファイルを更新」をクリックします。
以上でCocoonの事前設定は完了です。
ここからはブログデザインを紹介します。ブログの上部から順に解説していきます。
ヘッダーとインデックスカードのカスタマイズ
まず、Cocoonのヘッダー部分と、インデックスカードのカスタマイズをします。
ヘッダー周辺のデザインは、以下のようになっています。
こちらのブログデザインを、細分化して解説していきます。
✔ヘッダー周辺のカスタマイズ
①ヘッダーロゴ
②ヘッダーメニュー
③アピールエリア
④おすすめカード
⑤モバイル表示版ヘッダーメニュー
⑥インデックスカード
⑦お問い合わせフォーム
この6つを以下で詳しく解説していきます。
①ヘッダーロゴ
このようにブログの最上部に表示され、全体の印象に大きく影響するのがヘッダーロゴです。ロゴ部分には画像を挿入するので、好きなデザインを当てはめることができます。
▶ヘッダーロゴのカスタマイズはこちら
②ヘッダーメニュー
このようにページ上部に表示され、ブログ内のアクセスをなめらかにするのがヘッダーメニューです。ブログ上部に常に表示されることになるので、サイトにあったデザインにカスタマイズしておくことをおすすめします。
▶ヘッダーメニューのカスタマイズはこちら
③アピールエリア
アピールエリアでは、このように読者の目に留まりやすい位置にリンクを張ることができます。
例えばアクセスを集めたいページを目立たせることができ、PVを伸ばすことができます。
▶アピールエリアのカスタマイズはこちら
④おすすめカード
このようにおすすめしたい記事やカテゴリーの画像リンクを、ヘッダー下の目立つ部分に表示させることができます。こちらもブログ読者に対し画像付きの訴求ができるので、設定をおすすめします。
▶おすすめカードのカスタマイズはこちら
⑤モバイル表示版ヘッダーメニュー
このように統一性のあるデザインにすることで、まず読者にとって読みやすく、良い印象を与えることができます。
▶モバイル表示版ヘッダーメニューのカスタマイズはこちら
⑥インデックスカード
この記事にまとめた方法で、以上のようなCocoonのインデックスカードを再現できるので、是非参考にしていただけたらと思います。
▶インデックスカードのカスタマイズはこちら
⑦お問い合わせフォーム
アフィリエイトをするなら、お問い合わせフォームは必須です。5分程度で完了するのですぐに作りましょう。
▶お問い合わせフォームのカスタマイズはこちら
続いて、ブログ右側のサイドバーのカスタマイズをまとめていきます。
サイドバーのカスタマイズ
ここからは、Cocoonのサイドバー部分のカスタマイズを紹介していきます。
✔サイドバーのカスタマイズ
①プロフィール
②カテゴリー/タグクラウド/アーカイブ/検索
③人気記事ランキング
この3つを以下で詳しく解説していきます。
①プロフィール
このようにできるだけシンプルにまとめることで、圧迫感のない自己紹介ができます。ブログ上部に表示されるので、個性のあるオリジナルカスタマイズがおすすめです。
▶プロフィールのカスタマイズはこちら
②カテゴリー/タグクラウド/アーカイブ/検索
このようにカテゴリーやタグ、アーカイブをまとめることで、読者は興味のある記事を探しやすくなり、ブログ内のアクセスが良くなります。すべてのページに表示されるので、シンプルなデザインであることが必要です。
▶カテゴリー/タグクラウド/アーカイブ/検索のカスタマイズはこちら
③人気記事ランキング
このように人気記事は読者が興味を持ちやすく、クリックしてくれる確率が高まります。
▶人気記事ランキングのカスタマイズはこちら
次に、ブログの記事内で使える様々なカスタマイズをまとめていきます。
投稿記事内で使えるカスタマイズ
ここからは、Cocoonの投稿記事内で使えるカスタマイズを紹介していきます。
✔投稿記事で使えるカスタマイズ
①記事タイトル（H1）
②見出し（H2～H5）
③目次
④吹き出し
⑤ブログカード
この5つを以下で詳しく解説していきます。
①記事タイトル（H1）
このように記事タイトルは必ず読者の目に付く場所なので、デザインを整えておくとブログの印象が良くなります。記事タイトル周りの投稿・更新日や、カテゴリー・タブのデザインも含めてのカスタマイズです。
▶記事タイトル（H1）のカスタマイズはこちら
②見出し(H2～H5)
文中に以上のような装飾を入れることで、読者にとってまず見た目でわかりやすく、そして読みやすいブログになります。段落構成に必須なので、是非カスタマイズしてみてください。
▶見出し(H2～H5)のカスタマイズはこちら
③目次
このように段落ごとの内容が一目でわかるようになっているので、読者が読みたい部分を探しやすくなります。基本は非表示で、必要な時だけ表示できる設定にしています。
▶目次のカスタマイズはこちら
④吹き出し
吹き出しのサンプル①
吹き出しのサンプル②
このように吹き出しをカスタマイズして使い分けることで、記事の導入や話の展開をスムーズにすることができます。画像も自由に設定できるので、ブログのイメージキャラクターを定着させましょう。
▶吹き出しのカスタマイズはこちら
⑤ブログカード
このようにオリジナルデザインのブログカードでおすすめ記事を提示することで、内部SEOの効果を高めることができます。記事概要欄が省略されずに、すべて表示されるように設定しています。
▶ブログカードのカスタマイズはこちら
以下では、投稿記事の本文下のエリアのカスタマイズをまとめていきます。
投稿記事下エリアのカスタマイズ
ここからは、Cocoonの投稿記事下のエリアで使えるカスタマイズを紹介していきます。
✔記事下エリアのカスタマイズ
①SNSシェアボタン
②関連記事
この2つを以下で詳しく解説していきます。
①SNSシェアボタン
このように最小限シンプルなデザインにすることで、限られたスペースで、邪魔にならずにボタンを配置できます。配置するボタンの種類は、自由に変更可能です。
▶SNSシェアボタンのカスタマイズはこちら
②関連記事
このようにサムネイルとタイトルをバランスよく配置することで、記事を読んだ読者からのクリックが期待できます。限られたスペースで、しっかり記事を訴求するデザインです。
▶関連記事のカスタマイズはこちら
最後に、フッターやその他の細かいカスタマイズをまとめていきます。
フッター・その他のカスタマイズ
ここからは、Cocoonのフッターやその他の細かい部分のカスタマイズを紹介していきます。
✔フッター・その他のカスタマイズ
①フッター
②ツイッターの埋め込み
③フッターメニュー・各種ボタンなど
この3つを以下で詳しく解説していきます。
①フッター
このようにサイドバーと同様のコンテンツを配置することで、ブログ全体の構図が読者に伝わりやすくなります。コードはすでにほぼ入力済みなので、少しだけ編集します。
▶フッターのカスタマイズはこちら
②ツイッターの埋め込み
このようにツイッターのタイムラインを埋め込むことで、ブログとの連携が柔軟にできます。ツイッターアカウントを持っている方にはおすすめです。
▶ツイッターの埋め込みのカスタマイズはこちら
③フッターメニュー・各種ボタンなど
続いて、フッターメニュー・各種ボタンなどのカスタマイズを紹介していきます。
✔この記事で紹介するカスタマイズ
・フッターメニュー
・トップへ戻るボタン
・コメントを書き込むボタン
・次のページボタン
・モバイルフッター用おすすめカード
以上の5つのCocoonのデザインを再現できるので、参考にしていただけたらと思います。
▶フッターメニュー・各種ボタンなどのカスタマイズはこちら
以上が、初心者向けのおすすめカスタマイズです。
✔お願い
Cocoonカスタマイズは、皆様のフィードバックをもらいながら、改善の努力を重ねることで作成しています。
もし「当ブログのデザインが役に立った」と感じていただけた場合には、是非、ブログやTwitterで小さく紹介していただけると大変嬉しく思います。
よろしくお願いいたしますm(__)m
「カスタマイズが上手くいかない…」と感じる方へ
当ブログのカスタマイズは、1つ1つのパーツが複雑に関連し合っているため、個別でデザインを使う際などは上手く表示されないことがあります。
TwitterのDMなどでも一生懸命サポートしていますが、若干のズレが出てしまったり、思うようにカスタマイズできない部分も少なからずあります。
そこで、カスタマイズが難しい場合は有料テーマSWELLの利用をおすすめしています。（※僕自身も2サイト目ではSWELLを利用しており、特にデザイン性の高さに魅力を感じています。）
SWELLは公式サイトの設定マニュアルや、購入者用の質問フォーラムが充実しているので、説明不要で初心者の方でも安心して使えます。
また、特にブログの収益化を目指している方には、デザインや設定の時間を短縮して、記事執筆に専念してもらいたいとも感じているところです。
使用感はデモサイトにて確かめられるので、興味のある方は確認してみてください。人気急上昇中なだけあって、時代に合ったオシャレなデザインです。
》SWELLのデモサイトはこちら
その他のおすすめテーマも紹介していますので、1日でも早く記事を書いてアフィリエイト成果に繋げてください！
▶【最新版】SEOに強いおすすめWordPressテーマ16選
また、Googleアドセンスにまだ合格できていない方は、こちらの記事で審査攻略をまとめています。
▶【最新】Googleアドセンス審査に合格するための6つのポイント
ちなみに、副業ブログで結果を出した方法を以下で全て公開しています。
▶【副業ブログは稼げる？】会社員がバレずに月30万稼ぐまでにやったことを全て公開します
以下は、ブログのSEO対策に関するおすすめ記事の紹介です。
ブログのアクセス数を増やす方法とは？
yujiblogはSEOで検索上位を獲得した結果、1年ほどでアクセス数が大幅に伸びました。
ブログのアクセス数を増やす方法について以下の記事で解説したので、参考にしていただけたらと思います。
▶ブログをアクセスアップするには？【初心者がやるべき対策は1つだけ】
SEOに強いブログ記事の書き方テンプレート
以下で紹介する記事では、検索上位を獲るためのブログの書き方について、徹底的に解説しています。
✔この記事で達成できる目標
・読者にとって読みやすい記事が書ける
・Googleに評価されやすい記事が書ける
テンプレを完コピするだけでSEOに強い記事が書けるようになるので、実際に手を動かしながら挑戦してみてください。
ブログ収入を稼ぐまでの流れを徹底解説
またアクセス数に比例してアフィリエイトの売り上げも伸びており、現在の収益は毎月35万以上となっています。
以下の記事では、ブログを収益化する方法について詳しくまとめています。
セールスライティングの5つのコツ
セールスライティングとは、文章で商品を売る技術のことです。
的確なセールスライティングができると「成約率」が高くなるので、ページのアクセス数が少ない状態でアフィリエイト成果を出すことが可能です。
以下の記事では、文章でモノが売れていくセールスライティングのノウハウについて詳しく解説しています。
サイト表示速度が遅くて悩んでいる方へ
ブログの表示速度は、Googleからの評価に関わる重要な要素です。
Googleはこれまでに何度も『サイト表示速度とSEOの関係』について明言しています。
✔Web検索ランキングでのサイト速度の使用
『ユーザーは速度を重視しています。そのため、検索ランキングではサイトの速度を考慮に入れることにしました。』
詳細情報：Google 検索セントラルブログ
✔読み込み速度をモバイル検索のランキング要素に使用
『2018年7月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。』
詳細情報：Googleウェブマスター向け公式ブログ
このようにSEOで重視されるサイト表示速度ですが、レスポンスの速いサーバーを使うことで大幅に改善されます。
そこで以下の記事では、ブログアフィリエイトに最適なレンタルサーバーを5つ厳選しました。
高速サーバーへの『お得な乗り換え情報』についても詳しく解説しているので、是非チェックしてみてください。
▶【高速化】ブログアフィリエイトにおすすめのレンタルサーバー5選
この記事が少しでもお役に立てたら幸いです。
最後まで読んでいただき、ありがとうございました！
▶【保存版】ブログ初心者が月5万稼ぐまでの全手順を解説
▶一般人でもブログ収入は稼げる？個人が月10万稼ぐための8つのポイント
▶Amazonアソシエイト審査に1発合格した話
▶【限定公開】もしもかんたんリンクのカスタマイズ
▶【注意】もしもアフィリエイトは危ない!？
▶【その画像の著作権、大丈夫？】安心のフリー素材サイト9選
コメント
yujiさんおはようございます
先日からwordpressブログを始めました。
いざ始めてみると初心者のわたしには何が何だかさっぱり分からず色々と調べながら苦戦していたところにyujiさんのブログを見つけてその通りに一つずつ設定させていただいています。
何とかですが少しずつ進めることができました
まだまだ道のりはありますが、ありがとうございます！
まずはお礼をと思いましてコメントさせていただきました。
コメントありがとうございます(^^)/
質問がありましたらツイッターのDMで答えられますので、いつでもどうぞ！
https://twitter.com/yuji_invest