MS Access Tips/Sample and VBA and Blog customize etc...

ブログ内検索結果画面にサムネイル画像を表示

FC2ブログのスマートフォン版テンプレート用の変数に「記事内の画像をサムネイル画像として表示」するものがあるのですが、いつの間にかPC版テンプレートでも使えるようになっているらしい。

テンプレート用 変数
<%topentry_image_72>記事内の画像をサムネイル画像として表示(小)
<%topentry_image_w300>記事内の画像をサムネイル画像として表示(大)

そこでどこかでこれを使えないかと考えてみました。

FC2のブログ内検索の結果画面は以前下記の記事でシンプルになるようカスタマイズしました。

ブログ内検索結果画面を軽くする - hatena chips

軽くて一覧性もいいのですが、ちょっとシンプル過ぎて味気ないかなとも思ってました。そこの左側にサムネイルが表示されれば見栄えがいいのではないか、ということで実装してみました。

検索結果画面のサムネイル

難易度: 難易度: 2

サムネイル画像 のテンプレート変数

<%topentry_image_72> という変数なんですが、下記の FC2リクエスト にも要望が上がっていて、FC2からも実装済みという報告はないのですが、なぜか今回試してに使ってみたら使えてしまいました。

公式プラグインに新着記事一覧のテキスト横or上下にサムネイルの実装を - FC2リクエスト

上記のコメント欄をみると少なくとも、13年04月08日時点ではまだ実装されていなかったようです。いつ実装されたんだろう。

他にも、<%topentry_image> という非公開関数があるらしい。これは、記事に含まれる最初の画像のURLをそのまま返すらしい。これも、使い道があるかも。

テンプレート HTML

上記の「ブログ内検索結果画面を軽くする」の記事も一応、目を通しておいてください。で、そのページのテンプレートHTMLを下記のように書き換えます。

これで 72px?72px のサムネイル画像が表示されます。

ちなみに、<!--body_img--> はモバイルテンプレート用の非公開変数ですが、これもPC版でも使えるようになっているようです。意味は、記事中に「画像」を使っている場合に表示されるプロックというこです。下記を参照。

FC2ブログの 「非公開変数」 のまとめ - smart ありのごとくあつまりて

テンプレート スタイルシート

HTMLにサムネイルを追加しただけでは、下図のようにサムネイルの下にテキストが表示されます。

検索結果画面のサムネイルCSS無し

そこで、スタイルシートに下記のコードを追加します。

これで、画像が左端に表示され、テキストは右側に流し込まれます。
margin はテンプレートのデザインに合わせて好みで調節してください。


拍手する

3 Comments

Hiro says..."参考にさせて頂きました"

いつもFC2のカスタマイズの参考にさせて頂いております。
今回は「image_72」をタグ検索に使ってみました。
ありがとうございました。

2014.02.11 18:14 | URL | #27Yb112I [edit]
あやな says...""

初めまして。
この変数を使いたいのですが、alt属性がありませんとバリデータでエラーになってしまうんです。
何か解決方法は無いでしょうか。

2014.03.11 01:29 | URL | #PooosTlY [edit]
hatena says..."re:image_72変数"

> この変数を使いたいのですが、alt属性がありませんとバリデータでエラーになってしまうんです。

image_72変数 が imgタグを生成してくれるのですが、それに alt属性 が付加されないのが原因ですね。

そういう仕様ですので、こちらでは対処のしようがないです。
FC2の方に alt属性 を付加するように要望を出すしかないと思います。

FC2リクエストから要望できます。

と思ってFC2リクエストを覗いてみたらすでに要望が出てますね。

alt属性の追加 - FC2リクエスト
http://request.fc2.com/view_wish.php?wid=5_1393863793_11272783

賛成に投票しておきましょう。

2014.03.11 02:14 | URL | #5uE6dEgY [edit]

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/371-876d51e6
タグ検索結果を画像(サムネイル)付きで表示
先日の「最新記事を画像(サムネイル)付きで表示」に続き、 タグ検索結果に画像(サムネイル)が付くようにしてみました。 参考サイト:ブログ内検索結果画面にサムネイル画像を表示 hatena chips さんで紹介されている中から、「タグ検索」(tag_area)の部分を 使わさせて頂きました。
該当の記事は見つかりませんでした。