ワードプレスで人気の無料テーマCocoon。
色々カスタマイズでき、無料とは思えないクオリティですが、パソコンやコードの知識がないと、どうすればいいのかわかりませんよね?
私もコードなんてわかりません。
そんな私がおこなった
「簡単にできる5つのカスタマイズ」
について解説していきます。

ブログのデザイン、最初のままだと何だかつまらない。
デザインをかえてみたいけど、どうすれば良いの?



パソコンが苦手で、コードの知識もまったくないけど、簡単にできるおすすめカスタマイズを5つ教えます!
・文字色をグレーにして読みやすく
・サイドバーにプロフィール設置
・吹き出し画像の追加
・SNSボタンを丸くかわいらしく
・ヘッダーメニューを1列に
※ブログ作成はWordPress。テーマはCocoon。サーバーはConoHa WINGを使用。
文字色をグレーにして読みやすく
①WordPressメニュ→「Cocoon設定」
②「全体」→「サイトフォント」
グレー「#333333」がおすすめ!
文字の色が与える印象を気にしたことありますか?
私は黒が普通だと思っていました。
ですが、黒は意外に読みにくい色でコントラストが強すぎて目に負担がかかるそうです。
文字色はグレーがお勧めです。
現に多くの大手サイトでは、文字色に「#333333」を使用しています。
簡単に変えることができるので、自分のブログにあう雰囲気の色に変えてみてください。
雰囲気がかなりかわりますよ!
サイドバーにプロフィール設置
①WordPressメニュ→「外観」→「ウィジェット」
②「[C]プロフィール」→「サイドバー」→「ウィジェットを追加」
③「タイトル」好きなタイトル(例)プロフィール
「画像を円形にする」お好みでチェック
「保存」
「あなたのプロフィール」
④「ニックネーム」「ブログ上の表示名」「メールアドレス」「プロフィール情報」
を入力。
⑤プロフィール画像→「プロフィール画像のアップロード」の「選択」をクリック
⑥画像を選択してください→「ファイルをアップロード」
⑦「ファイルを選択」→プロフィール用の画像を選択。
サイズは240×240pxがおすすめ。
⑧「プロフィールを更新」
サイドバー内でプロフィールの位置は変更可能。
ブログを読んでくれる人に簡単に、自己紹介することで「信頼度」も上がります。まだ設置していない人は今すぐ作りましょう。
吹き出し画像の追加
①WordPressメニュ→「Cocoon設定」→「吹き出し」
②「新規追加」→「タイトル」「名前」を入力
③「アイコン画像」を選択。
画像のサイズは160px~240pxがおすすめです。
④「保存」
このブログでも一番最初にある吹き出し。
使うと、「見やすく目にとまりやすく」なります。
画像もフリーサイトで探したり、ココナラなどを使って作成してもらうと、一気にオリジナルティを出すことができるので、オススメです。
SNSボタンを丸くかわいらしく
①WordPressメニュ→「Cocoon設定」
②「SNSシェア」
・シェアボタンをトップに表示するなら
「トップシェアボタンの表示」
↓
☑メインカラムトップシェアボタンを表示
・シェアボタンをボトムに表示するなら
「ボトムシェアボタンの表示」
↓
☑メインカラムボトムシェアボタンを表示
「カラム数」→6列
「ロゴ・キャプション配置」→ロゴ・キャプション 上下
「シェアメッセージ」→シェアお願いしますなど、なんでも良いので入力
③「変更をまとめて保存」
④WordPressメニュ→「外観」→「テーマエディター」
「テーマを編集」→画面上部のご存知ですか?にある。「不随のCSSエディター」
⑤左の数字が振ってあるところにコードを張り付ける。
※「編集するテーマを選択」がCocoon Childか確認。
「Cocoon SNSボタン カスタマイズ」で検索し気に入ったデザインのコードをコピーし張り付ける。
SNSを使っているなら、設置しておきたいSNSボタン。Cocoonの初期設定のままだと、物足りなく感じませんか?
気に入ったデザインを検索すると、親切にコードを書いてくれている場合が多いので、そのコードをコピーし張り付けるだけで簡単にできますよ。
もし上手くできなくても、張り付けたコードを削除すると元に戻すことができます。
ヘッダーメニューを1列に
①WordPressメニュ→「外観」→「テーマエディター」
②左の数字が振ってあるところにコードを張り付ける。
※「編集するテーマを選択」がCocoon Childか確認。
「Cocoon ヘッダーメニュー 一列に」で検索。
気に入ったデザインのコードをコピーして張り付ける。
こちらも、上記のSNSボタン同様、気に入ったデザインを検索すると親切にコードを書いてくれている場合が多いので、そのコードをコピーし張り付けるだけで簡単にできますよ。
もし上手くできなくても、張り付けたコードを削除すると元に戻すことができます。
ヘッダーメニューを1列にすることで、見た目がシンプルになります。
まとめ
どれも簡単に変更することができ、見た目が一気にオシャレで見やすくなる5つのカスタマイズを紹介させていただきました。
これらを参考に、みなさんのブログが見やすくなれば幸いです。
コメント