AmebaOwndでCSSを使ったカスタマイズするには？

こんにちは。
Webクリエイター加藤です。



来ちゃいましたよお～～～！！
ついに、AmebaOwndでもCSS編集機能が～～～！！(≧∇≦)/

まだ、ちょろっと触っただけですけどね。。

私個人が使ってみて感じたのは。。


・エディタ入力に戸惑うかもしれません。。
・エディタの入力ウィンドウのサイズが小さい為に、直接入力するのは慣れるまで大変
・CSSが、モバイル用とPC用があるので、カスタマイズする時には、両方確認しつつ編集する必要がある。
・テーマを途中で変更する場合、編集したCSSのままだと、変更したテーマではデザインが崩れる。


です。

一番大変なのは、「class:(クラス)」がかなり多く設定されているので、カスタマイズを行う時には、注意しなければなりませんね。。

とは、いうものの、楽しくてしょうがないです。（笑）

では、早速！！

１．まずは、ダッシュボード＞デザイン編集＞cssカスタマイズへアクセスしてください。



２．開いたウィンドウに左側に、CSS編集用エディタウィンドウが開いています。
上が、「PC用CSS」で下が「モバイル用CSS」ですね。

「PC用CSS」


「モバイル用CSS」







３．後は先程言った「class」に十分注意して、CSS編集を行ってみてください。
（なれない方は、解読大変かもしれません。。。^^;）


因みに。。。
ちょっとだけ、私も自分のAmebaOwndページをCSSで弄ってみました。。


ビフォー



アフター






背景と、サムネイル画像をカスタマイズしてみました。
このカスタマイズ方法は、別の記事でご紹介させていただきますのでぇ～！！

それと、もう一つカスタマイズした箇所があります。。

これ、わかるかなぁ～～～！！
宝探しではありませんが、ちょっと探してみてください。

ここかな？あれかな？と何か見つけた人は、気軽にコメントを入れて下さいませ！！



ではまた。
加藤でした。


私のSmilefactorytenのAmebaOwndサイトはこちらでーす！！
kato AmebaOwnd site