[リニューアル]記事タイトルを画像にしてみる

うかブログ »

ウェブデザイン »

[リニューアル]記事タイトルを画像にしてみる »

見出し、小見出しをそれぞれ画像で作ったところ、どうも記事のタイトル部分がいけてないような気がしてきまして、こっちも画像で作ってみました。

もともと個別ページへのリンクを貼った記事タイトルをリスト表示してたんですが、そこに写真を加え、タイトル部分を画像で作ったらこんな感じになりました。

ちとやりすぎたか（汗

タイトル部分、普通にテキストで表示させてみたりもしたんですが、どーも押しが弱いってんで画像で作ってみたんですが、今度はリンクが貼られていることが分からなくなってしまいました...。一応「記事を読む」というリンクと、タイトルにマウスカーソルが乗ったときに画像がポコッと動くようにして「リンクしてまっせ！」というのをアピールしてみたんですが.....。

しかもこれ、3種類全18記事になると結構長くなっちゃう....。ん～、後で直さなきゃいけないことになるカモ。

ちなみにこのサイト、MTで作ってるんですが、こんな風にタイトルを画像で作っちゃうと表示させるの面倒じゃない？とか思った方。するどい（笑）....ですが、意外と簡単に表示させることができちゃったりします。

MTの場合、<MTEntries>～</MTEntries>と囲まれた間に<$MTEntryTitle$>といったMT用のタグを書いてあげるとそこにタイトルやらなんやらが指定件数分表示されるんですが、次のタグを書くとその記事の「ファイル名」を表示させることができます。

<$MTEntryBasename$>

このファイル名は記事ごとにダブることなくついているもの（post_1とか、出力ファイル名を変えている方はその名前になってるかと）なので、画像のファイル名も同じようなものにしてあげて、上記のMTタグをHTMLのimgタグ内に記入しておけば、自動的に記事のファイル名に合った画像が表示されるっちゅーわけです。例えばこんな感じで。

【MTテンプレート上のソース】
<img alt="<$MTEntryTitle$>" src="images/title/T_<$MTEntryBasename$>.gif" width="250" height="30" />

【予め準備しておく画像のファイル名】
T_post_1.gif とか T_hogehoge.gif とか

ま、予め記事のファイル名と同じ名前の画像を作っておかなきゃいけないとか、記事数の多い一般的なブログには向かないとかいろいろありますが、このサイトは所詮3カテゴリ18記事分を用意すればいいだけなので、結構さっくり準備することができました。

でも、リンクを貼ったりする場合はやっぱりテキスト＋アンダーラインってのが見やすいと思うので、使いすぎには注意ですね。（って、18記事全部コレだから私は明らかに使いすぎorz）

「ウェブデザイン奮闘記」関連記事

• [リニューアル]HDDサイトのレイアウト再考
• [リニューアル]デザインの基礎知識を学ぶ
• [リニューアル]サイトの内容を整理する
• [リニューアル]レイアウト案を作る
• [リニューアル]レイアウト2パターンの比較
• [リニューアル]レイアウト決定
• [リニューアル]Photoshopで画像作成
• [リニューアル]見出し画像の作成
• [リニューアル]見出し画像のフォント
• [リニューアル]小見出し用のバナーを作る
• [リニューアル]記事タイトルを画像にしてみる
• [リニューアル]全体のコントラストを見る
• [MT]HTMLからMTテンプレートへ（ヘッダー編）
• [MT]HTMLからMTテンプレートへ（記事リスト編）
• [MT]HTMLからMTテンプレートへ（まとめ）
• [リニューアル]リニューアル完了

△ページトップに戻る