「日記はいつも三日坊主。」
ブログの使い方やCSSを勉強していましたが休止中です。
コメント欄・トラックバックの怪しげなURLにはご注意ください。
(たまーにスパムのチェックはしますが消しきれませんのでm(_ _)m)
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
最近の記事
10/15 半透明フィルターの代わりに…
10/12 エキサイトブログ・モバイル…
9/19 スキン編集 ―背景編― 改訂版
9/17 コメント入力欄を大きくする。
9/14 アクセス解析について その1
9/7 POSTTAILの自分のIDを消して…
9/3 模様替えしました。&スクロールバー
9/1 いくら三日坊主といっても
全体 ブログ MENU スキン
編集
素材
配布
日記 リンク 管理用 ・・・ ・・・
|
<   2005年 03月 ( 14 )   > この月の画像一覧
スパムメール
いくつか持ってるメールアドレスのうちの1つに、最近毎日来るんです。
即、振り分け設定して削除してるんだけど
ここに記事にしてみましょ(笑)
同じのがきてる人がいたら返信しないように気をつけてね、という事で。



3/31 件名:これであってますか?
改めてはじめまして♪ゆかだけどアドこれでいいんですよね?
もうすぐ約束の日が来るけどどんな格好で来るか教えてもらっていいですか?
私は白のブーツで上はニットの青系かな?じゃあ仕事がんばってね♪
[PR]
by umigasuki70 | 2005-03-31 20:34 | 日記?
スキン編集記目次
今まで書いた記事を探しやすくするために目次ページを作りました。
画像の持ち出しはお断りします。
HTMLやCSSの記述法に関しては私には著作権はありませんので、
役に立つ部分があればご自由に使っていただいて結構です。
できましたらお役に立てた場合一言メッセージをいただけると光栄です。(強制はしておりません)
が、内容の間違いがない、と言いきる自信はありませんのでその点ご了解ください。
古い記事を読みなおして変なところがあるものについては書きなおしていくつもりです。
変なところがありましたらどうぞ遠慮無くご指摘くださいm(_ _)m

1.背景編
  • スキン編集 ―背景編― 改訂版 NEW! 9/19
  • セルの背景をcssで指定
  • 半透明フィルターの代わりに半透明画像を使ってNNに対応 直しました 10/15
    2.画像編
  • スキンに自分の好きな画像を使う
  • 複数の同じところに同じ画像を表示させる
    3.リンク編
  • <前のページへ|次のページへ>の位置変更
  • カテゴリを別の位置に移動
  • リンク・・・カーソルを置いたら見た目が変わる
  • excite以外のリンク表示方法
    4.記事部分編
  • POSTTAILの自分のIDを消してみました。NEW!9/7
  • 引用記事に囲いをつける
  • コメント入力欄を大きくする NEW!9/17
    5.テーブル編
  • 私流テーブル練習法 1
  • 私流テーブル練習法 2
  • テーブル素材の使い方 (記事部分に使う場合)
  • CSSを使ってテーブルを飾ろう
    6.その他編
  • スクロールバーの色を変える
  • カウンター設置方法 
  • フィルターをかける
    7.素材配布
  • 透過背景用素材
  • テーブル用素材配布1
  • テーブル用素材配布2
    アルバム?
  • 今までのスキン一覧 NEW!9/3
    [PR]
  • by umigasuki70 | 2005-03-31 13:20 | スキン編集記目次
    スキン編集 ― リンク編その4―
    excite以外のリンクをメニューボックス(サイドバー)に表示する 

    Direction of the day after tomorrow さんの「その4 バナーの張り方」を参考にさせていただきました。

    ブログ設定→メニュー管理→ページの下のほうのメモ帳編集をクリック

    c0068715_1318272.gif
    別ウインドーが開き、
    ここにタグを書き入れていきます。


    ●メモ帳タイトルは任意

    ●メモ帳内容
    • 文字リンクの場合
      <a href=http://リンク先のURL>文字</a>

    • バナーを使う場合
      <a href=http://リンク先のURL><img src=http://画像のURL alt=〇〇〇 border=0></a>

      border=0を入れないと画像に枠がつく。
      alt=〇〇〇 画像にカーソルを乗せた時に〇〇〇が出る。
        画像が表示されない時などの説明にもなる使用例
      リンク先を別ウインドーで開く場合は
       <a href=http://リンク先のURL target=_blank>と書く
      改行は<br> 仕切り線は<hr>


      プレビューを押すと右の四角の中に表示される
      それでよければ保存を押す。


    メニュー管理の画面でメモ帳の表示設定をお忘れなく。


    [PR]
    by umigasuki70 | 2005-03-21 14:10 | スキン編集記
    スキン編集 ― リンク編その3 ―
    リンク・・・カーソルを置いた時見た目が変わる

    Direction of the day after tomorrow さんの「その7 リンクをポチっとな」を参考にさせていただきました。

    A:LINK { COLOR: #008; TEXT-DECORATION: NONE; }
    A:VISITED { COLOR: #808; TEXT-DECORATION: NONE; }
    A:ACTIVE { COLOR: #800; TEXT-DECORATION: NONE; }
    A:HOVER { COLOR: #000; TEXT-DECORATION:NONE; }

    A:HOVERの中身がカーソルを置いた時の内容なのでここを書きかえる。

  • ぽちっとな A:HOVER {position:relative; top: 1px ; left: 1px;
      COLOR: #☆☆☆; TEXT-DECORATION: NONE; }

  • 文字を太く A:HOVER {font-weight:bold;COLOR: #☆☆☆; }

  • 上下線 A:HOVER {border-top:1px #f86868 solid;
      border-bottom:1px #f86868 solid;
    COLOR: #☆☆☆; }

  • 背景色 A:HOVER{background: #f86868;COLOR: #☆☆☆; }

  • 下ニ重線 A:HOVER {border-bottom:3px #f86868 double;
      COLOR: #☆☆☆; }

  • 下点線  A:HOVER {border-bottom:1px #f86868 dotted;
      COLOR: #☆☆☆; }

  • 枠線 A:HOVER {border:1px #f86868 solid;COLOR: #☆☆☆; }

  • 背景画像  A:HOVER {background-image : url(http://画像のURL);
      COLOR: #☆☆☆; }


    ※☆☆☆はの6桁または3桁

    4/7追記:
    A:LINK {}  未訪問(一度もクリックしていない)
    A:VISITED {} 訪問済(クリックしたことがある)
    A:ACTIVE {} 訪問中(クリックした時)
    A:HOVER {} (カーソルを置いた時)

    カーソルを置いた時だけではなく、それぞれでTEXT-DECORATION: 〇〇;を指定すると、もっと色々できます。
    (あんまり変わったのにすると分かりにくくなると思いますが)



  • [PR]
    by umigasuki70 | 2005-03-21 14:00 | スキン編集記
    スキン編集 ― テーブル編その2 ―
    スキン編集 ― テーブル編その1 ― を見て下さった事を前提に、

    「いざ、色んな形のテーブルを組んでみよう!」

    ここをクリックすると説明画像がひらきます。
    (×マークが出る場合は、そこで右クリック→画像の表示を選んでみてください)


    ↑以外にも色々試してみてください。
    メモ帳で編集→上書き保存→ブラウザを更新  の繰り返しです。
    テーブルの中に書いてある数字は編集する時の目印なので、アルファベットでも構いません。
    また、セルを増やしていくうちに順番が変になったりする事もありますが、気にせず増やしたセルに続き番号(文字)を入れます。
    ※何か文字を入れないとブラウザで見えない場合があります。

    全部出来たらメモ帳のほうで上から順番に数字を並べ替えて
    ブラウザで確認してみると、テーブルの仕組みが分かると思います。

    以上、私流テーブル練習法でした。
    少しでもお役に立てれば幸いです。
    [PR]
    by umigasuki70 | 2005-03-16 12:06 | スキン編集記
    スキン編集 -テーブル編その1-
    私流テーブル練習法

    ブログでページのレイアウトを作るのに、excite提供のスキンを利用し、HTMLファイルを編集して作りますよね。

    自分で好きなようにレイアウトしてみたいんだけど、CSSで全ての位置を指定するなんてまだまだ出来ません・・・

    それに、あちこち廻って見ててると、CSSで頑張ったんだろうなぁ・・・と思えるページで
    文字が重なってたり、レイアウトがかなり崩れてて読めない・・・ってことありませんか?
    (もちろん「お見事!」と拍手したくなるページも沢山ありますし、失敗しながら上達していくものだと思うので、CSSで全て作ろうとしてる人は尊敬します)

    私は無難にテーブルレイアウトでいいわ、という方。
    さらに、テーブルを一から自分で組んでみたい、でも難しい・・・
    という方の参考になれば・・・という内容です。
    (ブログのレイアウト用なので一部のタグは省略しています。また、HTML自体全く初めて、という方には不親切な内容ですので、ここの内容以外はご自分でお調べくださいm(_ _)m)
    1. まずメモ帳を使います。
      windowsをお使いの方はスタートメニュープログラムアクセサリメモ帳 を開きます。
    2. 次のように書きこみます。タグは全て半角文字で。
      大文字ABCでも小文字abcでも大丈夫です。
      <html>
      <head>
      </head>
      <body>
      </body>
      </html>

      (↑コピー&ペーストできます)
    3. 書けたらファイル→名前をつけて保存(「テキスト文書」の横の▼を押して全てのファイルを選択)
      ファイル名「テーブル練習.html」にでもしてマイドキュメントなどに保存します。
      メモ帳はそのまま。
    4. 保存した場所にHTMLファイルのアイコンが出るので、それを開きます。
      メモ帳とブラウザが2つ立ち上がった状態。
    5. この時点でブラウザは真っ白です。
      メモ帳の<body>~</body>の間にテーブルを入れていきます。
    6. <body>
      <table>
      <tr>
      <td>1</td>
      </tr>
      </table>

      </body>

    7. 書けたら上書き保存して、ブラウザの更新ボタンを押します。
      1 と書かれたテーブルが出ましたね。

    これ以降の説明をここに書くのは大変難しいので画像にしてしまいました。
    ここをクリックすると説明画像がひらきます。
    (×マークが出る場合は、そこで右クリック→画像の表示を選んでみてください)

    ― テーブル編その2 ― に続く・・・
    [PR]
    by umigasuki70 | 2005-03-16 12:02 | スキン編集記
    exciteリンク

    うたた寝ろびんのすけの部屋
    インサイト ブログ
    ミエランダム
    Kさん家のある日
    ☆陽だまりのやすらぎのキッチンライフ☆
    おてて・・・
    0.5carat
    crowner's_file
    超ビギナーと甘えるな!
    めざせ マイスキン
    † CrossMoon † 初心者スキン編集記
    Direction of the day after tomorrow
    お引越しされました→はい こちらサポセン。

    excite以外のリンクはこちら

    [PR]
    by umigasuki70 | 2005-03-15 12:29 | リンク
    excite以外のリンク
    トップページを軽くするためにリンクのページを作りました。


    素材をお借りしました
    - Natural Breeze -

    AOXT Free Photo

    <ivory>

    uno-com

    HTML・CSS関連
    とほほのwww入門

    かずさかの部屋

    HTML小技集

    生活関連
    SAKE TO RYOURI

    exciteリンクはこちら

    [PR]
    by umigasuki70 | 2005-03-15 12:23 | リンク
    スキン編集 ― リンク編その2 ―
    カテゴリを別の位置に移動 
    Direction of the day after tomorrow さんの「その16 カテゴリ移動」を参考にさせていただきました。

    CSS編集のほうで下の項目を追加します。
    /*カテゴリ*/
    div.kategori{text-align:center;
    padding:10px 0px;}
    青文字部分の名前は任意

    HTMLのほうで、表示したいところにこのように記入します。
    <div class=kategori> カ テ ゴ リ <br>
    <a href=/i0>全体</a> |
    <a href=/i2>スキン編集</a> |
    <a href=/i4>brog超初心者</a> |
    <a href=/i3>食べる</a> |
    <a href=/i5>働く</a> |
    <a href=/i6>身体</a> |
    <a href=/i7>ふとした疑問</a> |
    <a href=/i1>未分類</a> 
    </div>
    ↑赤文字はURLです。数字はカテゴリ登録された順番になっているようです。
    i0とかi1は↓ブラウザのステータスバーで確認できます
    c0068715_15585795.gif
    同じブログ内へのリンクはhttp://ブログURL/i0 のうちの /i0 だけでリンクできます。

    このように表示できます。c0068715_16244264.gif


    ※あとはブログ設定のページからメニュー管理●カテゴリを選択し、表示しないをクリックすれば完了です。
    [PR]
    by umigasuki70 | 2005-03-12 17:03 | スキン編集記
    スキン編集 ― リンク編その1 ―
    <前のページへ 次のページへ>を別の場所にもつける

    ぽっとの陽だまり研究室さんの「次のページ>をトップに持ってくる方法」を参考にさせていただきました。

    スキン編集のページに行くとHTMLファイルの中に下のようなところ(四角の点線内)があると思います。
    c0068715_13393677.gif
    赤線のところがexciteタグです。
    デフォルトのHTMLにはこれ専用にテーブル(<table>~~</table>)が組んであるようです。
    こんな形になっています。
    c0068715_1422517.gif
    (実際はに枠線はありません)

    つまりこのテーブルごと(HTML編集の、四角の点線のところ)そのまんまコピーペーストして別のところに持っていけばいい、ということですね。
    ※セルの中(<td>~~</td>)に入れるかテーブルとテーブルの間(</table>~~<table>)に入れてみて、プレビュー画面で確かめましょう。自分が入れたかったとこに入っていればオーケーです。


    ここのブログでは全体のテーブルの中の上の方と下のほう、2つのセル内に入れています。
    <td width=500 height=50 align=right>
    <$prepage type=1$> | <$nextpage type=1$></td>

    [PR]
    by umigasuki70 | 2005-03-10 14:43 | スキン編集記
    |