【Cocoon】ブログ初心者でも簡単にできる！おすすめカスタマイズ５選

ワードプレスで人気の無料テーマCocoon。

色々カスタマイズでき、無料とは思えないクオリティですが、パソコンやコードの知識がないと、どうすればいいのかわかりませんよね？

私もコードなんてわかりません。
そんな私がおこなった

「簡単にできる５つのカスタマイズ」

について解説していきます。

・文字色をグレーにして読みやすく
・サイドバーにプロフィール設置
・吹き出し画像の追加
・SNSボタンを丸くかわいらしく
・ヘッダーメニューを１列に

※ブログ作成はWordPress。テーマはCocoon。サーバーはConoHa WINGを使用。

変更時、閲覧できませんと表示され変更できない場合は、サーバーの設定が考えられます。

ConoHa WING→コントロールパネル（ログイン）
↓
サイト管理
↓
サイトセキュリティ
↓
WAF(表示切替のログ)攻撃元IPアドレスが自宅や自身のIPアドレスであることを確認。
↓
除外→対象の攻撃を除外しますか？
↓
はい
↓
成功しました

文字色をグレーにして読みやすく

①WordPressメニュ→「Cocoon設定」

②「全体」→「サイトフォント」
　グレー「＃333333」がおすすめ！

文字の色が与える印象を気にしたことありますか？

私は黒が普通だと思っていました。

ですが、黒は意外に読みにくい色でコントラストが強すぎて目に負担がかかるそうです。

文字色はグレーがお勧めです。

現に多くの大手サイトでは、文字色に「＃333333」を使用しています。

簡単に変えることができるので、自分のブログにあう雰囲気の色に変えてみてください。

雰囲気がかなりかわりますよ！

サイドバーにプロフィール設置

①WordPressメニュ→「外観」→「ウィジェット」

②「[C]プロフィール」→「サイドバー」→「ウィジェットを追加」

③「タイトル」好きなタイトル（例）プロフィール

　「画像を円形にする」お好みでチェック

　「保存」

　「あなたのプロフィール」

④「ニックネーム」「ブログ上の表示名」「メールアドレス」「プロフィール情報」
　を入力。

⑤プロフィール画像→「プロフィール画像のアップロード」の「選択」をクリック

⑥画像を選択してください→「ファイルをアップロード」

⑦「ファイルを選択」→プロフィール用の画像を選択。
　サイズは２４０×２４０pxがおすすめ。

⑧「プロフィールを更新」
　サイドバー内でプロフィールの位置は変更可能。

ブログを読んでくれる人に簡単に、自己紹介することで「信頼度」も上がります。まだ設置していない人は今すぐ作りましょう。

吹き出し画像の追加

①WordPressメニュ→「Cocoon設定」→「吹き出し」

②「新規追加」→「タイトル」「名前」を入力

③「アイコン画像」を選択。
　画像のサイズは１６０px～２４０pxがおすすめです。

④「保存」

このブログでも一番最初にある吹き出し。
使うと、「見やすく目にとまりやすく」なります。

画像もフリーサイトで探したり、ココナラなどを使って作成してもらうと、一気にオリジナルティを出すことができるので、オススメです。

SNSボタンを丸くかわいらしく

①WordPressメニュ→「Cocoon設定」

②「SNSシェア」
　・シェアボタンをトップに表示するなら
　「トップシェアボタンの表示」
　　↓
☑メインカラムトップシェアボタンを表示

　・シェアボタンをボトムに表示するなら
　「ボトムシェアボタンの表示」
　　↓
☑メインカラムボトムシェアボタンを表示

　「カラム数」→６列

　「ロゴ・キャプション配置」→ロゴ・キャプション　上下

　「シェアメッセージ」→シェアお願いしますなど、なんでも良いので入力

③「変更をまとめて保存」

④WordPressメニュ→「外観」→「テーマエディター」
「テーマを編集」→画面上部のご存知ですか？にある。「不随のCSSエディター」

⑤左の数字が振ってあるところにコードを張り付ける。
　※「編集するテーマを選択」がCocoon　Childか確認。
　「Cocoon　SNSボタン　カスタマイズ」で検索し気に入ったデザインのコードをコピーし張り付ける。

SNSを使っているなら、設置しておきたいSNSボタン。Cocoonの初期設定のままだと、物足りなく感じませんか？

気に入ったデザインを検索すると、親切にコードを書いてくれている場合が多いので、そのコードをコピーし張り付けるだけで簡単にできますよ。

もし上手くできなくても、張り付けたコードを削除すると元に戻すことができます。

ヘッダーメニューを１列に

①WordPressメニュ→「外観」→「テーマエディター」

②左の数字が振ってあるところにコードを張り付ける。

※「編集するテーマを選択」がCocoon　Childか確認。
　「Cocoon　ヘッダーメニュー　一列に」で検索。
　気に入ったデザインのコードをコピーして張り付ける。

こちらも、上記のSNSボタン同様、気に入ったデザインを検索すると親切にコードを書いてくれている場合が多いので、そのコードをコピーし張り付けるだけで簡単にできますよ。

もし上手くできなくても、張り付けたコードを削除すると元に戻すことができます。

ヘッダーメニューを１列にすることで、見た目がシンプルになります。

まとめ

どれも簡単に変更することができ、見た目が一気にオシャレで見やすくなる５つのカスタマイズを紹介させていただきました。

これらを参考に、みなさんのブログが見やすくなれば幸いです。