さてさて、先日ブログを作成しましたが、カスタマイズもせずそのままにしていました。
ブログの説明で「ブログのカスタマイズについて書きますよ」と公言しておきながら、なんともお粗末だということで、重い腰をあげてブログをカスタマイズしていくことにいます。
ということで、まずはブログの一番上のタイトル部分の変更を行ってみました。
ちなみに私が使っているデザインは「CSS編集用デザイン」というシンプルなものです。
1.まず、ブログデザインを開くと「現在適用中のデザイン」というところに「CSSの編集」というリンクがありますので、そこをクリックします。
2.ブログデザインのCSS編集という画面が開きますので、「skinTitleArea」という文字を検索します。(画面上でCtrl+Fを押すと検索ボックスが出てくるので、そこに「skinTitleArea」という文字を入力して、検索ボタンを押すと検索できますよっと)
3.下記のような場所が見つかったかと思います。
=====================================================
/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea{}
=====================================================
4.私は独自の画像を入れたかったので下記のように変更しました。
=====================================================
/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea{
background:url(http://stat.blogskin.ameba.jp/blogskin_images・・・) no-repeat;
height:100px;
}
=====================================================
backgroundというのは、ここで背景を指定しますよっということです。
この場合は、ブログタイトルのエリアの背景を指定しますよっということですね。
そのあとのhttp://・・・というところには、アップロードした画像のパスを指定します。
最後のno-repeatというのは、繰り返して表示しないでっということです。
私の場合は大きい画像を使っているのでno-repeatを付けましたが、小さい画像を繰り返して表示したい場合は、最後のno-repeatはつけないで下さい。
そして最後にheight。これは、このエリアの高さを指定しますよっということです。
この場合は、ブログタイトルのエリアの高さを指定しますよっということですね。
ちなみに私は高さが100pxの画像を使いたかったので、heihgt:100pxとしました。
ということでどうでしょう・・・
やりました。ついにブログのタイトルがカスタマイズができました。
ああ、これでやっとブログのカスタマイズの入り口に立つことができました。
これからもちょっとずつブログをカスタマイズしていこうと思いますよっ。
ではでは、本日はこの辺で(* ̄▽ ̄)ノ~~ マタネー♪
