【wordpress超初心者向け】cocoonですぐに「垢抜けたデザイン」にする3つの方法

雑記・日記・楽しむ

ノリと勢いでブログ立ち上げたら「なんかおもてたんと違う…」となったので、色々試行錯誤したことをまとめます!

立ち上げ直後でもデザイン面を「なんとなくそれっぽいブログ」にすることで、執筆テンションを上げましょう!
形から入ってく派の人は是非参考にしてみてください。

まずはブログが執筆できる直前まで設定しよう

立ち上げまでに参考にしたサイト

hitodeblogさんを参考にしました!
書いてある通りに操作していくとブログの契約〜テーマの適用までは難なくいけると思います。
つまづきそうなところも丁寧に解説してくれているのでオススメです!

前提条件

hitodeblogさんを参考にすると、初めての方は恐らく以下の条件になると思います。

  • サーバー→ ConoHa WING
  • テーマ → cocoon」(無料テーマ)

これ以外のサーバーやテーマだと同じように設定ができない可能性がありますのでご注意ください。

ブログデザインを「それっぽく」しよう!

ブログの記事の通りに作成した場合

こちらの記事を参考にデザインを進めていくと、恐らくこうなると思います

もののふ
もののふ

違うそうじゃない…
私の作りたいのはもうちょっとなんというか…
なーんかコレジャナイ感がするんよね…

まだ記事がないのと「ピックアップ(おすすめカード)」がないからとはいえ、殺風景ですね…。
原因は

  • サイドバーが古臭い
  • ヘッダー(一番上)のサイト名の主張が乏しい

では早速良くしていきましょう!

サイドバーを調整しよう!

不要なブロックの削除

まずはwordpressのダッシュボード(管理画面)から
「外観」→「ウィジェット」と進んでいきます。

「サイドバー」「サイドバースクロール追従」にある「ブロック」。
全て削除してください。

削除するのが不安…という方は「使用停止」でもOK。

ウィジェット項目の一番下の方に「使用停止中のウィジェット」というエリアがあるので、不要なブロックをドラッグ&ドロップしましょう。

サイドバーにウィジェットを追加する

サイドバーがからっぽになったので他のウィジェットを追加していきましょう。
オススメはこちら!↓

詳細を設定できますが、とりあえず初期設定のままでOK。
順番は自由ですが、↑と同じにするとより「それっぽく」なります。

[C]が付くのはcocoon独自のウィジェットです。
デザインなどがcocoon向けに最適化されているので、同じ内容のウィジェットであれば[C]が付く方を優先で選びましょう。

では、実際のサイトを見てみると…

それっぽい感じになりましたね!

プロフィールを編集する

プロフィール文と画像の編集方法

ダッシュボードの「ユーザー」→「プロフィール」へ進み
真ん中あたりにある「ニックネーム」を入力して、表示名もニックネームに変更します。

「プロフィール情報」に自己紹介文を入力。
途中のプロフィール画像っぽい部分は飛ばします

一番下の方にある「プロフィール画像のアップロード」から画像をアップロードしましょう。

最後に「プロフィールの更新」を押して完了です!

ファビコンを変える

このタイミングでファビコンも変えちゃいましょう。

ダッシュボードから「外観」→「カスタマイズ」に進みます。

「サイトアイコンを選択」から好きな画像を設定します。
その後「公開」を押します。✕を押すと前の画面に戻ります。

画像はプロフィールに使用したものと一緒でいいかと思いますが、お好みで!

無事ファビコンが設定されました!

ヘッダーを編集する

ヘッダーロゴの画像を作成する

ヘッダーはサイトで一番目を引くところなので、ロゴは画像で設定することをおすすめします

デザイン学の知識になりますが、人は「大きいもの」に目がいく習性があります。
ロゴがテキストのままだと読み飛ばされてしまいサイト名をアピールできないので、
ヘッダーは背景画像よりもロゴ画像にこだわりましょう!

もののふ
もののふ

でもロゴを作るセンスも技術もないし…

ガジェ子
ガジェ子

そんなときは

ココナラロゴジェネレーターを利用するといいですよ!

ロゴジェネレーターは無料のものもあるので是非利用してみましょう!
私は 「STORES.JP LOGO MAKER」を使って作成しました。

作成したロゴ画像を設定する

ダッシュボードから「cocoon設定」を選び、「ヘッダー」タブを選びます。

「ヘッダーロゴ」から画像を選びます。

「キャッチフレーズ」は「表示しない」にしてもいいでしょう。
「ヘッダー背景画像」や「ヘッダー色」はロゴにあわせてお好みで調整しましょう。

最後に「変更をまとめて保存」を押すのを忘れずに!

完成!

完成したブログがこちら!

だいぶ垢抜けたのではないでしょうか?

最初と比べるとこんな感じになります。

記事がないのでまだまだ寂しいですが、今どきのブログっぽくなったかと思います。
記事が増えたら「ピックアップコンテンツ」を作ればもっとそれらしくなりそうですね!

適用するスキンによって色合いや細かい配置は変わります。

まとめ

ということで今回はcocoonで「ブログ立ち上げ直後でも垢抜けたデザインにする方法」をお伝えしました。

  • サイドバーの調整
  • プロフィールの編集
  • ヘッダーロゴを作成

この3つをするだけで劇的に見栄えがよくなるのでぜひ試してみてくださいね!

余談

このたびブログを立ち上げるにあたって、ヒトデさんの著書「凡人くんの人生革命」「ゆる副業のはじめかた」を大いに参考にさせていただきました。
ヒトデさんの人柄や思い切りの良さが感じられるいい本でした。
文末になり大変恐縮ですが、オススメさせていただきます。みんな読もうね!

嫌なことから全部抜け出せる 凡人くんの人生革命 [ ヒトデ ]

価格:1,540円
(2022/1/11 19:59時点)
感想(3件)

「ゆる副業」のはじめかた アフィリエイトブログ スキマ時間で自分の「好き」をお金に変える! [ ヒトデ ]

価格:1,628円
(2022/1/11 20:04時点)
感想(16件)

ガジェ子
ガジェ子

今日からあなたもブロガーデビュー!
モリモリ書いていきまっしょい!

もののふ
もののふ
  • 名将5選!今仕えるならこの国!
  • 君も今日から兵馬俑!正しい整列フローチャート
  • 手柄総取り?猛将が選ぶ良武器7選!
  • 手軽に作り置き!戦場弁当10種
ガジェ子
ガジェ子

なかなか個性的なブログサイトになりそうですね…

コメント

タイトルとURLをコピーしました