カテゴリ:£犬でもできるCSS( 7 )
正しいウサギの飼い方


はい。ジャバを禁止しているエキブロですが、

かなりのブログサイトでウサギが飼われていますね。

小生はどうしても昨夜「 今すぐ飼いたい 」と思い、

人様のブログのソースを勝手に覗いて、コードを発見。

引きずってきました。




今回はその手法を暴露しちゃいましょう。(いいのか?

当然。犬でもできます。




マズですね、

当該ブログのストライダーうさぎ「 ばるたん 」の棲んでいる小屋の

土台をクリックして、

「登録」を済ませてください。

ジャバが禁止されていない場合、

登録後にもらえるコードを貼り付ければ「うさぎ」が飼えます。

しかしながらエキブロはジャバを禁止してるので、困りもの。

そこで以下の反則コードで叩き込みます。



火の国のストライダーうさぎ



このコードを、メモ帳に叩き込んで、和魂要塞ではウサギを飼っているワケですね。

つまりですね。

貴方様がウサギを買う場合、あくまで登録後のお話ですが、



貴方のHPのURL(アドレス)を■

貴方のウサギのいる背景画像のURL(アドレス)を●

貴方のウサギの登録上の名前を▼

貴方のウサギの名前を▲

貴方のウサギの紹介文を★にすると、











こういうコードを叩き込む必要があるわけです。

これをですね、メモ帳に直張りすればウサギが飼えます。

実際に飼っている方のブログのソースを見ると丸わかりなんですが。笑


飼いたい方は是非どうぞ。

結構役立ちます。

でわでわ。




※補足>おおっぴら過ぎるのも何なので、コードはコメントに移植しました。笑
[PR]
by 201V1 | 2004-06-22 22:02 | £犬でもできるCSS
かんたんスキン改造計画
a0013690_194327.jpg

はい。

ついに登場!

和魂要塞プレゼンツ・改造企画第2弾。

犬でもできるCSSのご案内。




このテキストでは、

ブログの視覚インパクトの大部分を締める

もろもろの「板」の改造についてのお話です。

例によって、切った張ったの反則技でブログを改造します。

実際には「板画像」のDL元を変えるだけなので

システム的な欠陥は一切生じません。

でわでわ。

それではスタート。

マジで犬でもできまっせ。







えー。

まずですね。

和魂要塞をモデルに説明してみましょう。

やり方は前回の「 猿でもできるHTML 」と一緒です。



まず始めに。

現在の「和魂要塞」のデザインを特長つけている「板」は以下の5点になります。


その壱

変な柄


その弐

獅子の画像




その参

コメントボードの頭



その④

コメントボードの胴体長さ1ドット。これが実際のブログ上ではぐいんと伸びます。


その伍


コメントボードの尻尾







以上です。理由はわかりませんが「その伍」だけプロテクトがかかっていていけません。ですがまあ関係ないのでいきます。

これら五種類の「画像データ」がエキサイトの「イメージURL」(素材が入っているページ)からDLされているんですね。多分。



その壱とその弐は、勿論小生の自前の画像です。

スキン編集画面で表示される「 マイイメージアカウントにイメージ登録 」をクリックして、「自分のブログの板」にしたい画像ファイルを、マイドキュメントから送信しました。

その参④伍は、エキサイトの既存の素材です。ここは小生、CSSを弄っていないわけです。








次ページで実際に和魂要塞のCSSを見てみましょう。極めて簡単に改造されています。



ちなみに、小生のブログは基本的には既存の「ワイド・トラディショナル」で作られています。

しかしながら、この「犬でもCSS」は、基本スキンがどれであろうと全く関係なく、全てのお客様にご利用いただけますのでご安心ください。


また、小生は、ぶっちゃけCSSを全く知りません。

したがって理解して書いているわけではないです。

カンです。

すべからくカンです。

カンですが正確至極なのでご安心を。



でわでわ。次ページで。
[PR]
by 201V1 | 2004-06-02 19:44 | £犬でもできるCSS
かんたんスキン改造計画その2
それでは下に小生の「和魂要塞」のCSSをナマのまま移植してみましょう。

「板の改造」において重要になってくるURLに■と番号を付けます。

ここに注意してみてください。

■と番号に注目です。


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


/* excite blog skin css */

BODY { BACKGROUND : #E7E3D6 ; MARGIN : 0;PADDING : 0; }
BODY,TD,DIV,LI { FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #000; }

A:LINK { COLOR: #7D3B1A; TEXT-DECORATION: NONE }
A:VISITED { COLOR: #7D3B1A; TEXT-DECORATION: NONE }
A:ACTIVE { COLOR: #7D3B1A; }
A:HOVER { COLOR: #FC8200; TEXT-DECORATION: UNDERLINE }

■壱TD.TOP {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200406/02/90/iwasisi7.jpg);
HEIGHT : 300PX;
}

■弐DIV#TOP {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200406/02/90/iwasisi.jpg);
BACKGROUND-REPEAT : NO-REPEAT;
PADDING-TOP : 1PX;
HEIGHT : 300PX;
TEXT-ALIGN : LEFT;
}

DIV#LEFT {
WIDTH : 100%;
PADDING : 40PX 0PX 50PX;
MARGIN-BOTTOM : 50PX;
TEXT-ALIGN : LEFT;
}

DIV#RIGHT {
WIDTH : 180PX;
MARGIN : 0PX 0PX 40PX 40PX;
TEXT-ALIGN : LEFT;
}

DIV.HEADER {
FONT-FAMILY : TAHOMA,;
FONT-SIZE : 14PT;
FONT-WEIGHT : BOLD;
MARGIN : 23PX 140PX 0PX;
LINE-HEIGHT : 100%;
}

DIV.HEADER A:LINK {COLOR: #000; TEXT-DECORATION: NONE}
DIV.HEADER A:VISITED {COLOR: #000; TEXT-DECORATION: NONE}
DIV.HEADER A:HOVER {COLOR: #FFF; TEXT-DECORATION: NONE}

DIV.URL {
FONT-FAMILY : VERDANA,TAHOMA ;
FONT-SIZE : 8PT;
MARGIN : 0PX 140PX;
}

DIV.URL A:LINK {COLOR: #555; TEXT-DECORATION: NONE}
DIV.URL A:VISITED {COLOR: #555; TEXT-DECORATION: NONE}
DIV.URL A:HOVER {COLOR: #FFF; TEXT-DECORATION: NONE}

DIV.USERMENU {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 8PT;
TEXT-ALIGN : CENTER;
PADDING : 35PX 10PX 10PX 0PX;
}

DIV.USERMENU A:LINK {COLOR: #727272; TEXT-DECORATION: NONE}
DIV.USERMENU A:VISITED {COLOR: #727272; TEXT-DECORATION: NONE}
DIV.USERMENU A:HOVER {COLOR: #98A6E4; TEXT-DECORATION: UNDERLINE}

■参DIV.MN_TOP {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/8/mn_top_5.gif);
BACKGROUND-REPEAT : NO-REPEAT;
WIDTH : 180PX;
HEIGHT : 32PX;
FONT-SIZE : 1PT;
}

■④DIV.MN_BODY {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/8/mn_body_5.gif);
WIDTH : 150PX;
PADDING : 0PX 20PX 15PX 10PX;
}

■伍DIV.MN_BOTTOM {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/8/mn_bottom_5.gif);
BACKGROUND-REPEAT : NO-REPEAT;
WIDTH : 180PX;
HEIGHT : 15PX;
FONT-SIZE : 1PT;
}

DIV.PROFILE {
WIDTH : 150PX;
PADDING : 10PX 0PX 10PX;
LINE-HEIGHT : 150%;
OVERFLOW : HIDDEN;
}

DIV.MN {
WIDTH : 150PX;
LINE-HEIGHT : 150%;
}

DIV.MNTTL {
WIDTH : 150PX;
BORDER-BOTTOM : 1PX #AAA SOLID;
FONT-SIZE : 9PT;
FONT-FAMILY :,VERDANA;
PADDING : 2PX 0PX 0PX;
MARGIN : 25PX 0PX 10PX;
COLOR : #000;
}

DIV.MEMOBODY {
WIDTH : 150PX;
OVERFLOW : HIDDEN;
}

DIV.POST {
WIDTH : 100%;
PADDING : 0PX 0PX 20PX;
}

DIV.POST_HEAD {
MARGIN-BOTTOM : 15PX;
PADDING-TOP : 15PX;
BORDER-TOP : 1PX #BBB DASHED;
}

DIV.POST_BODY {
WIDTH : 100%;
TEXT-ALIGN : LEFT;
MARGIN: 3PX 0PX 30PX;
LINE-HEIGHT : 150%;
OVERFLOW : HIDDEN;
}

DIV.POST_BODY A:LINK { COLOR: #5990BF; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:VISITED { COLOR: #5990BF; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:ACTIVE { COLOR: #5990BF; }
DIV.POST_BODY A:HOVER { COLOR: #0B226D; TEXT-DECORATION: UNDERLINE }

DIV.POST_TTL {
FONT-SIZE : 9PT;
COLOR : #000;
FONT-WEIGHT : BOLD;
}

DIV.POST_TAIL {
FONT-FAMILY : TAHOMA,;
FONT-SIZE : 8PT;
MARGIN-TOP : 10PX;
TEXT-ALIGN : RIGHT;
}

DIV.COMMENT {
TEXT-ALIGN : LEFT;
BORDER : 1PX #BFB69A SOLID;
BACKGROUND : #D7D2C0;
PADDING : 10PX 15PX;
MARGIN : 20PX 0PX 20PX;
}

DIV.COMMENT_BODY {
MARGIN : 6PX 0PX 20PX;
LINE-HEIGHT : 140%;
}

DIV.COMMENT_TAIL {
MARGIN : 8PX 0PX 5PX;
FONT-FAMILY : VERDANA, TAHOMA,;
FONT-SIZE : 8PT;
COLOR : #777;
}

DIV.COMMENT_INPUT {
MARGIN-TOP : 20PX;
BORDER-TOP : 1PX #AAA DOTTED;
PADDING-TOP : 20PX;
}

DIV.COMMENT_LINE {
BORDER-TOP : 1PX #AAA DOTTED;
MARGIN : 10PX 0PX 15PX;
}

DIV.TRACK_TOP {
LINE-HEIGHT : 170%;
}

DIV.ARCHIVE_HEAD {
FONT-WEIGHT : BOLD;
MARGIN-BOTTOM : 10PX;
}

DIV.ARCHIVE_BODY {
MARGIN : 20PX 0PX;
LINE-HEIGHT : 160%;
PADDING-BOTTOM : 100PX;
}

IMG.IMAGE_TOP {
MARGIN-BOTTOM : 15PX;
}

IMG.IMAGE_LEFT {
MARGIN-RIGHT : 15PX;
MARGIN-BOTTOM : 15PX;
}

IMG.IMAGE_RIGHT {
MARGIN-LEFT : 15PX;
MARGIN-BOTTOM : 15PX;
}

IMG.IMAGE_MID {
MARGIN-TOP : 15PX;
MARGIN-BOTTOM : 15PX;
}

IMG.BOOKMK {
MARGIN : 10PX;
BORDER : 0PX;
}

IMG.USERMENU {
MARGIN-LEFT : 8PX;
}

IMG.LOGO {
MARGIN-BOTTOM : 10PX;
}

DIV.BANNER {
MARGIN : 30PX 10PX 0PX;
}

.SMALL {
FONT-SIZE : 11PX;
}

.DATE {
FONT-FAMILY : VERDANA, TAHOMA,;
FONT-SIZE : 8PT;
FONT-WEIGHT : BOLD;
}

.TIME {
FONT-FAMILY : VERDANA, TAHOMA,;
FONT-SIZE : 8PT;
TEXT-ALIGN : LEFT;
}

.AUTHOR {
FONT-SIZE : 9PT;
FONT-WEIGHT : BOLD;
}

.TXTFLD {FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:WHITE}




DIV.CAL_TOP {
}

DIV.CAL {
MARGIN : 20PX 0PX 20PX;
WIDTH : 150PX;
TEXT-ALIGN : CENTER;
}

DIV.CAL_HEAD {
WIDTH : 150PX;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
TEXT-ALIGN : CENTER;
PADDING-TOP : 4PX;
PADDING-BOTTOM : 4PX;
MARGIN-BOTTOM : 10PX;
}

DIV.CAL_BODY {
WIDTH : 140PX;
TEXT-ALIGN : CENTER;
}

DIV.CAL_BOTTOM {
}

.CAL {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_DAY {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_SUN {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #D36654;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_SAT {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #3572A1;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_TODAY {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
BACKGROUND : #DAD1B4;
COLOR : #3D5586;
TEXT-ALIGN : CENTER;
}

.CAL_TR { }

DIV.XML {
TEXT-ALIGN : CENTER;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
MARGIN-BOTTOM : 80PX;
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



実は1ページ目で紹介した5つの画像は、基本スキンに関係なく、この順番でCSSに記載されています。(たぶん

上から2つが「タイトル板」。

残りの3つが「コメント板」です。


ぶっちゃけここの「画像DL先」を変えてしまえばいいんですね。

これなら犬でもカンタンです。

カンタンですが、実際画像を張ってみると結構不具合が生じます。

クセがあるんですね。(おそらく

で、小生、このクセを全部見抜きました。

それもご教授させていただくのでご安心を。






それでは次のページでは、実際に全体的な改造の流れを見てみましょう。
[PR]
by 201V1 | 2004-06-02 19:16 | £犬でもできるCSS
かんたんスキン改造計画(その3)


ステージ1 素材集め



タイトル板にしたい画像をネット上からかっぱらいます。

とりあえず、和魂要塞をモデルに

デザイン上「変な柄」と「獅子の絵」に当たる2枚の画像を盗んでください。





ステージ2 素材加工


いきなりステージ3に進んでもかまいませんが

それをやると後々めんどうなコトになるので、

まずは画像の加工です。

盗んだ画像を「板状ないし正四角形」にします。アバウトでいいです。





で、ここで重要になってくるのは、■壱の「変な柄」が「メインの板」というコトです。

基本的に■壱と■弐の画像は、実際の画面上では両方とも「左詰め」で表示されます。





つまり■壱に■弐の画像が「乗っかってる」わけですね。

「変な柄」の上に「獅子の画像」が「乗っている」ワケ。

カンタンに言うと、「変な柄」の上に「獅子の画像という紙」が張られていると考えてください。





で、さらに大事なことを2つ。

原則的に■壱の画像は「左詰め」でアップされますが、右側まで届かない場合は「リピート」されて右端に到達します。

そして■弐の画像も「左詰め」でアップされますが、これはリピートされません。

ちょっと全ページに戻ってみます。以下を見てください。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

■壱TD.TOP {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200406/02/90/iwasisi7.jpg);
HEIGHT : 300PX;
}

■弐DIV#TOP {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200406/02/90/iwasisi.jpg);
BACKGROUND-REPEAT : NO-REPEAT;
PADDING-TOP : 1PX;
HEIGHT : 300PX;
TEXT-ALIGN : LEFT;


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


■弐のDL先のURLの下に、BACKGROUND-REPEAT : NO-REPEAT;というコードがありますね。これが「リピートはダメ」という意味らしいです。実際ぶっ壊すと■弐もリピートしながら右端まで行くので、結果的に■壱は見えなくなってしまいます。この点に留意して画像を収拾してください。

デザインによっては■壱と■弐の画像のどっちかがいらなくなるケースもあります。




で、問題の板の高さですが、和魂要塞では■壱も■弐も  HEIGHT : 300PX;  にしてあります。ここが板の高さというか幅です。数字を大きくすると帯が太くなり、小さくすると細くなります。






ネット上から画像をかっぱらい、加工する際に注意する点がひとつあるので気をつけてください。

例えば高さ 600ピクセル の「雪だるまの画像」を使って板を飾ろうとする時、板の高さをCSS上で HEIGHT : 300PX; に設定すると、雪だるまは「首」しか残りません。

つまり「下から画像が切られる」という性質があるんですね。

日没の画像などは下手をすると「空だけ」になってしまいます。

したがって、板の高さより、大きい画像を移植する場合、それが下方に重要な映像がある画像の場合は、加工の段階で「上端」を切っておく必要があります。注意してください。



とゆーことで、画像の加工が終わったらいよいよ移植です。




ステージ3 データ送信


スキン編集の最後の最後に出てくる「 マイイメージカウントにイメージ登録 」をクリックし、加工した画像を送ります。

容量は100キロバイトまでです。

画質を維持しつつ、幅の高い板を作ろうとする場合、■壱の板のリピート機能をフル活用すると吉です。

まずはタイトルの板になる■壱と■弐の画像だけ送信してみましょう。

イメージが登録され、その画像のURLがもらえます。

CSS画面で■壱と■弐のDL先のアドレス入力部分に、アトはこのURLを移植すればOKです。





ステージ4 CSS改造

いよいよスキン編集画面でCSSの改造を行います。




1番失敗がない方法は、

移植まえに

■壱と■弐のDL先と思われるアドレスに実際にアクセスしてみることです。


エキサイトの提供する生スキンのCSS画面の「 多分■壱のDL先 」と思われるアドレスをコピーし、パソコンのアドレスバーに叩き込み、アクセスしてみましょう。

任意の画像のDL先であることの確認が取れたら、安心して希望の登録イメージのURLに挿げ替えればOKです。

この方法で■壱と■弐の画像がアップできたら、あとはそれぞれのURLの下にあるHEIGHT : 300PX; の数字を改ざんしましょう。■壱の値を■弐より大きくすると面白いデザインになります。(和魂要塞はやってません)


1ステップごとにプレビュー画面で確認すれば、まず失敗はないでしょう。

それでも怖い場合は、一手ずつ、OKだったら「保存」。ダメだったら「戻る→編集画面へ」というやり方をオススメします。時間的なロスがなくてヨイです。



ステージ5 コメントの板

ま、これも一緒ですね。

おなじ要領でやります。

アラ不思議。

オリジナルデザインの完成。

やっほう。

やっほう。






ステージの終わりに

CSSの改ざんによって他にも色々できる模様ですが、

どのコードがどの部分の文字の色を司っているのかイマイチ不明です。

したがって、小生同様、CSSが全く判らない場合は

基本的な文字や背景の色調は、基本スキンに一任するのがベストかもしれません。



とゆーわけで、

事前に最も好ましい「色調」のスキンを選び、それを改造することで、見事納得のいくデザインのブログが完成するわけですね。

うし。楽勝!




それでは、これで講義を終了します。

まだの方は是非「猿でもできるHTML」もご覧ください。

でわでわ。
[PR]
by 201V1 | 2004-06-02 19:15 | £犬でもできるCSS

[PR]
by 201V1 | 2004-06-02 19:15 | £犬でもできるCSS

[PR]
by 201V1 | 2004-06-02 19:14 | £犬でもできるCSS

[PR]
by 201V1 | 2004-06-02 19:14 | £犬でもできるCSS