スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--/--/--(--) | スポンサー広告 | トラックバック(-) | コメント(-)

自分のBlogをつくろう

ちょっとづつ 基本のスタイルを変えてくるとあれもこれもと欲張りになります。
あといくつかの箇所を ほんのちょっとアレンジするだけでオリジナルのBlogにして見ましょう

サイドバーのプラグインタイトル
まずは、「デザインの設定」→「スタンダード・CUSTOM」をクリックすると テーマの設定画面が開きます
すでに何度も変更しているのでフォームの中にはタグが表示されていると思いますので その中の下のようなところを探します。
  /****** 右側部分の設定 *******/
     ・
     ・ 省略
     ・
   sidetitle{
   color:#f66812;
   font-size:x-small;
   font-weight:bold;
   margin-bottom:5px;
   border-bottom:1px solid #f66812;
   width:160px;
  }
説明


border-bottom:1px solid #f66812; 
タイトルの下に下線を入れる場合。色コードはお好きなものを!
入れないときは 削除しても可。
background:#ff6464;
タイトルの背景に色を付ける場合は 追記する。
color:#f66812;の下の行など適当な所で可。
なお、ここにあわせて画像を入れる場合は、
background:#ff6464 url('http://○○○.gif') no-repeat; となる。○○○はアップロードしたファイル名

日付や記事タイトルも同じ要領です。
日付は /****** 本文部分の設定 *******/以下にある.date{のところで

記事タイトルは .title{ でおこないます。

TOPの画像を自分らしく
まずは、UPしてもよいフリー画像を探し、編集します。
HPビルダーをお持ちの方は、ウェブアートデザイナーを起動し、
「編集」→「キャンパスの設定」で
自分が「TOPの3カラム化してみよう」で設定した#containerの幅と同じにします。
高さは、ライブドアの場合 枠幅のあるスタイルシートだと150前後が手ごろです。
子猫もその高さでしたし、他の画像も同じ位がおおいですので。
画像を切り貼りなどして作成したら 保存し、FTPでアップロードします。
アップロードしたら 「テーマの設定画面」で、下の部分を直します。
 /****** Body全体の設定 *******/
  body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  text-align:center;
  background:#f66812 url('/_img/kitten/bg.gif') repeat-y 50% 0;
    ・
   省略
    ・
 /****** タイトル部分の設定 *******/

 /* タイトル部分の位置、高さなどの設定 */
  #banner,#subbanner{
  width:780px;
  height:150;
  background:url('/_img/kitten/neco_a01.jpg') no-repeat 50% 0;
 }
  

    なおす所(bodyと#banner,#subbanner)


    background:#f66812 url('/_img/kitten/bg.gif')
     repeat-y 50% 0;


    この部分の 
    url('/_img/kitten/bg.gif')

    url('http://自分のUPロードしたアドレスへ
    変える ')
 
    なおrepeat-y とは、縦に画像を
    繰り返すという意味なので
    no-repeat へ置き換えてください。

リンクの色を変える

ライブドアの開発日記でも紹介されていますが、
 a:link{color:#36c;text-decoration:underline;}→訪問前のリンク
a:visited{text-decoration:underline;}    →訪問済みのリンク
 a:active{text-decoration:underline;}    →クリックした瞬間のリンク
a:hover{color:#999;text-decoration:none;} →カーソルをのせた時のリンク
というふうに設定されています。
color:のあとの#999部分を 色コードを参考にこまめに直します。
設定箇所などは ライブドアの開発日記にかかれていますので ご覧ください。
スポンサーサイト

2005/06/07(火) | Blogカスタマイズ | トラックバック(-) | コメント(0)

«  |  HOME  |  »

コメントの投稿














管理者にだけ表示を許可する
 |  HOME  | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。