Patrappi annex:スキン編集
2013-07-08T19:59:19+09:00
muto2100
こんにちは、Patrappi(ぱとらっぴ)へようこそ!リンクフリーですが、このブログの全ての画像の著作権はmuto2100に帰属します。無断で複写、転用をすることを禁止します。
Excite Blog
Firefox
http://muto2100.exblog.jp/7289200/
2008-01-17T19:52:00+09:00
2013-07-08T19:59:19+09:00
2008-01-17T19:52:58+09:00
muto2100
スキン編集
ここ数日、スキン編集にかかりっきりでした。^^
2日ほど前のこと。
このblogに遊びに来てくださった方から、私のスキンの表示がおかしいという指摘を受けた。
Firefoxというウェブブラウザから私のblogを見ると、背景が表示されず、幅もおかしいということだ。
今までウェブブラウザといえばInternet Explorerしか考えていなかったので、寝耳に水であった。
で、早速自分のPCにもFirefoxをインストールして、このblogを覗いてみた。
↓ これがその画像。何じゃこりゃ、という感じ。
ちょっとビックリしてしまった。
自分のblogがこんな悲惨な状態になっていたとは・・・。
まず背景が真っ白である。
そして、POSTの幅が100pxほど少なく、右のメニューは本来の3分の1以下の幅しかない。
さらに、中央寄せのはずのタイトルなどの文字が左寄せになっている。
で、これはちょっと笑えないな、ということで原因を探って修正していたのである。
背景画像に関しては、心当たりがあったのでそれを修正したら一発で直った。
それに関しては、先日の背景画像貼り付け法の記事に追記してある。
ただ、幅がおかしいという問題は、簡単に直るものではなかった。
元々、このスキンは偶然の産物であった。
以前、このblogで、excite提供スキンのTwo Colorsを編集したCSSを公開したが、
それを同じexcite提供スキンのHTMLベーシック2に適用したら良い感じになったので、
そこからさらに弄くって作ったスキンだったのである。
なので、至る所にバグの元のようなものがあって、それがFirefoxだと表面化してしまい、
あのような目茶苦茶なスキンになってしまったようだ。
元々無理があるスキンなので、色々と修正を加えてみたがなかなかうまくいかない。
で、これは新たに作り直した方が早いと判断し、Two Colorsをベースに一から作り直した。
よって、このスキンは以前と変わらないようで、実は全く新しいもの。
結構苦労したが、今回の件はスキン編集についての良い勉強になった。
自作スキンを使っている方、お気をつけ下さい。
↓ これが作り直したスキンをFirefox上で見た画像。 一応きちんと表示されている。
まだ微妙に違うところもあるのだが、ほとんどInternet Explorerと変わらない状態になった。
そんなわけで、ここ数日皆さんの所に遊びに行けませんでした。
今週末にでも、ゆっくり伺わせて頂きますね。]]>
背景に画像を貼り付ける方法(2)
http://muto2100.exblog.jp/7283023/
2008-01-16T21:21:00+09:00
2008-02-06T07:17:13+09:00
2008-01-16T21:21:39+09:00
muto2100
スキン編集
2日前の記事で、背景に画像を貼り付ける方法を紹介しました。
でも、手頃な背景画像って、なかなか見つからないんですよね。
とくに私が使っているスキンの場合、黒鳶色、千歳茶色、黒緑色の3色のバランスが気に入っていたので、
何とかこの3色を使って背景用の画像が作れないものか、と考えました。
で、今の状態に至ったわけであります。
今日は、この背景画像の作り方を紹介します。
■ 背景画像を作るにあたり、2つのソフトを使用しました。
先日紹介した、WinShot と JTrim です。
まず、背景用の色見本を用意します。
私がいつも使っているのは、ここの色見本。
和色が沢山あって、個人的に好みの色が多いので気に入っています。
和色に拘らない人は、ここなんかもオススメです。
で、気に入った色が見つかったら、それを画面表示させます。
↓ こんな感じですね。
でもって、WinShotを起動して、この画面を適当な大きさに切り取って保存します。
勿論、文字の無い部分ですよ。
大きさは適当ですが、400×400もあれば十分ではないでしょうか。
あとでトリミングしますから、あまり気にしないで結構です。
次にJTrimを起動させます。
起動させたら、まずはトリミングです。
適当に切った色見本を290×290の大きさにトリミングします。
で、次に 「イメージ」 → 「テクスチャ」 を呼び出します。
← すると、こんなウインドウが出てきます。
この中から大理石1を選びます。
適用の強さは、お好みでどうぞ。
私は7にしました。
他にも色々なテクスチャがあるので、違うのを選んでも面白いですね。^^
ちなみに、先ほど色見本を290×290に切り取りましたが、
これは大理石1のテクスチャの大きさがこの大きさだったから(多分^^)です。
他のテクスチャの場合は大きさが違うかもしれないので、調べて適当にな大きさに設定してください。
これをきちんとやらないと、並べたときにテクスチャ同士の境界が不自然になります。
私は大理石1が気に入ったので、これを使っていますが、
他にも良さそうなテクスチャが沢山用意されています。
自分の好きな色と模様で背景画像を作るとblogの雰囲気が見違えますよ。
ちなみに、↓ これが背景を色コードで指定していた頃の私のblogのスキンです。
でもって、↓ これが大理石調の背景を貼り付けた同じ配色のスキン。
ね、全然違うでしょ。^^
以上、参考になれば幸いです。]]>
背景に画像を貼り付ける方法(1)
http://muto2100.exblog.jp/7269260/
2008-01-14T20:54:00+09:00
2008-01-17T06:23:07+09:00
2008-01-14T20:54:12+09:00
muto2100
スキン編集
スキン編集コーナー再開です。
このblogの背景には大理石調の模様が付いています。
結構ゴージャスな雰囲気で良い感じですよね。^^
今日は、背景等に画像を貼り付ける方法を紹介します。
■ 背景に模様を付けるには、まず、背景用の画像をマイイメージアカウントというところに登録します。
次に、それをCSS編集でタイル状に貼り付けるように設定します。
例えば、このblogのBODYの背景は、
← こんな画像をタイル状に敷き詰めて作られています。
で、具体的な貼り付け方法ですが、
背景用の画像をマイイメージアカウントにイメージ(画像)登録するのは、
スキン編集のHTML編集欄の右上からです。
↓ これですね。
この「マイイメージアカウントにイメージ登録」をクリックすると、下のような登録画面が出てきます。
ここで画像を登録します。
(ファイルサイズの大きな画像(100kバイト以上)は拒否されますので、欲張りすぎないように。^^)
登録が終わったら、この登録した画像のURLを、スキン編集画面でCSSに設定します。
スキンの背景の場合は、BODY{ }の中にある「BACKGROUND :#○○○○○○;」の色コードの部分を以下のように書き換えます。
BACKGROUND :URL("イメージ登録した画像のURL");
<注意!> イメージ登録した画像URLの両端には必ず" "を付けてください。
先日、Firefoxというウェブブラウザを使用している方から、
私のblogにおいて背景画像が表示されていないとの指摘を頂きました。
で、原因を調べたところ、" "を付けないとFirefoxでは画像を貼り付けてくれないことが分かりました。
Internet Explorerでは" "無しでも問題ないので、今まで気付きませんでした。(^^;
ところで、イメージ登録した画像のURLって分かりますか?
イメージ登録画面で、登録した画像名をクリックすると表示されます。
↓ こんな感じです。↑ これをコピペしても良いですし、コピーボタンを使っても結構です。
これで背景に画像が貼り付けられているはずです。
基本的に、背景はどれも「BACKGROUND:#○○○○○○;」と記載されているので、
方法さえ覚えてしまえば変更するのはそんなに難しくはないと思います。
■ 最後にちょっと補足説明をします。
今回は、小さな画像を敷き詰める方法を紹介しましたが、
大きめの画像を1枚だけ貼り付けたいときや、ワンポイントのアクセントを貼り付けたいときは、
敷き詰められると迷惑だったりします。
そんなときは、BACKGROUNDの行の下に「background-repeat:no-repeat;」を追加してください。
イメージアカウントに登録した画像を1回だけ貼り付けます。
背景画像に関しては、ネットで探せば適当な素材はすぐに見つかります。
ただ、なかなか気に入った画像が無いんですよね。
なので、私は背景画像を自作しました。
自作方法については、「背景に画像を貼り付ける方法(2)」で紹介します。
以上、参考になれば幸いです。]]>
メモ帳の増設
http://muto2100.exblog.jp/7166142/
2007-12-30T15:06:00+09:00
2008-05-16T06:41:31+09:00
2007-12-30T15:06:54+09:00
muto2100
スキン編集
メモ帳って便利ですよね。
何といっても、タイトルも含めて自分の好きにできますからね。
blogに個性を出す上で重要なパーツの一つです。
で、私の場合、メモ帳は「Welcome!」「ギャラリー」「エキサイト以外のリンク」に使っています。
え?何でメモ帳が3つもあるのかって?
そうですよね。普通はメモ帳は1つしか使えませんよね。
メモ帳は複数使えると、とても便利なんですよ。
そういうわけで、今回は複数のメモ帳を使う方法を紹介します。
今回はCSSではなく、HTMLをいじります。
自信のない方はあらかじめコピーを取っておいてください。
■ HTMLの中に、こんな文字列があるはずです。
<$calendar type=2$>
<$menuright$>
で、この文字列の前後のいずれかに、以下の文字列を挿入します。
(文字列中の<>は全角になっています。コピペした後に半角に書き換えてください。)
<DIV CLASS=MNTTL>メモ帳タイトル</DIV>
<DIV CLASS=MNBODY>メモ帳の本文</DIV>
そうすると、「メモ帳タイトル」というメニューバーが作られ、その下に「メモ帳の本文」という文章が入ります。
タイトルと本文は好きに書き換えてください。
ちなみに、これらの文字列を何処に挿入するかで追加したメモ帳の場所が決まります。
具体的に説明しますと、こんな感じです。
・
・
・
<○○○○○○>
← ここに挿入するとカレンダーの真上
<$calendar type=2$>
← ここに挿入するとカレンダーの真下
<$menuright$>
← ここに挿入するとメニューの最後
<○○○○○○>
・
・
・
追加したメモ帳は、メニューの最初か最後に入ることになりますので、
途中に入れたい内容は正規のメモ帳を使ってください。
ここまでの説明通りにやれば、とりあえずメモ帳の増設はできたと思います。
で、実際に増設メモ帳に文章を打ち込み保存してみると・・・。
あれれ? となりませんか?
文章がぜーんぶくっついちゃうんですよね。簡単に言うと改行ができていないのです。
これでは使い物になりませんよね。
で、次に増設メモ帳での改行の方法を紹介します。
■ 私のblogの「Welcome!」という増設メモ帳の部分のHTMLを紹介します。
(文字列中の一部の<>は全角になっています。)
<DIV CLASS=MNTTL>Welcome!</DIV>
<DIV CLASS=MNBODY>こんにちは、mutoといいます。<br>
Patrappi(ぱとらっぴ)へようこそお越し下さいました。<br>
このブログでは、私があちこちに出かけて撮ってきた写真を取り留めもなくUPしております。<br>
<br>
コメントはお気軽にどうぞ。写真の感想などをお聞かせ頂けると幸いです。ただ、返事が遅くなるかもしれませんので悪しからずご了承下さい。^^<br>
<br>
なお、リンクはフリーですが、このブログの全ての画像の著作権はmutoに帰属します。無断で複写、転用をすることを禁止します。</DIV>
お解り頂けましたか?<br>タグを使えば良いのです。<br>は「改行する」というタグです。
なお、緑色の<br>は、全角スペースを打ち込んでから<br>タグを使っています。
そうすると、一行開けることができます。 (※ 下の追記参照のこと)
もっと上手いやり方があるのかも知れませんが、とりあえず私が思いついたのはこの方法でした。
他に良いやり方があったら教えてくださいね。
<2008.2.2 追記>
以前この記事をUPしたときは<br clear=all>タグを挿入していましたが、
<br>で十分に機能するので<br>の表記に差し替えました。
勿論、以前の<br clear=all>でも大丈夫です。
<2008.4.28 追記>
上の記述で
“一行開けるには、全角スペースを打ち込んでから<br>タグを使います。”
と書きましたが、全角スペースは必要ありません。
ただ<br>タグを打ち込めば、改行します。
増設メモ帳の欠点は、スキンを変えると反映されないということです。
スキンごとに文字列を挿入しなくてはならないので、気分でスキンを変えている方は、ちょっと面倒ですね。
増設メモ帳の内容を更新するには、使い回している全てのスキンを編集しなくてはなりませんから。
でも、それを差し引いても便利な機能だと思いますよ。^^
以上、参考になれば幸いです。
※ ちょっと疲れたので、スキン編集コーナーは一旦終了します。
1月中旬までには再開する予定です。]]>
鍵コメ・コメマークを拡大
http://muto2100.exblog.jp/7159987/
2007-12-29T15:03:00+09:00
2007-12-30T15:19:47+09:00
2007-12-29T15:03:30+09:00
muto2100
スキン編集
コメント欄の各コメントの先頭に来る記号がありますよね。
普通だと吹き出し、鍵コメだと南京錠のマークです。
あれ、デフォルトだとちょっと小さくて見にくいですよね。
あれを大きくする方法を紹介します。
■ 大きくする方法は簡単です。
CSSに次の文字列を追加してください。コピペで大丈夫です。
DIV.COMMENT_TAIL IMG{height:13px; width:13px;}
heightとwidthがマークの縦幅と横幅の大きさをそれぞれ決めています。
あまり大きいと不自然なので13pxくらいがちょうど良いと思います。
以上、参考になれば幸いです。]]>
ログアウトを添付
http://muto2100.exblog.jp/7152855/
2007-12-28T12:23:00+09:00
2007-12-29T20:42:46+09:00
2007-12-28T12:23:47+09:00
muto2100
スキン編集
blogの右上にユーザーメニューっていうのがありますよね。
私のblogのユーザーメニューに“Log-out”という項目が追加されているのにお気づきでしょうか。
実は、私は2つのblog(ID)を持っているので、ログインとログアウトを繰り返すことが多いのです。
で、いちいちTopに入ってログアウトするのが面倒なので、ユーザーメニューに添付しました。
複数のexcite blogを扱っている人には、便利な機能だと思います。
■ やり方は簡単です。
スキン編集画面で、HTMLを見てください。そこにこんな文字列があるはずです。
<$adminmenu type=2$></DIV>
2$というのは、デフォルトだと1$になっていると思います。
私は格好付けて英語表記にしているので2$です。1$だと日本語表記ですよね。^^
で、<$adminmenu type=2$>と</DIV>の間に以下の文字列を挿入します。
<$adminmenu type=2$>|<a href=http://www.exblog.jp/logout.asp>Log-out</DIV>
なお、黄色の部分の<>は全角になっています。
そのままコピペしても機能しませんのでご注意下さい。
コピペした後に、半角の<>に書き換えて下さい。(実は、半角で打ち込むと、ここで機能しちゃうのです。)
あと、1$の方は、“Log-out”の文字を“ログアウト”に変更してください。
勿論、“ログアウトしちゃうよ~”なんていう風に変更しても大丈夫です。^^
“|”は全角です。お間違え&お忘れのないように。
以上、参考になれば幸いです。
]]>
写真に枠を付ける方法
http://muto2100.exblog.jp/7149186/
2007-12-27T21:53:00+09:00
2007-12-29T15:14:12+09:00
2007-12-27T21:53:50+09:00
muto2100
スキン編集
久しぶりのスキン編集コーナーです。
excite以外の方、つまらなくてごめんなさい。
一応写真も1枚ずつUPしますから。^^
で、本題に入りますが、
私のblogにUPしている写真、何気に立体枠が付いているのにお気づきですか?
ちょっと高級感が出て良い感じですよね。^^
今回は、この枠の付け方について紹介します。
■ 枠の付け方は結構簡単です。
CSSの中に、IMG.IMAGE_○○○{・・・・・・}という文字列があるはずです。
これをいじります。
まず、私のスキンのCSSのIMG.IMAGE_○○○{・・・・・・}の文字列をを紹介します。
IMG.IMAGE_LEFT {
border-top:1px #2b2b2b solid;
border-right:1px #595857 solid;
border-bottom:1px #595857 solid;
border-left:1px #2b2b2b solid;
MARGIN-RIGHT : 15PX;
MARGIN-BOTTOM : 10PX;
}
IMG.IMAGE_RIGHT {
border-top:1px #2b2b2b solid;
border-right:1px #595857 solid;
border-bottom:1px #595857 solid;
border-left:1px #2b2b2b solid;
MARGIN-LEFT : 10PX;
MARGIN-BOTTOM : 10PX;
}
IMG.IMAGE_MID {
border-top:1px #2b2b2b solid;
border-right:1px #595857 solid;
border-bottom:1px #595857 solid;
border-left:1px #2b2b2b solid;
MARGIN-TOP : 15PX;
MARGIN-BOTTOM : 15PX;
}
黄色の文字列が私が新しく追加した文字列です。
写真の右(right)と下(bottom)に1pxの白っぽい線(#595857 solid)、
左(left)と上(top)に1pxの黒っぽい線(#2b2b2b solid)を入れています。
こうすることで、写真がちょっとだけ凹んだように見えます。
ちなみに緑の文字は写真の貼り付け方を表しています。
写真をアップロードするときに、左(LEFT)・右(RIGHT)・中央(MID)を選んでいますよね。あれです。
それぞれに設定しなくてはなりません。
どの写真も同じように枠を付けるなら、上の例のように、3カ所を変更してください。
■ なお、右上のロゴ画像も同じように枠を付けることができます。
私のスキンの例で紹介しますと、
IMG.LOGO {
border-top:1px #333631 solid;
border-right:1px #595857 solid;
border-bottom:1px #595857 solid;
border-left:1px #333631 solid;
MARGIN-TOP : 4PX;
MARGIN-BOTTOM : 10PX;
}
細かい説明は要りませんね、^^
■ 最後に、立体枠ではなく普通の白枠を付けたいという場合は、次のようにすると良いでしょう。
IMG.IMAGE_LEFT {
border:10px #FFFFFF;
MARGIN-RIGHT : 15PX;
MARGIN-BOTTOM : 10PX;
これで、左寄せの写真に10pxの白い枠が付きます。
IMG.IMAGE_RIGHT, IMG.IMAGE_MIDも同様に設定してください。
以上、参考になれば幸いです。
]]>
スキン公開
http://muto2100.exblog.jp/5174701/
2007-04-18T18:19:00+09:00
2007-04-18T20:52:23+09:00
2007-04-18T18:19:45+09:00
muto2100
スキン編集
今までスキン編集について色々と述べてきましたが、
exiteブログのTwo Colorsを基調とした半オリジナルのスキンを作りましたのでCSSを公開します。
(exite以外の方には関係のない話でスミマセン。)
一応、写真blog用に作りましたので、癖のないシンプルなスキンだと思います。
まぁ、どんなスキンなのかは編集してのお楽しみということで。(笑)
個人的には格好良いスキンだと思っているので、
CSSをいじるのは面倒だけどオリジナルなテイストが欲しいな、という方は是非使ってみて下さい。
勿論、CSSは後から好きにいじくって頂いて結構ですよ。
■ 変更するのは簡単です。
まず、スキン変更→Two Colorsの「編集」をクリックして下さい。
色は何でも結構です。デフォルトのグレースケールのまま編集画面にして下さい。
で、CSSの文字列を全て消して、下の文字列をコピペして保存して下さい。
なお、変更されて保存したスキンはマイスキンにあります。
Two Colorsそのものは何も変わりませんのでご安心下さい。
・・・・・・・・・・・・・・・・・・・・・ コピーはここから ・・・・・・・・・・・・・・・・・・・・・
/* excite blog skin css by muto2100 */
BODY{ BACKGROUND : #2b2b2b; MARGIN : 0PX;PADDING : 0PX; }
BODY,TD,DIV,LI{ FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #BBB; WORD-BREAK:BREAK-ALL; }
A:LINK{ COLOR: #CE9A31; TEXT-DECORATION: NONE }
A:VISITED{ COLOR: #CE9A31; TEXT-DECORATION: NONE }
A:ACTIVE{ COLOR: #CE9A31; TEXT-DECORATION: NONE }
A:HOVER{ COLOR: #FFEE36; TEXT-DECORATION: UNDERLINE }
DIV#TOP {
BACKGROUND : #2b2b2b;
BORDER-BOTTOM : 5PX SOLID #6D6D6D;
PADDING : 10PX 25PX 0PX;
}
DIV#LEFT {
PADDING : 25PX;
MARGIN-BOTTOM : 50PX;
OVERFLOW : HIDDEN;
}
DIV#RIGHT {
PADDING-RIGHT : 25PX;
MARGIN-BOTTOM : 50PX;
OVERFLOW : HIDDEN;
}
DIV.HEADER {
FONT-FAMILY : "Trebuchet MS", TAHOMA, VERDANA ;
FONT-SIZE : 14PT;
}
DIV.HEADER A:LINK {COLOR: #AAA; TEXT-DECORATION: NONE}
DIV.HEADER A:VISITED {COLOR: #CE9A31; TEXT-DECORATION: NONE}
DIV.HEADER A:HOVER {COLOR: #FFF; TEXT-DECORATION: NONE}
DIV.URL {
FONT-FAMILY : VERDANA ;
FONT-SIZE : 10PT;
LETTER-SPACING : 2PX;
}
DIV.URL A:LINK {COLOR: #AAA; TEXT-DECORATION: NONE}
DIV.URL A:VISITED {COLOR: #AAA; TEXT-DECORATION: NONE}
DIV.URL A:HOVER {COLOR: #FFF; TEXT-DECORATION: NONE}
DIV.USERMENU {
PADDING-BOTTOM : 5PX;
TEXT-ALIGN : RIGHT;
COLOR : #FFF;
}
DIV.USERMENU A:LINK {COLOR: #AAA; TEXT-DECORATION: NONE}
DIV.USERMENU A:VISITED {COLOR: #AAA; TEXT-DECORATION: NONE}
DIV.USERMENU A:HOVER {COLOR: #FFF; TEXT-DECORATION: UNDERLINE}
DIV.PROFILE {
LINE-HEIGHT : 150%;
MARGIN-BOTTOM : 20PX;
}
DIV.MN {
MARGIN-TOP : 5PX;
MARGIN-BOTTOM : 20PX;
LINE-HEIGHT : 150%;
FONT-FAMILY : TAHOMA;
}
DIV.MNTTL {
border-top:1px #474a4d solid;
border-right:1px #16160e solid;
border-bottom:1px #16160e solid;
border-left:1px #474a4d solid;
PADDING : 2PX 10PX;
MARGIN : 25PX 0PX 10PX;
MARGIN-BOTTOM : 10PX;
BACKGROUND : #2b2b2b;
FONT-FAMILY : TAHOMA;
LETTER-SPACING : 2PX;
}
DIV.POST {
MARGIN-BOTTOM : 30PX;
}
DIV.POST_HEAD {
BORDER-BOTTOM : 1PX SOLID #6F6F6F;
PADDING-TOP : 3PX;
PADDING-BOTTOM : 3PX;
FONT-FAMILY : VERDANA;
LETTER-SPACING : 2PX;
COLOR : #A4A4A4;
}
DIV.POST_BODY {
MARGIN-TOP : 3PX;
MARGIN-BOTTOM : 25PX;
LINE-HEIGHT : 150%;
}
DIV.POST_BODY A:LINK{ COLOR: #CE9A31; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:VISITED{ COLOR: #CE9A31; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:ACTIVE{ COLOR: #CE9A31; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:HOVER{ COLOR: #FFEE36; TEXT-DECORATION: UNDERLINE }
DIV.POST_TTL {
FONT-SIZE : MEDIUM;
FONT-FAMILY : GEORGIA;
COLOR : #AB5D00;
FONT-WEIGHT : BOLD;
MARGIN : 15PX 0PX;
}
DIV.POST_ADMIN {
FONT-SIZE : 9PT;
MARGIN : 20PX 0PX;
}
DIV.POST_TAIL {
FONT-FAMILY : TAHOMA;
FONT-SIZE : 11PX;
MARGIN : 10PX 0PX 20PX;
TEXT-ALIGN : RIGHT;
}
DIV.POST_EDIT {
TEXT-ALIGN : RIGHT;
FONT-SIZE : 8PT;
MARGIN-BOTTOM : 3PX;
}
DIV.COMMENT {
MARGIN-TOP : 20PX;
MARGIN-BOTTOM : 20PX;
border-top:1px #474a4d solid;
border-right:1px #16160e solid;
border-bottom:1px #16160e solid;
border-left:1px #474a4d solid;
BACKGROUND : #2b2b2b;
PADDING : 15PX;
PADDING-TOP : 10PX;
}
DIV.COMMENT_BODY {
border-top:1px #16160e solid;
border-right:1px #474a4d solid;
border-bottom:1px #474a4d solid;
border-left:1px #16160e solid;
padding : 5px 10px 5px 10px;
BACKGROUND :#2b2b2b;
MARGIN-TOP : 6PX;
MARGIN-BOTTOM : 20PX;
LINE-HEIGHT : 130%;
}
DIV.COMMENT_TAIL {
MARGIN-TOP : 8PX;
MARGIN-BOTTOM : 5PX;
FONT-FAMILY : VERDANA, TAHOMA;
FONT-SIZE : 8PT;
COLOR : #666;
}
DIV.COMMENT_INPUT {
MARGIN-TOP : 20PX;
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-TOP : 20PX;
MARGIN-BOTTOM : 10PX;
LINE-HEIGHT : 160%;
PADDING-BOTTOM : 100PX;
}
IMG.IMAGE_TOP {
MARGIN-BOTTOM : 15PX;
}
IMG.IMAGE_LEFT {
MARGIN-RIGHT : 15PX;
MARGIN-BOTTOM : 10PX;
}
IMG.IMAGE_RIGHT {
MARGIN-LEFT : 10PX;
MARGIN-BOTTOM : 10PX;
}
IMG.IMAGE_MID {
MARGIN-TOP : 15PX;
MARGIN-BOTTOM : 15PX;
}
IMG.BOOKMK {
MARGIN : 10PX;
BORDER : 0PX;
}
IMG.LOGO {
MARGIN-BOTTOM : 10PX;
}
DIV.BANNER {
MARGIN-TOP : 40PX;
MARGIN-BOTTOM : 10PX;
TEXT-ALIGN : CENTER;
}
.SMALL {
FONT-SIZE : 11PX;
}
.DATE {
FONT-FAMILY : TAHOMA;
FONT-SIZE : 8PT;
FONT-WEIGHT : BOLD;
}
.TIME {
FONT-FAMILY : TAHOMA;
FONT-SIZE : 8PT;
TEXT-ALIGN : LEFT;
}
.AUTHOR {
FONT-SIZE : 8PT;
FONT-WEIGHT : BOLD;
}
.TXTFLD{
FONT-SIZE:9PT;COLOR:#BBB;
border-top:1px #16160e solid;
border-right:1px #474a4d solid;
border-bottom:1px #474a4d solid;
border-left:1px #16160e solid;
padding : 5px 5px 5px 5px;
BACKGROUND:#2b2b2b
}
DIV.CAL_TOP {
border-top:1px #474a4d solid;
border-right:1px #16160e solid;
border-bottom:1px #16160e solid;
border-left:1px #474a4d solid;
PADDING : 2PX;
PADDING-LEFT : 10PX;
MARGIN-TOP : 25PX;
MARGIN-BOTTOM : 10PX;
BACKGROUND : #2b2b2b;
FONT-FAMILY : TAHOMA,;
LETTER-SPACING : 2PX;
}
DIV.CAL {
TEXT-ALIGN : CENTER;
}
DIV.CAL_HEAD {
WIDTH : 175PX;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
TEXT-ALIGN : CENTER;
PADDING-TOP : 4PX;
PADDING-BOTTOM : 4PX;
MARGIN-BOTTOM : 10PX;
}
DIV.CAL_BODY {
WIDTH : 190PX;
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 {
border-top:1px #474a4d solid;
border-right:1px #16160e solid;
border-bottom:1px #16160e solid;
border-left:1px #474a4d solid;
FONT-FAMILY : VERDANA;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
BACKGROUND : #2b2b2b;
COLOR : #3D5586;
TEXT-ALIGN : CENTER;
}
.CAL_TR { }
DIV.XML {
TEXT-ALIGN : CENTER;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
MARGIN-BOTTOM : 80PX;
}
TEXTAREA.TXTFLD {height:10em;WIDTH :595px ! important;}
.TAGS {margin-top:1em;}
・・・・・・・・・・・・・・・・・・・・・ コピーはここまで ・・・・・・・・・・・・・・・・・・・・・]]>
立体化(その2)
http://muto2100.exblog.jp/5167592/
2007-04-17T20:21:00+09:00
2007-04-17T20:48:47+09:00
2007-04-17T20:21:17+09:00
muto2100
スキン編集
昨日に引き続き、blogの立体化について話をします。
今回は、コメント欄の立体化です。
■ まず、私のスキンのコメント欄のCSSを公開します。
DIV.COMMENT {
MARGIN-TOP : 20PX;
MARGIN-BOTTOM : 20PX;
border-top:1px #595857 solid;
border-right:1px #2b2b2b solid;
border-bottom:1px #2b2b2b solid;
border-left:1px #595857 solid;
BACKGROUND :#494a41;
PADDING : 15PX;
PADDING-TOP : 10PX;
}
DIV.COMMENT_BODY {
MARGIN-TOP : 6PX;
MARGIN-BOTTOM : 20PX;
LINE-HEIGHT : 130%;
border-top:1px #2b2b2b solid;
border-right:1px #595857 solid;
border-bottom:1px #595857 solid;
border-left:1px #2b2b2b solid;
padding : 10px 10px 10px 10px;
BACKGROUND :#333631;
}
DIV.COMMENTというのが、コメント欄の大枠で、DIV.COMMENT_BODY がコメント欄そのものです。
大枠を浮き上がらせて、コメント欄を凹ませています。
あと、何気に大切なのが赤色の行です。
これは、コメントの上下左右に10PX分の余白を作るための文字列です。
これが無いと、コメントが枠にくっついて見栄えが悪くなります。
「padding:上 右 下 左;」となっております。
数値はお好みで調節して下さい。
なお、オレンジ色の部分は、それぞれの背景の色を決定しています。
■ あと気になるのは、コメントを書き込む欄がデフォルトだと白いことですね。
この部分については、私のスキンでは以下のように編集しています。
.TXTFLD{
FONT-SIZE:9PT;COLOR:#BBB;
border-top:1px #2b2b2b solid;
border-right:1px #595857 solid;
border-bottom:1px #595857 solid;
border-left:1px #2b2b2b solid;
padding : 5px 5px 5px 5px;
BACKGROUND:#333631
}
黄色い部分が書き込み欄を凹ませている文字列です。
あと、緑色の部分が書き込み欄の色を決定しています。
さらに、赤色い部分で書き込んだ文字の色を設定しています。
上下左右には5PX分の余白を設定しています。
ちなみに、これをやると右のメニュー欄のexite検索も変わりますよ。
以上、参考になれば幸いです。]]>
立体化(その1)
http://muto2100.exblog.jp/5159980/
2007-04-16T21:09:00+09:00
2008-04-22T04:58:54+09:00
2007-04-16T21:09:07+09:00
muto2100
スキン編集
久しぶりにスキン編集です。
今回は、メニューバーやコメント欄の立体化についてです。
比較的分かりやすいメニューバーの立体化について紹介します。
■ まず、私のスキンのメニューバーの部分のCSSを紹介します。
DIV.MNTTL {
border-top:1px #595857 solid;
border-left:1px #595857 solid;
border-bottom:1px #2b2b2b solid;
border-right:1px #2b2b2b solid;
PADDING : 2PX 10PX;
MARGIN : 40PX 0PX 10PX;
MARGIN-BOTTOM : 10PX;
BACKGROUND:#432f2f;
FONT-FAMILY : TAHOMA;
LETTER-SPACING : 2PX;
}
黄色い部分が立体化させている文字列です。
この4行によって、top(上部)とleft(左側)に1PX分の灰色の線、bottom(下部)とright(右側)に1PX分の黒っぽい線を描いています。
こうすると、その部分が浮き上がって見えます。
ちなみに、#595857(灰色)と#2b2b2b(黒っぽい色)を入れ替えると凹んで見えます。
■ なお、これだけだとカレンダーのタイトルバーが立体化されませんから、カレンダーの部分も以下のように修正します。
DIV.CAL_TOP {
border-top:1px #595857 solid;
border-left:1px #595857 solid;
border-bottom:1px #2b2b2b solid;
border-right:1px #2b2b2b solid;
PADDING : 2PX;
PADDING-LEFT : 10PX;
MARGIN-TOP : 25PX;
MARGIN-BOTTOM : 10PX;
BACKGROUND : #432f2f;
FONT-FAMILY : TAHOMA,;
LETTER-SPACING : 2PX;
}
黄色い部分が立体化させている文字列です。
■ さらに、カレンダーの今日の部分を朱色にして凹ませるために、以下の修正を加えています。
.CAL_TODAY {
border-top:1px #250d00 solid;
border-right:1px #d57c6b solid;
border-bottom:1px #d57c6b solid;
border-left:1px #250d00 solid;
FONT-FAMILY : VERDANA;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
BACKGROUND : #9e3d3f ;
COLOR :#BBB;
TEXT-ALIGN : CENTER;
}
黄色い部分が立体化させている文字列です。
#9e3d3fが朱色の四角形です。
気に入らなければお好みで替えて下さい。
ただし、立体化の部分の1PXの枠の色(#250d00と#d57c6b)は朱色に合わせていますので、修正が必要になります。
一応こんな感じです。分かって頂けましたでしょうか?
コメント欄等の立体化もこの方法の応用です。
色々と試してみると面白いですよ。
ただし、失敗するとぐちゃぐちゃになるので、あらかじめバックアップをとることをオススメします。
まぁ、失敗しても最初からやり直せば良いだけのことですけどね。
以上、参考になれば幸いです。]]>
TAGを離して表示する方法
http://muto2100.exblog.jp/4961013/
2007-03-25T09:06:00+09:00
2007-12-23T13:58:56+09:00
2007-03-25T09:06:21+09:00
muto2100
スキン編集
TAG機能って便利ですよね。
私も、このblogではカテゴリとは別に使用レンズごとにTAGで分類しています。
ところで、それぞれの記事に張り付いているTAG表示(Tags:○○○○○っていうやつ)なのですが、
デフォルトだと記事のすぐ後にくっつくように張り付いていて嫌なんですよね。
離して表示する方法はないかな、と探したら見つかりました。
■ やり方は簡単です。下の文字列をCSSに貼り付けてください。
場所は何処でも結構です。
.TAGS {margin-top:1em;}
黄色の1emというのは1文字分という意味です。
これを貼り付けると、記事の後に1文字分空けてTAGが表示されます。
もっと広げたい場合は、数値を大きくしてください。
※ ちょっと疲れてきたので、スキン編集シリーズはひとまず終了します。
こういった記事を書くのって、結構疲れますね。(笑)
まだまだ紹介していない小技がありますので、時間が出来たら随時紹介していきたいと思います。
※ スキン編集にかまけていて皆さんの所にお邪魔できなくて申し訳ありません。
今晩あたりにでも遊びに行こうと思います。]]>
コメント欄の拡張
http://muto2100.exblog.jp/4954709/
2007-03-24T17:49:00+09:00
2007-04-29T19:35:08+09:00
2007-03-24T17:49:29+09:00
muto2100
スキン編集
今日は、コメント欄の拡張方法について紹介します。
■ コメント欄の拡張方法は案外簡単です。
下の文字列をCSSに追加してください。追加する場所は何処でも結構です。
TEXTAREA.TXTFLD {height:10em;WIDTH :570px ! important;}
黄色の数字が縦の幅、緑色の数字が横の幅です。
数値はお好みで変更して下さい。
なお、「! important」というのは、大切だよ!という意味らしいですが、
これを付けないと何故か上手くいきません。]]>
ヘッダーの文字変更
http://muto2100.exblog.jp/4944760/
2007-03-23T16:17:00+09:00
2008-01-14T21:15:27+09:00
2007-03-23T16:17:22+09:00
muto2100
スキン編集
今日はヘッダーの文字の変更方法について紹介しようと思います。
ヘッダーというのは、ブログのタイトルやURLの記載されている場所のことです。
今回もTwo Colorsの場合はこうだ、という形で話を進めます。
なお、私はスキン編集歴3日の素人なので、ある程度の知識のある方は笑って読み飛ばしてくださいね。
■ まず、CSS編集の文字列から、以下の文字列を探してください。
(-A-、-B-、-C-は便宜上付けている記号ですから、CSSにはありません)
-A-
DIV.HEADER A:LINK {COLOR: #AAA; TEXT-DECORATION: NONE}
DIV.HEADER A:VISITED {COLOR: #AAA; TEXT-DECORATION: NONE}
DIV.HEADER A:HOVER {COLOR: #FFF; TEXT-DECORATION: NONE}
-B-
DIV.URL A:LINK {COLOR: #AAA; TEXT-DECORATION: NONE}
DIV.URL A:VISITED {COLOR: #AAA; TEXT-DECORATION: NONE}
DIV.URL A:HOVER {COLOR: #FFF; TEXT-DECORATION: NONE}
-C-
DIV.USERMENU A:LINK {COLOR: #FFF; TEXT-DECORATION: NONE}
DIV.USERMENU A:VISITED {COLOR: #FFF; TEXT-DECORATION: NONE}
DIV.USERMENU A:HOVER {COLOR: #DDD; TEXT-DECORATION: UNDERLINE}
Aがブログのタイトルの色、Bがタイトルの下のURLの色、Cが右端のユーザーメニューの色を決めています。
それぞれの2行目の黄色の部分の色コードを替えれば良いです。
なお、3行目の緑色の部分の色コードを変えると、マウスカーソルを載せたときの色が変わります。
ちなみに、Cの3行目だけTEXT-DECORATIONがUNDERLINEとなっています。
実際にマウスカーソルを載せれば分かりますが、カーソルを載せると、アンダーラインが出ます。
1行目が何なのかは分かりません。知っている方がいたら、教えてください。
なお、Two Colorsを使っている方は、すでにお気づきかもしれませんが、
Two Colorsのユーザーメニューの色ってデフォルトでは真っ白なため、他の文字と比べると明るすぎて浮いています。
結構気になるんですよね、これ。
ですから、Cの2行目の#FFFを#AAAに、3行目の#DDDを#FFFに替えることをお勧めします。
■ ついでに、タイトルの大きさを変える方法も紹介します。CSSの中から、次の文字列を探してください。
DIV.HEADER {
FONT-FAMILY : "Trebuchet MS", TAHOMA, VERDANA ;
FONT-SIZE : 13PT;
}
文字列の中の数字がタイトルの大きさです。デフォルトは13です。お好みの大きさに変えてください。
■ 最後に、ユーザーメニューの表記の変更方法も紹介しておきます。
HTML内に<$adminmenu type=1$>という文字列があります。
この文字列の中の数字を変更します。
1が日本語、2が英語、3がイラストです。
これについては、exite内でも紹介しています。]]>
背景色の変更
http://muto2100.exblog.jp/4934832/
2007-03-22T16:22:00+09:00
2007-03-24T18:17:52+09:00
2007-03-22T16:12:32+09:00
muto2100
スキン編集
スキンについて、せっかく色々と勉強したので、
今回は背景色の変更方法について紹介しようと思います。
ただし、私の使用スキンはexite blogのTwo Colorsです。
Two Colorsの場合はこうだ、という形で話を進めます。
なお、私はスキン編集歴2日の素人なので、ある程度の知識のある方は笑って読み飛ばしてください。
■ まず、CSS編集の文字列のトップの辺りに、こんな行があるはずです。
BODY{ BACKGROUND : #282828; MARGIN : 0PX;PADDING : 0PX; }
この黄色の部分が背景色です。
替える場合は、色コード表から好みの色のコードをコピペして、置き換えて下さい。
■ 次に、もうちょっと下の方にいくと、こんな行があるはずです。
DIV#TOP {
BACKGROUND : #0F0F0F;
BORDER-BOTTOM : 5PX SOLID #6D6D6D;
PADDING : 25PX 25PX 0PX;
}
この黄色の部分がブログのタイトルの背景色です。
好みの色のコードをコピペして、置き換えることが出来ます。
ちなみに緑色の部分は、タイトルの下にある灰色の線です。
5PXというのがその幅で、太くしたければ数値を大きく、細くしたければ数値を小さくして下さい。
緑の行を削除すれば線は無くなります。
なお、#6D6D6Dは灰色を表すコードです。他のコードに置き換えれば違う色になります。
■ さらに、こんな行を探してみてください。
DIV.MNTTL {
PADDING : 2PX 10PX;
MARGIN : 25PX 0PX 10PX;
MARGIN-BOTTOM : 10PX;
BACKGROUND : #151515;
FONT-FAMILY : TAHOMA;
LETTER-SPACING : 2PX;
}
MNTTLとはメニュータイトルの略なのですが、
黄色の部分の色を変えればメニュータイトルバーの色が変わります。
■ なお、理由は分からないのですが、カレンダーに関しては他のメニュータイトルバーとは別に変更する必要があります。CSSの中から、次の文字列を探してください。(結構後の方です)
DIV.CAL_TOP {
PADDING : 2PX;
PADDING-LEFT : 10PX;
MARGIN-TOP : 25PX;
MARGIN-BOTTOM : 10PX;
BACKGROUND : #EBEBEB;
FONT-FAMILY : TAHOMA,;
LETTER-SPACING : 2PX;
}
この黄色の部分がカレンダーのメニュータイトルバーの色を決めています。
こんな感じですが、参考になりましたでしょうか?
これだけでも、結構雰囲気変わると思いますよ。
背景の場合、必ず「BACKGROUND :色コード」という形になっているので分かりやすいですよね。
他のスキンの場合でも、基本は同じなので同じようにやれば出来ると思います。
色以外もちょこちょこと替えているのですが、それは次回以降で説明します。]]>
Customize!
http://muto2100.exblog.jp/4921676/
2007-03-21T08:08:00+09:00
2007-12-30T15:44:02+09:00
2007-03-21T08:08:44+09:00
muto2100
スキン編集
300件エントリーしたのを記念して、スキンの編集に挑戦してみた。
このblogを始めてから早1年3ヶ月。そろそろ自分の色を出したいなぁ、なんて思って。
で、いざ編集!なんて意気込んで始めたのだが、これが手強いのなんの。
HTMLだのCSSだの訳が分からない。
なんなんだ、これ。
一般人の理解できる代物じゃない。
で、ネット上のスキン編集を扱っているサイトを読みまくって、何とか色くらいはいじくれるようになった。
おかげで、1日潰してしまったじゃないか。
難しすぎるぞ、スキン編集!
もうちょっと素人にも配慮してくれ!!
今回は、「和」のテイストを取り入れて、ちょっと渋い感じにしてみた。
タイトルの背景とメニューバーは檳榔子染(びんろうじぞめ)色で記事の背景は黒緑色。
でもって、記事のタイトルのピンクっぽい色は宗伝唐茶(そうでんからちゃ)色。
それにしても、この色の名前、誰が付けたんだろう。
何じゃこれ、っていう感じだな。でも綺麗だけど。(笑)
ちなみに、オレンジ色は元々のやつをそのまま使用している。
あと、タイトルもオレンジ色にして、ちょっとだけ大きくした。
最後に、「ぱとらっぴ」は私の造語なのだが、「Patrappi」と英語に変換。
結構、オリジナルっぽくなったでしょ。
<追記(3/23)>
その後、スキンを色々といじくって変更していますので、現在は上記の状態ではありません。
]]>
https://www.excite.co.jp/
https://www.exblog.jp/
https://ssl2.excite.co.jp/