マイスキンつくりたいな
by tomo0640820
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
カテゴリ
目次
このサイトについて
とりあえずマイスキン
HTML編集 A
HTML編集 B
HTML編集 C
HTML編集 D
CSS編集 序1 明解編
CSS編集 序2 模索編
CSS編集の友
いざマイスキン
マイスキン人リンク(TB)
お便利サイト
以前の記事
2004年 10月
2004年 09月
2004年 08月
2004年 07月
2004年 06月
2004年 05月
フォロー中のブログ
Feeling...感じ...
ちゃめ・家
【 d r o p s ...
FOOTBALL STYLE
ごはんですよ。
のらくら庵
ライムのブログ
流れ星の散歩道(^_-)-☆
極私的パパ馬鹿日誌
じゅん☆ブログ
発展途嬢
:..: めもにっき。:...
はい こちらサポセン。
+ music life +
Roller skate...
でも、がんばる!
Fan Fan Life...
トルコ旅日記
喜 怒 哀 楽
ぽっとの陽だまり研究室
MIURAKE
Brel et moi
Loophole
blueblueclub
恐悦至極に存じます。
しゃんくのつぶやき
しあわせの箱庭
ぱーむらいふ
超初心者一眼レフ日記。
私の人生、こんなもん 涙...
人生の地図
today's chan...
そんな目で見るなよ
雀屋だらだらday's
スラドット60
no name☆
norah'#
3gatsu-USAGI
***amedama ...
My funny Val...
Bostonterrie...
たびcamera
お魚好きなねこ
MINT TIME
エキブロ外リンク
Anemosphere-Blog
TOMOのother sites
tomolatte
最新のトラックバック
表示/非表示のがたつき
from 華談 -St.Dorothe..
CSS&HTML / T..
from 日刊エキブロ新聞
リニューアル工事中。
from Too High Quali..
HTMLのテーブル
from † CrossMoon † ..
検索
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧
カテゴリ:いざマイスキン( 9 )
ちと休憩
記事内容にくぎりがついたのでちょっとここで投稿は休憩に入ります。

[ 内 情 ]
息子1歳が最近なかなか寝てくれません(TдT)
今日は寝たのが23時台。夜の帝王。
寝かしつけに何時間も。しくしく。
日中は外出して遊ばせて(=疲れさせて)いるのですが。
一人の時間は少ないのにやりたいことはあれやこれや。
器用じゃないので思考が分断されると使い物になりません。
まとまった時間が欲しいですぅ。
やー、もちろん可愛い盛りなので子育ても楽しいのですけどね。
息子よ、たくさん寝ないと成長ホルモン出ないぞ( -_-)

投稿はかなり控えめになりますがコメントはチェックします。
気にかかる記事は修正&追記かけます。
よそ様のブログにももちろんおじゃましに行きます。
エキブロのコミュニティは打て(投稿すれ)ば響く(反応がある)ので居心地いいです。
では皆様、わたくし当面地味に活動します。ぺこり。
 '04.9.15 TOMO
[PR]
by tomo0640820 | 2004-09-15 00:29 | いざマイスキン
夏休みのお知らせ
お盆なので里に戻ります。
'04.8.12~8.22までこのブログを留守にします。
実家はビジネスホン(=ややこしい)なのでネットはしないと思います。
コメントへのレスが遅くなってもよろしければご来訪の記念にはんなりと足跡を残していって下さいませ<(_ _)>

戻ってきたら また生暖かく迎えて下さい
[PR]
by tomo0640820 | 2004-08-11 21:44 | いざマイスキン
Movable Type 3.0 日本語版
「Movable Type」、ブログ作成ツールの代表格。
ブログ人やココログ、そしてここエキブロもこれを採用されているそうです。
雑誌で見かけて前から気になっていたのですがMovable Type 3.0 Developer Edition日本語版が7/15に提供されるそうです(今はベータ版)。
個人使用は無料だしこれを機にちょっと試してみようかしら。

==================== 追 記 =====================

提供と同時にやってみました。
ほとんど野次馬のノリ(^ ^;
MTに関しては既に詳しい解説サイトが続々でているので案外するすると設置できました。
日本語版だったし(←これ大きい)
嬉しいのがスキンをいじる編集画面さえカスタマイズできる事…!
テキストエリアの大きさとかフォントサイズとか。
ここでも相変わらずデフォルトスキンのままですが ゆっくりいじってみようかと思っています。
(画像はMTブログ、デフォルト画面の一部です)

================ 追 々 記 =====================

この後、Nucleusも気になって試しに設置。
ああ、こうやってあちこちやり散らかして一つもモノにすることができずに終わるのが私のパターン。

[PR]
by tomo0640820 | 2004-07-11 13:07 | いざマイスキン
マイスキンができた(薄皮)
なんとか薄い皮ができました。ぜーはー。こちら(=別館)です。

前回はローカル環境でエディタで作りあげたのちエキブロの編集画面に一気にコピペで玉砕しました(涙
その後、どこがどうまずいのかわけわかめなので少しつくっては複数ブラウザで確認し、保存。
このスキン、外部スタイルシートを使うとレイアウトが崩れてしまうのでエキブロの編集画面でコツコツやっていました。

作成にあたってのささやかなこだわり…。

1.開設当初のもくろみ、CSSでレイアウト(テーブルなし)。
  呆けた頭の体操ということで。

2.固定幅、かつセンター寄せ。これもTOMO的肝要。
  固定幅にすると、今後凝った背景のデザインできるかなと思って。
  左寄せよりセンタリングの方が敷居高そうだからあえて挑戦…。

3.IE6、ネスケ7.1、Opera7.5でほぼ同じ表示。
  お客様は神様(-人-)
  ただ私はWINユーザーでMAC環境ではどう表示されるか不明(><)
  最初はネスケいやだわぁ、と思ったけど今となってはIEの方が一見素直に見えて扱いづらい黒猫のタンゴと思う。

4.上部写真を一枚の大きなBACKGROUND-IMAGEにすれば楽かもしれないけど…なんとなくCSSでタイル状にならべてみたいなと。
  おかげでHTML側のシンプルなコードが台無しですね。はは…。

仕上げはこれからゆっくりと…。
[PR]
by tomo0640820 | 2004-07-04 11:34 | いざマイスキン
私的メモ
別館でいじっていた骨スキン微調整後の最終形態。
(・o・)…スキンなのに骨とはこれいかに?

骨スキンのHTML
骨スキンのCSS
骨スキンのスクリーンショット
[PR]
by tomo0640820 | 2004-07-04 11:25 | いざマイスキン
うぎゃ
最近とんと投稿していないヘタレな私である。
が、実はローカル環境でボツボツスキンを作っていた。
結構手が込んでいた…と思う。
IEでもネスケでもOperaでも画面を確認。
よっしゃ、でけたぁ~(はぁと)とばかりに先程スキン編集画面でプレビューしたらば…
a0003861_235029.gif
背景色しか反映されなかった…w
ぁぁぁ。ドボジデ。こんなに細かいコード、どこがエキブロの機嫌をそこねたのか今更わからないぞ。
はっ、もしかしてプレビューだとうまくいかないけど「適用」させるとうまくいくってことは…ないだろうな。設定画面にたどりつけなくなったらまずいしやめとこ、しゅん(小心者)。路線を変えて最初からやりなおそう。

<教訓>
ローカル環境で作り込みせずある程度の段階でプレビューして確認すること×××

------- 追 記 -------

この後、mitsu-kenさんの指摘で大船に乗った気持ち(?)でスキンの「適用」実行。(プレビューは真実の姿だった…)
そして文字化けも解消~(^▽^    …しかし。


[PR]
by tomo0640820 | 2004-06-30 23:51 | いざマイスキン
微調整
昨日皮をかぶせた別館スキンの左下「GET XML」と「skin by tomo_test」の位置がよくみると右よりだったのでCSSで微調整する。

DIV.XML { FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; MARGIN-RIGHT:50PX;}

不思議なのはHTMLでXMLをクラス指定していないのにかかわらず適用されるということ。
それはエキブロ提供スキン(マイスキンの基本パターン「C」)の方も。
世の中、分からないことは沢山あるのだ、とりあえずすすめー。
[PR]
by tomo0640820 | 2004-06-18 23:12 | いざマイスキン
とりあえず骨に皮をかぶせる
別館でいじっているマイスキンですがあまりにも見づらい為、前回作った骨スキンのヘッダー他を調整し、エキブロのCSSを重ねてとりあえず体裁を整えました。

この時点でのHTML本体
この時点でのCSS
この時点でのスクリーンショット
[PR]
by tomo0640820 | 2004-06-18 00:32 | いざマイスキン
CSSのみで「HTML編集」をデザインしてみる-1-(骨 
めざせマイスキン!ということでここ最近、スキンをコツコツいじっていました。が、基本のコードをいじると微妙にいろんなところが何故だかずれていきます。その度にテーブルのTDを増減させたり幅を変えたり。
が、思い出しました。最初のブログ(5/22)での私が吐いた言葉「時代はどんどん私の知らないうちに進化してデザイン的要素はオールCSSブラボーになっているみたい」。
そうだ…この際テーブルをなくしてしまおう…!
…いいのだろうか? 許されるのだろうか? そもそもテーブルなくして表示されるのだろうか?(たらり
数々の不安がめばえ、まず既存のエキサイトブログ提供スキンの中にテーブルを使用していないものはあるかみてみました。
…う、すべてテーブルを使用している。もしかしたらテーブルを崩してはいけない理由がある可能性大。
でもやってみようかしら。どきどき。
どうやって?(-_-;)
ごそごそ(CSSの本を読み読み)。…できるかも?;

というわけで今回骨組みだけつくってみました。単に<DIV>~</DIV>で囲って表示項目を並べています。
今書いているこのスキンでいじるとたいそう読みづらくなるので 別にIDをとり(※複数ID取得ってよくないかもしれません(>_<))、そこで試しています。
TOMOスキン01はこちらです
でもスキンは日ごとに変わっていくと思うので…この時点でのスクリーンショットはこちらです。

私が最初に選択した基本スキンは「C. 2列のレイアウト-左側にメニュー」なのでとりあえずそれを再現する形にしました。
下の図1は構造をエキサイトブログタグで表示したもの、図2はエキサイトブログタグについての説明ページに沿って差し替えたものです。
※図の四角い枠はそれぞれ<DIV ID=***>~</DIV>で囲っているところです。
※図の四角い枠にかかる青い太い文字はID名です。
※図とコードを照らし合わせたい方(いるのだろうか?)は図の上をクリックして下さいませ。別窓が開きます。
a0003861_13739.gif


左メニューの「HTML編集 序1」の図も併せて見ると分かりやすいかもしれません。
以下に今回使用したタグをコピペしました。
この後の調整が大変なんだろうな…。
いいや、ゆっくりやろふ…。

---------------------------------
■HTML編集■

※全体・左メニュー部・本文から構成されていますが、今は全体のみいじっています。

<DIV ID=ALL>

<DIV ID=TOP>
<$header$>
<$blogurl$>
<$adminmenu type=1$>
</DIV>

<DIV ID=LEFT>
<$logoimage type=1$>
<$description$>
<$nick$>
<$calendar type=1$>
<$menuleft$>
<$banner type=1$>
<$xml$>
</DIV>

<DIV ID=RIGHT>
<$post$>

<DIV ID=PAGE>
<$prepage type=1$>
<$nextpage type=1$>
</DIV>

</DIV>

<DIV ID=BOTTOM>
</DIV>

</DIV>

---------------------------------

■CSS編集■

/* TOMO SKIN 01 */  

BODY {
    BACKGROUND: #FFF;
    COLOR: #000;
    MARGIN: 0PX;
    PADDING: 0PX;
    TEXT-ALIGN: CENTER;
    }

DIV#ALL {
    WIDTH: 700PX;
    PADDING: 0PX;
    MARGIN: 0PX AUTO;
    PADDING: 0PX;
    }

DIV#TOP {
    WIDTH: 700PX;
    HEIGHT: 120PX;
    MARGIN: 0PX;
    PADDING: 0PX;
    }

DIV#LEFT {
    FLOAT: LEFT;
    WIDTH: 200PX;
    MARGIN: 0PX;
    PADDING: 0PX;
    }

DIV#RIGHT {
    FLOAT: RIGHT;
    WIDTH: 500PX;
    MARGIN: 0PX;
    PADDING: 0PX;
    }

DIV#PAGE {
    WIDTH: 100%;
    MARGIN: 0PX;
    PADDING: 0PX;
    }

DIV#BOTTOM {
    WIDTH: 700PX;
    HEIGHT: 100PX;
    MARGIN: 0PX;
    PADDING: 0PX;
    }

---------------------------------

早く寝なければ…。
[PR]
by tomo0640820 | 2004-06-14 01:38 | いざマイスキン