好きな画像をサムネイルにするには 追記あり

投稿 2015年05月21日
12
カスタマイズ
Tipsトラブル対処初心者向け

----- 2016.5.20 追記 重要

記事作成画面内に アイキャッチ画像指定 ができるようになりましたので、諸条件が見合うならばそちらをご利用ください。

アイキャッチ画像の特徴

  • FC2ブログ上のサムネイル対象
  • OGP画像対象
  • RSS配信不可
  • FC2内サービスでも「ランキング」や「新着」などへの配信不可

----- 追記ここまで

サムネイルを抽出してトップページに表示、というのを私のテンプレではよくやるのですが、他の製作者様のも多いですよね。
そのサムネイルについて基本的には
「本文」内にあり、かつ一番最初に貼り付けられているもの
というシステム上の決まりがあります。

でもそういった縛り無しに記事内の好きな画像をアイキャッチに使いたい という方も。
そんな時にちょっと使える小技。

別にどうということはない至って単純・簡単な方法です。
記事の書き出しにサムネイルにしたい画像を貼り付けますが、そのままフツーに掲載しては記事としての流れがおかしくなったり、もっと言えば記事には掲載したくない・各種ページのサムネイル対象(トップページや関連記事など)だけにしたい、という時だってあります。
そこで サイズを 0 × 0 で掲載します

それだけ(笑)
あるいは display: none でもOKです。どちらを選ぶかはお好みで。
要するに 0 × 0 サイズやdisplayプロパティのnone値では画像は見えやしませんが、画像自体はちゃんと存在しており、諸条件を守っていればサムネイル対象にもなります。

サイズ0 × 0掲載の場合 ↓

<img src="画像アドレス" width="" height="" alt="" style="width: 0; height: 0;">

display: noneの場合 ↓

<img src="画像アドレス" width="" height="" alt="" style="display: none;">

個人設定によってはaタグで囲まれている場合もありますが、aタグは外してください。
また、FC2ブログエディターのツールを利用した場合には width属性height属性 が付いてきますが、そのまま残しておいても構いません。どのみち打ち消されます。
border="0" についてはhtml5では 廃止 されていますので削除されると良いと思います。

簡単ではありますが、以下の点に注意してください。

  • 見えないからといって解像度が低いもの・サイズが小さいものを指定しない
  • 目に見えずともhttpリクエスト(通信リクエスト)は発生しており、負荷は画像の原寸に依存する
  • ファイル名に半角カッコがついているものはサムネイル対象から除外される

半角カッコは意外とご存じ無い方がいらっしゃるようなので、ファイル名をつける時には気をつけてください。
ファイル名称として利用する記号はハイフン( - )とアンダースコア( _ )だけ、と決めておくと良いと思います。

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

12 COMMENTS

There are no comments yet.

tak  

ありがとうございます!

2015/05/29 (Fri) 10:36

Akira  

To takさん

何かとお手数おかけします。
よろしくおねがいしますe-454

2015/05/29 (Fri) 13:51

藤袴  

こんにちは。上記のタグで画像を入れるとサムネは表示されますが、本文の一部が表示されなくなってしまいます。普通に画像を挿入し、stle="width: 0; height: auto; と入れると本文が一部プレビューに出てこなくなってしまいます。(消すともとに戻ります)どうすればよろしいでしょうか?

2015/07/14 (Tue) 17:14

Akira  

To 藤袴さん

テンプレ修正中でコメントし辛かったかと思います。
ごめんなさいね (*_ _)

>本文の一部が表示されない件

念のため確認です。
ソース内容

<img src="画像アドレス" style="width: 0; height: auto;" alt="代替テキスト">

です。
まずそこをご確認頂くのと、FC2のツールバーから画像を貼り付けられました際には

<a href="画像と同じアドレス"~省略~><img 省略></a>

こうなりますので、<a>タグは必ず外してください。
このコメント欄から太字をコピペされまして、
・画像アドレス
・代替テキスト(sample など)
この二つを差し替えてみてください。
半角や全角の違い、記号の違いや記号の入れ忘れ一つでも影響してしまいますので、まずはコピペでお願いします。
ご面倒おかけします!

2015/07/14 (Tue) 17:32

ぐおじ(の代理人)  

1枚目の画像が検出されない現象について

Akira様、はじめまして。
Website欄のブログで、デザインのお手伝いをしている者が代理でコメントさせて頂きます。

現在、Akira様のテンプレートをカスタマイズして使用させて頂いておりますが、サムネイルの抽出についてお聞きしたいことがあり、コメント致しました。
(テンプレート、新着RSS、サムネイル等の解説記事は全て目を通しています)

お聞きしたいことは、サムネイルに抽出される画像が、1枚目ではなく記事中の他の画像になってしまう現象が頻発していることについてです。
絵文字等を使用しておらず、追記ではなく本文に入力しているにも関わらず、1枚目あるいは2枚目、3枚目が無視されて、その後の画像が抽出されてしまう原因にはどのようなものが考えられますでしょうか?

画像の容量、サイズなどいろいろ検討してみましたが、1枚目が抽出されない原因が特定できず、対処に困っております。
何か思い当たることがあれば教えて頂けると助かります。
よろしくお願い致します。

2016/02/08 (Mon) 14:53

Akira  

To ぐおじ(の代理人)さん

ご面倒おかけしております (*_ _)

こちらはですね、抽出されない画像のアドレスに括弧がついているからです。
(文字列)

これ

FC2でアップロードできない画像の名称はスラッシュとピリオドのみ(末尾拡張子のドットは除く)、という謳い文句になっていますので、
カッコつきアドレスは受付されてしまいます。
ですがサムネイルとして抽出はできないんです (´・ω・`)
元々アドレス中に日本語などの2バイト言語ですとか、ハイフン(-)及びアンダースコア(_)以外の記号は望ましくありません。

んで、大変ご面倒とは思いますが、この事象を解消するにはアドレスを変更して頂いて再アップロードにて差し替え、
あるいは新たに括弧なしの同じ画像をアップロードされましてこの記事の内容のとおり0✕0掲載されるかのいずれか... ( ̄∀ ̄;)
この点先にご説明すべきでしたね。
私の手落ちです。こめんなさい (*_ _)

-------

別件ですが、GirlOnWireとChillingとを組み合わせたカスタマイズをされている、ということでお間違いないでしょうか。
ちょっとスマホからの閲覧がマズいことになっております(笑)
スマホ版を適用されておられましたら、まあ良いのかな、と思いますけれども。
レスポンシブでのご利用でしたら修正した方が良いかとー (´・ω・`)
(ご判断はお任せします)

2016/02/08 (Mon) 15:58

ぐおじ(の代理人)  

No title

お返事ありがとうございました!

ファイル名が抽出できていなかった原因だったのですね!
たしかにファイル名に普通カッコとか2バイト言語は使用しませんよね。
手落ちだなんてとんでもないです!
ぐおじさん本人にも指導しておきたいと思います。


この記事とは関係ない別件になってしまいますが、スマホからの閲覧のマズい部分は具体的にどの部分かご教授頂けないでしょうか?
私がカスタマイズした当初は、Android実機、iPhone実機、その他エミュレーターで表示確認は行っているのですが……
問題点さえご教授頂ければ、あとは自分で調査・対応します。

現時点での問題点としてはスマホからの表示が当初より明らかに重くなってしまっているので、そこの対策を指導しようかなと考えております。
ヘッダー画像が1.5MBになっているのが一番の要因だと思いますが(笑)

2016/02/09 (Tue) 01:17

Akira  

To ぐおじ(の代理人)さん

ファイル名の件、申し訳ないです ( ̄∀ ̄;)
作業大変かと思いますが、変更ガンバです ╭( ・ㅂ・)و ̑̑ グッ

------

スマホの件

①慣性スクロールが効いていない
②広告が常に上部に表示されてブログタイトルに被るスレスレ

この2点です。

①について
iPhoneで検証しております。
iPhoneはトゥルルーンという滑らかなスクロールが実装されていますが、それが失われています。
ギコ..ギコ..ギコ... という感じのスクロール感になっています。
Ctrl+Fキー検索(CSSソース内です)

html, body {
height: 100%;
}

を削除。

②について。
これちょっと私の方で確認できないのですが、htmlソース後方の
<%ad> <%ad2>
の広告用変数を移動させましたでしょうか。
変数は一度投稿されますと実態に変換されますので私の方でソース確認ができません。
アド関連変数の「位置」は規定がありません(可視状態ならOK)ので規約的な問題にはなりません。
ただページ最上部に広告というのはちょっと疎ましいと思います(笑)
そしてドロワーを操作するボタンが左上にありますので、広告の上にチョコンと載っているような感じ。
押しどころによっては広告が開いてしまいますね (´・ω・`)
ただ、上部設定するとフローティング(フワーっと降りてくる)にはなりませんので、天秤にかけてどちらが良いか、というところです。
一度ご確認くださいませ。

2016/02/09 (Tue) 11:58

ぐおじ(の代理人)  

Akira様、スマートフォン表示の件についてもご教授頂きありがとうございました!

早速対応いたしました。
②については特に広告用変数はいじっていなかったのですが、iPhoneでのみオーバーレイ広告が表示されているということを確認しました。
現在は画面下部に追従するように表示されていて、ページ最下部までくると上部に表示されるという形になっているので、これで問題はないかなと思います。

細かい点までご相談に応じて頂きありがとうございました!
これからもテンプレート作成、がんばってください。

2016/02/11 (Thu) 19:25

Akira  

To ぐおじ(の代理人)さん

お返事遅くなりました (*_ _)

できたようで安心しました。
お疲れ様でした

2016/02/13 (Sat) 14:41

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/03/11 (Sun) 00:40
vanillaice (Akira)

Akira  

To No imageの件 内緒さん

先程別の記事でお返事しました。

何かをするときにはその作業の「意味」をまず考えてくださいね。
ただ書いてあったからやる、ではなく。
それが自分に必要なのかどうかという選別も行なっていかないと、ブログ書く前に疲れちゃいますよ (´・ω・`)

とりあえず別ページの私のコメントをご覧頂くださいね。

2018/03/11 (Sun) 00:43

LEAVE A REPLY

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)