タグ:スキン ( 13 ) タグの人気記事

⑦サイドバーのスクロールバー

このスキンのHTML部のサイドバー部分をクリックして出て来るメニューは

<DIV CLASS=MNTTL><$mntitle$></DIV>
<DIV CLASS=MNBODY><$mnbody$></DIV>


↑の <$mnbody$> とは
サイドバーの メニューの本文が表示されるタグ ここを変えて

<div class="mbody"><$mnbody$></div>をつけ加える つまり

<DIV CLASS=MNTTL><$mntitle$></DIV>
<DIV CLASS="MNBODY"><$mnbody$></DIV>

次にCSS編集で、
DIV.MN {
MARGIN-TOP : 20PX;
PADDING : 10PX;
}

の下に

DIV.MBODY{
WIDTH:170PX;
HEIGHT:180PX;
OVERFLOW:AUTO;
OVERFLOW-X:HIDDEN;
OVERFLOW-Y:AUTO;
TEXT-ALIGN:LEFT;
PADDING:0PX;
MARGIN:0PX;}

を入れます。その中身の意味は

div.mbody{
width:170px;    ←メモ帳の幅
height:180px;   ←メモ帳の高さ
overflow:auto; ←自動的にスクロールをつける設定
overflow-x:hidden; ←横方向スクロールなし
overflow-y:auto;  ←縦方向スクロールが自動的につく
text-align:left;
padding:0px;
margin:0px;}

この辺りのソースは  crossmoon2さん の記事を引用させて頂いています。


スクロールバーを付ける為には、まずボックスの高さ指定をします。中の文章が、指定した高さ以上になるとスクロールバーが出現するわけです。
そして、はみ出た部分の表示の仕方を指定するoverflowプロパティを使用します。


行きつ戻りつした点

その1) ④の高さを180、幅を170にしたのは試行錯誤の結果です。スクロールバーは各メニューの見栄えの高さがこの数値より高くなくてはスクロールバーは表示されない。つまり 私のブログカテゴリの高さが低いのでここを基準にする必要があった。(ここにはスクロールバーは付けなくてもいいってことなんだよね(笑)

コメントや過去記事の表示件数も少し増やして高さを出しました。


・・・逆に高さを260にしたら、各カテゴリー別にはならず長いものが2個になったりしました、よ(驚)・・・


その2)サイドバーのメニューの並びの中で、メモ帳、ネームカード、タグクラウド、の順にこの3種類を メニューの一番下に並べたところ、ようやく全てのメニューが表示されました。

最初、ネームカードとタグクラウドはカレンダーの下に、そして、メモ帳を各メニューの一番下に 分けてあったのですが、そのまま④を行うとネムカとタグが表示されなかったのです。つまり、ネムカ とタグクラウドはメモ帳で作られているということ???


その3)昨晩は教えていただいたサイトの他に、掲示板、エキブロTips などを検索し、違うタグを試してみたり入れる場所が違うのか?と悩んだり、行きつ戻りつ。

確か、メモ帳のタグの中に小分けにされた各メニューの小窓がある物もできたっけ(遠い目)今思うに先述のその1)、その2)に書いたことが原因だったと、今のところ思っています。

いずれにしても、今晩取り合えず出来たから、暫くこのままにして眺めることにします。くふふ。


参照先及びレスを戴いたのは as-o2さん、ありがとうございました!!


この投稿画面で見えているソースはそのままCSSやHTML部の編集画面にコピペ出来ます。

またこのブログに記事をアップする為に

< を <  に、そして  > を  > に置換したものを記事投稿画面にコピペ。

その他、関係ないかもしれないけれど、参照したソースが小文字で書いてあったので、それも私のスキン編集画面の表示にそろえて大文字に置換してからコピペしました。今回はテキストエディタを使用したので、とても見やすい画面でソースを触れたような。(照


では、お休みなさい。
[PR]
by t2mina | 2007-01-16 22:56 | TB・ブログ

⑥次のページ・前のページ

■画面最下部の

 前のページ 次のページ

ここをアルファベット表記にしたかったけれどHTML編集画面の
<$prepage type=1$>と<$nextpage type=1$>の数値を「2」に変えても1も2もひらがな表記なのです。

そこで

<$prepage type=2$><font color=Teal>Top</font>

<$nextpage type=2$><font color=Teal>Back</font>

にしてみました

だから・・・何・・・なのですが(笑) 自己満足なのですね

参照させていただきました
[PR]
by t2mina | 2007-01-13 09:58 | TB・ブログ

⑤発展&lt;  &gt;を1バイトで書くと

< は LT(less than)、> は GT(greater than) なので、& + lt + ; というように。
(+は除いて繋げる。変換されちゃうんで2バイトで書くけど→&lt;)< >
というコメントをいただきました

<その1>
< ><1バイトのもの>

<TR><TD COLSPAN=2 WIDTH=100% CLASS=TOP>
<DIV ID=TOP>
<DIV CLASS=HEADER><$header$></DIV>
<DIV CLASS=URL><$blogurl$></DIV><center><img src=http://pds.exblog.jp/pds/1/200609/02/24/d0002224_2134113.gif
WIDTH=450 HEIGHT=170></center>
<DIV CLASS=USERMENU><$adminmenu type=1$></DIV>
</DIV>
</TD></TR>

これは実は編集画面では
↓のように書いてあります。ここでは変換されないように2バイトで書いてあります。

<1バイトで<>と見えるもの、編集画面では>
&lt;  &gt;

&lt;TR&gt; &lt;TD COLSPAN=2 WIDTH=100% CLASS=TOP>
&lt;DIV ID=TOP&gt;
&lt;DIV CLASS=HEADER&gt;&lt;$header$&gt; &lt;/DIV&gt;
&lt;DIV CLASS=URL&gt; &lt;$blogurl$&gt; &lt;/DIV&gt; &lt;center&gt; &lt;img src=http://pds.exblog.jp/pds/1/200609/02/24/d0002224_2134113.gif
WIDTH=450 HEIGHT=170&gt; &lt;/center&gt;
&lt;DIV CLASS=USERMENU&gt; &lt;$adminmenu type=1$&gt; &lt;/DIV&gt;
&lt;/DIV&gt;
&lt;/TD&gt; &lt;/TR&gt;

となっています。

例えば、<1>のソースを丸ごとコピーして記事編集画面に貼ってもアップした時には表示されません。HTML言語と認識されてしまうからなんですね。

そこで、<>を<2>の>< > に置き換えます。
これはテキストエディタやワード・メモ帳の 置換機能を使うと一気にできます。

実は「置換機能」と言われるまで、「編集→置換→全て置換」が何のことなのか知りませんでした(滝汗)テキストエディタだとソースの量が多くてもきれいに整列して表示されますね。

置換してからであれば編集画面で使うことができます。
[PR]
by t2mina | 2007-01-11 22:18 | TB・ブログ

HTML&CSS結果報告④過去のコメント欄とタイトル画像

・・・一言で言って・・・懐かしすぎますが


■現在のコメント欄のソース
TEXTAREA.TXTFLD の中に
{background-image:url('http://pds.exblog.jp/pds/1/200410/11/31/cat005_2.gif');
background-position:bottom right;
background-repeat:no-repeat;}

というソースが入っています。
*開けてみてください。ネコちゃんが手を振っていますね



■以前使用したことのあるコメント欄外にイラストを入れた時のソース
CSS編集画面内で

DIV.COMMENT_INPUT の所に

background-image:url('http://pds.exblog.jp/pds/1/200606/06/24/d0002224_215571.gif');
background-repeat:no-repeat;
background-position: 100% 100%;}
が入っています
d0002224_14124494.gif

こういう絵柄が欄外右下に入ります

こんなのも↓ありました
d0002224_14141096.gif


■タイトル部分に自分のイラストを入れた時のソース
HTML編集画面内で

<その1>
<DIV ID=TOP>
<DIV CLASS=HEADER><$header$></DIV>
<DIV CLASS=URL><$blogurl$></DIV><center><img src=http://pds.exblog.jp/pds/1/200609/02/24/d0002224_2134113.gif
WIDTH=450 HEIGHT=170></center>  ~~~

が入っています。
d0002224_14163692.gif

コーヒー豆が飛んでます

<その2>

<DIV ID=TOP>
<DIV CLASS=HEADER><$header$></DIV>
<DIV CLASS=URL><$blogurl$></DIV><center><img src=http://pds.exblog.jp/pds/1/200607/16/24/d0002224_231589.gif
WIDTH=450 HEIGHT=80></center>
<DIV CLASS=HEADER>  ~~~

が入っています
d0002224_14173677.gif

夏用です


このHTMLタグの<>は2バイト文字に変更してあります。因みに最初ソースを丸ごとコピペしてこの記事投稿画面に貼り付けてみたところ、もちろん表示されませんでした。<>が1バイト(半角)でHTMLとして認識されたからなんですね。

自分の保存用には丸ごとコピペした1バイトの<>のソースを保存しておきます。

私のスキンというタグの記事すが、正直自分メモなので記事を読むよりはそのリンク先の記事を参照することが解かり易いに違いありませんので悪しからず。

また、エキサイトの掲示板を見ると探していることが色々見つけられますし、エキブロ新聞の特集記事『CSS&HTML / Tips特集 』を読むと夢が膨らみます。あ、本業でない者のつぶやきですので。
[PR]
by t2mina | 2007-01-11 15:26 | TB・ブログ

HTML&CSS結果報告③ 上部のユーザーメニュー

Harryさんの記事 を参照させていただきました。

<私の注意点>

1、<>を<>(1バイト文字)に変えること

2、$adminmenu type=1$ は1を2、3に変えると英語、アイコンに変わります。ここ を参照します。因みに次ページ、前のページは1でも2でも日本語になっています。私はここで2に変えたのに英語にならないよ?と慌ててしまいました。

3、XMLのURLを自分のURLにします。最初に分って変えておきながら$adminmenu type=1$の数値を変更したり<>の半角を確認しながらコピペを繰り返した時にソース基の「はりぃさん」のURLのままアップしてしまいました。半日そのまま放置、申し訳ありません!記事でもそうですが、アップしたリンクは直後にチェックしましょう。(当たり前すぎますね(恥)
[PR]
by t2mina | 2007-01-11 13:08 | TB・ブログ

HTML&CSS結果報告② 投稿文章入力枠の幅

まとめ

ブログにログイン後、「設定ボタン」→「スキン変更」の順にClickすると現在使用中のスキンが表示される。私のスキンはエキサイト提供の「スクェアべーシック」。そこの「編集」ボタンをClickすると

・各部分別横幅
・HTML編集
・CSS編集

が表示される。

こういう編集は決められた法則を省略せずに順番に書けるかどうかにかかっています。そこで

■スキンを触る前にやること
<鉄則1>スキンの初期の中身を丸ごとメモ帳等にコピーして保存しておくべし

・バックアップなしに直接編集画面を触ると思ったようにいかずにやり直しているうちに基にさえ戻せなくなってしまうことがある。あるいは別窓を開いておいて、同じ編集画面を見ながらやるのもいいのかもしれないが、使用前使用後を同じ場所に保存しておくと、自分の触った箇所が記録に残るので後で役にたつのです。

<鉄則2>入力モードは英数半角を選んでおくべし(書くまでもないのかも)
<>は全角<>は半角ですね。編集の際は、数字も記号も半角を使います。参照先の説明文中のソースには後で半角(1バイト文字)に変えてください、という物も多いのです。その場合はそこを変更してから使用します。

■今回やったこと
1、文の入力欄の幅を広げる

各部分別横幅、「変更」ボタンをClick ここで数値を最初600位にしたが結果的には500とした。ここの説明文中にもあるようにここの数値の変更だけでは幅は変わらない。そこで必要なのはCSS編集画面内の

DIV.POST_BODY_SUB {
WIDTH : 490PX;→の数値を変えること
OVERFLOW : HIDDEN

実はこれを変えた時に、その上の日付の枠とそのまた上の水色のラインの長さを変える場所が解からなくて結局最初の490に戻した。

手探りだと実際のブログで見えている場所はCSSの中ではどこを指すのかは英単語で検討をつける。例えば

・DIV.POST_BODY_SUBは投稿画面のことだろうとか、BODYは投稿文章を書く枠の中のことだろうとか。さらにそこにある数字の値を変えれば何か変化がおこるのだろうという検討はつく。そこで

DIV.POST_BODY_SUB {
WIDTH : 490PX;→の数値を500に変えた
OVERFLOW : HIDDEN

しかしこれだけでは先に言ったようにその上の部分の長さが変わるわけではないのでバランスが悪くてみっともない。かといって他にこの上の部分の長さを変える数値が記載はされていない様子だった。そこで

<鉄則3:数値がなければ作るべし>
と以前ご指摘を受けたのだが、何を追加すればいいのかは私の範疇にはない。そこで水色の線の長さだけはまあいいかと一端諦めた時にご指摘頂いてそのソースを見せてもらい

DIV#TOP {
BORDER-BOTTOM : 5PX #D5E2EF SOLID;
WIDTH:790PX;

        }
という風にWIDTH:790PX;を入れ込んで長さが変わることが解かったという次第です。実はこれは以前コメント欄の幅や長さでも教えてもらった考え方なのですが(恥)

しかし、それならば、という訳で試しに

DIV.POST_HEAD {
BORDER-BOTTOM : 1PX #888 DOTTED;
PADDING-BOTTOM : 7PX;
MARGIN-BOTTOM : 20PX;
OVERFLOW : HIDDEN;
WIDTH:500PX;
        }
このWIDTH:500PXを後から書き込んでみたら水色の線も日付の線の長さも一度に変わってしまった。場所としてはここでいいらしいと解かりました。

この辺の試しに、も大事です、うん。

それ以前にも「コメント欄を開いた時に投稿部分が微妙に右に広がりますよね」とご指摘を受けたことで数値を変えたのが

TEXTAREA.TXTFLD {
height:8em; WIDTH :460px ! important;

の数値部分です。


文の入力欄の幅を広げるまでにはこのような道のりがあったのでした。あ、文章でまとめる以上に時間はかかっています。場所の検討をつけることと、掲示板などから知りたいことを探す時間がありましたので(笑)

参照先
世祓い
「パソコンでお絵描き2」 イラストブログ すみ 春魚 さん
アヤフヤblog さんです。

それから編集宣言記事に対して素早いレスを下さった nsudouさん、どうもありがとうございました。
[PR]
by t2mina | 2007-01-11 12:04 | TB・ブログ

HTML&CSS①投稿画面の文字色・時計

何だかんだとPOSTの幅を広げてみたけれどタイトルとその上の水色のラインの幅(長さ)を広げる場所が見つけられずに元に戻し。文字の基本色を#FFFFFFから#666666に変えただけで本日の編集は終りです。あー、メモ帳欄のスクロールバー・・・(憧)

投稿画面の文字色
このブログの文字色の初期設定の色は#000000つまり黒でした。しかし、自分の好みなのですが白地に黒い文字はきつく思えてもう少し黒味を抑えたくて変えてみました。

(もちろんタグで文を挟めばその部分については色は変わりますが)

CSS編集画面
上から5行目

VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #666666; ここが最初は#000000でした


もう一箇所、投稿記事の日付の色

DIV.POST_TOP {
BORDER : 1PX SOLID #D0D0CC;
PADDING : 2PX 15PX 1PX;
MARGIN-BOTTOM : 5PX;
FONT-FAMILY : VERDANA;
LETTER-SPACING : 2PX;
COLOR : #6666CC →ここが最初は#727272でした

■時計ツール
ClockLinkすみさんのサイトを参照させていtだきました。
[PR]
by t2mina | 2007-01-09 14:04 | TB・ブログ

コメント欄アイコン・その3

background-position:bottom right
にしていたところを

background-position:101% 101%;

にしたら、コメ欄右に画像が落ち着いてくれました。
%の数字を変えると場所が変わるんですね。

と安心していたのも束の間

COMMENT_INPUT のheightを150位にするとよい、という天の声
でもね、ここには
{MARGIN-TOP: 20PX;
BORDER-TOP: 1PX #AAA DOTTED;
PADDING-TOP: 20PX;

しかないので、このpxのPADDING-TOPを150pxにしてみたら、何とかできたようなのですが、安心できない雰囲気。しかも、明日はログインできないのだ。

再び怪しいコメ欄外画像になっていたら、見逃してください、明日は。


はっ!

いかん、寝オチてしまう所であった、
ふ、と気付けば師匠から啓示が降りていた。
>height,無ければ作ればいいのだ。

そう言えば、コメント欄の高さを変える時に見たあれは、、
がさがさ

で、

height:150px; WIDTH :500px ! important;

を投入してみたら、、、



見て見て!師匠。できたみたいです!!



感動を胸に眠れるぞーーーーーーー♪
因みに今日は5時半に起きる予定、なのだが、あはは。

いずれにしても、試してくださった
はりぃさん、コメントありがとうございました♪
お忙しいのに、本当にすみません。
えっと、お礼はバンテリンでよろしいですか^^?
[PR]
by t2mina | 2006-06-16 23:31 | TB・ブログ

コメント欄アイコン・その2

「コメントを書き込む欄を左からと上からマージンをとってあげると
Mac Safariでも見られるのです。。。」

というご意見を元に、
タグをくっつけ、部分的にはがし、した結果のタグ
がこれ


DIV.COMMENT_INPUT {MARGIN-TOP: 20PX;
BORDER-TOP: 1PX #AAA DOTTED;
PADDING-TOP: 20PX;
background-image:url('http://pds.exblog.jp/pds/1/200606/06/24/d0002224_215571.gif');
background-position:right top;
background-repeat:no-repeat;}

やっぱり、Macでは見えないの?

さみし~
[PR]
by t2mina | 2006-06-15 23:04 | TB・ブログ

コメント欄アイコン

d0002224_215571.gif



マックをお使いの方達にも見て頂きたいのです
私のコメント欄アナログgifアニメ,ワールドカップ開催中なので、これ、です

えっ?Marginをもう少しとれば、コメント欄の上にマックでも見れるように表示できる?


あ、今日は、もう寝ますので、後日対応したいな、と思う気持ちはなくもないような
zzzzz,,,,
[PR]
by t2mina | 2006-06-14 23:55 | TB・ブログ