【初心者でもできた！】ワードプレスで簡単可愛くブログをカスタマイズする方法

 

 

いきなりですが、今日は何の日でしょう？

答えは・・・

 

ブログリニューアルのためだけに有給を取った日です！

 

 

Twitterでの告知も実はこの件なのです。

https://twitter.com/marchanblog/status/1058315143908478976

twitter.com

 

以前からブログを可愛くしたいという思いはあったのですが、初心者なので調べるだけでも時間がかかってしまい、なかなか出来ないでいました・・・

一気にやってしまいたかったので、今回わざわざ有給を取ったわけです。

 

そしてリニューアルしたのはこの５箇所！

 

ヘッダー画像をカスタマイズ

Before

After

 

ヘッダーにする画像を用意したら、あとは差し替えるだけ。

 

 

 

グローバルメニュー をカスタマイズ

 

スマホから見たメニューをスクロール式に

スマホからブログを見たときのメニューの幅がずっと気になっていたので、スクロール式に変更しました。

 

方法はリスブロさんで↓

CSSって何？レベルの私ですが、書かれている通りstyle.cssにコピペするだけで簡単に出来ました！

https://s41t0h.jp/cocoon-mobile-menu-scroollable/

s41t0h.jp

 

ただ、言われているようにスクロール可能であることがユーザーに伝わりにくいのが問題です。

 

また、下に表示されるメニューの色も変更しました。

方法はPurple Lifeさんで↓

『Cocoon』細かいカスタマイズ（まとめ＆備忘録）CSSコピペでOK！

ワードプレス無料テーマ『Cocoon』の細かいところをカスタマイズした記録です。メニューにFont Awesomeアイコンを入れたり、目次を中央配置にして背景色の変更をしたり、カテゴリーのラベルを非表示にしたりなど、自己満足的に？細かく変更した箇所などの備忘録です。徐々に増えていく予定！

love-wave.com

 

メニューにアイコンをつける

アイコンは以前からつけていたのですが、方法を知らない方のために載せておきますね。

 

アイコンの設定方法はブロギングライフさんで↓

https://www.blogging-life.com/cocoon/add-font-awesome-icon-to-menu/

www.blogging-life.com

 

だがしかし・・・

グルメ！お前だよ！

グルメカテゴリだけなぜかアイコンが表示されないのです・・・

調べてもわからなかったので一旦保留にします・・・

 

吹き出しをカスタマイズ

 

アイコンの大きさ

アイコン、スマホから見ると小さかったんですよね〜

 

これをハイジブログさんの方法でカスタマイズしました↓

こちらもCSSでのカスタマイズですが、グローバルメニュー の時と同じstyle.cssにコピペするだけでOKです。

https://haiji-blog.com/cocoon-fukidasi-customize2/

haiji-blog.com

 

表情を追加

 

 

 

フォームの追加

お問い合わせフォームを作成しました！

フォームの作成方法はTECH ACADEMYさんで↓

WordPressで問い合わせフォームを設置する方法【初心者向け】 | TechAcademyマガジン

WordPressで作成したサイトに「お問い合わせフォームを設置する方法」を初心者向けに解説した記事です。今回は【Contact Form 7】という有名なプラグインを使った方法を紹介します。フォームのカスタマイズも簡単に可能です。

magazine.techacademy.jp

 

さらに調子に乗ってカップルお悩み相談室も作っちゃいました！

※非公開にしました

 

※お悩みはブログの記事にさせていただきます

 

Today’s まーちゃん’s point！

ブログの最後にお決まりのコーナーが欲しくて・・・

私の大好きなHIKAKIN大先生からパクり真似させていただきました！

 

それがコチラ！！！

 

どうでしょうか？

商品紹介の際に使っていく予定です！

 

おわりに

すごく疲れました。

1日でやらずにコツコツと数日にかけてやったほうがいいかもしれません。

でも可愛くなったので満足です。