in the blue sky
 〜社会人の、雑記とゲームなblog 〜 
  
スポンサーサイト
2008/10/13(月) 03:56:32| | トラックバック(-) コメント(-) | ページトップへ
カスタマイズ(5) 時計
皆のためと言うよりは、自分に対しての覚書で。
他の人は参考程度に。

もし試すのであれば、今使用しているテンプレートをもう一つ追加して
そちらで実験してからという方法を薦めます。

使用テンプレート:blue


今回はフラッシュの時計の設置。
設置自体は簡単。配置に拘ると少し大変になるかも。


とりあえず、ここここから好みの時計を選びHTMLタグを取得します。
あとはそれを<body>内に貼り付けるだけ。

問題の設置場所です。
blueのHTMLの<body>を見ると、大まかにですが
・ブログのタイトル部分
・左のメニュー
・中央のエントリー欄
・右のメニュー
の順にブロック構成されているのがわかります。

<div id=・・・>で大まかなブロック分けになっており
<div class=・・・>で細かく
ベース・ヘッド・ボディ・フットに分かれています。
あとは設置したいところの目星を付けて貼り付けます。

自分みたいにカレンダーの下に付けたい場合は、
カレンダーのブロックが終わって
次のブロックが始まる直前の位置に貼り付けます。

こればかりは練習用のプレートを用意してやったほうが良いと思います。

別の方法としてスタイルシートで位置の指定もできると思いますが、
如何せん自分はCCSを完全には理解していないので止めました。


最後に。
フラッシュのプラグインをインストールしていない人のために
macromediaへのリンクを張っておくと、なお良いかと。

自分は一番下に張ってあります。
カスタマイズ(4) アクセス解析
皆のためと言うよりは、自分に対しての覚書で。
他の人は参考程度に。

もし試すのであれば、今使用しているテンプレートをもう一つ追加して
そちらで実験してからという方法を薦めます。

使用テンプレート:blue


今回はアクセス解析の設置。
・・・といっても自分のに付けているFC2アクセス解析では、
説明の全てはFC2でされてますし(汗)。
他のアクセス解析は知らないし。
・・・・・・まあ、いいか。


まずはFC2のアクセス解析に登録。
   ↓
取得したHTMLタグを自分のテンプレートのHTMLの<body>タグの
直ぐ下に貼り付ける。
   ↓

以上。

広告のアイコン化とかはここに書いてあるタグを
<head>の下に貼り付けます。
カスタマイズ(3) 背景(3)
皆のためと言うよりは、自分に対しての覚書で。
他の人は参考程度に。

もし試すのであれば、今使用しているテンプレートをもう一つ追加して
そちらで実験してからという方法を薦めます。

使用テンプレート:blue


今回は記事のエントリー欄の背景色の変更。


スタイルシートの編集を選び、上から5分の2くらいの所にある

/************************************/
/* main 要素 */
#mainBlock {

と書いてある直ぐ下にある

.mainEntryBlock {
     border: 1px solid #014D71;
     margin: 15px 0px 0px;
}

のところを

.mainEntryBlock {
     border: 1px solid #014D71;
     margin: 15px 0px 0px;
     background-color: #ADFFAD;
}

のようにする。
「#ADFFAD」はカラーコードなのでこことかから好みのを選んで下さい。

ちなみに、

     background-color: #ADFFAD;

の部分を、前回みたいに

     background-image: url(●);

にすれば(●にはURLを指定)柄模様等にも出来ます。
カスタマイズ(2) 背景(2)
皆のためと言うよりは、自分に対しての覚書で。
他の人は参考程度に。

もし試すのであれば、
今使用しているテンプレートをもう一つ追加して、
そちらで実験してからという方法を薦めます。

使用テンプレート:blue


今回も背景の変更。
HTMLのほうを弄っても構わないと思うが
自分はスタイルシートの方から変更。


背景全体を柄模様に変える場合。

まずは模様のファイルのアップロード。
別に模様でなくても、好きな壁紙でも可(サイズに注意)。

模様はここここからどうぞ。

スタイルシートの編集で上から10行目くらい

     padding: 0;
     background-color: #FFFFFF;
}

の部分を

     padding: 0;
     background-image: url(●);
}

と変更。●にはファイルのURLを指定。
自分のファイル形式は、
http://自分のブログのアドレス/file/アップロードした時間
というファイルなので、皆も似たようなものではないかと。

このとき画面がスクロールする時に
背景も一緒にスクロールするので、
これがいやな人は

     padding: 0;
     background-attachment: fixed;
     background-image: url(●);
}

として下さい。
カスタマイズ(1) 背景(1)
皆のためと言うよりは、自分に対しての覚書で。
他の人は参考程度に。

もし試すのであれば、
今使用しているテンプレートをもう一つ追加して、
そちらで実験してからという方法を薦めます。

使用テンプレート:blue


今回は背景の変更。
HTMLのほうを弄っても構わないと思うが
自分はスタイルシートの方から変更。


背景全体の色を変える場合。

テンプレートの設定からスタイルシートの編集を選び
始めのbodyブロック内の上から10行目くらいに

     margin: 0;
     padding: 0;
     background-color: #FFFFFF;
}

という記述があるので、「#FFFFFF」の部分を変更。
カラーコードはこことかに一覧表があるので参考にして下さい。
ホームページ アフィリエイト レンタルサーバー FC2ブログ