2008年07月
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





Blogのテンプレートとかスタイルシートとか その2 [2008年07月29日(火)]

で、今日の本記事。
昨日の続きです。
昨日は基本概念みたいなものを紹介しました。
今日は昨日でてきた<head>のお話です。

I.画面には出ない <head>
タグは何かしら仕事を持っている… と昨日書きましたが、
この<head>の仕事は、ヘッダーと呼ばれる領域を作成する事にあり、
<head></head>に挟まれた部分がヘッダー領域となります。

このヘッダーとその子供達の仕事は、直接には一切画面に描画されません。
じゃあ何するの?というと、昨日紹介した兄弟タグ<body>で使う為の設定や前準備、
<body>の中の様々なタグから呼ばれる機能を書く、といった縁の下の力持ちな感じです。

逆に言えば、ブラウザ任せ、<body>の内部任せ、といった感じで、
<head>には必要最低限の事しか書かない…といった事も出来ますが、
デザインに凝りたいと思うと、ヘッダー領域に事前に色々書いておいたほうが
色々楽ですし、融通もききますし、ここでないと困るものもあります。

とはいっても、<head>自身はそういった事を行う場所を提供するタグであり、
実際は<head>の子供達が行う事になります。
例えば、昨日出てきた<title>。これはそのページのタイトルを設定します。
このタグで挟んだ文字列が、ブラウザのキャプションバーに表示されます。

他には有名な所だと以下のようなものがあります。
・<style>:スタイルシートという、多彩なデザインを使用する為の設定や準備を行う領域の作成。
・<script>:ページに動的な操作を行える、javascript等を記入する為の領域の作成。
・<link>:指定された他のファイルを取り込む。

他にも、様々な基本設定を明示する為の<meta>なんてのもあります。
これらは、一応、<head>の外でも記入は可能なようですが、
そういう子供は不良です。親からも祖父からも快く思われません。
特に、こういった酷い不良は大家であるブラウザによって対応が変わったりするので、
普段から気をつけた方がいいです。分っててわざと不良にする…という手もありますが、
そういうのは慣れが必要なので慣れないうちはあくまでイレギュラー…と心得ましょう。

<head>タグ、また一般的にその子供として使う子供達は
余り種類はありません。ですので、自然、どこでもこの領域はさして大きいものにはなりません。
色々なページでこのタグの中身を見てみると、いい勉強になるかもしれませんね。

業務連絡 及びぼやき [2008年07月29日(火)]

一応、うちはTrackBackもLinkも自由…とはうたっておりますが…流石にね…

ペルソナ4の記事に対して、
世界樹の記事からTB張るってのはどうなのー!?

というわけで、これは看過できないので削除しました。
もうスパム扱いです、こんなものは。

しかしですね、どうもTB原理主義な自分としては、こいうのは理解しかねますね。
相手へTB仕掛けるだけしかけて、自分からは相手へのLinkを張らないとか、
正直、キチガイの沙汰にしか思えませんし。
TBしてくれてありがたいと思え、とか言うんですかね?
んな事言われても、ふーん、あんた何様のつもりですか?って逆に思いますけどね。

確かに、TBもLinkも自由とは書いていますが、
本来TBは相手の記事の情報が自分の記事で必要になるからするもので、
故に、こちらへのLinkは既に済まされているのが前提なわけです。
そいうのを一切為しに、TBを送ればどうなるか?といえば、
送った先のサイトから自分のサイトへのLinkが張られるだけ。
これ、失礼だとは思いませんか?
しかも、酷いとこうしてそもそもゲームが違うとか、
まったく言及されて無い上、記事の方向性的にかぶってすらいない、
とか、そいう有様なわけです。

そいうのはね、外国とかから飛んできて皆さん迷惑してて、
未だにサーバーに不可掛けまくりでisaoが障害報告あげるような
スパムと大してかわらんわけですよ。
あちらさんがセクシャルなサイトへの誘導をしてるってだけで、
やってる事は、大して関係ないサイトへのLinkを一方的に仕掛ける…
ってまったく同じなわけです。

TBはね、送った相手にありがたがれってもんじゃないのよ。
相手の記事を使わせて貰った事に対する連絡なわけ。
逆なのよ、逆。
ありがたく思えってんなら、TB送った人がTB貰った人にするべきなの。
まぁ、もっとも、うちみたいな必要ならすれば?的な人からすれば
なめたTBはムカつきこそすれ、別段本来的なTBであれば、
用途に沿って行われたもんですから、あり難いとも迷惑とも思わんのですけどね。
事前に連絡しろとも言いませんし、するなとも言いませんし。
されたくなければ、そもそもTB禁止にしますから。

もう少しね、自分がTB送った際、相手がどう思うか考えた方がよかですよ。
相手は自分を嫌ってそう?とか、そいう意味ではなくてね。
相手からLinkを奪うだけで本当にいいの?とかさ。
自分の記事には相手の事まったく書いて無いのに、
相手にTB送ったら相手はどう思うかな?とかさ。

Blogのテンプレートとかスタイルシートとか その1 [2008年07月29日(火)]

じゅんぴょんさんの所でのお話が元なのですが、少し長くなりそうなので、
もし同じ志を持つような方がいればついでにと、こちらで記事にしてみます。

もし、あなたがTrack-Back Blogで自作のテンプレートを使用したい、ちょっと
既存テンプレートに手を加えたいと思っていて、でもどこから手をつけたら…
という状態ならこの記事が役に立つかもしれない。立たないかもしれない。
1度では難しいので何回かに分けてゆるゆると進めていきますが、
即戦的な知識というより、暇つぶしの読物的に捉えていただければと思います。

0.html と タグ
Blogのテンプレートをほんの少し改造するだけなら特に知識は必要ありません。
確か、Track-Backブログ内でもうちよりもっと噛み砕いて特定部位をピンポイントに
変化させる説明を行っていたサイトがあったと記憶しています。

しかし、やはり、改造する以上はせめて書いてある意味が分かりたい、
自分が記入した文字で、どうしてそういう変化が起きるか知りたい、
自分の思った通りの変化を起こしてみたい…
という所に興味を抱く人も少なからず居ると思います。

そういった人達がまず最初にぶち当たる壁は、html特有の文法ではないでしょうか?
もしhtmlって何?とか文法って?という人は、ブラウザ上で右クリックメニューを開き、
"ソースを開く(v)"とか書いてある項目を選んでみましょう。
なんだか沢山<>で囲まれた文字が並んでいると思います。
それら<>で囲まれた文字1つ1つがタグと呼ばれる、htmlの文法の基本です。
htmlはタグ抜きでは語れず、故にタグの簡単な概念が分れば随分と見渡しがよくなります。

以下の事をつべこべ言わず頭に叩き込みましょう。
・タグには親子関係、兄弟姉妹の関係がある。
・タグは中に書いてある文字はそのタグが持つ仕事が書かれている。
ではそれぞの説明を続けていきましょう。

親子,兄弟,姉妹
タグというのは全て親子関係、兄弟姉妹の関係で繋がっていると言えます。
例えば、<html>はhtmlにおける、全てのタグの親となる存在です。
この<html>の有名な2人の子供に<head><body>がいます。
およそhtmlのソースでこれら3つのタグを使用していないものはありません。
では、とりあえず、この3つの親子兄弟関係がどう表現されるか書いてみましょう。
親子関係が見やすくなるように、親子の部分でインデントを掛けてみます。
○親:<html> 子:<head> & <body>(この2つは兄弟) 孫:<title>(htmlの孫,headの子)
<html>
 <head>
  <title>
  </title>
 </head>
 <body>
 </body>
</html>
こんな感じです。
察しがいい人は気がついたと思いますが、殆どのタグは、開始と終了があります。
例えばhtmlタグは、<html>で始まり</html>で終了です。
もちろん例外…終了が無いタグや、省略できるタグもありますが(改行タグの<br>が有名)、
まぁ、そいうのはおいおい触っていれば嫌でも覚えるので、今はそんなのもあるんだでスルーして下さい。
話を戻しますが、殆どのタグには開始と終了があります。
開始と終了の間に挟みこまれたタグは、挟んだタグの子供となります。
(この場合、headとbodyはhtmlの子供で兄弟、titleはhtmlの孫,headの子供)
htmlの文章を見ると膨大なタグの量に忘れてしまいがちですが、
もうわけわからん!となったら、こうして1つ1つのタグの親子関係を綺麗に揃えて行くと、
そのhtmlがどんな事をしているのかなんとなく見えてきます。
慣れないうちは、気になるHPのhtmlソースをテキストファイルに拝借し、
こうして綺麗に揃えて行きながら、各タグの仕事を調べるとそのHPの作りが勉強できますよ。

殆どのタグには意味がある。
そのままでは意味の無い仕事嫌いな奴もいるんです…
まぁしかし、幾つかのそいう連中以外は皆仕事持ちです。
一見すると、ながーいタグに見えるものもありますが、タグの名前(担当してる仕事)は一番左に書いてあります。
例えばこんなタグがあったとします。
<table width=400 height=300 cellpadding=0 cellspacing=0 style="color:silver;table-layout:fixed;"></table>
この場合、このタグはtableタグといわれる、格子状の表を書いたりする時に使うタグとなります。
じゃあタグ名の右側にだらだら続く文字列は?と言うと、tableタグにこういった仕事をして下さい。と言う指定をしています。
横幅は400dot、縦幅は300dot etc ですね。
こんな感じで、タグというのは、タグ名、それに続いてそのタグにどんな感じで仕事をしてもらいたいか…
をつらつらと書いていく形になります。
タグの種類は凄く多いですが、実際の所、使うとなると余り多くはありません。
知らないのが出てきたら、その都度調べる、それで全然問題ありません。

ちなみに、過去記事の中でこのtableタグを使っている部分があるのでコピペします。
table、tr、td、th、span、fontタグを使用し、それにスタイルシートを仕込んでいます。
Name:コウリン Lv:70 Job:ソードマン 前衛
MAX HP/TP675/139
攻撃力/防御力302/163
ステータスSTR:102/VIT:75/AGI:84/LUC:75/TEC:53
装備ドヴェルグの魔剣
バーサーカーメイル
天使の盾
クリムゾンレギンズ
スキル HPブースト(10)/TPブースト(10)/ATCブースト(10)/DEFブースト(10)/剣マスタリー(10)/チェイスファイア(10)/チェイスフリーズ(10)/チェイスショック(10)
MEMO 青ソードマン。かつてのギルド特攻隊長にして今はチェイス専門のチェイサー100。ギルドのお父さん役でデコソド子とは兄妹な脳内設定。単体では余り強くないものの、DEFブーストのお陰で結構粘り強い。

興味ある人はソースを開くでタグの親子関係やどんなタグを使っているか見て下さい。
といっても、実は上のは殆どスタイルシートの力なんですけどね。


とありあえず、その1はここまで
htmlの簡単な概念みたいなものを紹介しました。
htmlファイルを見たら、上に書いてあるような事を意識してみると、
なんだかよくわからん文字がどばーっと並んでる?という状況からは脱せると思います。
千里の道も一歩から…とりあえずはhtmlソースを眺める所から始めましょ。
trackback Blog by isao.net