こんにちは、yujiです！このブログでは、WordPressを使ったブログ運営について詳しくまとめています。
「ブログ初心者なりに、ブログをおしゃれにカスタマイズしたい！」
この記事では、以上のようなブログデザインについての質問に丁寧に答えます。
このブログではWordPressテーマのCocoonを使っていますが、Cocoonを利用する最大のメリットは、細かくカスタマイズできることとデザインのポテンシャルが高いことです。
このようにブログのデザインは、見る人の印象に大きく影響します。
この記事にまとめた方法で、以上のようなCocoonのカスタマイズを再現できるので、参考にしていただけたらと思います。
✔Amazaonアソシエイトに挑戦中の方にお知らせ。
2020年3月以降、Amazaonアソシエイト審査方法が変更されました。この変更についてはまだネット上に情報が不足しているので、ブログをはじめたてで混乱している方もいると思います。
変更点の詳細とその攻略法を、以下の記事に詳しくまとめました。
▶【2020年最新攻略法】Amazonアソシエイトの審査方法が変わる！アカウント作成から180日以内に少なくとも3つの適格販売が必要に。
▶【大変だけどちゃんと稼げる】ブログ収益化のために絶対に必要な方法をすべて解説します。
▶【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較！
▶【Audibleの無料体験でオーディオブック1冊プレゼント！】0円でできることすべてと、月額料50%OFFのお得な使い方を公開します。
「まずはCocoonを利用するうえで、事前に設定しておくことをまとめておきます。」
Cocoonの事前設定
まずは文字の大きさやスタイルなど、Cocoonの全体的な初期設定をします。
CocoonChildを有効化する。
WordPressメニュー「外観」の「テーマ」から、『CocoonChild』が有効化されていることを確認してください。
ブログを表示すると、以上のようなデフォルトのデザインになっています。
スキンを設定をします。
Cocoonでは「スキン」機能があり、さらに細かく洗練されたデザインを1クリックで実装することができます。
yujiblogではスキンの「ホワイトラーメン」を実装して、若干の変更を加えています。
WordPressメニューから「Cocoon設定」を開きます。
表示されたページの「スキン」タブから、好みのデザインを選ぶことができます。
スキン一覧の中から「ホワイトラーメン」を選択します。
スキンを選択出来たら「変更をまとめて保存」をクリックします。
その他SEO対策と、おすすめのCocoon設定。
「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のヘッダー部分のカスタマイズをしていきます。
ヘッダー周辺のデザインは、具体的に以下のようになっています。
こちらのブログデザインを、細分化して解説していきます。
ヘッダー周りをパーツごとに分けると、以下のようになります。
✔Cocoonヘッダー周辺のカスタマイズ
①ヘッダーロゴ
②ヘッダーメニュー
③アピールエリア
④おすすめカード
⑤モバイル表示版ヘッダーメニュー
この5つを以下で詳しく解説していきます。
①ヘッダーロゴ
以下では、ヘッダーのロゴ部分のカスタマイズを紹介していきます。
このようにブログの最上部に表示され、全体の印象に大きく影響するのがヘッダーロゴです。
ロゴ部分には画像を挿入するので、好きなデザインを当てはめることができます。
②ヘッダーメニュー
次に、ヘッダーメニュー（グローバルメニュー）部分のカスタマイズをまとめます。
このようにページ上部に表示され、ブログ内のアクセスをなめらかにするのがヘッダーメニューです。
ブログ上部に常に表示されることになるので、サイトにあったデザインにカスタマイズしておくことをおすすめします。
③アピールエリア
続いて、アピールエリアのカスタマイズを紹介します。
アピールエリアでは、このように読者の目に留まりやすい位置にリンクを張ることができます。
例えばアクセスを集めたいページを目立たせることができ、PVを伸ばすことができます。
④おすすめカード
4つ目に、おすすめカードのカスタマイズについてまとめます。
このようにおすすめしたい記事やカテゴリーの画像リンクを、ヘッダー下の目立つ部分に表示させることができます。
こちらもブログ読者に対し画像付きの訴求ができるので、設定をおすすめします。
⑤モバイル表示版ヘッダーメニュー
ヘッダーメニューのモバイル表示版カスタマイズを、以下の記事で紹介しています。
このように統一性のあるデザインにすることで、まず読者にとって読みやすく、良い印象を与えることができます。
以上でCocoonのヘッダーのカスタマイズは完了です！
「続いて、ブログ右側のサイドバーのカスタマイズをまとめていきます。」
サイドバーのカスタマイズ。
ここからは、Cocoonのサイドバー部分のカスタマイズを紹介していきます。
サイドバーのデザインは、具体的に以下のように細分化して解説していきます。
✔サイドバーのカスタマイズ
①プロフィール
②カテゴリー/タグクラウド/アーカイブ/検索
③人気記事ランキング
この3つを以下で詳しく解説していきます。
①プロフィール
以下では、プロフィールのカスタマイズを紹介していきます。
このようにできるだけシンプルにまとめることで、圧迫感のない自己紹介ができます。
ブログ上部に表示されるので、個性のあるオリジナルカスタマイズがおすすめです。
②カテゴリー/タグクラウド/アーカイブ/検索
次に、カテゴリー/タグクラウド/アーカイブ/検索のカスタマイズを紹介していきます。
このようにカテゴリーやタグ、アーカイブをまとめることで、読者は興味のある記事を探しやすくなり、ブログ内のアクセスが良くなります。
すべてのページに表示されるので、シンプルなデザインであることが必要です。
③人気記事ランキング
続いて、人気記事ランキングのカスタマイズをまとめます。
このように人気記事は読者が興味を持ちやすく、クリックしてくれる確率が高まります。
以上でCocoonのサイドバーのカスタマイズは完了です！
「次に、ブログの記事内で使える様々なカスタマイズをまとめていきます。」
投稿記事で使えるカスタマイズ。
ここからは、Cocoonの投稿記事内で使えるカスタマイズを紹介していきます。
記事内で使えるデザインは、具体的に以下のように細分化して解説していきます。
✔投稿記事で使えるカスタマイズ
①記事タイトル（H1）
②見出し（H2～H5）
③目次
④吹き出し
⑤ブログカード
この5つを以下で詳しく解説していきます。
①記事タイトル（H1）
以下では、記事タイトル（H1）のカスタマイズを紹介していきます。
このように記事タイトルは必ず読者の目に付く場所なので、デザインを整えておくとブログの印象が良くなります。
記事タイトル周りの投稿・更新日や、カテゴリー・タブのデザインも含めてのカスタマイズです。
②見出し(H2～H5)
次に、見出し(H2～H5)のカスタマイズを紹介していきます。
文中に以上のような装飾を入れることで、読者にとってまず見た目でわかりやすく、そして読みやすいブログになります。
段落構成に必須なので、是非カスタマイズしてみてください！
③目次
続いて、目次のカスタマイズを紹介していきます。
このように段落ごとの内容が一目でわかるようになっているので、読者が読みたい部分を探しやすくなります。
基本は非表示で、必要な時だけ表示できる設定にしています。
④吹き出し
以下では、吹き出しのカスタマイズを紹介していきます。
吹き出しのサンプル①
吹き出しのサンプル②
このように吹き出しをカスタマイズして使い分けることで、記事の導入や話の展開をスムーズにすることができます。
画像も自由に設定できるので、ブログのイメージキャラクターを定着させましょう。
⑤ブログカード
ここからは、ブログカードのカスタマイズを紹介していきます。
このようにオリジナルデザインのブログカードでおすすめ記事を提示することで、内部SEOの効果を高めることができます！
記事概要欄が省略されずに、すべて表示されるように設定しています。
以上でCocoonの投稿記事内で使えるカスタマイズは完了です！
「以下では、投稿記事の本文下のエリアのカスタマイズをまとめていきます。」
投稿記事下エリアのカスタマイズ。
ここからは、Cocoonの投稿記事下のエリアで使えるカスタマイズを紹介していきます。
記事下エリアで使えるデザインは、具体的に以下のように細分化して解説していきます。
✔記事下エリアのカスタマイズ
①SNSシェアボタン
②関連記事
この2つを以下で詳しく解説していきます。
①SNSシェアボタン
以下では、SNSシェアボタンのカスタマイズを紹介していきます。
このように最小限シンプルなデザインにすることで、限られたスペースで、邪魔にならずにボタンを配置できます。
配置するボタンの種類は、自由に変更可能です。
②関連記事
次に、関連記事のカスタマイズを紹介していきます。
このようにサムネイルとタイトルをバランスよく配置することで、記事を読んだ読者からのクリックが期待できます。
限られたスペースで、しっかり記事を訴求するデザインです。
「最後に、フッターやその他の細かいカスタマイズをまとめていきます。」
フッター・その他のカスタマイズ。
ここからは、Cocoonのフッターやその他の細かい部分のカスタマイズを紹介していきます。
フッターなどで使えるデザインは、具体的に以下のように細分化して解説していきます。
✔フッター・その他のカスタマイズ
①フッター
②ツイッターの埋め込み
③フッターメニュー・各種ボタンなど
④インデックスカード
この4つを以下で詳しく解説していきます。
①フッター
以下では、フッター部分のカスタマイズを紹介していきます。
このようにサイドバーと同様のコンテンツを配置することで、ブログ全体の構図が読者に伝わりやすくなります。
コードはすでにほぼ入力済みなので、少しだけ編集します。
②ツイッターの埋め込み
次に、ツイッターの埋め込み方法を紹介していきます。
このようにツイッターのタイムラインを埋め込むことで、ブログとの連携が柔軟にできます。
モバイル表示だと読み込みがどうしても重たくなってしまいますが、ツイッターアカウントを持っている方にはおすすめです。
③フッターメニュー・各種ボタンなど
続いて、フッターメニュー・各種ボタンなどのカスタマイズを紹介していきます。
✔この記事で紹介するカスタマイズ
・フッターメニュー
・トップへ戻るボタン
・コメントを書き込むボタン
・次のページボタン
以上の4つのCocoonのデザインを再現できるので、参考にしていただけたらと思います。
④インデックスカード
以前からお問い合わせページや、ツイッターのDMで「インデックスカードのカスタマイズを知りたい」との要望が多くいただいていました。
そこで今回、当ブログのオリジナルデザインを公開することにしました！
この記事にまとめた方法で、以上のようなCocoonのインデックスカードを再現できるので、是非参考にしていただけたらと思います。
この記事が少しでもお役に立てたら幸いです。最後まで読んでいただき、ありがとうございました！
▶【大変だけどちゃんと稼げる】ブログ収益化のために絶対に必要な方法をすべて解説します。
▶【もしもアフィリエイト】初心者でもできる『かんたんリンク』のおしゃれなカスタマイズ【コピペでOK！】
▶【利用者が増えている理由とは？】『もしもアフィリエイト』を実際に使ってみた感想【口コミ・評判・メリットまとめ】
▶【その画像の著作権、大丈夫ですか？】僕がおすすめする『安心のフリー素材サイト』9選！
▶【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較！
▶【Audibleの無料体験でオーディオブック1冊プレゼント！】0円でできることすべてと、50%OFFでお得に利用する方法を公開します。
コメント