今日の渋沢

記事タイトルの横にカテゴリ名を表示するようにした

テンプレートでタイトルを表示する部分

<h3 class="title"><$MTEntryTitle$></h3>

の直後に

<!-- 記事ごとにカテゴリ表示 -->

<div class="entrycategory">

  [<MTEntryCategories glue=", ">

  <a href="<$MTCategoryArchiveLink$>">

    <$MTCategoryLabel$></a>

  </MTEntryCategories>]

</div>

を追加．entrycategoryクラスのスタイル定義をスタイルシートに追加．

.entrycategory{

  margin: 0 0 0 0;

  text-align: right;

  font-size: 92%;

  border-top: dashed 1px #cccccc;

  border-bottom: solid 1px #cccccc;

}

以上．

はてなっぽく「[カテゴリ名]記事タイトル」にするのも考えたがカテゴリ名が長すぎるのでやめた．

段落タグの中にリストタグは入れてはならない

P要素の中にはいわゆるブロック要素 (P要素、UL要素、PRE要素、 BLOCKQUOTE要素等) を含むことはできず、行内要素 (EM要素、 STRONG要素、Q要素等) のみが入ることができる。

しばしば間違われるのは、ブロック要素であるリスト (UL要素等) をP要素の中に入れようとすることである。これは HTMLの文書構造では許されていない。 DTDで許されていない以上、それに従うよりない。どうしようもないことである。

HTMLにおける「段落」をめぐって

むずかしい．

本文と追記と概要

某所でブログを作るにあたって本文は「続きを読む」に畳んでおいて全体をスッキリ見せたほうがいいよな，と思って「続きを読む」を畳むようなjavascriptを調べてた矢先．

http://facet.cocolog-nifty.com/divers/2004/09/post_10.html
http://hxxk.jp/mt/2004/10/16/0020
http://artifact-jp.com/mt/archives/200408/readmore.html

追記は日本の文における追記ではなく「本文の続き」的な意味合いらしい．なので長い文章を書くときは

●「本文」で概要を書いて，「追記」に文章のメインを書く

か，

●「概要」に概要を書いて，「本文」に文章のメインを書く（このときにはテンプレートをそれ用に対応させる）

のがよろしいらしい．

今まで俺は，なぜ編集画面で追記の方がテキストエリアが大きいんだろうとか思って，サイズを変えたりして編集画面をカスタマイズしてきたんだが，どうやら誤りだったっぽい．嗚呼．

トラックバックテスト

フラッシュバックディスコっぽいね．

はてなへのトラックバックテスト．

はてなダイアリーTrackBackシステム『受け取り側の機能2』によると，

GETリクエスト、またはPOSTリクエストによって上記URLが呼び出され、下記の引数が送信された場合に、言及元ページに呼び出された日記ページのURLが含まれているかをチェックしたあと、追記を行います。

ということだが，「URLが含まれている」の定義がよくわからん．下のように，

<a href="(はてなダイアリーのURL)">

aタグの中にURLが書いてあればそれでいいのか，それとも

<a href="(はてなダイアリーのURL)">はてなダイアリーのURL<a>

のようにURLの文字列そのものを本文中に登場させなきゃいけないのか．

というわけで，テストしてみる．
ここではURLはhrefの中だけで，本文中にURLを登場させないでやってみる．

Showyouの足跡@hatena

Blog内検索を設置しました．

MovableTypeにデフォルトで検索機能がついているのでそれを利用．
いとも簡単にできました．以下Main Indexに追加したソース．

<h4 class="sidemenu">Search this site</h4>

<p>

<!-- 検索フォーム -->

<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">

  <!-- 検索対象は渋沢blogのみ -->

  <input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />

  <!-- コメントも検索する -->

  <input type="hidden" name="SearchElement" value="both" />

  <!-- インタフェース -->

  <input id="search" name="search" size="20" /><br />

  <input type="submit" value="検索" />

</form>

</p>

サイドバーの一番下に検索フォームがあります．検索結果の表示はデフォルトのままで，あまり見やすくはないですが．まあいいでしょう．

エントリも220を超えました．今後もよろしくお願いします．

コメント書込み周りを変えました．

今まではMain index(index.html)，Category Archive，Data-Based Archiveで「コメント(0)」などと書かれたところをクリックすると，コメントを書き込むためのウィンドウを別に開いていたのですが，このたびコメントウィンドウではなくIndividual Archive，つまりコメント対象の記事に移動すると同時にコメント書込みフォームにジャンプするように変更しました．

具体的には，Main index(index.html)，Category Archive，Data-Based Archiveのコメント部にあった以下の記述

<!-- 変更前 -->


<a href="<$MTCGIPath$><$MTCommentScript$> 

entry_id=<$MTEntryID$>"

onclick="OpenComments(this.href); return false">

コメント (<$MTEntryCommentCount$>)</a>

を

<!-- 変更後 -->


<a href="<$MTEntryPermalink$>#a-comment-write">

コメント (<$MTEntryCommentCount$>)</a>

に変更．そしてIndividual Archiveのコメント書込みフォームの箇所

<!-- 変更前 -->


<div class="comments-head">コメントする</div>

に，新たにアンカー#a-comment-writeを以下のように付け加えました．

<!-- 変更後 -->


<div class="comments-head"><a id="a-comment-write">

</a>コメントする</div>

実際，自分以外の尾内研の人は「コメント」「コメントする」の文字列は英語になっていると思いますので，適宜探してください．

自分はタブブラウザを使っているため，コメントウィンドウが新たに開かれると記事を参照するためにタブを行ったり来たりしていて面倒くさかったのですが，その面倒は解消されたと思います．

記事のカテゴリを増やして分かりやすくした

今まで講義の感想は日常的なことに，PC系の話題は研究に関することに全てぶちこんでたんですが，もうちょっと細分化してみました．

規模が大きくなってRebuildが面倒くさいという理由もあり．

それに伴いカテゴリの名称も分かりやすいものに．折角なので今まで使ってたものの種明かしをしますと，カテゴリ名の「...」の部分がそのカテゴリを表すというちょっとした穴埋めでした．それぞれの答えを以下に記します．

「Quiz」 And Dragons
クイズに関すること．カプコンの同名アーケードゲームより．アクションだったD&Dと共に好きだった．

「My Life」 As a dog
日常的なこと．映画のタイトルより．見たこと無いけど．

Eine kleine Nacht 「Musik」
音楽関係のこと．「Music」にしてL⇔Rでも別にいいけど．好きだし．

「A Study」 in Scarlet
研究関連とか大学に関すること．シャーロック･ホームズ初登場作『緋色の研究』の原題．読んだことは無し．

「Book」 of the Dead
本に関すること．『死者の書』より．古代の文書としては全然知らないけど，電気グルーヴのPVとか特集番組で出てくるウソ新譜の名前がこれ．

以上．分かりにくいわな．

あとで美味い飯カテゴリを追加するかも．

やっと気づいた

一部のCategoryやMonthly Archivesでは，blogの最下部のタイルの画像がずれてる．

自分が導入したblockquoteやdiv class="code"のせいなのは明白．
でも直し方がわからないので放っておく．

早くCSS講座を！＞M先輩

URL無しのコメント投稿者のメールアドレスを非表示に

MovableTypeのテンプレートのコメント部分div class="comments-post"内の

Posted by

<$MTCommentAuthorLink spam_protect="1" $>

at <$MTCommentDate$>

の

<$MTCommentAuthorLink spam_protect="1" $>

に<span style="font-weight: bold">show_email="0"</span>を加えて，

<$MTCommentAuthorLink spam_protect="1" show_email="0"$>

とする．こうすると，コメントした人のメールアドレスは表示されない(名前部分がmailto:のリンクにならない)．

一応これで投稿者がコメントスパムの被害にあわないので導入．

本当は，URLを記入したらメールアドレスとは別にURLのためのリンクが表示されるようにしたかった．↓こんな感じ．

投稿者 <span style="text-decoration:underline">SIB.</span> at May 13, 2004 08:14 PM　<span style="text-decoration:underline">Link</span>←これが例えば情報元だったり，投稿者のHPへのURLだったりする．

だが，その方法は見つからなかった．テンプレート書き書きなんだろうけど．

<MTIfNonEmpty tag="MTCommentURL">

<a href="<$MTCommentURL>">[URL]</a>

</MTIfNonEmpty>

ソースコードのためのスタイルシート

井原へのコメント代わり．

blockquote使ってくれているようでムズガユイデス．しかし，一つのページ内に複数のblockquoteがあると，インデントが少しずつ増えていくという良く分からん現象があるのでご注意を．直したいけど原因が分からない……．

あ，あとソースコードとかコマンドラインを表示するなら下の.codeクラスを使ったほうがいいかもよ．要するに空白を反映させてフォントを等幅ゴシック系にしているだけなんですが．
classにしている理由は，codeタグはインライン要素なのでborderとかの表示がよろしくないためです．display: blockにするといいみたいだけど，そこら辺は試してみて．できたら俺にくれ．

.code{

    display: block;

    border-left: 6px solid #00CCCC;

    background-color: #CCFFFF;

    margin: 1em;

    padding: 0.7em 1.2em;

    font-size: 100%;

    line-height: 100%;

    white-space: pre;

    font-family: monospace;

}

blockquoteのテスト

……無造作に積み上げられたガラクタが，夕日を背に受けてそのシルエットを誇示し，黒一色の大きなひとかたまりに見える．その輪郭は，有名なあのフレーズを髣髴とさせる．

ゴミが人のようだ！

逆だった．

これじゃ引用じゃないな．酷い．

blockquote {

    border-left: 6px solid #66CC00;

    background:#ffffcc;

    margin: .5em 2em .5em 2em;

    font-size: 100%;

    font-weight:normal;

    line-height:100%;

    padding: 1em .5em 1em .5em;

    width: auto;

}

Mac&Safariによる見栄え

前回の続き．

貴重なるマカー（Macintosh利用者）である友人N氏より，スクリーンショットを頂く．
OSはMac OSXでブラウザはsafari．（しまったバージョン分からん．コメントよろ）

トップページの外観(図1)から．記事自体は何とかなっているが，最近のコメント（Recent Comment）がダメダメ．あまり太くないサイドメニューにツリー風に表示させてるからなあ．
というわけで，ここの表示を少し変更．次(図2)．

トップからコメントをクリックすると出てくる別ウィンドウ．大きさが全然あってないや．なのにウィンドウがリサイズできない．テンプレートの設定で，コメントウィンドウとトラックバックウィンドウを開くJava Scriptにresizable=yesを加える．以下はコメントウィンドウの設定．

function OpenComments (c) {

    window.open(c,'comments',

        'width=480,height=480',

        'scrollbars=yes,status=yes,resizable=yes');

}

これはCategory ArchiveとDate-Based Archiveのテンプレートも変更する必要がある．
Individual Entry Archiveテンプレートはコメントフォーム付きなのでこのscriptが存在しない．
これでひとまずウィンドウのリサイズができるようになったので，表示が変になる人はとりあえずそれで何とかしてほしい．すんません．そして次(図3)．

コメントフォームの入力ボックス．メールとURLを広げたら広がりすぎた．あとコメント本体の横幅が全然広くなってない．
メールの入力ボックスにとりあえず合わせる．
コメント本体は……．解決策が見つからないのでそのまま．"cols"で横幅を決定しているせいなのかな．

で，色々変更した後のトップページがこれ(図4)．

まあ，なんとかなったんではないでしょうか．甘いなー．
M先輩がMozillaとかNetscapeとか色んなブラウザを入れてた理由がわかった．こりゃ表示確認しなきゃダメだわ．やりにくい．

これからも，表示がおかしいというコメント，メール受け付けてますのでよろしく．

スタイルシートやらindexやら

こねくりまわしてました．

とりあえず個別記事で，追記とコメントの見栄えをちょっとよくしました．
あとコメント投稿フォームのメールとURLの入力エリアのサイズを変えてみたり．
あとはコメントだけ表示する画面の見栄えもよくしたいね．とりあえず1行の文字数を減らしとこう．

できれば各部分を日本語で表記したいけど，やっぱ推奨されないのかな．
英語が推奨ならばコンテンツ全てを英語で書かなきゃ意味ないわけで，日本語表記でも問題ないかな，とも思うわけですが．

スタイルシートこねこね，つづき

前回のつづき．

ソースコードを見やすくするため，他と浮き立たせて等幅フォントで表示しようとスタイルシートを書いてみたが，色々問題が発生して悪戦苦闘．というのがあらすじ．

一つ目の問題．
始めはdiv class="code"で適用されるように，.code{...}として定義していたのだが，リーや氏の「そもそもcodeタグがあるんだからそっちを使えば」との指摘に従い，code{...}で定義した．すると枠線として描かれるはずのborderが行ごとに，言うなればノートの罫線のように描かれてしまった．
この原因はcodeタグの定義にあるとのこと(M先輩より)．codeタグはブロック要素ではなくインライン要素として定義されているためborderがブロックの枠線として適用されないらしい．codeタグをインラインとするW3Cの定義に疑問を持ってしまう，というのがM先輩の見解．
というわけで，当初のままclassとして定義して対応することにする．

二つ目の問題．
スクロールをぐりぐりやってると，再描画がうまくいってないらしく，文字がかすれたように見えてしまう．
これを直すために.code{...}の記述を色々変えて(コメントアウトしたり，値を変えたり)みたのだが，結局この原因は「IEがスタイルシートにうまく対応できていない」ということらしい（M先輩より）．がくー．
こういった問題の解決法として実体の無いclass(例えば"dummy"とする)のdivタグを表示のおかしいところの直前に置くというものがあるとのこと．これを使えばうまくいくかもしれない，し，うまくいかないかもしれない．はー．

色々あるもんだね．

スタイルシートこねこね

以前に書いた記事のソースコードの部分をちゃんとソースコードっぽく表示させたかったので，スタイルシートをこね回してた．

.code{

    border: 2px solid blue;

    background-color: white;

    margin: 0.5em;

    padding: 0.5em;

    white-space: pre;

    font-family: monospace;

}

で，こんな感じのものになった．もうちょっと整形してみたい．

でも，CSSの作法とか分からないので，これはルール違反なのかもしれない．
いいサンプルないですかね？

あと，これだと画面をスクロールさせると文字が消えたりしてしまう．何故？

font-family: "Terminal", "sans-serif";

font-family: "Terminal", monospace;

尾内研blog各種テンプレート完成

M先輩が重い腰をようやくあげて完成させました．お疲れ様です．

ということで適用してみました．
過去記事も同じ背景と体裁で読めるはず．うれしい．
今までの過去記事はデフォルトの設定で字間とか気に入らなかったので．

しかし，トップページを何も考えずに変えたら，自分で独自に施した変更とかが消えちゃって右往左往．
アクセス解析の設定とかもやり直してて，やっと落ち着きました．

あと，トップページに最近のコメント状況を表示させたかったので改造しました．
ここ(BLOG質問箱)を参考に．
これで管理ページに行かなくても最近のコメントが分かるし，過去記事へのコメントも見逃さないでしょう．どしどしコメントよろしく．スパムは来んな．

あとはソースコードとか引用とかの体裁をスタイルシートに登録したらひとまず満足かな．

コメントスパムつづき

同僚井原がまとめてくれたので興味のある方はこちらとこちらをどうぞ．

トラックバックスパムもあるんですよ．やあねえ．

コメントスパム対策テスト

俺がコメントできたらとりあえず第一段階はクリア．
他の人がコメントできたら第二段階，宣伝書き込みが増えなかったら第三段階クリア．

対策はｈｉｄｄｅｎによるもの．といっても理解はこれから．
http://sadayx.ddo.jp/blog/archives/000045.html

むがーー

また来やがったZoloftの野郎．
今度は.mnet.bgから．ブルガリアだとよ．

弾きましたんで，知り合いのブルガリア人に教えてあげて．
クソが．

めちゃんこうざい

blogの編集画面を開いたらコメントが同じ人でぎっちり埋まってるんですよ．
Zoloftさんというんですがね．
12月分のログ全部にコメント残してくださったんですよ．
こいつの広告．

……．

で，この前新しいコメントがあったんですよ1件．
お名前はTeenさん．内容はエロサイト（多分）の広告でしたー．

……．

えーと，とりあえず
80.142.***.***
217.231.118.101
***.dip.t-dialin.net
はアクセス制限しました．

都合の悪い方ご相談ください．

調べてみたら，t-dialin.net経由で色々荒らしてるみたいですね．（参考）

TrackBackのテスト

今更こんなんも何だが、トラックバックをテストしてみる。
トラックバック先はT先輩のこれ。

スタイルシーツオブサウンド

研究室の先輩が作ってくれたblogの尾内研デザインテンプレートを自分のblogにも導入してみる。

格好よろしいのだが、段落開始でインデントが出るのがちょっとナニだったので、自分でいじってみるというか該当箇所を削ってみる。

初めてCSSを眺めて、なるほどこうやって段落とかタイトルとかを設定しておくことでhtml自体は完全にデザインから切り離されたセマンティックなテキストとして扱うことを可能にしておるのだなあと感心。

ちなみに段落字下げを無効にしたのは、自分の文章の性質上箇条書きとか一言独り言が多くなるためです。あと段落が変わるときは一行空けるのでそれに加えて字下げだとちょっと冗長な印象を受けるからです。価値観の相違工夫。