]]>
カスタムスキンが出来るまでは私もそうしてきました。
去年までは簡単に出来ていたんですが、
カスタムスキンができてから、サイドバーの機能が変わっています。
以前は書いたCSSはそのままでしたが、
今は「シンプルな入力」なのに
自動でタグが書き込まれ、
後で書き直そうとカスタムペインを開いてみると
とても見難いものになっています。
Pタグとか改行タグとかが入ってしまうのです。
コルチカムで実験してみました。
ブログはこんな感じです。
メッセージを送るボタンに背景で枠をつけました。
はじめに入力した時はこんな風でした。
一つのカスタムペインに２０００文字まで書き込めるので
ポエールのscriptと一緒に書き込みました。
|
<style> #send-message { margin:6px; padding:2px 0px 0px 0px; background:#929292; } </style> |
もう一度開いてみます。
|
#send-message { margin:6px; padding:2px 0px 0px 0px; background:#929292; } </style> |
見難いと思いますが。
p autoタグ や、改行タグが入ってしまいます。
今回はなかったのですが
更新するたびにタグが増えていくこともあります。
そんな時は面倒ですが、
自分が書いたソース以外の部分を消して
保存ボタンを押します。
そうしないと間延びしたり、
思わないところに改行が入って、
表示されないこともあります。
以前は、自動改行されてうまく表示されなかったんですが、
今は続けてこう書いても大丈夫みたいです。
|
<style> #send-message {margin:6px;padding:2px 0px 0px 0px; background:#929292; } </style> |
本当は一行に書いているんですが、
文字をアップすると勝手に改行されています。
これが自動改行です。
カスタムペインで見ると
<br class="auto"/>と言うタグが入っているのが解かります。
その時は項目ごとに前もって改行してあげると良いみたいです。
あまり実験できていないので結果オーライで、
確信はもてませんが・・・。
|
/*--send-message--*/ #send-message { padding:2px 0px 0px 15px; background: #000000 url(/blog/_ｘｘｘｘ/ｘｘｘｘｘ/ｘｘｘｘｘ/ｘｘｘｘｘｘ.gif) no-repeat left center; } |
|
この記事は４月に書き始めたんですが、 まとめている中、見ている方と私の文字の大きさの設定が違った時には レイアウトが崩れてしまうことに気がついて、 迷いが出てきて、アップできませんでした。 でも、私の記録として記事をアップすることにしました。 |
≪２００７年４月２５日～≫
profileのリスト部分に画像を入れる単純な方法を思いつきました。
ポイントは、画像と画像を描くための下準備です。
いつもの見慣れたプロフィール部分。ここを変えてみます。(height=180%)
小さなマーク（１１ｐｘX１１ｐｘ）が作ってあることを前提にしてます。
|
/*-----Side-----*/ ≪サイドバーのリストの要素≫ .sidebar-body ul, .sidebar-body li, .sidebar-body dl, .sidebar-body dt, .sidebar-body dd, .sidebar-body form { margin:0; padding:0; } /*--Profile--*/ dt.profile-img { float:left; } ≪プロフィールのnice !の数 と記事の数≫ dd.profile-status{ margin-left:85px; line-height:180%; } ≪ブログクルーザーへリンク≫ .profileLink { padding-left:12px; background:url(/blog/_skin/system/images/arrow2R_small_black.gif) no-repeat left center; } ≪nice ! アイコン部分≫ .nice { margin:0; padding:0 2px; background:#ffd900; border:1px solid #0090ff; color:#0090ff; } |
≪CSSの下準備≫
/*-----Side-----*/
≪サイドバーのリストの要素≫
.sidebar-body ul, .sidebar-body li, .sidebar-body dl, .sidebar-body dt, .sidebar-body form {
margin:0;
padding:0;
}
↓切り離して書き直し。
.sidebar-body dd｛
margin:0;
padding-left:13px;
←１１ｐｘのマークのため
/*--Profile--*/
dt.profile-img {
float:left;
}
≪プロフィールのnice !の数 と記事の数≫
dd.profile-status{
margin-left:85px;
line-height:200%;←この高さで全体のバランスが決まります。
}
≪ブログクルーザーへリンク≫
.profileLink {
padding:0;
background部分消す。
}
l
≪nice ! アイコン部分≫
.nice {
margin:0;
padding:0;
background:#ffd900;←消す
border:1px solid #0090ff;←消す
color:#0090ff;←消す
}
書き直して表示します。(height=200%)
次に
profile部分のスクリーンショットを撮る。＞リスト部分の大きさを測る。＞ペイントで作図する。
ここまでが画像をアップするための下準備。
作図作業については、次回、ペイントの記事をアップします。
（記事ができたらここにリンクします。）
出来上がった画像をCSS Side部分に入れます。
/*-----Side-----*/
≪サイドバーのリストの要素≫
.sidebar-body ul, .sidebar-body li, .sidebar-body dl, .sidebar-body dt, .sidebar-body form {
margin:0;
padding:0;
}
.sidebar-body dd｛
margin:0;
padding-left:13px;
background:url('/_images/blog/_ｘｘｘ/kokia/ｘｘｘｘｘｘｘ.png')no-repeat left center;
そうすると出来上がりはこんな感じ。
簡単といえるほど簡単ではなかったかも…。
それと、私は文字の大きさをやや小さいで表示してるんですが、
他の大きさにするとバランスが崩れます。
文字の丁度前に画像を出さなくても良いような
デザインにすると良いかもしれません。
でも、CSSではどうしようもない微調整が
ペイントでできるところ、
イライラ感は半減しました。
≪５月１５日≫
 ６月に入り、更新することが出来ずにいました。 さすがにご来訪者の方が減り、 最近はきり番のご報告もなくなりました。 残念ながらしばらく、この状態は続きそうです。 で、きり番のご報告ですが、 ５月の小さなきり番は、てっちゃん、Etsukoさん、 ６月に入って、ばぐさん。 大きなきり番はぜろこさんの５１０００番でした。 おめでとうございます。そして、ありがとうございます。 改めて、ハテナから、おめでとうとありがとうのご報告をいたします。 そして、プレートをお受け取り頂けたらうれしいです。 |
|
№２４８． 2007年5月29日 tetchanさま ５０６００hits |
  おめでとう&ありがとう |
|
|
№２４９． 2007年5月30日 Estukoさま ５０７００hits |
 おめでとう&ありがとう |
|
|
№２５０． 2007年6月3日 ばぐさま ５０９００hits |
 おめでとう&ありがとう |
|
|
№２５１． 2007年6月6日 ぜろこさま ５１０００hits |
 おめでとう&ありがとう |
|
|
おめでとうございます ＆ ありがとうございます。 作ったプレートの数２５０枚を越えました。 またプレートが作れるように、ご報告、お待ちしています。 コキア＆ハテナ |
Ⅰでは、シンプルワイド、Ⅱでは、プレーンを使っていますが
思っているように反応してくれませんでした。
閉鎖していたコルチカムで実験したりもしました。
同じソースでは、違ったスキンが出来ます。
ⅠとⅡは同じスキンの色違いに見えてたと思うんですが、
CSSは違います。
ⅠとⅡ、別々に記事をアップしたのでは比較が出来ません。
また、迷いが出てしまってCSSのまとめが出来ませんでした。
今の私は、まとめあげる根気が足りません。
今回触っている部分
#bady
#container
#banner
#footer
４０ｐｘX４０ｐｘ画像を準備して、全体にリピートさせました。
Ⅰのバナー部分は１７ｐｘX１４０ｐｘの画像を横にリピート、
Ⅱなバナー部分は８７０ｐｘX４０ｐｘの画像を縦にリピート
で、背景を作りました。
 踏んでくれたのは、masaeさんです。 おめでとうございました。 ちょうど、私も覗いたところだったので、タグふれでチャットも出来ましたね。 とても記念になった良い日になりました。ありがとうございました。 そして、おめでとうございます。 ５００００番の前にはtetchanさんが一回。はまやんさんが２回。 ５００００番の後、ゆっくりとカウンタは回って、プレートを作っている間に、 ５０４００番のお知らせがばぐさんからありました。 とてもうれしいです。ありがとうございます。 最後に、このブログに足を運んでくださった方、ありがとうございました。 たくさんの方にこのブログに来て頂いたことに 感謝の気持ちを込めて、小さな花束を作りました。 来てくださった皆さま、もし良かったらお持ちください。 （右クリックでコピー、ご自分のデスクトップ上で右クリックで貼り付け、でデスクトップに保存されます。）  ありがとう |
|
№２４４． 2007年5月2日 はまやんさま 48800hits! |
 おめでとう&ありがとう |
 |
|
№２４５． 2007年5月8日 てっちゃんさま 49200hits |
 おめでとう&ありがとう |
|
|
№２４６． 2007年5月10日 はまやんさま 49300hits |
 おめでとう&ありがとう |
|
|
№２４７． 2007年5月20日 masaeさま 50000hits |
 おめでとう&ありがとう |
|
|
№２４７． 2007年5月26日 ばぐさま 50400hits |
 おめでとう&ありがとう |
|
半角で書いたはずなのに
笑ってる目が大きくみえる。
どうして？
不思議
あ、見ている環境で違うんですね。
コメントだと、送信前は
コメント欄にアップ
全角が小さく見えるんです。
不思議
MicrosoftPhotoEditor は作図はできませんね。
なので、他のソフトで作って一旦保存したものの
保存形式を変えるのに使います。
方法はとっても簡単です。
| MicrosoftPhoEditor | paint | |
| PING |
|
|
| JPEG |
|
|
| GIF |
|
|
| MicrosoftPhoEditor | paint | |
| PING |
|
 |
| JPEG |
|
 |
| GIF |
|
 |
今まで、PAINTは作図と保存。
MicrosoftPhotoEdtorは写真の加工。
と分けて考えていました。
なので、できないと諦めてきたことができたなんて…。
しかもとっても簡単すぎてびっくりです。
ただ、うまくできるときとできないときがあります。
それと、右クリックしてプロパティからサイズを見ると
大きくなってしまっています。
どうしてなのか、まだ解かりません。
でも、手近なもので簡単にできたらラッキーと言うことで･･･。
こんなことができるって常識でした？
私が知らなかっただけかも…。
どちらにしろ、自分のためにも記事にしました。
キャプチャーの例を挙げたかったんですが、
ギヴアップ。
また、改めて･･･。
もっと良い方法が見つかりそうなのですが、
良い結果が出ません。
13日にアップして、
一度下書きに戻しましたが記録としてアップします。(07.05.16.18:30.)
