コンパクトデジカメ画像で、日常&花&趣味など!ボチボチ弄ってまぁ~す♪

 ジャプラノート2

 コンパクトデジカメ画像で、日常&花&趣味など!
 ボチボチ弄ってまぁ~す♪

Google
 

Yahoo!検索


pc1
       いらっしゃいませ♪ 現在ジャプラノート2をご訪問の方は 名様ですぅ~♪    

<<07 1234567891011121314151617181920212223242526272829303109>>
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--/--/-- --:-- | スポンサー広告 | page top↑
スタイルシート♪

今日は、一度に食べた♪プリンの数の話は。。。
後日という事で♪(笑

スタイルシートの使い方について、ちょこっと。。。

ブログの場合、テンプレートを作る際にHTMLでブログの骨格を決め
CSS(スタイルシート)で、飾りや色を指定し決めますぅ~♪
ですが。。。
記事のエントリー部分の色などは、一度決めてしまうと!
文字色との兼ね合いも有り!
極端な色の変更がし辛くなってしまいます♪

そこで今回は、記事ごとにスタイルシートを使用して♪
バックの色や画像を入れる方法を♪
プリンを食べながら♪
ちょこっと書いてみたいと思いますぅ~♪
っで!まずは。。。
エントリー画面に、画像を壁紙として入れる方法です。
今、ご覧になっているのがソレ!ですぅ~(笑




上の画像を入れる場合のソースですぅ~☆彡

<div style="width:540px; height:380px; overflow:auto; border:0px ridge #ffffff; padding:5px; background-color:#FFFFFF; BACKGROUND-IMAGE:url(壁紙用画像アドレス); background-repeat:no-repeat; background-attachment:fixed; background-position:50% 50%;"><font size="2" color="#000000" style="line-height:160%;">
この部分に、文字や画像などを挿入
</font></div>


● height:380px;は、縦の長さです。
右横にスクロールを表示したくない場合は、削除してください。

● width:540px;は、横幅なのですが。。。
ご自分のエントリー部分に合ったサイズをご記入下さい♪
大き過ぎると!テンプレートが崩れる場合が有ります!
100%と、記入しても良いのですが。。。
縦の長さを指定した場合、スクロールバーが表示されないことがありますので
高さを指定しない時のみに、width:100%;をご使用下さいね。

● position:50% 50%;は、画像の位置の指定です。
前の50%が、横の位置で!後ろの50%が、縦の位置です。
100% 100%にしますと、右下に表示されますので。。。
小さい画像を入れる場合は、お好きな位置に指定してください。

上の黒バックのソースですぅ~☆彡

<div style="width:510px; overflow:auto; border:3px ridge #999999; padding:15px; background-color:#000000;"><font size="2" color="#FFFFFF" style="line-height:160%;">
この部分に、文字や画像などを挿入
</font></div>

スタイルシートの記述方法は、以下のように!
width: 510px;
:(コロン) ;(セミコロン)

全て半角で!1セットですので♪記述忘れの有りませんように♪

※ 今回フォント部分の指定は、スタイルシートでの記述にして
ありませんので以下の表示に変更してもかまいませんが。。。
ブラウザーで、文字の大きさは変更できなくなりますので
文字の大きさで!レイアウトが崩れないようにしたい場合は、
こちらを使ってねぇ~♪
<font style="font-size:14px; color:#FFFFFF; line-height:160%;">文字だよ~♪</font>

縦&横のサイズを指定して小さくすると♪
こんな感じにもなりますぅ~♪
お知らせ♪

プリンは、残さず食べましたぁ~♪
プリンは、残さず食べましたぁ~♪
プリンは、残さず食べましたぁ~♪
プリンは、残さず食べましたぁ~♪
プリンは、残さず食べましたぁ~♪
当然!血糖値も♪上がりますたー。


2007/02/23 20:20 | Blogカスタム | トラックバック(0) | コメント(24) | page top↑
<<スタイルシートⅡ♪ | ホーム | イメージマップ四分割♪>>
コメント
マスター さん 今晩は!
プリンはさぞ美味しかったでしょうね。
どなたかのブログでもHTMLよりスタイルシート
の方が主流になるよ という記事を読みました。
テンプレートは無理なので簡単なものでソース使ってみたいと思います

分割はお陰さまで前回より簡単、JTrimも勉強させていただいたので良くわかりました。有難うございました。
2007/02/23 20:49URL | 青空 #-[ 編集] | page top↑
今晩は。ますたー。さん
記事ごとのスタイルシート、オシャレですね。
って大変そう、でも出来るかな~
その前にコピペそのものが出来ない、白に白い字、
これはどうしたらいいですか?それを解決してから
考えよー。グラデーションにして、ですよね。

黒も素敵、(私の写真)いろいろに応用できるかも、
画像530ではwidth:は何処までになりますか、
大きすぎますねきっと。v-287
2007/02/23 21:26URL | #-[ 編集] | page top↑
ますたー。さ~ん こんばんは♪
今ちょこっと試してみましたが 
どちらも使えそうですね。。。
使いこなせるか否かは別としてですが…(汗)
私もテンプレートは弄れないので
楽しみが増えますた~♪

プリンはホントに一人で食べたんですか!?
お風呂場で鏡にお腹を映してみるのも
一つの手かもですよ。。。



2007/02/23 23:46URL | nom #-[ 編集] | page top↑
ますたー。さん♪こんばんわぁ~♪
うわっぁ!!!プリン4個も食べたのですか?ヾ(℃゜)々
大変そんなに食べたら身体がプリン体でいっぱい!!!(笑)


へっへへ♪........今日もどっこいしょ!!!ヾ(^^へ)

     毎日、お持ち帰りの出羽ママでしょ~う♪
倉庫がいっぱいにたまっていくぅ~~(笑)
宿題...どんどん増えてしまいましたぁ~♪
φ(.. )春休みが終わるまでできるっかなぁ~(ー。ー)ボソッ

今日のぷりんソースも正直.......欲しかったんだぁ~(^_-)-☆
何時も何時もアリガトウございますm(__)m早速アップしちゃいました♪
2007/02/24 00:17URL | 出羽ママ #-[ 編集] | page top↑
青空さん♪ こんちゃ~っす♪
コメント♪めっちゃ、嬉しいですぅ~☆彡

ほんと!スタイルシートは、覚えておいて損は無いですよ~(笑
HPの作製にも、最近は良く使われるようになりましたぁ~♪
ジャプラノート1もそうなのですが。。。
gooBlogでも!カスタムできるテンプレートが
いくつかありますので♪
ぜひ!挑戦してみてくださいねぇ~☆彡
2007/02/24 09:35URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
玲さん♪ こんちゃ~っす♪
コメント♪めっちゃ、嬉しいですぅ~☆彡

ハイハイ♪これは、色々な記事の表現に使えると思いますよ~♪
使い方も♪いたって簡単で。。。?
【この部分に、文字や画像などを挿入】の部分に
普段通りの記事を入れればOKですぅ~♪

あれっ?
コピペが出来ませんか???
白に白い字?
このソースの中に、バックの色と文字の色を指定するカラーコードの部分がありますので。。。
読み易い文字色に変更してくださいねぇ~♪

玲さんのテンプレですと、現在は540か550くらいは大丈夫だと思いますが。。。
paddingやborde部分をあまり大きくしますと!
入らなくなるおそれがありますので♪
paddingやbordeは、0pxでも大丈夫ですよ~♪
2007/02/24 09:53URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
nomさん♪ こんちゃ~っす♪
コメント♪めっちゃ、嬉しいですぅ~☆彡

えっ?
もう試してみたのですか?
でも、これ!簡単でしょ?
あとは、作る人のセンス次第?って事で、宜しくですぅ~(笑
nomさんのテンプレートは、おいらのと一緒の!
カスタム用ですねぇ~♪
是非!少しずつ弄ってみてくださいね☆彡
スタイルシートの中身を変更するだけなら♪
結構!簡単ですよ~♪

あっ!
お風呂場の鏡は、早急に!撤去しますぅ~(笑
あまりのおぞましさに。。。
激痩せしたら困りますので♪
2007/02/24 10:04URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
出羽ママさん♪ こんちゃ~っす♪
コメント♪めっちゃ、嬉しいですぅ~☆彡

エッヘヘヘ♪
食べ過ぎでしたかねぇ~(笑
でも。。。
小さな事ですが、4個じゃなくて!6個ですぅ~♪
まぁ、たいした差では有りませんがぁ~。。。
当然!お腹のお肉は、プリンプリンですよ~(笑

一声♪かけてくれれば、トラックで!配達しますよ~♪(送料無料)
って!!!おいおい!
もう、使っちゃったの?(早ッ!!!(笑
2007/02/24 10:13URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
ますたーさんいつも拝見しながら、すみませんご無沙汰してます。婆に理解できないとあきらめることが多くて・・イメージマップ四分割ソレナリにでき、エイッとばかりにアップしました。有り難う御座います。
たくさん召し上がったプリンのスタイルシートも試してみました。嬉しいです画像が揃ったらまたお借りしたいです。今後ともよろしくお願いします。(^^♪
2007/02/25 00:42URL | カンナ #-[ 編集] | page top↑
カンナさん♪ おこんばんわぁ~♪
コメント♪ありがとう!めっちゃ!嬉しいですぅ~♪

いつも、説明が不充分でして。。。
ほんとご迷惑をおかけしておりますぅ~♪
そんな方々の為に♪BBS(掲示板)を作りましたので♪
何か有りましたら?(笑
BBSの方へ!苦情でも♪プリンの食べ方でも?。。。
何でも、書き込んでくださいねぇ~☆彡
こちらこそ!宜しくですぅ~♪
2007/02/25 18:08URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
ますたー。さん コンバンワ

何とか 投稿しました。
文章は 中央寄せにしたかったのですが?
2007/03/01 02:02URL | shigeko #-[ 編集] | page top↑
shigekoさん♪ おっはよぉ~っす♪
コメント♪めっちゃ、嬉しいですぅ~☆彡

バッチリ♪出来てましたよ~♪
中央に寄せるのは簡単で、色々な方法があるのですが。。。
今回のソースの前に<center>、後ろに</center>を付けてみてくださいね♪
2007/03/01 09:10URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
ますたー。さん コンバンワ

続いて お世話になります。
中央寄せは 出来ました。ありがとうございました。
しかし 画像が? 
メモ帳へソース貼り付けでしていますが、これでは だめなのでしょうか?
2007/03/03 01:18URL | shigeko #-[ 編集] | page top↑
shigekoさん♪こんちゃぁ~っす♪
コメント♪ありがとう!めっちゃ!嬉しいですぅ~♪

あれれっ?(笑
画像は。。。
画像を貼り付けるいつもご使用のタグを♪
『この部分に、文字や画像などを挿入』の場所に
貼り付けていただければ大丈夫のはずなのですがぁ~♪

メモ帳での編集で大丈夫ですが。。。
たまに!折り返しの所で、改行されてしまう事がありますので♪
気を付けてくださいねぇ~♪
2007/03/03 13:27URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
ますたー。さん コンバンワ

<画像を貼り付けるいつもご使用のタグを♪>
が判らなくっていろいろ試しましたが 判りました。
ありがとうございます。
次回 には 画像挿入で 投稿したいと思います。
<img src="画像アドレス"> を使うんですね!
2007/03/05 01:21URL | shigeko #-[ 編集] | page top↑
shigekoさん♪ おこんばんわぁ~♪
コメント♪ありがとう!めっちゃ!嬉しいですぅ~♪

ありゃ!
説明不足でしたねぇ~。。。
おいらは、エディター類は使用していないので。。。
画像を表記する場合は、<img src="画像アドレス"> ←このタグが、
基本になっていますのでぇ~♪
つい!うっかりしてしまいましたぁ~(笑
ブログを書く時に、エディターを使うと。。。
自動的にこのタグが、入るようになっているのですぅ~♪
ただ、このタグの状態は基本になる物ですから♪
まだまだ色々な物が、このタグに付属していくわけですが。。。
それは、また♪徐々に行きましょうね♪
取り敢えず、このタグの状態で!画像は表示されます。
2007/03/05 18:04URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
ますたーさん こんにちは~
「記事ごとのスタイルシート」のソースお借りしました。画像10枚も入れてしまいチョトごたごたした出来上がりですが背景画像が動かずにスクロールするのが
めちゃ嬉しくて有り難う御座います。時々使わせていただきます
2007/03/07 12:47URL | カンナ #-[ 編集] | page top↑
カンナさん♪ こんちゃぁ~っす♪
コメント♪ありがとう!めっちゃ!嬉しいですぅ~♪

キャッホォ~♪
ご利用くださいまして、ほんと!嬉しいですぅ~☆彡

今回のソースは、基本的なものにしましたぁ~♪
文字の色や配置なども、簡単に変更できますので。。。
いろいろと、アレンジしてみてくださいねぇ~♪
2007/03/07 16:30URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
ますたー。さん コンニチワ

やっと 投稿しました。とりあえず 一枚ですが。
画像を 入れることが出来て 嬉しいです。
(ためしでは プレビュー確認でしたので~)
壁紙は もっと薄い(白っぽい)方がいいのでしょうか?
これからも 宜しくお願いします。

2007/03/07 17:50URL | shigeko #-[ 編集] | page top↑
shigekoさん♪ おこんばんわぁ~♪
なかなか良い感じですよぉ~☆彡

背景画像は、白や黒の方が文字は目立つと思いますがぁ~。。。
あまり白過ぎると!背景画像が何の画像か解り辛くなって
しまいますので。。。
その辺の調整が難しいですねぇ~。。。(笑
でも!そこが面白いところなんですよねぇ~♪
2007/03/08 00:17URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
ますたーさん こんばんは~
またまた、ソース使わせて頂きました。使いやすく背景の画像を楽しめて、それこそメチャ嬉しいです。
友だちが使いたいそうですが教えてあげてもいいでしょうか~~お訊ねします。
2007/03/08 21:05URL | カンナ #-[ 編集] | page top↑
カンナさん♪ こんちゃ~っす♪
コメント♪めっちゃ、嬉しいですぅ~☆彡

いやぁ~♪
そんなに喜んでいただけると。。。
そりゃもう!メッチャンコ嬉しいですぅ~☆彡
お友達にも、どんどこどんと!勧めていただけると♪
これまた!めっちゃ嬉しいっす♪

それぞれ皆さんの個性が出ますので。。。
見ているおいらも、とても楽しみですよ~♪
2007/03/09 10:41URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
はじめまして、ますたーさん。
記事の中に壁紙のスタイルシート、かっこいいv-363
早速、明日の記事に使用させて頂きま~す!

壁紙に使用する画像のサイズはwidth(540px)と同じにしなくてはいけないのでしょうか?

他にも真似したい技が一杯で、これから足繁くますたーさんのブログにお邪魔したいと思います。
よろしくお願いいたしま~すv-435

また
2007/03/11 18:48URL | 暇人ひー #-[ 編集] | page top↑
暇人ひーさん♪ はじめまして。
コメントありがとう♪ ひじょ~に!嬉しいですぅ~♪

たいしたものは、ありませんが。。。
宜しければ、どんどん使って下さいねぇ~♪

画像サイズは、Blogの横幅に合わせてご自由に調整してくださいね♪
小さい画像を使用する場合はソース内の。。。
background-position:50% 50%;
この部分の%の数値を変えますと♪
記事内のお好きな所に表示出来ますよ~♪

こちらこそ♪宜しくですぅ~ ☆彡。.:*:・'゚゚'・:*
2007/03/12 17:45URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
コメントの投稿












管理者にだけ表示を許可する(内緒話にはチェックを入れてね♪)

トラックバック
トラックバックURL
http://japra.blog34.fc2.com/tb.php/465-d9e400a5
この記事にトラックバックする(FC2ブログユーザー)
ホーム

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