トラックバック、リンクは自由。報告も自由です。

 
カテゴリ:CSSでブログをカスタム!( 11 )
★ 修正 ★ テキスト内に仕切り線を入れる!
yuu さんから指摘しただいた箇所を修正しました。このテキストで設定されていた方は、お手数ですが修正願います。yuu さんの指摘はコメント欄にあります。
テキスト内に仕切り線を入れる!
[PR]
by bravo650 | 2004-03-30 15:47 | CSSでブログをカスタム!
テキスト内に仕切り線を入れる!
誰でもできる! excite ブログのCSS(スタイルシート)をカスタム!
仕切り線を入れる。
難易度 → 簡単


コメント欄(スクロールこの欄のいちばん下)にある yuu さんからの指摘箇所、修正します。yuu さん、指摘ありがとうございました _| ̄|○ ))  このテキストの内容を採用されたかた、お手数ですが修正ください。また、今後も間違いの指摘、よろしくお願いします。加えて、太さの指定も追加しました。2004年3月30日




テキストのなかに仕切り線を入れる。もう見てるよね。この文の上と下にある線。




この解説画面のプラウザとは別にもう一度プラウザで自分のブログを開き、解説画面のサイズを調節して参照すると便利かも。

投稿画面に以下のタグを挿入。

<hr>


このカッコ 「<」 「>」 はわざと全角にしてるが、半角にするとこのページに反映する。これだけでも仕切り線は出るけど、デザインを指定したければ、CSSを使う。

自分のブログ →(画面右上の )設定 → スキン変更 → 現在使用中のスキン → 編集 → 下にスクロール → ■ CSS編集

まで行き、編集画面の任意の場所に CSS、


/* 仕切り線 */
hr {
color: #aa6600;
border:
 solid
 dashed

}

字消し線の箇所を修正。太さの指定を追加 ↓

/* 仕切り線 */
hr {
height: 2px;
color: #aa6600;
border-style: solid;
border-style: dashed;
}


を挿入(コピペしてください)。
2px は太さの指定の値なので好きな数値を。aa6600 は色指定の値なので Color Tester を参考に好きな色へ。

border:
 solid
 dashed

border-style: solid;
border-style: dashed;


は、仕切り線の種類を選ぶプロパティとその値。solid がタダの線。dashed が点線。default → 仕切り線の default (デフォルト=初期値)はsolidなので、この指定をぜんぶ取っ払うとsolidになるので、それでもよいよ。スタイルシートはあとに出てきた指定が前のものを上書きするので、この場合は点線になる。タダの線を選ぶなら、以下のように。

border:
 solid

border-style: solid;

または、

border:
 dashed
 solid

border-style: dashed;
border-style: solid;

保存 → 元のページ → プラウザの「更新ボタン」(左上あたり)をクリック。

終了。仕切り線がデザインされた。

ようするに CSS は HTML をデザインするもの。なくてもテキストは読める。これ基本。



  • うまくいかない場合、コピペにミスがないか、半角になってるか、ヘンなとこにスペースがないか、コロン、セミコロン、閉じカッコがちゃんとあるかチェック。プラウザの「更新ボタン」押し忘れ注意! それでもダメな場合は、あきらめて下の段を削除か、このブログに苦情ww

  • タグはいちいち打ってられないので、辞書登録する! 顔文字じゃね~か ヽ(`Д´)ノ

  • 色指定は16進法。0からFまで。0がいちばん濃くFがいちばん薄い。指を折って数えてみよう。9になるとAに繰りあがる。16あるでしょ? 列は色の種類。たとえば色を薄くしたい場合、色見本を見ずに、#555(#555555の略) → #888とさぐるのが早くて吉。

  • 参照先、Color Tester の CGI Script Market さん、「顔文字パーティー」さん、ありがとうございました。

  • 間違いあれば、指摘よろしく。作者、かなりそそっかしいw

  • はげましのコメントくれるともっとがんばるかもw


[PR]
by bravo650 | 2004-03-26 15:05 | CSSでブログをカスタム!
背景画像を固定する!
誰でもできる! excite ブログのCSS(スタイルシート)をカスタム!
背景画像を固定する。
難易度 → 超簡単




カスタムして背景画像貼り付けてるひとへの耳より情報。スクロールしても、背景が動かない!



この画像だと、両端の横線のある黒ぽい部分ね。
「ナチュラル」のカスタム。未公開のおれのブログ。




この解説画面のプラウザとは別にもう一度プラウザで自分のブログを開き、解説画面のサイズを調節して参照すると便利かも。

自分のブログ →(画面右上の )設定 → スキン変更 → 現在使用中のスキン → 編集 → 下にスクロール → ■ CSS編集

まで行き、編集画面の一番うえにある、

BODY {
BACKGROUND : url("http://tekitou.jp/furikake/sasasa/background.gif");
MARGIN : 0;
PADDING : 0;
}

を見つけたら(おれの場合)、コピペしてそのすぐ下に貼り付ける。自信のある方はパスしてもいいよ。CSSは「 ; 」の直後なら改行自由ね。

BODY {
BACKGROUND : url("http://tekitou.jp/furikake/sasasa/background.gif");
MARGIN : 0;
PADDING : 0;
}

BODY {
BACKGROUND : url("http://tekitou.jp/furikake/sasasa/background.gif");
MARGIN : 0;
PADDING : 0;
}

下段のCSSの所定の位置に fixed left top; を挿入。fixed は固定、left top は左上から背景画像を読み込むという意味。(注:半角なら大文字でも小文字でもよいが、将来小文字に統一されるらしい。おれは自分のサイトのCSSでは小文字を使っており、そこからのコピペで大文字に直すの面倒なので小文字w)

BODY {
BACKGROUND : url("http://tekitou.jp/furikake/sasasa/background.gif")
fixed left top;
MARGIN : 0;
PADDING : 0;
}

編集画面のしたにあるプレビューボタンをクリックでテスト。スクロールしても背景画像が動かなかったら、成功。決定したら、

保存 → 元のページ → プラウザの「更新ボタン」(左上あたり)をクリック。

終了。背景画像が固定された。

上書きする前のものは消してもよいが、慣れないうちは残しておくのが吉。害はない。



    【解説】

  • うまくいかない場合、コピペにミスがないか、半角になってるか、ヘンなとこにスペースがないか、コロン、セミコロン、閉じカッコがちゃんとあるかチェック。プラウザの「更新ボタン」押し忘れ注意! それでもダメな場合は、あきらめて下の段を削除か、このブログに苦情ww


  • スタイルシートは、あとに読み込む値が、それ以前のものを上書きする。だから、値が不確定な場合、その下で指定し直すと便利。数の制限はないみたい。上の場合、変更箇所だけ指定しなおすと、コピペが面倒だし、ミスの確率が増えるので、まとめて実行。


  • 間違いあれば、指摘よろしく。作者、かなりそそっかしいw


  • はげましのコメントくれるともっとがんばるかもw

  • [PR]
by bravo650 | 2004-03-24 12:38 | CSSでブログをカスタム!
文章、画像をセンターに!
誰でもできる! excite ブログのCSS(スタイルシート)をカスタム!
文章、画像のセンター寄せ。
難易度 → 超簡単

以前からこのブログで多用しているセンター寄せのやり方。ネタもとはちくわや さん。掲載許可、ありがとうございました。


投稿画面に以下のタグを挿入。

<div align="center">
オクレ兄さ~~ん!!
</div>

または

<div align="center">オクレ兄さ~~ん!!</div>


このカッコ 「<」 「>」 はわざと全角にしてるが、半角にするとこのページに反映する。


オクレ兄さ~~ん!!




  • 画像 も同じ。はさんでみて YO。

  • 画像の複数アップ可ちくわや(誤 </center>、正 </div>注意ね)。

  • タグはいちいち打ってられないので、辞書登録する! 顔文字じゃね~か ヽ(`Д´)ノ

  • 参照先の「ちくわや」さん、「顔文字パーティー」さん、ありがとうございました。


[PR]
by bravo650 | 2004-03-22 23:17 | CSSでブログをカスタム!
訂正しました! 文字のカスタムの記事
exciteブログの文字をCSSで変える
exciteブログの文字をCSSで変える 解説なしVER
訂正しました。お手数ですが変更ください。
ご迷惑をかけた方、申し訳ありませんでした <(_ _)>
なお、書式上の間違いなので、現実には何も問題ありません。
2004年3月22日
[PR]
by bravo650 | 2004-03-22 18:33 | CSSでブログをカスタム!
訂正! 文字のカスタムの記事
exciteブログの文字をCSSで変えるexciteブログの文字をCSSで変える 解説なしVER の記事において一部訂正箇所があるので、ここにお詫びと共に報告します。


このページ一部間違いがあったので、訂正します!!
<p>使えました。
よって<strong>で指定する必要はなくなりました!!
訂正箇所、本文に記述しましたので、お手数ですが訂正ください。
ご迷惑をかけた方、申し訳ありませんでした <(_ _)>
なお、書式上の間違いなので、現実には何も問題ありません。
2004年3月22日


[PR]
by bravo650 | 2004-03-20 05:40 | CSSでブログをカスタム!
ブログ全体の大きさを変えてみよう!
誰でもできる! excite ブログのCSS(スタイルシート)をカスタム!
ブログ全体の大きさを変える。
難易度 → 簡単



ぜんぶ見て回ったけど、ほかのスキンはいい感じだが、おれが使ってる(2004年3月18日現在)「HTMLベーシック」は、「画面いっぱい、広がりすぎっ!」これを修正することにする。関係ないと思われるかたも、この項目、CSS的に重要なので読むが吉。


この解説画面のプラウザとは別にもう一度プラウザで自分のブログを開き、解説画面のサイズを調節して参照すると便利かも。

自分のブログ →(画面右上の )設定 → スキン変更 → 現在使用中のスキン → 編集 → 下にスクロール → ■ CSS編集

まで行き、編集画面の一番うえにある、

BODY { BACKGROUND : #FFF; MARGIN : 30;PADDING : 0; }

を見つけたら、コピペしてそのすぐ下に貼り付ける(ここでは「HTMLベーシック」の「基本スキン(ホワイトホワイト)」を使う。

BODY { BACKGROUND : #FFF; MARGIN : 30;PADDING : 0; }

BODY { BACKGROUND : #FFF; MARGIN : 30;PADDING : 0; }



MARGIN : 30; が、「プラウザの内枠」と「ブログの外枠」との距離を指定する値。ここの数値を変える。指一本ぶんくらいが50pxか(アバウトすぎっ!w)。 参照

【バグ発見!? ~ 簡単に解説したいのに、ややこしことすんなよぉw ~】
MARGIN : 30;、この表記は間違い。CSSでは「0」以外の値には、単位を付けなければならない。ここは px(ピクセル)で指定するのが吉なので MARGIN : 30px; が正解。おれの環境だと(IE6.0 for Win Me)MARGIN : 0; と同意になっている。ここデザインからみても、バグの可能性大。

今回、 MARGIN : 60px; を使用してみるのだが、じつはこれ、省略形。元の記述は以下になる。

margin-top: 60px; margin-right: 60px; margin-bottom: 60px; margin-left: 60px;

(注:半角なら大文字でも小文字でもよいが、将来小文字に統一されるらしい。おれは自分のサイトのCSSでは小文字を使っており、そこからのコピペで大文字に直すの面倒なので小文字w)

今回こちらを使用。また、省略した場合のバグも報告されている。今回は関係ないと思うけど。


BODY { BACKGROUND : #FFF; MARGIN : 30;PADDING : 0; }

BODY { BACKGROUND : #FFF; margin-top: 60px;margin-right: 60px;margin-bottom: 60px;margin-left: 60px;PADDING : 0; }



編集画面のしたにあるプレビューボタンをクリックでテスト。
決定したら、

保存 → 元のページ → プラウザの「更新ボタン」(左上あたり)をクリック。

終了。ブログ全体の大きさが変わる。

上書きする前のものは消してもよいが、慣れないうちは残しておくのが吉。害はない。




変更前
margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;



変更後
margin-top: 60px; margin-right: 60px; margin-bottom: 60px; margin-left: 60px;



もうおわかりだと思うが、順に「上」「右」「下」「左」の margin の数値となっているので、各自で試してくれ。



    【解説】

  • うまくいかない場合、コピペにミスがないか、半角になってるか、コロン、セミコロン、閉じカッコがちゃんとあるかチェック。プラウザの「更新ボタン」押し忘れ注意! それでもダメな場合は、あきらめて下の段を削除か、このブログに苦情ww


  • スタイルシートは、あとに読み込む値が、それ以前のものを上書きする。
    だから、値が不確定な場合、その下で指定し直すと便利。数の制限はないみたい。上の場合、変更箇所だけ指定しなおすと、コピペが面倒だし、ミスの確率が増えるので、まとめて実行。


  • 間違いあれば、指摘よろしく。作者、かなりそそっかしいw


  • はげましのコメントくれるともっとがんばるかもw


  • 参照先の HTMLクイックリファレンス さん、ありがとうございました。



    【サイト制作(テキスト系)、鉄の掟】

  • InternetExplorer 使用のひとは、表示 → 文字のサイズ → 大(最大)にした場合も試すが吉。ここ変更してるひともいる → おれ。ふんぞりかえって見るとき、大w


  • 他のプラウザでも同一に映るとは限らない

  • [PR]
by bravo650 | 2004-03-18 19:25 | CSSでブログをカスタム!
文字を変えてみよう!
誰でもできる! excite ブログのCSS(スタイルシート)をカスタム!
文字を変える。
難易度 → 簡単




この解説画面のプラウザとは別にもう一度プラウザで自分のブログを開き、解説画面のサイズを調節して参照すると便利かも。

自分のブログ →(画面右上の )設定 → スキン変更 → 現在使用中のスキン → 編集 → 下にスクロール → ■ CSS編集

まで行き、編集画面のうえのほうにある、


BODY,TD,DIV,LI { FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #ccc; }


を見つけたら、コピペしてそのすぐ下に貼り付ける。


BODY,TD,DIV,LI { FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #ccc; }

BODY,TD,DIV,LI { FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #ccc; }


これはfont(フォント=文字)を決めるプロパティ(設定)。

【FONT-SIZE 大きさ】
変えたければ、MEDIUM を選択。ひとまわり大きくなる。SIZEはこれか SMALL のふたつが現実的。小さくすると・・・・読めないw 参照

【FONT-FAMILY 種類】
さわらない。 参照

【LINE-HEIGHT 上下の文字の間隔】
さわらない。 参照

【COLOR 色】
Color Tester を参考にかえる。

上のテキストを参考に下段の値を変える。この場合 MEDIUM 、#fc0(#ffcc00の省略形)。


BODY,TD,DIV,LI { FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #ccc; }

BODY,TD,DIV,LI { FONT-SIZE : MEDIUM; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #fc0; }



編集画面のしたにあるプレビューボタンをクリックでテスト。
決定したら、

保存 → 元のページ → プラウザの「更新ボタン」(左上あたり)をクリック。

終了。フォントが変わる。

上書きする前のものは消してもよいが、慣れないうちは残しておくのが吉。害はない。




変更前



変更後



    【解説】

  • うまくいかない場合、コピペにミスがないか、半角になってるか、コロン、セミコロン、閉じカッコがちゃんとあるかチェック。プラウザの「更新ボタン」押し忘れ注意! それでもダメな場合は、あきらめて下の段を削除か、このブログに苦情ww


  • この設定は「HTMLベーシック」スキンを元にして行った。他のスキンでは試してない(面倒くさいw)。このスキンではちがうよ、てのがあったら、コメントしてください。


  • フォントの指定は、ダメダメ風に簡単にした。あとは各自で。


  • このテキスト、かなり悩んで書いた。ご意見、間違いあれば、指摘よろしく。


  • 色指定は16進法。0からFまで。0がいちばん濃くFがいちばん薄い。指を折って数えてみよう。9になるとAに繰りあがる。16あるでしょ? 列は色の種類。たとえば色を薄くしたい場合、色見本を見ずに、#555 → #888とさぐるのが早くて吉。


  • スタイルシートは、あとに読み込む値が、それ以前のものを上書きする。
    だから、値が不確定な場合、その下で指定し直すと便利。数の制限はないみたい。上の場合、必要な部分だけを指定しなおすと、コピペが面倒だし、ミスの確率が増えるので、まとめて実行。


  • はげましのコメントくれるともっとがんばるかもw


  • 参照先の HTMLクイックリファレンス さん、Color Tester の CGI Script Market さん、ありがとうございました。



    【サイト制作(テキスト系)、鉄の掟】

  • フォントとその背景色は、サイトのキモと心得るべし。


  • フォントとその背景色は、読みやすさに気をつけるべし。


  • メインテキストのフォントサイズは、pt や px で固定してはならない。おれがふんぞり返ってネットサーフィンできなくなるww → これをやると、InternetExplorer では文字の大きさを調節できない。目のわるい人には大凶。そんなサイトが増えると「ネットは見にくい」となりネット不況へw


  • 田中真紀子は、しょーもないことで裁判所に訴えてはならない。


  • メインテキストの背景に画像を使う場合は、よほどデザインの腕に自信がある場合以外、行ってはならない。読みにくくなる。てかデザイナーは背景画像入れないような・・・・・。


  • フォント関係は、COLOR やLINE-HEIGHT くらいにしておくか、各プラウザのバグや設定を研究して徹底的にやるか、どちらかにする。中途半端にやると凶 → 反省w

  • [PR]
by bravo650 | 2004-03-17 12:49 | CSSでブログをカスタム!
文字の背景色を変えてみよう!
excite ブログのCSS(スタイルシート)をカスタム!
文字の背景色を変える。
難易度 → 超簡単(色づかいは悩むかもw)




この解説画面のプラウザとは別にもう一度プラウザで自分のブログを開き、解説画面のサイズを調節して参照すると便利かも。

自分のブログ →(画面右上の )設定 → スキン変更 → 現在使用中のスキン → 編集 → 下にスクロール → ■ CSS編集

まで行き、編集画面の一番うえにある、

BODY { BACKGROUND : #151515; MARGIN : 50px;PADDING : 0px; }

を見つけたら、コピペしてそのすぐ下に貼り付ける。

BODY { BACKGROUND : #151515; MARGIN : 50px;PADDING : 0px; }
BODY { BACKGROUND : #151515; MARGIN : 50px;PADDING : 0px; }


#151515 が色を指定する値なので、下のプロパティの値を Color Tester を参考にかえる。今回、#555(#555555の省略形) に変えてみる(半角厳守)。

BODY { BACKGROUND : #151515; MARGIN : 50px;PADDING : 0px; }
BODY { BACKGROUND : #555; MARGIN : 50px;PADDING : 0px; }


編集画面のしたにあるプレビューボタンをクリックでテスト。
決定したら、

保存 → 元のページ → プラウザの「更新ボタン」(左上あたり)をクリック。

終了。文字の背景が変わる。

上書きする前のものは消してもよいが、慣れないうちは残しておくのが吉。害はない。




#151515



#555



    【解説】

  • うまくいかない場合、コピペにミスがないか、半角になってるか、コロン、セミコロン、閉じカッコがちゃんとあるかチェック。プラウザの「更新ボタン」押し忘れ注意! それでもダメな場合は、あきらめて下の段を削除か、このブログに苦情ww


  • この設定は「HTMLベーシック」スキンを元にして行った。他のスキンでは試してない(面倒くさいw)。このスキンではちがうよ、てのがあったら、コメントしてください。


  • 色指定は16進法。0からFまで。0がいちばん濃くFがいちばん薄い。指を折って数えてみよう。9になるとAに繰りあがる。16あるでしょ? 列は色の種類。たとえば色を薄くしたい場合、色見本を見ずに、#555 → #888とさぐるのが早くて吉。


  • スタイルシートは、あとに読み込む値が、それ以前のものを上書きする。
    だから、値が不確定な場合、その下で指定し直すと便利。数の制限はないみたい。
    上の場合、色だけを指定しなおすと、コピペが面倒だし、ミスの確率が増えるので、一行まとめて実行。


  • 間違いあれば、指摘よろしく。作者、かなりそそっかしいw


  • はげましのコメントくれるともっとがんばるかもw


  • Color Tester の CGI Script Market さん、ありがとうございました。



    【サイト制作(テキスト系)、鉄の掟】

  • フォントのデフォルト値と背景色は、サイトのキモと心得るべし。


  • フォントのデフォルト値と背景色は、読みやすさに気をつけるべし。


  • メインのテキストの背景に画像を使う場合は、よほどデザインの腕に自信がある場合以外、行ってはならない。読みにくくなる。てかデザイナーは背景画像入れないような・・・・・。

  • [PR]
by bravo650 | 2004-03-16 13:01 | CSSでブログをカスタム!
exciteブログの文字をCSSで変える 解説なしVER


このページ一部間違いがあったので、訂正します!!
<p>使えました。
よって<strong>で指定する必要はなくなりました!!
訂正箇所、下記に記述しましたので、お手数ですが訂正ください。
ご迷惑をかけた方、申し訳ありませんでした <(_ _)>
なお、書式上の間違いなので、現実には何も問題ありません。
2004年3月22日


「CSS編集」内の記述。
「strong」を省く。


strong.r200 {
color: #f00;
font-size: 200%;
line-height: 200%;
}




.r200 {
color: #f00;
font-size: 200%;
line-height: 200%;
}



「投稿欄」内の記述。
「strong」を「p」に。


<strong class="r200">
赤で、しかもデカイ!
</strong>




<p class="r200">
赤で、しかもデカイ!
</p>


訂正、終了。お手数おかけしました <(_ _)>




exciteブログの文字をCSSで変える

説明うざい。お前を信じる。とにかくやってみたい、ってかたは。

自分のブログ →(画面右上の )設定 → スキン変更 → 現在使用中のスキン → 編集 → 下にスクロール → ■ CSS編集

まで行き、どこでもいいから空白の行に、


/*以下、フォントのセレクタ。f00を変えると色が変わる。sizeは大きさ、heightは上下のスペースを数字を変えて変更。r200てのはただのネーミング。規則にのっとれば(注意)何でもいい。strongは変えてはイケナイ*/
strong.r200 {
color: #f00;
font-size: 200%;
line-height: 200%;
}


以上をコピペして挿入。

保存 → 元のページへ → 投稿



<strong class="r200">
赤で、しかもデカイ!
</strong>

をコピペして張り付ける。
ただし、「<」かぎカッコは半角に換えてくれ。今ここで半角使うと反映されちゃうのよね。

で、送信。プラウザの「更新ボタン」(だいたいのプラウザは、左上あたりについている)を押す。

赤で、しかもデカイ!


てなったら、 OK 。
失敗が心配だったら、カスタム前のCSSをコピペしてメモ帖なりに保存。それをまた貼り付ければいい。
コピペ失敗以外は、リスクなし。やれば吉。
[PR]
by bravo650 | 2004-03-15 17:17 | CSSでブログをカスタム!