こんにちは！
まーちゃん(@marchanblog)です
いきなりですが、今日は何の日でしょう？
答えは・・・
ブログリニューアルのためだけに有給を取った日です！
知らんがな
Twitterでの告知も実はこの件なのです。
以前からブログを可愛くしたいという思いはあったのですが、初心者なので調べるだけでも時間がかかってしまい、なかなか出来ないでいました・・・
一気にやってしまいたかったので、今回わざわざ有給を取ったわけです。
そしてリニューアルしたのはこの５箇所！
・グローバルメニュー
・吹き出し
・フォーム追加
・Today’s まーちゃん’s point！追加
ですが今回カスタマイズしてみて、初心者でもこんなに可愛い（自画自賛）ブログが作れるんだ！と、自信がつきました。
ヘッダー画像をカスタマイズ
Before
After
ヘッダーにする画像を用意したら、あとは差し替えるだけ。
グローバルメニュー をカスタマイズ
Before
After
スマホから見たメニューをスクロール式に
スマホからブログを見たときのメニューの幅がずっと気になっていたので、スクロール式に変更しました。
方法はリスブロさんで↓
CSSって何？レベルの私ですが、書かれている通りstyle.cssにコピペするだけで簡単に出来ました！
ただ、言われているようにスクロール可能であることがユーザーに伝わりにくいのが問題です。
また、下に表示されるメニューの色も変更しました。
方法はPurple Lifeさんで↓
メニューにアイコンをつける
アイコンは以前からつけていたのですが、方法を知らない方のために載せておきますね。
アイコンの設定方法はブロギングライフさんで↓
だがしかし・・・
グルメ！お前だよ！
グルメカテゴリだけなぜかアイコンが表示されないのです・・・
調べてもわからなかったので一旦保留にします・・・
吹き出しをカスタマイズ
Before
After
アイコンの大きさ
アイコン、スマホから見ると小さかったんですよね〜
これをハイジブログさんの方法でカスタマイズしました↓
こちらもCSSでのカスタマイズですが、グローバルメニュー の時と同じstyle.cssにコピペするだけでOKです。
表情を追加
Befor
After
このようにいろんな表情を作ってみました〜
でゲットするといいぞ〜
読みやすいように位置も左に寄せたぞ〜
アドバイスくれた方、ありがとう！
フォームの追加
お問い合わせフォームを作成しました！
フォームの作成方法はTECH ACADEMYさんで↓
さらに調子に乗ってカップルお悩み相談室も作っちゃいました！
※非公開にしました
答えるぞ〜
来るかな〜ワクワク
※お悩みはブログの記事にさせていただきます
Today’s まーちゃん’s point！
ブログの最後にお決まりのコーナーが欲しくて・・・
私の大好きなHIKAKIN大先生からパクり真似させていただきました！
いいのか・・？
それがコチラ！！！
どうでしょうか？
商品紹介の際に使っていく予定です！
おわりに
すごく疲れました。
1日でやらずにコツコツと数日にかけてやったほうがいいかもしれません。
でも可愛くなったので満足です。
他にも『こうしたらいいと思う！』ってのがあったら教えてね！
コメント