2006年06月02日

チョット便利な小技A

【ステータスバーにタイピング文字を流す】


前回ご紹介したものの進化版!?
もっといいものを発見しました。


今回のものは、ステータスバーに文字が流れるのではなく、一文字ずつ文字が「タイピング状態」で出てくるものです。
こちらの方がずっとうざったくなくて、お勧めです。


使い方は前回と同じ。
まず、HTML の <HEAD> と </HEAD> の間に次の文章を追加します。

<SCRIPT Language="JavaScript">>
<!--
var msg="ここに流したい文字を記入します";
i=0;
function Start(){
if(i<=msg.length){
window.status=msg.substring(0,i);
i=++i;
setTimeout("Start()",200);//←文字の出てくる早さを指定
}else{
i=0;
setTimeout("Start()",3000);
}
}
// -->
</SCRIPT>

さらに、 <BODY> のタグ内に、「onLoad="Start()"」という文章を足します。


これ、ステータスバーではなく、本文中でやることも出来るみたいです。
その場合の方法は。


【本文中にタイピング文字】


まず、HTML の <HEAD> と </HEAD> の間に次の文章を追加します。

<SCRIPT LANGUAGE="VBScript">
<!--//
Dim counter, txt, txt_len, timerID

Sub Window_onLoad()
txt = Text.innerHTML
txt_len = Len(txt)
counter = 1
timerID = Window.SetInterval("typewriter()", 150)//←文字を表示する速さ。
End Sub

Sub typewriter()
Dim cur
If counter > txt_len Then
cur = ""
Window.ClearInterval(timerID)
Else
cur = "<font color='#000000'>_</font>"
End If
Text.innerHTML = Left(txt, counter) & cur
counter = counter + 1
End Sub
-->
</SCRIPT>

そして、実際に文字を表示したい本文の箇所は

<SPAN id="Text">表示する文字を記入します。
途中で改行したい場合は<BR>を入れると改行されるらしいです。</SPAN>


どちらも、何だかページが楽しくなる小技です。
よかったら使ってみてくださいね。



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事はいかがでしたか?少しずつですが、頑張っています。
応援お願いします!

e_02.gif     banner_03.gif
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

2006年05月30日

チョット便利な小技@

今日は、ちょっとした知識で簡単に使える小技をいくつかご紹介します。


【ブラウザのアンダーバーにスクロール文字を流す】

リンクを張っている文字や画像の上にカーソルがあると、ブラウザのアンダーバーにアドレスが出ますよね。
アフィリエイトやっていると、ID付きの長いアドレスが表示されて、アフィリエイトだって丸判り!な状態です。
これを、誰でも簡単に回避出来る方法のひとつとして、アンダーバーにスクロール文字を流しておいて、リンク先アドレスを表示させない方法があります。

ただ、これ、うざったいと言えば言えるので、これはお好みでw


とりあえず、方法は簡単です。
HTMLの <HEAD> と </HEAD> の間に、以下を入れてください。

<SCRIPT language="JavaScript">
<!--
msg0="     ";
msg1="こんにちは、ようこそ! コメント・トラバ大歓迎です!";
msg=msg0+msg1;
function scroll(){
msg=msg.substring(1,msg.length)+msg.substring(0,1);
window.status=msg;
setTimeout("scroll()",300);
}
//-->
</SCRIPT>


そして、同じくHTMLの <BODY> を <body onLoad="scroll()"> に変えてしまいます。
上の文章はあくまで見本なので、好きな文章に変えてくださいね。
ソースの中の「300」を変えるとスピードが変わるはずなので、チャレンジしてみてもいいかも。


【文字をスクロールさせる】


こんな感じです
狭いスペースに沢山の文字が表示できますね
少しは目立つので、お知らせにいいかも。



ソースは、入れたい場所に以下の文章を入れるだけ。

<marquee direction="up" width="200" height="100" scrollamount="1">こんな感じです<BR>
狭いスペースに沢山の文字が表示できますね
<BR>
少しは目立つので、お知らせにもいいかも。
<BR>
</marquee>

widthとheightの数字は、場所に合わせて調節してください。
流れるスピードを速くしたい場合は scrollamount="1" の数字を2や3にしてください。
文字は横に流すことも出来ます、その場合は direction="up" を外せばOKです。

ちなみにこれは、テーブル内でも使用出来ます。



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事はいかがでしたか?少しずつですが、頑張っています。
応援お願いします!

e_02.gif     banner_03.gif
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

2006年05月25日

テーブル導入の注意点

今までにも、「seesaaブログを弄るっ!」というカテゴリで、いくつかの小技を紹介してきました。


まとめてみると。

・記事の日付とフッターを外す
・コメント、トラックバックを外す
・カテゴリのツリー化
・カテゴリ内の一覧表示
・サイドバーにコンテンツを追加する

他に何かあるかなぁと考えていて、テーブルを使うときの注意点を書いていなかったことに気づきました。
なので、今回はそれを。


例えば、テンプレ配布サイトさんから、「アフィリエイト用テーブル素材」なるものを貰ってきたとします。
商品紹介をする時に使う綺麗な枠であるとか、そういうものが多いですね。


ところが、それを自分のブログに貼り付けてみて、プレビューを見てびっくりさせられることがあります。
字が大きい! とか、配置が! とかですね。


これは結局、スタイルの指定が出来ていない場合に起こります。
私の経験では、ソースでスタイル指定がしてあるはずなのに、何故か上手く反映されないことも、ブログにはあるようです。
新しいものを自分のブログに取り入れた場合、大抵の場合は、それに対するスタイルシートがないので、それをしてやらなければいけない・・・と覚えてください。


具体的には、テーブルを導入したら、合わせてスタイルシートにそのテーブルのスタイル記述をするのがお勧めです。
セルによって中央寄せにしたかったり左寄せにしたかったりしますから、その意味でも丁度いいと思います。


スタイルシートの一番下にでも「.td01 { }」みたいな形で(名前はあくまで例です、念のため)
・文字サイズ
・文字の色
・お好みで行間の指定
・文字位置
・お好みで padding
くらいを指定して TD ごとにスタイル指定をするのが一番確実でお勧めです。


私の場合は td01 中央寄せ、 td02 左寄せ、td03 右寄せ、みたいに指定し、td01x なら中央寄せの文字位置上付き・・・みたいにしています。
(後から、わざわざスタイルシートを見なくても、大体わかるようにです)


ちなみに、<TABLE> に指定すると、枠線をつけられるので、それでテーブルに自分で枠をつけることも出来ます。


その場合は、スタイルシートに

.table{border:2px red solid;}
(幅、色、線種・・・順番はどうでもいいです)
のように足して、実際の指定は
<TABLE> の中へ 「class="table"」を付け加えます。
スタイルシートの時には記述が必要な、先頭の「.」(半角ドット)が不必要なのに注意してください。


ぜひ、一度試してみてくださいね。



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事はいかがでしたか?少しずつですが、頑張っています。
応援お願いします!

e_02.gif     banner_03.gif
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

2006年05月19日

HTMLの基礎

HTMLの基本構造は次の通りです。

<HTML>
<HEAD>
そのページの基本情報や設定
</HEAD>
<BODY>
実際に表示される部分の記述
</BODY>
</HTML>

指定部分は < >(半角山形括弧)の中へ入れ、俗に「タグ」と呼ばれます。
必ず「終了タグ」と対になっていななければいけないものと、終了タグが必要ないものがあります。


上の例で見ていただくと、<HTML>と</HTML>が対になり、その間に<HEAD>〜</HEAD>と<BODY>〜</BODY>が入っていますね。
「HTML文書だよ」という全体の指定の中へ、HEAD(基本情報)開始〜終了とBODY(本文)開始〜終了という形で記述されているわけです。
見てわかるように、終了タグは </xxx> という形になります。


HEADに入るのは、そのページの基本情報や設定です。


HTMLのバージョンや使用言語の種類やバージョン・・・これは気にしなくてもいいです。
なくても、デフォルト指定されているものが勝手に使われることになっているので(こういう点がHTMLは便利なんですよね)記述しなくても特に問題ありません。
ただ、ここに「タイトル」や「説明文」が入ることになっていて、これは重要なので覚えておく方がいいかもしれません。
(ブログの場合は勝手に入れてくれますから、気にする必要はないんですけどねw)
あと、スクリプトを使用する場合は、ここへ記述する必要があることが多いです。


BODYは、実際に表示されている部分をHTML言語で書いた部分です。


ブログは基本的に「代入方式」で、場所や順番の指定だけがHTMLでされ、「ここに【記事】を新しいものから順番に入れるよ」「ここに【コメント】を入れるよ」のような書き方になっています。
が。
記事、コメント、トラックバックくらいは、どのブログでも「代入方式」なのですが、その他のものについては、ブログによってずいぶん違っています。


seesaaは、ほとんどのものが代入方式で、HTMLを弄る場合も各コンテンツの管理ページで弄れるので、大元のHTMLはほとんど弄ることがありません。
FC2になると、その点がseesaaよりも複雑になり、サイドバーにあるものはそれぞれのページで弄れますが、ヘッダーやフッターのものは大元を直接弄らなければいけなくなります。
ブログによっては、サイドバーのものも大元のHTMLを弄らなければいけないものもあります。


私が、初心者に一番敷居が低いかなと思うのは、seesaaです。


そして、実際のHTMLですが。


最低限、覚えておいた方がいいと思うのは、以下のものです。

・リンクを貼る時のタグ
<A href="">【文字あるいは画像の指定タグ】</A>

・画像の指定タグ
<IMG src="【指定する画像ファイルの場所】">  これは終了タグはいりません

・改行タグ
<BR>  これも終了タグはいりません

・スタイル指定タグ
<DIV> または <SPAN> または <P>

どれでもいいようですが、私はDIVを使っています。
<DIV class="xxx">のように、どのスタイルを使うか指定します。

・テーブルタグ
<TABLE><TR><TD>【テーブル内に入れるもの】</TD></TR></TABLE>

ちょっとややこしいですが、<TR>は行ですね。
<TD>は列・・・というか、文字や画像を入れるセルです。
横にセルを並べる時には、すぐに </TR> で閉めずに、セルの数だけ <TD> </TD> が続き、次の列に行く前にようやく </TR> で閉めることになります。

テーブルは、デザインが凝ってくると、<TD> の中へさらにテーブルを入れたりしますので、はっきり言ってかなりややこしいです。
まぁ「同じ種類の開始タグと終了タグが入れ子になることはない」ので、じっと見ていれば分かるものですがw


こうやってずらずらと書きましたが、HTMLについては、私は「系統立ててお勉強」はしない方がいいと思います。
(専門家になろうという人は、もちろん別w)


一番いいのは、何か「これをこうしたい!」というものが出来たとき、諦めないこと。
調べたり、わかる人に聞いたりして、ともかくやり方を教えてもらって、その通りにやる!
その時、まったく理解出来なくても、積み重なると、自分の頭の中で勝手に「何となくわかってくる」。
それが一番だと思うんですよね。



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事はいかがでしたか?少しずつですが、頑張っています。
応援お願いします!

e_02.gif     banner_03.gif
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

2006年05月18日

実践編A タイトルに画像を使う

タイトルそのものをテキスト文字ではなくロゴを使う。
タイトル文字に背景をつける。
文字自身もロゴを使い、かつ背景をつける。


タイトルに画像を使う場合、考えられるのはこの3パターン。


画像を使う場合の方法は、ランキングサイトなどのバナーを貼る場合と同じですね。
ブログであれば「画像をアップロード」するメニューがどこかにありますから、それを利用して自分のブログスペースに画像を持ってきます。
そのアドレスの調べ方はブログの種類によって違いますが、わからなければ新規の記事を書く画面にして、「画像を使う」コマンドで選んでくれば、そのアドレスが表示されると思います。


画像を使う場合に基本的なことは。
HTMLの指定では、画像の上に画像を重ねることは出来ません。
ついでに言うと、画像とテキストを同じ場所に置くことも出来ません。
ただし、「背景」として使うと、その上に画像やテキストを重ねることが出来ます。


タイトル文字をロゴで作った場合。


記事を書く時と同じように「画像を挿入」するのが一番簡単ですが、記事とは違ってもう少し弄らないといけません。
まず、挿入そのものの作業ですが、seesaaは「コンテンツ」→「ブログ名」と選び「HTML編集」の画面を開きます。

<% blog.title %> のところを次のものと入れ替えてください。

<IMG src="【画像のアドレス】 bprder="0">

もしこれで、画像のサイズ表示がおかしいようなら、「width="xxx" height="xxx"」つまり画像のサイズ指定を border="0" の後に足してください。
画像サイズがわからない時は、画像を右クリックで「プロパティ」を選び、そこで調べることが出来ます。

位置の指定は、改行タグやスペースで調節するか、今までの説明を参考にスタイルシートの padding で。


ここまで書いてきて、seesaaでない場合は HTML そのものを弄らないといけないことに気づきました。
FC2を見てみましたが、プラグイン(=コンテンツ)はseesaaと同じように個別の管理画面があるのですが、タイトルはないんですよね。
う〜ん・・・。


HTMLの基本も、書かないとダメですね・・・次回にでも書いてみます。
とりあえず、HTMLを弄らないといけないブログの場合は、タイトルがどこにあるかを探さなければいけません。
そしてseesaaと同じように、入れ替えてしまいます。


タイトルに背景を入れる場合。


これは、「banner」の部分に背景指定を入れます。
スタイルシートですね。
すでに背景が入っていた場合は、それと差し替えです。


タイトルをロゴに、そしてさらに背景も入れる場合。


やり方は上のふたつの応用です、それをどちらもすることになります。
(実はHTMLがわかれば、それを弄る方法もあるのですが・・・それは省略しますね)


タイトルロゴを作る場合に、気をつけないといけないことがひとつあります。
「透過gif」で作らないと、ロゴの背景が白い状態で画像が作られてしまいます。
画像作成がある程度わかる人はいいですが、わからない人は。
一枚物の背景であるなら、いっそのこと、背景にロゴを載せた状態の画像を作ってしまいましょう。
そうすればタイトルに背景を入れる場合と同じ方法で、背景とタイトルが一度に入ります。


ただ、消していない以上、テキスト文字のタイトルが残っているので、その部分を消してくださいね。



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事はいかがでしたか?少しずつですが、頑張っています。
応援お願いします!

e_02.gif     banner_03.gif
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

2006年05月16日

実践編@ タイトル文字を弄る

ブログのタイトル部分はそのブログの「顔」です。
弄りたくなることも多いと思います。


さて、おさらいですが。
タイトルが入っている場所はHTML上では「ヘッダー」と呼ばれる部分ですね。
スタイルシートでは「banner」という場所になります。
そして、タイトル文字のスタイルには「h1」が指定されていることが多いようです。


bannerとh1と2つあるの!?と思われるかもしれませんが・・・入れてある箱の指定が「banner」で、文字そのものの指定が「h1」だという感じです。
どちらの方に書かなければいけないかというのは・・・基準が私もイマイチわからない部分があります。
基本的には、小さな範囲で指定されたものが優先で、特に指定がなければ、その1ランク上の範囲で指定されたもの・・・それでも指定がなければ、さらに1ランク上の範囲で指定されたもの・・・という使われ方をします。
何も指定がなかった場合は、それぞれの項目についてHTMLには「デフォルト」がどんなものかが決まっていて、それが使われることになっています。


自分が弄る場合には、自分が「ここだ」と思う場所に指定を入れてみて、ダメだったら1ランク上の範囲に変えてみる・・・などすれば、大抵どうにかなりますw


さて、タイトルで実際に弄りたくなるのは。
・タイトル文字の大きさを変えたい
・フォント(書体)を変えたい
・色を変えたい
・タイトル文字の位置が気に入らない
・タイトルの背景に背景をつけたい
こんなところでしょうか。


では、実際のやり方を説明していきますね。


私のブログの「h1」はこのようになっています。

h1 {
margin:0px;
padding-top:25px;
font-weight:bolder;
font-size:20px;
}

文字の大きさを変えたい場合は「font-size:20px;」の数値を変える。
「font-weight:bolder;」で太字の指定がされてありますから、それを外したい時は「bolder」を「normal」に変える。


色やフォントについては、「h1」では指定されていませんね。
ということは、もっと上のレベルで指定されているものが使われることになっているわけです。
タイトルだけ、指定を変えたい場合は、ここの指定を変えないといけません。


フォントを変えたいなら「font-family:xxxxx;」
文字色を変えたいなら「color:XXXXXXX;」をそれぞれ追加してください。
(xxxxxxは好きなものに変えてくださいねw)


文字の位置については、ここでは「padding-top:25px;」、つまり「上を25px空けるよ」という指定だけで、他は0になっています。
上をもっと詰めたいならその数字を小さくする、左をもっと空けたいなら「padding-left:xxpx;」を追加する。
このようにして少しずつ調整すれば、自分の思う位置に持ってこられます。


最後の、背景をつけたい場合ですが。
これは「h1」ではなく、その上の「banner」に指定する必要があります。


「#banner」の部分へ「background-image:url(http://xxxxxxxxxx.gif);」を追加。
画像の位置の指定については、前の記事で説明したと思うので、ここでは省略です。


さて、それはいいとして。
タイトルそのものを文字ではなく、画像で表示したい・・・そういうこともあると思います。
フォトショップなどの画像ソフトでロゴを作成したり、ですね。


それについては、少し説明が必要なので次回に。
今日は少し短めでしたね、すみません。



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事はいかがでしたか?少しずつですが、頑張っています。
応援お願いします!

e_02.gif     banner_03.gif
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

2006年05月08日

画像の制約

さて、ちょこちょこ弄ることは、これで可能になったんじゃないかなと思うのですが。


ものすごく重要なことを書かなければいけません。


ブログでテンプレートを選ぶ時、デザインで決めますよね?
これが格好いい!とか、これが可愛い!とか。
私もそうですw
そして、後で変更したくなって弄ることになるわけですが・・・。
実は、スタイルシートが弄れるからといって、どのテンプレートでも好きに出来る、というわけではないんです。


知識の問題じゃありません。
「画像の制約」という問題なんです。


どういうことかと言いますと。
タイトルのところに、大きな写真背景がどんと入っているテンプレート、ありますよね?
記事を書く部分の幅を、広くしたくなったとします。
スタイルシートを弄って、幅を広げることは簡単です。


でも、記事部分の幅が広くなると、コンテナ(container・・・各パーツを収納する箱)全体の幅も広がるわけで・・・。
それを実行したとして、画像は、さてどうなると思いますか?
「長さが足りない」!
そうです、足りない分の幅が空白になるか、画像が繰り返されるかどちらかになるはずです。


もともと、小さな壁紙画像が繰り返しで表示されているものは大丈夫です。
1枚物画像でも、幅を狭くする分にはあまり問題はありません。
問題は、広くしたい場合・・・記事部分の幅を増やした分だけサイドバーを狭くするか、いっそ広告でも入れて「わざとです」という顔をするか・・・w
いずれにしても、「好きなようにする」というより「画像の許す範囲で妥協する」ことになります。


実はこのブログも、幅が弄れません。
このブログのコンテナ部分は、背景画像が使われているのですが。

    http://blog.seesaa.jp/img/bg/blue/blog_bg.gif

これがアドレスなので、ちょっと見てみてください ↑
わかりますか?
横のラインが全部、画像なんです・・・。
細長い横長画像が使われていて、それが縦方向に繰り返し指定されて使われています。
例えば、記事の部分の幅を広げたとすると・・・ラインからはみ出しますw


いかにも画像を使っているテンプレの場合、そういう落とし穴があるのでご注意。
自分は弄らない、と思っている人はいいですが、そうでない人は、選ぶ時にスタイルシートを見て、使っている画像を全部見ておくのをお勧めします。
画像は、アドレスをコピーしてブラウザで見られます。
また、その画像にカーソルを合わせて右クリック→プロパティで画像のサイズも調べられます。


これを読んで、「なんだ、じゃ、画像を使ったものは選ばない方がいいのかな」と思われた方も多いと思いますが。
そうでもないんです。
逆にも考えられます。


画像が印象的なテンプレートを選んで。
画像指定を外してみたら?
違う画像に変えてみたら?


そのままだと「どこかの誰かが同じものを使っている」テンプレが、簡単にオリジナリティ溢れるものになるわけです。
画像を使っているものはスタイリッシュなものが多いので、一部画像だけ変えてオリジナリティを出すのは、結構美味しいかもしれません。


そう思うと、楽しくなってきませんかw?
今までに書いたことを応用すれば、画像の交換も出来ると思います。
ぜひ、チャレンジしてみてくださいね。



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事はいかがでしたか?少しずつですが、頑張っています。
応援お願いします!

e_02.gif     banner_03.gif
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

2006年05月06日

スタイルシートの指定

さて、それではスタイルシートの記述について。


主なものを上げていきますね。


サイズ関係

width:800px;」=幅
height:200px;」=高さ


位置や余白関係

text-align:center;」=文字や画像の横方向の位置 leftは左寄せ、centerは中央、rightは右寄せ
text-valign:middle;」=文字や画像の縦方向の位置 topは上寄せ、middleは中央、bottomは下寄せ
padding:0px;」=内側の余白
margin:0px;」=外側の余白

※パディングとマージンですが、例えばテーブルがあった場合、パディングはテーブルの枠線と内側の文字or画像との間の余白、マージンは隣接する他の要素(隣のテーブルとか)と枠線との間の余白を指定します。
テーブルでない限り、どちらを使うかはあまり気にしなくていいと思います。

※2 パディングとマージンは、数字がひとつの時は、上下左右を一度に同じ数字で指定すると扱われます。
数字をバラバラに指定したい時は「padding:0px 10px 0px 20px;」などのように、半角スペースを入れて並べます。
順番は、「上、右、下、左」・・・上から順番に時計回りと覚えると簡単です。
バラバラに「padding-top:10px;」のような書き方をしてあることもあります。


文字関係

font-family: Arial, Helvetica, sans-serif;」=使用フォントの指定
color:#00C657;」=文字色の指定 「black」などのように色名で指定出来るものもあります
font-size:20px;」=文字サイズの指定
font-weight:normal;」=文字の太さの指定 boldまたはbolderで太字になります
line-height:140%;」=行間の指定 これは、覚えておくと便利です
tex-t-decoration:none;」=文字の装飾の指定
 none(何もなし)、underline(下線)、overline(上線)、line-through(打ち消し線)、blink(点滅)の種類があります


背景関係

background-color:#ccccff;」=背景色の指定
background-image:url(http://blog.seesaa.jp/img/bg/blue/bg.gif );」=背景画像の指定
background-repeat:repeat-x;」=背景画像は何も指定しない限り、縦・横どちらも繰り返して表示されます
 これを避ける場合には、次のようにします。
  横方向だけに繰り返したい場合は「repeat-x
  縦方向だけに繰り返したい場合は「repeat-y
  1枚物の大きな画像など、繰り返ししてほしくない場合は「no-repeat
background-position:left bottom」=上の no-repeat を指定した時に使う画像の位置指定
 横方向・上方向の順で指定します
 このような書き方の他、「400px 0px」「80% 5%」などのような指定方法も出来ます。

他にこんなことも
background-attachment: fixed;」=これを入れると、背景を固定し、スクロールすると文字が流れるように出来ます


とりあえず、こんなものでしょうか。
HTMLやスタイルシートの解説サイトへ行っても、沢山ありすぎてわからないんじゃないでしょうか。
でも、これだけわかれば、自分のブログのカスタマイズくらいは大丈夫ですw


スタイルシートを弄る際には。
「まず、弄る前のスタイルシートを全部、メモ帳にでもコピーしましょう!」
それさえしておけば、弄って変になっても、どこを弄ったか忘れても大丈夫w
一度に沢山弄ってしまわずに、不安なうちは、少しずつ弄って確認しましょう。


スタイルシートは怖くない、習うより慣れろ、ですw



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事はいかがでしたか?少しずつですが、頑張っています。
応援お願いします!

e_02.gif     banner_03.gif
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

2006年05月05日

各部分の名前

さて、昨日の続きです。


何がどこの指定なのかの説明を駆け足で。
ちなみに、主なもの、分かりにくそうなものだけ上げています。


#banner」 ヘッダー部分=ブログのタイトルや説明が入っているところ
.description 」 ブログ説明
.navi」 一番分かりやすいのは過去ログページの時に出る 2006年XX月|Main |2006年XX月 というやつかな、ああいうのです

#content」 =メインの部分
.blog」 =記事全体(つまりコメントやトラックバック関係の部分も含むということです)
.blogbody」=記事の本文の部分
.posted」 =記事の一番最後にある posted by ○○ at 00:00| Comment(0) | TrackBack(0) | カテゴリ名 の部分
#comments」 =コメント
#trackback」 =トラックバック

#links-left」 =左サイドバー
#links」 =右サイドバー
.sidetitle」 =コンテンツタイトル
.side」 =コンテンツ本体部分

#footer」=フッター


何度も言いますが、seesaaブログの場合は、どのスタイルシートでもこの名前で統一されているようです。
が、違うブログでは、この名前になっているとは限りません。
それでも、他人が見てまったく分からない名前がついていることはないので、似たような名前がついていると思います。


ブログの構成について、基本的な知識で必要なのは、次のようなことだと思います。

・まず、全体がある
・各パーツを入れている本体ボックスがある(これはスタイルシートによって、ない場合もあり)
・パーツは「ヘッダー」「左サイドバー」「メイン部分」「右サイドバー」「フッター」に分かれる
 (左右のサイドバーが両方あるとは限らないのは、もちろんですよね)

そして、各パーツごとに、何がどの順番で入れられるか、それぞれをどんなスタイル指定にするか・・・ということになるわけです。


弄りたい部分があれば、それがどこの部分かを考え、それに対応する場所を弄ればいいわけですね。


応用として、タイトル文字の大きさを変えてみましょう。

タイトル文字は 「H1」で指定されています。
このブログの H1 の部分はこうなっています。

h1 {
margin:0px;
padding-top:25px;
font-weight:bolder;
font-size:20px;
}

最後の font-size:20px; というのが、文字の大きさを指定している部分です。
20px を好きな数字に変えれば、文字の大きさが変わります。


今日はここまで。
他のものについては、次回説明しますね。



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事はいかがでしたか?少しずつですが、頑張っています。
応援お願いします!

e_02.gif     banner_03.gif
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

2006年05月04日

body、container、a

さて、スタイルシートの実際のお話。


前回もお話したように、スタイルシートはスタイル指定だけが並んでいます。

スタイルの名前{実際のスタイル指定}
これが基本書式。

スタイルの名前=どの部分についての指定か、ということですね。
名前の前に「#(半角シャープ)」か「.(半角ピリオド)」がついています。
私はブログのスタイルシートで「#」を初めて見ましたが、これはいわば「大分類」的なものにはこちらが使われているようです。
対する「.」は「小分類」とでもいった感じでしょうか。

{ }の中は
スタイル : 数値 ; スタイル:数値 ; スタイル:数値 ; ・・・・・
早い話が、「何についてなのか」と「実際の数値や種類の指定」を「:」の両辺に置き、ひとつごとに「;」で区切るわけですね。
実際には「;」の後で改行して見やすくしてあることがほとんどです。


このブログのスタイルシートの一部は次のようになっています。

body {
font-family: Arial, Helvetica, sans-serif;
background-image:url(http://blog.seesaa.jp/img/bg/blue/bg.gif );
background-repeat:repeat-x;
background-color:#CBDBE1;
margin:0px;
padding:0px;
text-align:center;
}

最初のところですね。


さて、先ほど名前の前に「#」か「.」がついていると言いましたが・・・。
例外的についていないものがあります。
「body」「a」「H1」〜「H3」がそれに当たります。
これは、自分で名前をつけるものではなく、最初から決まっている定型文的なものなので、そういう扱いになるらしいです。
(詳しいことは知らない;;)


スタイルシートの最初には「body」の指定が来ます。
これは、全体のスタイルについてですね。
全体に背景が入る時は、ここにその指定を入れます。


後は、スタイルシートによって順番が違うかもしれませんが・・・。

a」 (リンクについての指定)
H1」 大見出し=ブログではタイトル
H2」 中見出し=ブログでは日付をこれに当てています
H3」 小見出し=ブログでは記事タイトル
とまぁ、こんなものが来ているはずです。


それと前後して入っている「#container」は、いわばパーツを入れるための箱、といった感じでしょうか。

このブログは幸い、そのcontainerの説明がすごくし易いのですが・・・横幅一杯一杯に使ってませんよね?
両サイドに背景だけの部分があると思います。
そして、画面の表示幅を狭くしていくと、下にスクロールバーが現れ、背景だけの部分はなくなってしまいますが、主要部分は何がなんでも表示されることになっているはず。
これが「container」部分なんですねw


スタイルシートによっては「container」の指定がないものもありますが・・・。
なるべくなら、containerで幅指定はしておく方がいいと思います。
でないと、表示幅が狭くなった時に、画面が思いっきり崩れて見えるからです。


ちなみに、seesaaブログでは「#container」という名前なのですが、他のブログでは必ずしもその名前ではありません。
というのも、スタイルシートというのは、先ほどの「定型分的」なもの以外は、自分で名前をつけて、それに対する指定をする、という形式だからです。
単に、seesaaでは、パーツを入れる箱を「#container」と名づけるように統一している、ということなんですね。


では今日は、「a」についての説明だけして終わりにします。


a{
color:#00C657;
text-decoration:none;
}

こんな感じが基本かな?

「a」はリンクが張ってある文字についての指定です。

「color」はリンクが張ってある文字を何色にするかの指定です。
色の指定は「#と、その後に続く6桁の英数字」あるいは「カラー名」ですることが多いです。
「#」の後が3桁になっているものもありますが、それは全部同じものの時だと思います。
「#CCC」なら「#CCCCCC」と同じ、というわけですね。

「text-decoration」は、リンクが張ってある文字の装飾についてです。
「none」は装飾なし、他に「underline」(下線)、「overline」(上線)、「line-through」(打ち消し線)、「blink(点滅)」などがあります。


「a」については、他にもこんなものがあります。

a:visited
a:active
a:hover


「visited」は訪問済みリンク、「active」はクリックされた瞬間のリンク、「hover」はマウスが上に乗った時のリンク、を表します。
普通の状態と違うスタイルにしたい場合には、それを追加で指定します。

a:visited {
color:#00C657;
text-decoration:underline;
}
a:active {
color:#000;
text-decoration:blink;
}
a:hover{
color:#000;
text-decoration:overline;
}

「a」については、ちょっと特殊です;;
これだけ、名前の中で「:」が使ってある・・・。
でも、これは定型文みたいなものなので、これはこういうものでしょうがないみたいです。


では、今日はここまで。



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事はいかがでしたか?少しずつですが、頑張っています。
応援お願いします!

e_02.gif     banner_03.gif
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

2006年05月02日

HTMLとスタイルシート

今まで何気なくブログのカスタマイズのことについても触れてきましたが、ふと思いました。


わからない人は、これでもわからないんじゃないかなって。


もちろん、ネットで調べて勉強することは出来ます。
でも、「誰でも簡単に出来るはずのブログ」で、勉強しなきゃ出来ないって、それも何だかなぁという気がします。
必要なところだけ、わかりやすく書いてあれば・・・。
その気持ちは、とてもよくわかります。
だって私も、ごく半端な知識しかなくて、悪戦苦闘しているからです。
わかる人には何でもない当たり前のことでも、わからない人間にはわからないんですよね・・・;;


というわけで、ブログをカスタマイズするに当たって、私が悪戦苦闘して得た小さな知識をまとめて披露することにしました。


まずは基礎の基礎。


ブログは、コンテンツの配置などは誰でも弄れるようになっています。
(seesaaでは「コンテンツ」、FC2では「プラグイン」など、ブログによって名前は違いますが)
が、もっと自分らしさを出そうとすると、途端にそこで難しくなります。


弄ろうとした人はご存知でしょうが、カスタマイズをする時には「HTML」と「スタイルシート」とがあるのがわかると思います。
さて、これって一体何でしょう?


【HTML】

WEBページはHTML言語というもので書かれています。
ブラウザも検索ロボットも、視覚的にページを見るのではなく、HTML言語を読みます。
いわば、「○○ってどんなところだったよ」が、写真ではなく文章で書かれている状態ですね。

ブログの場合、HTMLはあまり弄る必要がありません。
前にも言いましたが、必要なものが自動的に引用されるようになっているからです。

従って、こう覚えてください。
HTMLは「サイトの情報と各パーツの区画割り」のためのものだ、と。

実際にHTMLを読むと、最初にサイトの情報、そして次に本体の配置について「でっかい枠組みがあって・・・最初にヘッダーが来て、ヘッダーにはタイトルを入れて、その下にはブログ説明を入れて・・・」なんて調子で、つまりは「どこに何を入れるよ」ということがずらずらと書かれています。


【スタイルシート】

さて、先ほどの例で、「タイトルを入れて」という部分がありましたが。
そのHTMLだけの記述では、タイトル文字の色や大きさの指定がまったくされていません。
その「スタイルを指定」しているのが、スタイルシートです。
HTMLの記述をよく見ると、○○って名前のスタイルでタイトルを入れるよ、って書き方になっています。

スタイルシートは全部、スタイル指定の文章です。
最初に全体を支配するスタイル、そして後は、パーツごとに「スタイルの名前」、そしてそれについての「スタイル指定」、これがスタイルシートのすべてです。

つまりは、何かのスタイルを変えたいと思った時は、「それが何という名前のスタイルを使うことになっているか」を調べ、その名前のスタイルを弄ってしまえばいいんですね。

何というスタイルを使うことになっているか、それはHTMLに書いてあります。
seesaaブログの場合は、コンテンツのところから、そのコンテンツについての「HTML編集」の画面があって、初心者にもわかりやすくなっています。


今日はここまで。
短くてごめんなさい。


明日からしばらく、実際のカスタマイズの仕方について書いていきたいと思います。




・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事はいかがでしたか?少しずつですが、頑張っています。
応援お願いします!

e_02.gif     banner_03.gif
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。