attention admin about comments trackbacks you may also like

サムネイル画像

2019年07月24日
未分類
2
前回の記事以降、福岡は曇りどころか大雨、典型的な梅雨空。渇水の心配もなくなった?近日中に梅雨明け?

ボランティアも夏休みに入り、朝のパトロールはお休みですが、何かと忙しいです。そんな中、ブログいじり、やってます。以前から、画像はFC2以外にアップしていると紹介していますが、そうするとサムネイル画像がブログで使えなくなるんですね。

サムネイル画像とは、トップページに有る小さな画像のことですが、今回挑戦しました。(他愛もないことですが)

テンプレートにもよりますが、記事中(本文)の一番最初の画像がサムネイル画像にできるのですが、画像が無いと・・・

No image

の画像が表示されるようです。(これを表示しないテンプレートも有ります)

で、記事の中に画像が有る場合は、トップページにサムネイル画像を表示する、あるいは任意の画像を表示する。画像が無い記事では、テキスト(文章)のみを表示する、あるいは、記事中に画像が有ってもトップページにサムネイル画像を表示しない。

何とか、これができないか思案していたのですが、出来たんですね。FC2には、サムネイル画像と別にアイキャッチ画像の登録ができて、トップページにサムネイル画像を表示したい記事のみ、その画像をFC2にアイキャッチ画像としてアップします。

そして、下記のブログの記事を参考に 真似をしました。webp画像形式を参考にさせていただいたブログ様です。

FC2ブログのテンプレート変数の値有無に応じて、HTML表示を切り替える方法を考えてみました。

Web奇術の世界へようこそ!!テンプレート変数に値が設定されている時の処理を柔軟に…先月紹介した関連記事リストのサムネイル表示に関する内容(下ブログカード記事)の続きみたいな感じになるのですが、画像だけでなくHTML表示自体を切り替えることができないだろうか?とずっと悩んでおりまして…FC2ブログの関連記事リスト表示場所「テンプレート変数のみ」でサムネイル代替画像(No Image画像)を表示させてみました...

上記のブログ様の発想は素晴らしいですね。FC2のテンプレートに使う変数を使って表示したくないHTMLの部分をコメントにするなんて、私は思いつきません。 特に、変数前後の「 - 」(ハイフン)の使い方、脱帽です。

当ブログの場合、違う変数を使いました。


<!--記事-->
<div class="entry_body">
<!--more_link-->
<!-- -<%topentry_image_url>->
<div style="display:none">
<!-<%topentry_image_url>- -->
<div class="slide-right top-img">
<a href="<%topentry_link>">
<img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7" 
data-src="<%topentry_image_url>" alt="トップ画像" title="続きを読む">
</a>
</div>
<!-- -<%topentry_image_url>->
</div>
<!-<%topentry_image_url>- -->
<!--/more_link-->  
<%topentry_body>
<!--more_link-->
<div class="pagetop" style="margin-bottom:-25px"><a href="<%topentry_link>" class="tuduki">続きを読む</a></div>
<!--/more_link-->

で、今回の記事のサムネイル画像は何にしようか・・・

女性画像
関連する記事
遠太
Author: 遠太
九州は福岡県中間市で環境保全や地域に関するボランティア活動中。
できる時にできる範囲で。そこには、ノルマも強制も義務もありません。

コメント(2)

There are no comments yet.

mochi  

2019/07/27 (Sat) 13:17

こんにちは。遠太さん。
早速試していただいたみたいで、記事紹介ともにありがとうございます。

トップページで表示される記事サムネイル画像の場合、FC2テンプレート変数として画像有無を判別するための「ブロック変数」と呼ばれるものが専用に用意されているので、こちらを利用した方がいいかもです。

画像有の時、下記ブロック変数で挟まれているHTMLコードが有効になります。
<!--body_img--> ~ <!--/body_img-->

画像無の時、下記ブロック変数で挟まれているHTMLコードが有効になります。
<!--body_img_none--> ~ <!--/body_img_none-->

今回の無理矢理コメントアウト手法は、関連記事サムネイル画像など画像有無判別用のブロック変数が用意されていないものに対して特に効果的なので、遠太さんのアイディアが広がることにつながってくれれば幸いです。(^^)/

遠太  

2019/07/27 (Sat) 18:10

mochiさん、こんにちは。
この様な変数があったんですね。教えていただきありがとうございました。
早速、テンプレートを書き直しました。(勉強不足ですね)

言われる通り今回の記事の内容は、今後、役に立つことがあると思います。
これからも「奇術」楽しみにしております。