AmebaOwnd(アメーバオウンド)のデザインを変える方法(CSSカスタム)
AmebaOwndに変えたので、さっそくCSSをいじって変えようとしました。このちょこっといじるのが意外と好きです。
でも、なんかうまくできない。
だいたいのブログサービスは、ページのソースを見ればCSSのいじり方がわかります。どんなタグが使われて、class(クラス)の名前が何になっているかとかのっているので。

でも、AmebaOwndはソースがよくあるページのソースとは違います。ソースを見るとSEOにはちょっと弱いのかなという心配になります。ソースとはHTML言語で書かれたデータのことです。これをInternet ExplorerとかChromeとかのブラウザが、デザインされたページに変換してくれています。
他の人はどういうふうにクラス名を調べてCSSに反映させてるのかわからなくて調べてみました。でも、あまりわからなかったです。みなさん普通にカスタムしてますね。ぼくのやり方が悪いのかと不安になります。
何気なくブラウザでいじっていたら見つけました。
GooleChromeのデベロッパーツールを使う。
Chromeさんは便利なお方です。ブラウザにページの構造を確認できるツールがもともと入ってます。
それがデベロッパーツール。

Chromeの右上辺りにある横棒3本のアイコンをクリックします。そこから「その他のツール」を選んで「デベロッパーツール」を押します。そうすると上にWebサイトの画面、下にWebサイトのソースが表示されます。

これを使えば、ページのどの部分にどんなタグが使われてて、CSSは何が適用されているかがばっちりわかりました。
このデベロッパーツールはかなり便利です。パソコン用のページの表示だけじゃなくて、iPhoneとかNexusとかでページが表示されたときのデザインが確認できるんです。

いちいちスマホで表示の確認をしなくてもパソコンだけでオッケーです。
Ameba Owndは自分でいじるサービスではない。
AmebaOwndはもともとのデザインの完成度が高いです。それに情報を打ちこめばなにも考えずにおしゃれなサイトが完成してしまいます。
デザインもシンプル、設定もシンプルで、あまり入りこむ余地がないとも言えます。でも使っているうちに細かいところがやっぱり気になってくるもの。もうちょっといじりやすくしてもらえるとうれしいです。
まだサービスが始まって1年くらいしか経っていないのでこれからいろいろと改良されてくるんだと思います。ただ、それが悪い方向にいかなければいいのですが。