わんこの写真と気ままな日記!

パピプー/マルプー犬・インコ2羽と日常の写真、その他札幌観光、空、変なもん?など気ままな写真をのせています (^^;)

テンプレ!ど素人カスタマイズ!!

テンプレど素人カスタマイズ ③ (^^;)

お盆のお参りも済ませ、ゆっくりとした日々を・・・(ー'`ー;)ムムッ

(* ̄ー ̄)"b" チッチッチッ  

がしい日々を過ごして、ただ今やっとゆっくり (;-_-) =3 フゥ


先日の続き~~~!! 

ど素人カスタマイズ( 
SimpleBox Shiro )の場合!!他も似たり寄ったり{/汗/}

前回は:タイトルバーの背景タイトルバーの文字・サブタイトルでした{/!!/} 

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

今回は: <
記事内の固定背景>

SimpleBox Shiroの・・・・・(Style Sheet)を開けてみましょう~^^!

Style Sheetから

まず初めから↓ このようになってると思います!!



/*
 SimpleBox Shiro v1.2.3
  designed by NTT Plala Inc.
*/


body {
 margin: 0;
 padding: 0;
}





↑だけじゃーわからないですよね~~ε=( ̄。 ̄;A 

bodyでは背景を固定するタグを入れることができます!!

変更後↓





σ(^^) の場合!! (SimpleBox Shiro )

body {
  background-image : url("http://pub.ne.jp/greenleafyou/image/user/◎×△■.jpg");
 
background-attachment: fixed;
  background-position: 90% 100%;
 
background-repeat: no-repeat;}



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
("http:~~~~");は、ファイルのアップロードしたアドレスを入れる。

background-attachment: fixed; ←画面がスクロールしても背景が固定

background-position: 90% 100%; 
←背景の位置


%で表示してますが、

lesft / right / center / top / bottm /で表示でも OK^^v

例えば:
background-position: rigt bottm;  (右揃えの下で配置)

最初が横位置 後が
縦位置


※ %の場合

100-    0   ・・・右上
100-100 ・・・右下
   0-   0 ・・・左上
   0-100  ・・・左下
    50- 50  ・・・真ん中

%の方が微妙な位置が調整出来そうです・・?^^!


background-repeat: no-repeat;} ←繰り返し無しの表示




以上ですが、、、(〇o〇;) これだけでは、、プレビュー見ても

おやっ{/目/}反映されて無い!!! トホホ (;-_-) =3


まだ変えるところがありんす ( °◇°;)


スタイルシートをさらに下行くと、↓があります!!



.
body {
 font-size:small;
 line-height:160%;
 font-family: Verdana,sans-serif;
 
background: #fff url("image/bg.gif") repeat-y center top;
 text-align: center;
}


background: #fff
・・・・白色になってます。。記事内を透明にするため

            あえて赤色の部分を削除しました{/汗/}


これで反映しました( ´o`)=3



※本来はbackground: none;らしいのですが、
        ↑では背景が出てきませんので{/衝撃/}削除に。。

(* ̄∇ ̄*)エヘヘ。。。なんたって、ど素人ですので。。


タグ入れの際、 {  :  ;  #   など、入れ忘れに気をつけてネ \(*⌒0⌒)b


本日は、、あはは、、、もうネンネします  

 


読んで頂いてありがとうございます♪人気blogランキング←ポチットね


にほんブログ村 写真ブログ デジタル写真へ ポチットお願いしま~す^^!

にほんブログ村 主婦日記ブログ 兼業主婦へ ポチットお願いしま~すネ^^!


 ぽっこりお腹も・・・

 













 


テンプレど素人カスタマイズ ① (^^;)



☆ テンプレートカスタマイズ 素人編 (〇o〇;)
 

ちなみに・・・ブローチのテンプレカスタなので{/大汗/}
 
挑戦してみよ~っかな~~{/嬉しい/}{/複数ハート/}というかた

どうぞ{/汗/}・・・・・自己責任においてお願いしま~す  (* ̄∇ ̄*)エヘヘ

σ(^^) も手探りでやってますだ f(^^;)

どうもブログを初めてしたときは、何が何だかチンプンカンプンで{/大汗/}

大変でした ヾ(;゚曲゚)ノ ギャアア==33333

そこでσ(^^) 的カスタマイズ!!

タグのみだと、わかりにくい部分もありますので、

わかりやすいように (自分がそうだったから (^^;) ) 

画像入りにしましたヾ(´ε`*)ゝ

( ̄△ ̄;)エッ・・?それでもわかりにくいかもぉ~~~ って、、、Σ(T▽T;)    あしからず



  本日は・・一番上部のタイトル(バナー部分)に画像を入れたいとき

      ~~~~あらかじめ済ませておきたい~~~~

 ◎ブログタイトルの画像のアップロード

 ・ご自分の写真を使用(サイズを加工済み) 

 ・素材をお借りしたもの・・・タイトルバナーとかタイトル用で検索す
                   と出て来るかもです^^!

  ※その場合記事内または、サイドにリンクを貼って下さいネ ъ(*゚ー^)

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

ご自分の管理ツールから  (これはあくまでσ(^^) のSimpleBox Shiroの場合)
   ↓
テンプレートの編集
   ↓
SimpleBox Shiroを選択 ( 現在ご使用中でもOK、ほぼ同じかなぁ~{/汗/} )
   ↓
プルタブメニューにて「StileSheet」を選択

わかりずらい方 ↓ 

         図解説明 ъ(*゚ー^)

図解説明の、は現在ご使用中のテンプレでされたい方!!(反映されるので) 

は一つ一つ落ち着いてアップしたい方!! (プレビューで確認しながら)

なんか意味わかるかな 

自分で書いていて( ̄△ ̄;)エッ・・?なんか思ったりして (^^;) しーません。。



◎スタイルシートを選択すると上から何番目か下記のようになってます!!


#banner {
 background: #fff;
 height: 105px;
 padding: 0px;
 margin-top: 10px;
 margin-right: 10px;
 margin-left: 10px;
 text-align: left;
 border: 1px solid #ccc;
 clear: both;
}


↑このようになってますね!!


↓変更↓


#banner {
 background: url
("
http://pub.ne.jp/○×※※○/image/user/※※※※.jp") no-repeat center top;
 height: 130px;
 width: 760px;
 padding: 0px;
 margin-top: 10px;
 text-align: left;
 border: 1px solid #339966;
 clear: both;
}


ピンク文字を替えるところ、追加するところ!!

↑の青はご自分のアップロードしたアドレスを明記して下さいネ♪




タグを一通り打ち終えたら、↑のように保存しておいた方がいいでしょう。。

その後↓で確認してみて~~ d(*⌒▽⌒*)







margin-right: 10px; 
 変更後は削除しました!!
margin-left: 10px;   
変更後は削除しました!!


marginと paddingとは・・・・こちら


変更前 border: 1px solid #ccc; ←(これはバナー画像の枠です!!グレー色)


変更後 border: 1px solid #339966; 写真の色に近い画像枠グリーン系



///////
画像の幅・高さ////////
height: 130px; 高さ
 width: 760px; 幅   ご自分の好きな幅高さでどうぞ!!

 図解説明(〇o〇;)


※カラーはカラーチャートから、カラーコードをコピペして利用出来ます。

ご参考に・・・・ こちら 色々とタグ関係ブログ専門サイト{/ピカピカ/}

これで、タイトルバー画像設定完了になります^^!



また後ほど・・・・今度は
ブログタイトル{/!!/}文字に行きます。。


長々と失礼致しました (^^;)   



読んで頂いてありがとうございます♪人気blogランキング←ポチットね


にほんブログ村 写真ブログ デジタル写真へ ポチットお願いしま~す^^!

にほんブログ村 主婦日記ブログ 兼業主婦へ ポチットお願いしま~すネ^^!


 ぽっこりお腹も・・・

 


  









最新コメント
Translation(自動翻訳)


プロフィール

greenleafyous

わんこたち!!
imgs/8/b/8bf2b4aa.jpg



パピプー犬:マックス ♂



imgs/7/9/7991e3d2.jpg


パピプー犬:マリー ♀




imgs/b/5/b5755ec7.jpg


マル゚プー犬:ミリ ♀




greenleafの素材Room
幼稚園・学校バザー等の
チケット枠のテンプレートを
無料で提供しております!!




アーカイブ
メッセージ
Amazonライブリンク
QRコード
QRコード
  • ライブドアブログ