> >

 |  tomori_icon  | 
 |  category_icon  | 

2004年11月21日 (日)

CategoryImageカテゴリイメージの alt 属性に内容を入れる

久々の iBlog ネタ、と言うか正確には iblogPatcher ネタ。ずいぶん前にやった事ですが、 .MacTips のコメント欄でエントリ書けとOKAMURA和尚に脅された(嘘)ので書いておきます。
 カテゴリイメージをリンクにした場合、 iBlog デフォルトの alt が空の状態だと Another HTML-lint に怒られたので、対処したものです。


これはあくまで僕のページの場合です。もし、真似される方はそれぞれご自分のソースと見比べて、適宜書き換えて下さい。

まずはカテゴリイメージをカテゴリページへのリンクにする方法ですが、これは簡単です。例は iblogPatcher が導入済みで、うにょうにょを使用している BlogPage.txt の場合です。ついでにタイトルもエントリへのリンクを付けちゃいます。何でかと言うと、今の状態がこうなので、順を追って書くのが面倒くさいからです。手抜きです。 EntryPage.txt は後半の id , name 属性(うにょうにょ用のタグ)がなくなるだけですので、敢て書きません。

<h3 class="title"><$CategoryImage$><_a id="<$EntryUUID$>" name="<$EntryUUID$>"><$EntryTitle$></a></h3>
を以下のように書き換えます。
<h3 class="title"><_a href="<$EntryCategoryUUID$>/index.html"><$CategoryImage$></a><span style="display: none;">■</span><_a id="<$EntryUUID$>" name="<$EntryUUID$>" href="<$EntryCategoryUUID$>/<$EntryUUID$>/index.html"><$EntryTitle$></a></h3>

赤字が追記部分です。 <span style="display: none;">■</span> の所はカテゴリイメージとタイトルを両方リンクにした場合、間に何か区切りがないと怒られるので付け足したものです。

次にこのままだと出力した後に alt の中身が空だと言って怒られます(減点まではされません、確か......)。これは僕の理解では「何らかの原因で画像が読み込まれない場合、リンク画像に関してはそれが何に当たるものなのか明示しておきなさい」と言う事だと理解してます。(合ってますかね、和尚......(^^;)
 で、 iblogPatcher の Blog 定義ファイルに以下のような設定を追加しました。追記する場所は prebiew → after → onStart の所です。デフォルトの定義ファイル、或いはサンプルとして公開されている「僕は見ていた」の定義ファイルだと「# 連続する <br /> を一つにまとめる」と同じ所です。(何を隠そう、これを改造して設定しました(^^;)

foreach my $page (keys %CHANGE_CONTENT::Conf) {
  # <title> のカテゴリイメージリンク内の alt 属性に内容を追加する。
  push @{$CHANGE_CONTENT::Conf{$page}}, {
    'condition'  => '<_a href="(¥S+¥/index.html"><img src=¥S+)¥/categoryImage¥.png" (width="¥d+" height="¥d+") alt="" ¥/>(<¥/a>)',
    'replace'  => '<_a href="$1¥/categoryImage¥.png" style="vertical-align:middle;margin:2px 6px 2px 0px;" border="0" $2 alt="CategoryImage" ¥/>$3',
    'option'  => 'gs',
  };
}

緑字は元々 iblogPatcher に有る(筈)の所、或いは「僕は見ていた」のサンプルを真似して入れて下さい。青字の所は最初、 CSS を使って入れてたんだけど、ブラウザによっては他の画像部分に変な影響が出ていたので、直接埋め込む事にしました。赤字は Perl の正規表現の部分。分かる範囲で正規表現を使ってるけど、もうちょっと短く出来そうな気もする......。これ以上は知識が追いつかないので取り敢えず、です。こうして苦労して alt 属性の内容に突っ込んだ 'CategoryImage' と言うのは、「 alt を付けなさい」と言う意味が前述の理由ならあまり良くないような気がします(長過ぎるから)。でも、他に良いのも思い浮かばんのでした。

Posted by at 00:01


▼1年前はこんなこと書いてました...▼