Greensleeves v2.0 / Tag: Howto
Notes about things I'm interested in.
Tag: Howto が付けられているエントリーが 3 件見つかりました。
Polaroid-o-nizer™ のようなジェネレーターもあるからか分からないんですけど、写真風画像といえばあちこちで見受けられますが、それらとは一味違う、よりリアルな写真風画像の作り方が Rapid Fire #1: Photo-Realistic at SixThings で紹介されていたので真似て作ってみました。
Fireworks のリファレンスですが、多分 Photoshop でも問題なく作れるはずです。
そして出来上がったのが、上の画像。あまり上手じゃないですね。つーか下手糞ですね。写真が曲がったような感じが上手く出せてません。でもこれ、結構簡単に作れる割りには重宝しそうな感じもします。もうちょっと練習してみよう。
MT 3.3 以降からタグがサポートされましたが、デフォルトではタグ検索のテンプレートは通常の検索テンプレートと一緒になっていて、<MTIfTagSearch> と <MTIfStraightSearch> で場合分けを行ってごにょごにょするので MT のタグを仕込むときにどうしても複雑になり、やたら苦労します(ただでさえ複雑なのにね)。
問題は Tag と通常の検索が一緒なっているから起こるので、単純に考えて分離してしまえば解決します。というわけでその方法を大まかですがメモして置こうと思います。
用意する Plugin
Ogawa Memoranda さんにて公開されている TagSupplementals Plugin は MT-XSearch をサポートしているのでテンプレートの分離はこれら 2 つをつかって行います。
MT-XSearch のインストールと下準備
ここで長々説明するよりも、TagwireとMT-XSearchによる動的タグアーカイブ - Ogawa::Memoranda のセットアップ方法の 1 と 2 にまとめられているのでそちらを参照してください。
テンプレートモジュールを作成
上記 2 つのプラグインのインストールが完了したら、XSearch TagSupplementals という名前のテンプレートモジュールを作成します。あとはタグ検索用のテンプレートをそこにガシガシ書いていくだけ。
2 つに分けると当然テンプレートも書きやすくなるし、メンテナンス性も向上してなかなか良い感じですね。
たとえば h1 要素にロゴ画像を表示させたい場合、ただ CSS の background-image プロパティにロゴ画像を指定したのでは、テキストがロゴの上に被さって邪魔になってしまいます。かといって h1 要素は SEO 等を行う際、重要な位置を占めるタグなので中身に img 要素を使うのもなんだかもったいない気がする。
そこで CSS の Tips の一つに要素内のテキストを画像に置き換える（置き換えているように見せる）方法を使ったりするわけですが、僕の知ってる限り、やり方には幾つか方法があります。それを少しまとめてみました。