メモ帳
カテゴリ
全体 講座2 投稿 画像の配置 海外サイト 投稿(訂正) リンク トラックバック コメント Moreの機能 メモ帳 画像は小さくビューは大きく テスト 文字の編集 花 音楽 動画 引用 CSS 編集 友達 壁紙 カレンダー 季節 MARQUEE 試行錯誤 コメント欄画像 8月講座 フリーソフト 愛宕浜 未分類 以前の記事
フォロー中のブログ
ユル・いんしょう派の系譜 花に想いを!! 四季いろいろ いつか何処かであえるかも!! ☆きらきら星☆ スクラップブッキングst... ご機嫌いかが Ⅱ Eシリーズで楽しもう 思いのままにⅢ おとぼけ鳥撮り日記2 JTrimで加工 花・旅・カメラとともに ゆたかな心 趣味の世界 ちょこっと園芸 スローライフ そのまま24 新年がきました 朔太郎の世界 ひげ爺のつぶやき 花好き私 写真の楽しさ タグ
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧
|
1 2009年 04月 01日
2009年 03月 26日
2007年 01月 28日
![]() CSSとは、Cascading Style Sheets(カスケーディング・スタイルシート)の略で、 HTML文書の装飾部分を一括管理できる機能です。 HTMLでは、文字の大きさや色、背景色などを個別に指定していましたが、 CSSでは、一括で指定することができます。 HTMLのみでWEBページを作成していれば、文章構造が細かくなったり、 ページ数が増えてくると、それぞれのページを修正することは大変な作業になります。 CSSを活用することによって簡単に修正することができます。 HTMLではテンプレートの基本構造(レイアウト)を、 CSSでは文字や背景の装飾部分を定義しています。 ↓これがこのブログのHTMLのテンプレートの基本構造(レイアウト)です ![]() ![]() ブログの更新情報をpingサーバー(ping受信サイト)に通知するためのものです。 pingサーバー(ping受信サイト)は、ping送信で送られてきたブログの更新情報を表示しますので、そのサイトを訪れるすべての方に、自分のブログの更新情報を知らせることができます 2006年 09月 03日
CSS編集で、DIV.CAL_BODY を探す
DIV.CAL_BODY { WIDTH: 150PX; TEXT-ALIGN: CENTER; /*追加するタグ*/ background-image:url(イメージURL); background-repeat:no-repeat; background-position:bottom; } スキンによっては↓のようにタグを修正しなければカレンダーのヘッドとボディーが一体にならない場合もあります。 DIV.CAL { WIDTH : 190PX; MARGIN : 5PX 0PX; PADDING-BOTTOM : 10PX; BORDER : 1PX SOLID #CECECE; TEXT-ALIGN : CENTER; /*BACKGROUND : #FFFFFF;*/ background-image:url('http://12.pro.tok2.com/~snowdrop/Photo/bg2.jpg'); background-repeat:no-repeat; background-position:bottom left;/ } DIV.CAL_HEAD { WIDTH : 150PX; FONT-SIZE : 8PT; FONT-FAMILY : VERDANA; TEXT-ALIGN : CENTER; PADDING : 4PX 10PX; MARGIN-BOTTOM : 10PX; } DIV.CAL_BODY { /* WIDTH : 150PX; PADDING : 0PX 10PX; TEXT-ALIGN : CENTER; BACKGROUND : #FFF; */ } ~~ここまで~~ 今日に小さな画像を入れる CAL_TODAY { /* FONT-FAMILY : VERDANA,; FONT-SIZE : 7PT; FONT-WEIGHT : BOLD; BACKGROUND : #E2E2E2; COLOR : #3D5586; TEXT-ALIGN : CENTER;*/FONT-FAMILY : VERDANA, ; FONT-SIZE : 7PT; FONT-WEIGHT : BOLD; /*BACKGROUND : #ffffff;*/ COLOR : #3D5586; TEXT-ALIGN : CENTER;background-image:url("http://winterrose.hp.infoseek.co.jp/mh02v-a2.gif"); background-repeat:no-repeat; background-position:center center; } /*~*/で囲んだタグを削除した場合↓のようになります。 .CAL_TODAY { FONT-FAMILY : VERDANA, ; FONT-SIZE : 7PT; FONT-WEIGHT : BOLD; COLOR : #3D5586; TEXT-ALIGN : CENTER;background-image:url("http://winterrose.hp.infoseek.co.jp/mh02v-a2.gif"); background-repeat:no-repeat; background-position:center center; } ![]() ![]() ![]() ![]() ![]() ![]() ☆このCSS編集はブログの玉手箱さんに教わったものです 2006年 09月 03日
コメント欄を広げたり、コメント入力欄にイメージを挿入して楽しむ場合
TEXTAREA.TXTFLDに対して行う .TXTFLD{ FONT-SIZE:9PT; COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:#FFF; } TEXTAREA.TXTFLD{ height:15em; background-image:url(イメージURLアドレス); background-position:right; background-repeat:no-repeat; } ※background-attachment:固定 background-repeat:繰り返しなし background-position:左からの相対位置 上からの相対位置 background-image:url(背景画像のurl) ☆このCSS編集はブログの玉手箱さんに教わったものです 2006年 09月 01日
DIV.POST_HEAD {
MARGIN : 10PX 10PX 0px 15PX; border:2px solid #1c1c1c; background-color:#d9c7d0; padding:5px 0px 5px ; filter:alpha(opacity100,finishopacity=10,style=1); width:100%; } ※padding:5px 0px 5px は上の内余白5px、左右の内余白0px、下の内余白5pxという意味です。 filter:alpha(opacity=開始濃度,finishopacity=終了濃度,style=グラデーションスタイル) で指定します。 filter属性はwidth属性とペアで使用します。 width:100% DIV.POST_HEAD { MARGIN : 10PX 10PX 10px 0PX; background-color:#d9c7d0; padding:5px; filter:alpha(opacity100,finishopacity=10,style=1,startx=30); width:95%; } ※文字がグラデーションと一緒に透けないようにするには背景画像として入れる DIV.POST_HEAD { MARGIN : 10PX 0PX 15PX; padding:5px 0px 5px 10px; background-image:url("背景画像のurl"); } 立体的に見せるには・・・ 下と右のボーダーを少し暗くすると影のように見えて立体感が出ます border-bottom:縦線の太さ 線種 色 border-right: 縦線の太さ 線種 色 DIV.POST_HEAD { MARGIN : 10PX 0PX 15PX; padding:5px 0px 5px 10px; background-color:#ffffcc; border-left:15px solid #669900; border-bottom:1px solid #cccccc; border-right:1px solid #cccccc; } ☆このCSS編集はブログの玉手箱さんに教わったものです 1 |
ファン申請 |
||