Article page

by
  • Comment:8
  • Trackback:0

FC2ブログのサムネイル関連の充実に伴って、若干混乱もあり ^^;
テンプレートのデフォルト設定と絡めた記事内容です。


サムネイル あるいは サムネイル画像 とは


サムネイルとは…

サムネイル(英語:thumbnail、サムネールとも表記される)とは、画像や印刷物ページなどを表示する際に視認性を高めるために縮小させた見本のこと。親指(thumb)の爪(nail)のように小さく簡潔であるという意味から来ている。
視認範囲の限られるカタログや画面表示上、もしくはデータ量の限られるネットワーク上の画像情報の伝達において用いられることが多い。

Wikipedia より抜粋


一覧表示に特化した小さめ画像、と思えば大体合ってます。



FC2ブログでサムネイルを表示させる変数


サムネイル取得条件

「本文」一番最初の画像 (追記内の画像は対象外)
・ FC2投稿画面(エディター)のモバイル絵文字対象外
・ クラス名 emoji のついた画像は対象外
・ ファイル名に 半角カッコ が付いているものは対象外
外部直リンク画像 (外部サーバー画像)は対象外


上記取得条件を踏まえた上で

通常サムネイル
変数用途備考
<%topentry_image_w300>
記事内の画像をサムネイル画像として表示 (大)横 300px 縦 200px
寸が足りない場合は黒背景で補填
GIF動画は静止画に変換
<%topentry_image_72>
記事内の画像をサムネイル画像として表示 (小)横 72px 縦 72px
主にスマホ用
寸足らずはよほど起こらず、中心部を切り出し
GIF動画は静止画に変換
<%topentry_image>
元画像をそのまま表示厳密にはサムネイルではない
画像縱橫は元画像に依存
GIF動画の静止画変換は無し
非公開変数扱いか?



新着記事用サムネイル
変数用途備考
<%recent_image_w300>
記事内の画像をサムネイル画像として表示 (大)横 300px 縦 200px
寸が足りない場合は黒背景で補填
GIF動画は静止画に変換
<%recent_image_72>
記事内の画像をサムネイル画像として表示 (小)横 72px 縦 72px
主にスマホ用
寸足らずはよほど起こらず、中心部を切り出し
GIF動画は静止画に変換
<%recent_image_url>
元画像のURLを取得厳密にはサムネイルではない
画像縱橫は元画像に依存
GIF動画の静止画変換は無し



関連記事用サムネイル
変数用途備考
<%topentry_relate_thumbnail>
記事内の画像をサムネイル画像としてURL取得横 144px 縦 144px
寸足らずはよほど起こらず、中心部を切り出し
GIF動画は静止画に変換



なんでこんな仕様にしたやら (´・ω・`)
関連記事だけ特殊。
ブログ個人設定で「テンプレート変数のみ」に切り替えたりそうでなかったり、な使い方だからでしょうかね (´・ω・`)

あとは「関連記事サムネイル」のプラグイン。
こちらには
<!--recent_image_72_with_alt-->

という変数が使われていますが、
後ろの with_alt が「オルト属性を付ける」ことを意味しているんだと思います。
しかし実際には付いてない (No image用のユニコーンだけ付いてる)
って、ぅオイ!何がしたかった ( ̄∀ ̄;)
それじゃ意味ないじゃんかー。
しかも形が %なんだしゃんではなく、エリア変数と言われる形式のもの。
えー。わけわかんね
alt属性抜けによるバリデートエラーが嫌な場合はプラグインを利用せず「テンプレート変数のみ」でhtmlに直接書かないとダメですねぇこれは (´・ω・`)
そのために「サムネイル画像を表示」ではなく「URLを取得」になっているんでしょうね。
「サムネイル画像を表示」の方は問答無用で出来上がりのimg要素として確定してしまいますが、
「URL取得」ならばかなり融通が効きます。
従ってこうすればバリデートクリア ↓

<img src="<%topentry_relate_thumbnail>" alt="">


白字が自動出力部分、緑字が手打ちする部分。

素直にプラグイン利用を勧めた方が良いのか、テンプレにデフォルトで書き込んで「テンプレート変数のみ」に切り替えて
もらう方が良いのか悩みどころ。
(既存テンプレで直書きしているものはいまのところありません)

GIF動画が静止画に変換されちゃう!
を避けたい方は元画像依存の変数一択です。
ただし表示負荷も元画像依存ですので、サムネイル変数を利用した方がページ読み込みは速くなります。
つか、関連記事用も3種用意してくださいよ ヽ(`Д´)ノ


新規実装の「アイキャッチ」そして「No image」


こちらも便利ですがややこしやになりました。

アイキャッチ画像

使い道:
・ 記事内に画像を添付していない、でも No imageにするのは嫌
・ 記事内に画像は添付したけれど、「一番最初の画像」という括りだと困る
など

使い方:


記事を書く都度設定。



No image画像設定

使い道:
・ 記事内に「画像が存在しない」ことを明確にしておきたい
・ 画像無しを明示しつつ、空白になるのを避けたい
・ テンプレートデフォルトのNo image画像が好みではないので変更したい
など

使い方:


環境設定 > ブログの設定 > 記事の設定 > サムネイル代替画像の設定から
ブログ全体に一括で設定。



これまで No image代替画像についてはテンプレートに(テンプレート作者に)委ねるしかなかったので、簡単に設定できるようになったのは良いですね。
ただし画像上に「No image」というテキストが載ることはありませんので、テキストが必要であれば画像編集が必須です。


表示優先順位

アイキャッチ画像 > 記事内の画像 > 個人設定No image画像 > テンプレデフォルトNo image画像(あるいは「無し」)


個人の設定が優先ですので、テンプレデフォルトが邪魔をすることはありません。
優先順位は理にかなったものですので、きちんと把握して上手に使い分けると良いと思います。

最後に注意点ですが、
FC2のアイキャッチ画像機能はRSSへの画像配信が行われません
これは覚えておいた方が良いと思います。
画像配信を行いたい場合には対象としたい画像を記事の一番最初(書き始め)にサイズ 0 × 0 で掲載するか、
CSSのdisplay: none; を利用して掲載されると良いですね。
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 8

yuko  
教えてください

はじめまして。
先ほどfc2のテンプレートをお借りしました。
そこでどうにもわからないことがあるので教えてください。
ブログタイトルの右下にSNSのマークがありますよね…
これは自分のTwitterやinstagramをリンクさせることができますか?
その場合テンプレートの編集が必要だと思うのですが…
どうのようにしたらいいでしょうか?
初心者な質問で恐縮です。

2017/01/31 (Tue) 02:00 | EDIT | REPLY |   
Akira  
To yukoさん

ありがとうございます (●'0'●)/

ご利用頂いているテンプレートは「Colony」でよろしいでしょうか。
専用ページの方でお答えしますのでお手数ですが移動をお願いします。

http://vanillaice000.blog.fc2.com/blog-entry-401.html#comment3081

2017/01/31 (Tue) 12:52 | EDIT | REPLY |   
よーきー  
To Akira 様

こんばんは。

現在、下記サイトにアップされていたスクリプトを使用してサムネイル付きの最新記事一覧を
サイドバーにアップしています。

http://fanblogs.jp/techs/archive/39/0

それでこのスクリプトをなんとかカスタマイズして記事タイトルに「レビュー」という文言が
含まれる記事のみを抽出できないものか思案中なのですが
こちらのサイト様は現在、運営されていない模様で聞くに聞けない状況です。

そこで失礼かとは思いましたが
Akira様に質問した次第でございます。

もしできなければ素直に諦めます。

またはもっと良いスクリプトなどがございましたら
教えて頂けると幸いデス。

宜しくお願い致します。m(_ _)m

2017/03/07 (Tue) 22:16 | EDIT | REPLY |   
Akira  
To よーきーさん

こんばんは ( ゚Д゚)ノ

原則としてテンプレートと無関係なプラグイン導入のお手伝いはお断りしています (´・ω・`)
なのでヒントだけで。


まず、当該プラグインの目的とよーきーさんの目的が合致していません。
何故なら「最新記事」というのは記事の内容の如何を問わず時系列の新しい順を表示するためのものです。
タイトル中のキーワードで振り分けをするのであれば、それはもう「最新記事」リストの意味を成しません。


そちらのプラグインを簡単に言うと「xmlのパース」です。
RSS配信された内容(xml)を取り込んで表示する(パース)のがこのプラグインです。

①② を踏まえて、一番良いのは「タイトルの中にこの言葉があった時は〜」という複雑な考え方はなさらず、
素直に「レビュー」というカテゴリを作成し、そのカテゴリのxmlパースをすれば良いのではないでしょうか。
FC2ブログのカテゴリをパースしたい場合にはrss_uriを

<%url>?xml&category=<%topentry_category_no>

として設置するのが有効かと思います。
<%topentry_category_no> は独自変数ですが、トップページなどでは機能しませんので、作成したカテゴリのNOをダイレクトに入れます。

というわけであくまでもヒントだけ。
ごめんなさいね。よろしくお願いします。

2017/03/07 (Tue) 22:48 | EDIT | REPLY |   
よーきー  
To Akira 様

こんばんは。

テンプレと無関係な質問をしてしまってすみません。

でもたしかにおっしゃる通りですね。

プラグインの目的と僕の目的が合っていないデス (´・ω・`)

もうちょっと良く考えてみますね。

ヒントだけでも頂戴できて

嬉しかったです。ありがとうございます。

2017/03/07 (Tue) 23:03 | EDIT | REPLY |   
Akira  
To よーきーさん

はい。申し訳ないです (´・ω・`)
カテゴリからの抽出ならば先程書いた内容(指定アドレス変更)でできるはず(試してはいませんが理論上)ですのでご検討くださいね。

2017/03/07 (Tue) 23:18 | EDIT | REPLY |   
モウリ  
関連記事のサムネイルについて

こんばんわ。

グリッド仕様が使いやすくて気に入っています。

質問なんですが、関連記事リストのアイキャッチが丸型なんですが四角にするにはどうすればいいんでしょうか?

それともFC2ブログの仕様ですかね?

2017/06/01 (Thu) 21:11 | EDIT | REPLY |   
Akira  
To モウリさん

ありがとうございます ( ゚Д゚)ノ
ご利用のテンプレートは「Colony」でお間違いないでしょうか。
専用記事の方へ移動をお願いします。
お返事もそちらで致しますね。

http://vanillaice000.blog.fc2.com/blog-entry-401.html

2017/06/01 (Thu) 21:31 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い