アメブロカスタマイズ~やってみたシリーズ①~

アメブロを始めて一番最初にやったこと。


デザインのカスタマイズ。


まずはブログ書けよ!って言われそうですが

とにかくやってみたかった!笑


TOP画像をオリジナルのものにしたり

メニューバーをつけたり

サイドバーに自分の紹介入れたり。


スマホで見る人には全く見れないこのデザインカスタマイズ。


スマホから見る人が多いからあまり意味がないのかもしれないけど

パソコンで見ることが多い私は

結構楽しんでみんなのデザイン見てます(^^♪


「あ、この人はこういうの好きなんだ~」

「イメージぴったり~!」

「あの人と同じデザイン使ってる!似てるのかな~」

「すごい!ばっちりカスタマイズしてる!」

「見やすい~」

などなど・・・


私みたいに見てる人もいるかも・・・


というわけで私もやってみよう!となりました!




デザイン選び

デザインの種類は大きく分けてカスタム可能そうでないものの2種類。


かわいいテンプレートがたくさん!

みてるだけでワクワクしてきます!


もうこれでいいかと思う心を押さえて 

『カスタム可能』を選択。


『カスタム可能』も、「CSS編集用デザイン」とそれ以外の簡単カスタマイズデザインの二つに分かれるようですね。


色々できる「CSS編集用デザイン」を選択。




いよいよ CSS編集

まずはヘッダー画像の設置。




これをヘッダーに設置


ネットで検索してコードをコピーして張り付ければできるんでしょ!

簡単!簡単!


って思ってました・・・(-_-;)



何度やってもうまくいかない・・・

なんで~(つд⊂)エーン



投げ出したい気持ちをぐっとこらえて調べた結果

なんと新デザインと旧デザインでコードが違うみたい!!


場所を表すコードが変更されていて

知らずに旧コードを使っていたらしい・・・


 例)ブログヘッダーエリア

  (旧)skinHeaderArea(新)skin-bgHeader


そんなの知らないよ~っと叫びながら

新コードでやってみたらできた~(≧▽≦)


同様にメニューバーも設置。



カスタマイズ前


カスタマイズ後


こんな感じになりました!


ここまでやるのに何時間かったんだろう・・・


でも、もうわかったので大丈夫!!


今度はサイドバーの方のカスタマイズもやってみたいと思います。


もし私のようにできなくて困っている方、

自分の選んだデザインが旧デザインか新デザインか確認してみてください。


見分ける方法は、プロフィール画像の形が四角いなら旧デザイン

丸い画像なら新デザインだそうです。



ついでに簡単カスタマイズもやってみた

せっかくなので、簡単カスタマイズにも挑戦!

CSS編集しなくても簡単にオリジナルヘッダー画像が挿入できる!

これは簡単!



メニューバーはCSS編集できなくてもつけられるようなので


 ・ヘッダー画像をオリジナルのものにしたい

 ・メニューバーを作りたい


やりたいカスタマイズがこれだけなら わざわざ大変なCSS編集用デザインを選ばなくても

ある程度可愛いデザインのついた簡単カスタマイズデザインで十分ですね(*^^*)


アメブロカスタマイズにご興味のある方

何かお困りの方

新しくアメブロ始めたい方


お気軽にご相談ください!