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

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

カスタマイズ
2015/05/21 23
vanillaice (Akira)
vanillaice (Akira)
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リクエスト(通信リクエスト)は発生しており、負荷は画像の原寸に依存する
  • ファイル名に半角カッコがついているものはサムネイル対象から除外される

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

 23

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
vanillaice (Akira)
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
-
管理人のみ閲覧できます

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

2018/03/11 (Sun) 00:40
vanillaice (Akira)
Akira
To No imageの件 内緒さん

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

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

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

2018/03/11 (Sun) 00:43
bon

こんにちは。一日に何度もすみません。
ただいま、既存記事を本文と追記に分ける作業をしております。ただしその場合、アイキャッチ画像に設定している場合でも、それが追記に入ってしまうと
・ RSS配信不可
・ FC2内サービスでも「ランキング」や「新着」などへの配信不可
になってしまうということですよね(; ̄ェ ̄)

そこでこちらの記事を参考に、本文側にメインとなる画像を載せはじめたのですが、疑問に思ったことがあります。

>FC2ブログエディターのツールを利用した場合には width属性 と height属性 が付いてきますが、そのまま残しておいても構いません。どのみち打ち消されます。

とあります。

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

こちらの、width="" height=""はこのまま未設定でよい、ということでしょうか。
それとも、通常通り表示させたいサイズ指定をするべきでしょうか。(例、width="600" height="auto"といったように)

新たなことをするたびに疑問が出てきてしまいます(-_-;)面倒くさい奴ですみません…
たびたびお手数をお掛けしますが、ご教示くださいますようお願いいたします。

2020/04/11 (Sat) 16:55
vanillaice (Akira)
Akira
To bonさん

お疲れ様です ('0')/
どうぞ気に病まれませんよう(笑)

ちょっと極端な説明をしようと思います。私個人としては
「本文とOGPは完全一致させれば良い」
と考えています。賛否あるでしょうから記事には書いていません。

迷いが生じる場合は私と同じように考えても良いかもしれませんね。そうすれば本文を書くとき常にOGPのことを考えているということになりますから、何が必要で何が必要でないのか明確になります。

OGPに必要なもの
・記事のタイプ(article)
・記事タイトル
・記事のリンク
記事の概要
記事に画像

リストの1つ目(タイプ)は自動で適用されます(FC2側の処理)
2つ目と3つ目(タイトル, リンク)についてはちゃんと記事タイトルを付けてさえいれば自動適用です。

ブログ運営者が気をつけるのは 4つ目と5つ目(概要, 画像) です。つまりこの2つは必ず「本文」に無ければいけない、ということです。
本文 = OGP
だと思っていれば画像を入れ忘れたり、文章を無くしてしまう、といったことにはならないと思います。
ただし画像については私のように記事内に掲載せずとも「アイキャッチ画像」機能を利用すればそれがOGP対象になります。

-----
> アイキャッチ画像に設定している場合でも、それが追記に入ってしまうと
・ RSS配信不可
・ FC2内サービスでも「ランキング」や「新着」などへの配信不可
になってしまうということですよね〜

アイキャッチ画像の仕様は 一旦設定されると意図的に『削除する』をクリック(新投稿画面は×印クリック)しない限り無効化されない ようになっています。アイキャッチ画像指定は意図的に指定する場合と、本文最初の画像が自動で指定される場合があり、bonさんの場合は後者です。

本文にある画像を仮に追記に移動させても「削除する」をクリックしない限りOGPとしては有効です。表示されている画像を移動させるということはつまり見た目が変わるということですから、本当に移動させる必要があるのかどうかをレイアウトの観点から考えて実行する・しないを決めてください。移動させた場合にはつまり「本文に掲載されていないけどOGP画像」ということになりますので、RSS配信なし・FC2ランキング反映なしになります。
記事の構成上どうしても文章と共に追記へ移動せざるを得ない、という場合以外はそのまま本文に置いておくのが望ましいと思います。

ついでに概要文なんですが、OGPで最も重要なのは冒頭90文字です。OGP概要文自体は最大200文字までですが、Facebookなどはその200文字からさらに削られて1行の掲載になります。昨今のweb事情では文字数ではなく行数で制限することが多くなっています。
フォントサイズの影響も受けますが、大体90文字前後です。
なのでこの90文字で「この記事を読むことでどんな情報が得られるのか」を端的に説明できればベストです。それはすなわち「誘導文」でもあります。例えば

「こんにちは。めっきり春めいてきましたね。さて今回は見…」
という概要文と
「今回は見出しの使い方を徹底解析しています。…」
という概要文、どちらがよりクリックして開いてもらえるか(誘導できるか)ということです。誘導文さえ書ければあとの詳細文は全て「追記」で良い、というのが私の考え方です。Googleなどのクローラーも本文と追記を差別化・ランク付けするようなことはありませんので、「本文 = 主文」「追記 = おまけ」と考えるのではなく「本文 = 序文, 誘導文」「追記 = 主文, 詳細文」と考えると記事の書き方の明確な方針になると思います。

90文字が無理なら200文字まで猶予はあります。私が提供しているブログカードの文字数(こちらは行数ではなく文字数です)も200文字ですから、ここを気をつけること(概要文以外は全て追記)でカード内の文章が途切れたり、意味不明になってしまうことを防げます。つまり第三者による紹介時も文章のコントロールができるようになります。

-----
> width="" height=""はこのまま未設定でよい、ということでしょうか〜

えっとその前に、私はたくさんの情報を一度にこうして書いていますが、bonさんはご自分のペースで理解に努めてくださいね。すぐに参照できるようまとめて書いているだけで「今すぐ理解し実行しろ」というわけではありません。念の為(笑)

htmlのwidth属性とheight属性に空の値は認められていません(alt属性は認められていますので混同しないよう注意です)
空の値が不可の場合には「書かない」という対処になります。

×
<img src="アドレス" width="" height="" alt>


<img src="アドレス" alt>

で、提示されているサンプルコードに display: none が付いていますが、記事に掲載している画像をOGP対象にする場合はこの方法は必要ありません。本文の一番最初に記載するだけでOKです(いの一番に文章よりも先に記載する、という意味ではありません。「本文」に掲載されていればOK)

> width属性 と height属性 が付いてきますが、そのまま残しておいても構いません。どのみち打ち消されます〜

この意味は、例えば

<img src="アドレス" width="1000" height="500" style="width: 500px; height: 250px;" alt>
とあった場合、画像の表示は1000×500ではなく500×250になりますよ、という意味です(単位はpxです)

htmlのwidth, height属性とCSSのwidth,heightプロパティは意味が違います。
htmlというのは主に意味や構造を司りますが、実態化されるわけですから「形」を無視できません。主に「横に並ぶか縦に並ぶか」など「段組み」「基本レイアウト」がそれです。それをCSSで「縦並びを横並びに整形」「文字を大きめに変更」などスタイリングをしていくわけです。
htmlは一旦元の基本レイアウトを踏襲してレイアウトを組んでいきます。その際に画像のimg要素の「width, height属性」は 表示領域の確保 が行われます。まず画像が表示される「場所」を作ります。width, height属性はそのための指定です。これがあると基本レイアウトが円滑に運びます。画像は「原寸, 自身のサイズ」というのを持っていますが、それは画像にアクセスしないと不明ですよね。width, height属性は画像にアクセスしなくとも画像と同じ縦横サイズを指定しておくことで領域だけ先に確保できて後のペイントに遅延や悪影響が出にくくなる、という理屈です。

CSSのwidth, height属性は「領域」の指定ではなく「画像そのもののサイズ」を指定します。なので意味が違うんです。
昔のwebというのは「レスポンシブ」の概念も無ければ「スマートフォン」「タブレット」というデバイスも無く、強いて言えば「小さめのパソコン」と「大きめのパソコン」があるだけでした。
なので基本はwidth, height属性には画像の原寸を指定して、仮に記事領域からはみ出してしまう場合には 画像の原寸自体を変更する(画像編集) というのが一般的でした。はみ出すなら小さく加工すれば良い、という考え方ですね。
ところがレスポンシブデザインは320pxのスマホから2000pxといった極端に異なる画面サイズ全てに対応しなければいけません。となると「原寸を加工する」という考え方自体が無理ですよね。
なのでwidth, height属性の利点が消されてしまうけれども、width, heightプロパティでもってリペイント(再描画)をさせる、というのが現在の一般的な手法です。
難しいですかね。大丈夫かな ^^;

とにかくhtmlのwidth, height属性とCSSのwidth, heightプロパティが違う、というのと、属性の方は値なしは認められず属性なしにするか値あり属性(原寸指定)を残しておくかのどちらかです。属性なしの場合は領域確保が行われずDOM(html全体)のリフローとリペイント(再計算, 再描画)が行われます。属性を残す場合は一旦は領域が確保され、その後リフロー・リペイントが行われます。どちらも大差ありません。リフロー・リペイントは良くはありませんが、レスポンシブデザインでは避けられませんので気にしても仕方がない ^^;


> 通常通り表示させたいサイズ指定をするべきでしょうか。(例、width="600" height="auto"といったように)〜

それが望ましい形ですが、お伝えしたようにレスポンシブデザインでは不可能ですから値の変更は無駄な努力になります。そしてhtmlのheight属性にautoの値は指定できません。「領域の確保である」と理解できれば理由はわかると思います。autoというのは「未定」と同義なので、事前指定であるはずのheightが未定では領域はつくれませんよね。この場合の「未定」というのは「横のサイズと横・縦のアスペクト比が不明なら計算できない」という意味です。なので結局実物(img)を見て、サイズを確認し、そのwidthからheightを割り出す、という作業になってしまいますからレンダリングの効率化どころか逆に邪魔でしかありません。

わかりにくい点がありましたらご指摘くださいね。

あと、bonさんホントにどうぞお気になさらず。コメント欄を読みに来る方も結構多いですよ。
質問内容が的確だと読む方にとって大変有益な情報になります。今回のご質問も知りたいと思っている方は多いはずです。なので誰かの役に立っている、貢献しているはず :)

2020/04/11 (Sat) 19:08
bon
To Akiraさん

こんばんは。優しいお言葉を頂けてホッとしました。ありがとうございます。
またお聞きしたいことが増えてしまいました。何か、追求しているように聞こえてしまうかもしれません。そのようなつもりはないことを、最初にお断りしておきたいと思います。私は、Akiraさんのおっしゃる通りにしたいだけなんです。

【画像の掲載のしかたについて】
私はFC2で新しいブログをはじめるにあたり、記事を増やしてから間違いが見つかっては後で面倒なことになるので、最初にちゃんとしたいと思っていて、Akiraさんのブログを全部ではありませんが、たくさん読ませていただきました。
その中で

https://vanillaice000.blog.fc2.com/blog-entry-715.html
この記事を参考にして、メインとなる画像は横幅1200pxにするようにしています。(うっかりして、できていないのもあるかもしれませんが…)

https://bon3te.fc2.net/blog-entry-15.html
この記事ですと、ちょうどメインの画像が最初にきています。本文の部分に、概要文とメイン画像が置かれており、OGP画像としてOKで、これが理想の形なのかなと思っています(違うでしょうか)。
【追記です】ごめんなさい勘違いをしておりました。メイン画像は最初にきていますが、追記に入れておりました。【追記ここまで】

ところが、メインとなる画像が、順序的に1番目に来ない場合があります。例えばこちらの記事ですが
https://bon3te.fc2.net/blog-entry-11.html
メインとして横幅1200pxにしたお蕎麦の画像は、上から4番目になっています。つまり追記に置いてあります。この場合、記事の「メタタグ編集」で「アイキャッチ画像」に選択することで、OGP画像になるということですよね。しかしAkiraさんがお返事に書かれているように、
>「本文に掲載されていないけどOGP画像」ということになりますので、RSS配信なし・FC2ランキング反映なしになります。

これは理解できました。
こういった場合に
https://vanillaice000.blog.fc2.com/blog-entry-183.html
こちらの記事に書かれているような、
>サイズを 0 × 0 で掲載します
>それだけ(笑)
>あるいは display: none でもOKです

これをすることで、
>「本文に掲載されていないけどOGP画像」

というのを解消できるのかと思ったのですが、違うのでしょうか。
(このブログ記事は、FC2ブログにメタタグ編集(アイキャッチ画像指定)機能が登場する前に書かれたものなので、今はやらなくて良いのでしょうか。)

画像についてもう一つ不明な点があったのですが、こちらはお返事を読んでいて解決しました。
上記で、アイキャッチ画像は1200px必要!というのを勉強しました。
現在は、横幅1200pxにした画像をTinyPNGで容量削減したうえで、
https://vanillaice000.blog.fc2.com/blog-entry-937.html
に掲載されております
><img src="" alt="" style="width: px; height: auto;">
このHTMLを使って、width: 600px; height: auto(縦長画像の場合はwidth: 400px; height: auto)で掲載しております。
(メインではないその他の画像は、掲載サイズに縮小してそのまま載せています)

ところが
>htmlのheight属性にautoの値は指定できません
とお返事をいただいて、エッと混乱してしまったのですが…

私は、
>「本文に掲載されていないけどOGP画像」(追記に入ってしまったメイン画像)

これを、本文側に

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

こうして載せることで、本文に表示はさせないが、OGP画像として認識させることができ、RSS配信なし・FC2ランキング反映なしを打ち消せるのかと思い、その場合に横幅のサイズ指定はどうしたら良いのだろう?と思ったのが、今回質問をさせていただいたきっかけでした。これについては、Akiraさんが見本として書かれたHTMLが
>width="" height=""

となっているため、私が「""に何か数値を入れないといけないのかな」と勘違いをしてしまいました。これは
>FC2ブログエディターのツールを利用した場合には width属性 と height属性 が付いてきますが、そのまま残しておいても構いません。どのみち打ち消されます。

とあるのですから、原寸のwidth属性とheight属性のことですよね。あくまで見本だから""なのだとお返事を読んでいてわかりました。

画像サイズ指定する場合の
><img src="" alt="" style="width: px; height: auto;">

こちらの「height: auto」とは意味が違うってことですよね。やっとわかったかもしれません(違いますか??)。

的外れなことをおたずねしてしまったのかもしれません。ごめんなさい。

>htmlのwidth属性とheight属性に空の値は認められていません(alt属性は認められていますので混同しないよう注意です)

はい、混同していました。
>属性なしにするか値あり属性(原寸指定)を残しておくかのどちらか

承知いたしました(^^ゞ

概要文につきましても、冒頭の90文字が大切ということで、意識して書くようにしております。Akiraさんのブログを読まなかったら知らなかったことでした。

説明が不足で意味がわからんわい、ということがあるかもしれません。申し訳ございません。最初のほうの、メインの画像だが追記にある場合どうすれば良いのか?という点、他にわかってないなと思われる点がございましたら、ご指南いただきたく存じます。
よろしくお願い致します。

2020/04/11 (Sat) 21:44
vanillaice (Akira)
Akira
To bonさん

> メインとなる画像が、順序的に1番目に来ない場合があります。〜解消できるのかと思ったのですが、違うのでしょうか。〜

はい。そういうことです。その解釈で合ってます。サイズ0やdisplay: noneの手法というのは

・順序をどうしてもゆずれない場合(本文に画像を掲載できない, 本文に掲載できても最初の1枚目にはできない など)
・記事に画像を掲載したくないけれどトップページサムネイルやOGPは必要

こういった場合の対処法です。さきほどの話ですと「本文から追記に移動させている〜」ということでしたので、「本文に掲載しても問題が無い場合はそのまま残す方が良い」とお返事しました。
この対処法だと「画像を掲載しているがユーザーに見えないようにしていることがGoogleには伝わる」点、「見えない画像だけれどアクセスは行われるので負荷はかかる」点などがデメリットです。アイキャッチ指定で記事内に存在しない画像を指定する場合は個別記事での画像読み込みは行われません。

なので残せるならば残した方が良いよ、という意味ですね。順序や文脈との関連はbonさんにしかわかりませんので、bonさんご自身で判断を行ってください。先回も書きましたが、この対処法は「最終手段」であって正攻法ではありません。FC2がアイキャッチ画像の配信を改善してくれると一番良いんだけど。特にFC2ランキングは自社サービスなんだからアイキャッチも対象にすれば良いのに ^^;

-----
> <img src="" alt="" style="width: px; height: auto;">このHTMLを使って、width: 600px; height: auto(縦長画像の場合はwidth: 400px; height: auto)で掲載しております〜ところが〜autoの値は指定できませんとお返事をいただいて、エッと混乱してしまったのですが…〜

もう一度「属性」と「プロパティ」の違いを説明します。heightにauto値を指定できないのは html属性の方 です。

×
<img src="アドレス" width="数値" height="auto" alt>


<img src="アドレス" style="width: 数値px; height: auto;" alt>

そのページに記している内容の主旨というのは「作業を楽にするために辞書登録を活用しましょう」というものです。そして冒頭付近で説明したとおり 辞書登録はバイト数制限があるので簡略化して登録しなければいけませんよ ということで、雛形としては

<img src="アドレス" width="数値" height="数値" alt>

ではなく

<img src="" width="" height="" alt>

としておきましょうね、ということです。「見本だから」という理由ではなく、バイト数を使い切らないように極力余計なものは書かずに登録するので、最低限「どの部位に」「何を書くか」の知識は必要です、という説明をしています。そしてwidth属性height属性は全画像で同じ数値なはずはありませんので雛形に数字を書くわけにもいきませんよね。

と、ここまで読んで最終的にbonさんが「もう理解できた」と知りました(笑)
文章を読みながら書いたので蛇足説明がたくさんになってしまいました(笑)

せっかくなので混乱しがちな点をまとめると

【値を省略しても良いとされる属性はごく限られている】
例) alt属性, disabled属性, async属性 など。この場合は
disabled=""
の書き方でも
disabled
だけでもOK。本来の書き方は
disabled="disabled"
です。

altはちょっと特殊ですが、属性名が値と同じ場合などは省略可能になっています。例にした disabled属性は「無効化する」という意味で、その属性があるだけで「無効にるすのか」の指定であることが明白であり、属性名自体が「無効」という意味ですからデフォルト値は当然「disabled」(無効)です。
asyncも「非同期通信を行うか」の指定でデフォルトは「async」(非同期通信を行う)です。これらは値を入れなくとも通じるんです。
でもwidthやheightといった属性はそういうわけにはいきませんよね。なので値省略は不可です。img要素のwidth, height属性はalt属性のような必須属性(必ず書かなければいけないルール)ではありませんので、必要がなければ「書かない」という対処でOKです。

altの場合は、ロボットは画像に何が写っているかまではわかりませんので探ろうとします。どうやるかというとalt属性を頼りにします。alt属性が「無い」となるとロボットは困ってしまい、「何の画像かわかりません」と結論を出すしかありません。
一方alt属性の「値無し」の方は「altに内容を記載するほど重要な画像ではないよ」と明示することでロボットは「あぁ、さほど意味の無い画像だから探る必要はないのだな」と判断できます。
alt属性そのものが無い --- 無視するしかなくなる
alt="" または alt と値を無しにする --- (筆者の意図を汲んで)安心して無視することができる

ですから「属性なし」と「属性の値なし」とは全く意味が違ってくるんですね。

【属性とプロパティの違い】
width="数値" --- html属性とその値
width: 数値px; --- CSSプロパティとその値

<img src="" style="width: 数値px; height: auto;" alt>
とある場合は htmlのスタイル属性の値にCSSを書いている という状態で、これを インラインCSS と言います。htmlに : (コロン)は使いませんので、これが有ればCSSと判断することができます。
htmlとCSSの名称が同じで混同するものはwidth, heightぐらいですのでご安心ください(笑)

言われた通りの作業をするのは簡単ですし時間もかからないんですが、「意味」を理解しないと同じつまずきを何度も繰り返したり類似質問を何度もすることになります。なのでできるだけ理解をし、応用できるようになるのが理想です。
頑張ってください (o'ω')ノ

2020/04/11 (Sat) 23:46
bon
To Akiraさん

こんにちは。お返事ありがとうございます。質問のお返事にも時間がかかると思います。何度もご対応下さり、本当にありがとうございます。

さて、【アイキャッチ画像の扱いについて】
現在コメントしているこの記事にAkiraさんが書かれていることによれば…
メインとなる画像が順序的に一番目に来ない場合に、FC2メタタグ編集でメインとなる画像を指定することによって、

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

ということでした。
そこで、サイズ0やdisplay: noneの手法 で本文側にもにメイン画像を「見えないように」掲載することにより、

× RSS配信不可
× FC2内サービスでも「ランキング」や「新着」などへの配信不可

これらの×が〇になる。ということなのですが、しかしデメリットも挙げて下さいました。
Akiraさんは、上の×が〇になるメリット、そしてそれに伴うデメリット、どちらを採るべきだとお考えでしょうか?

本来は、「本文に概要文とメイン画像、それ以降が追記に入ること」が理想であることは理解しております。

自分で考えるべきことなのかもしれませんが、どっちが重要なのかわからない身ですし、記事の構成上メイン画像が追記に入るのは多々あることで、ご意見を伺いたいです。

たとえばこちらの記事ですが
https://bon3te.fc2.net/blog-entry-15.html
本文に概要文を載せ、h2見出しから追記に記載しております。追記の最初の画像が、メイン画像です。
私の感覚では 一つ目のh2見出し までが概要文で、それ以降は追記と思ってこうしました。しかしそうなると、たとえメイン画像が画像の中で一番先頭にあったとしても、追記に入ってしまいます。この場合、概要文+メイン画像までを含めて本文に載せるほうが良いのでしょうか。

本当に、FC2がアイキャッチ設定できるようにしたのに、なぜ×の部分があるのか意味がわかりません。実際、私はすべての記事に「アイキャッチ画像設定」をつけているのに、FC2ブログアプリ記事一覧では「本文の最初にある画像」がサムネイルに表示されています。本文に画像がない場合、アプリ記事一覧ではユニコーンなんです。なんでアイキャッチ設定が無視される?って思います(^^;

【属性とプロパティの違いについて】
再度のご説明ありがとうございます。Akiraさんには無駄な骨折りをさせてしまったようで申し訳ございません。しかし、自分にとっては何度も角度を変えて説明を聞けるとても貴重な機会となり、このおかげで私は考えの整理をすることができました。
・html属性のheightにはautoは指定できない。
・width: 600px; height: auto ←これはCSSプロパティなので、height: autoの指定も可。height、widthはhtmlとCSSの名称が同じだが、pxや:はhtmlでは使わないので、そこで見分けることができる。CSSプロパティはインラインCSSという書き方によって、HTML属性の値として書くことができる。
・<img src="" style="width: 数値px; height: auto;" alt>とある場合、htmlのスタイル属性にCSSの数値を書いている、インラインCSSという。

昨日までは頭の中で一緒くたになっていて「えーどっちもwidthとheightなのにどうして」と思っていましたが、Akiraさんの説明のおかげで整理することができました。ありがとうございます。

【値の省略について】
>img要素のwidth, height属性はalt属性のような必須属性(必ず書かなければいけないルール)ではありませんので、必要がなければ「書かない」という対処でOKです。

なるほど、ですから、サイズ指定のない画像を貼る場合は
<img src="" alt="">
こうなるのですね。(つまり原寸のままということ)

alt属性については、たとえば alt="美味しそうなお蕎麦" としていたとして、ロボットが意味を理解しているわけではないけれど、それがあることで、画像に意味があることをわからせることができる。ということですよね。あと、目の不自由な方が音声でサイトを読まれる場合、alt属性が空や、画像ファイル名のままだと意味不明ですよね。
私はAkiraさんがalt属性の説明で書かれている「装飾目的など特に意味を持たない場合には値の省略(空)が認められています」というのを勘違いしておりまして、
https://bon3te.fc2.net/blog-entry-5.html
この記事を書いた当初は掲載画像を「特に意味のない画像だよね」と思って値を空にしていましたが…
Akiraさんに「alt属性を入れるようにしましょう」とご指摘をいただき、「なるほど、これらの説明画像は、 装飾目的など特に意味を持たない場合 にはあたらないからalt属性を入れないといけないな、意味を勝手に解釈していたな」と思って修正しました。

初心者というのは、「ちゃんと書いてあるのに読めていない」「読んだはずなのに理解していない」で、勝手な解釈で進めてしまう、ということが多々あると実感しています。大変ご面倒をお掛けします…

きめ細かなご指導、本当にありがとうございます。
Akiraさんに「指導した甲斐があった」「ちょっと成長した」と思っていただけるように精進します!

2020/04/12 (Sun) 11:00
vanillaice (Akira)
Akira
To bonさん

こんにちは ('0')/

> どちらを採るべきだとお考えでしょうか?〜

これはもう「方針による」としか言えないです。例えば私の場合は
・ランキングに無頓着
・RSSに無頓着
つまり双方において無頓着(笑)

ランキングは一応登録していて月に1度ぐらいは確認しているつもりですが、私の記事はいつもサムネイルがありません(笑)
客観的に見ると「サムネイル有る方が目立つよね」という感じです。でも無頓着なので実行意思が無い ^^;
なのでbonさんがこれらを重視するかしないかで決めるしかないんです。ランキングに参加していない方に「ランキングで〜」と言っても無意味ですし、個人の運営方針によって答えも変わってくるからです。

とりあえずRSSの方は説明する点が多いので順を追って。

-----
【FC2の個人設定「RSS」は「全文 + 追記含まず」を推奨】

こちらは個人設定です。
https://admin.blog.fc2.com/control.php?mode=setting&process=2#setting2

「RSSの表示件数」を「一部」と「全文」と選べます。「全文」をおすすめします。
一部にすると文章本文から120文字前後の抽出になり、画像は対象外になります。
なので画像を対象にしたい場合は「全文」設定にしておく必要があります。

「追記」を含める必要は無いと思います。RSSのデメリットは、設定によってはサイトを訪れること無く全文章を読めてしまう点です(RSSリーダーやサービスにもよります)
なので「追記は含めない」設定を推奨

【ブログ村などはOGPを参照しない】

最近のRSSリーダーやサービスはOGPを同時に参照しているものが増えていますが、ブログ村などはやっていません。RSS情報を頼りにしていますので、「ブログ村にサムネイルが出ない」原因は「RSS『一部』に設定している」というパターンが多いです。そしてFC2のアイキャッチ機能はRSS不可ですから当然情報は届きません。

RSS情報を見るにはテンプレート内ナビゲーションの「RSS」をクリックします。最初の<rdf:Seq>〜</rdf:Seq>で囲まれているのが現時点で有効になっている記事数でFC2の個人設定に依存します。8件程度をおすすめ。
Ctrl + F キー検索「imgs」で画像情報を探せます。

-----
今一番メジャーな記事の書き方は、

大判画像

序文

目次

セクション(各見出し)

という感じだと思います。各セクション内には画像があったり無かったりです。ともかく最初にまず画像を1点掲載する、というやり方が多いですね。この流れだと目次以降は「追記」へ記載、ということになります。そして今回の諸問題も解決できます(笑)
とはいえ「見た目」に関わりますのでよく考える必要はありますね。
bonさんのように「xxx店のyyyケーキ」みたいな感じで紹介していく場合、OGPは各店の商品写真ではなく関連するフリー画像で準備する、という方が多いですよ。どこか1店だけの紹介ならベストショットを代表に据える、とか。まぁ色んな工夫はできると思います。

仮にサイズ0, display: none でサムネイルを作成する場合に心配するのはやはりGoogleがどう受け取るかですよね。長く論争になっていますが現在では「display: none は極力使うべきではない」という答えで落ち着いています(サイズ0も結局同じことです)
要は「隠しテキスト」「隠しコンテンツ」の類ですよね。目に見えないものを意図的に掲載している、という状態。これはSEOの評価を下げる要因になります。最終的に「クローキング」とまで判断されると著しい下落になります。あるいはペナルティの可能性も。
画像でそこまでに至るか、と言われればまず無いと思いますが絶対とは言えません。
* クローキング = 検索botと人間(閲覧者)に異なる情報を表示させること。スパムでありガイドライン違反。
* display: none でもクリックで展開できるなどUX, UI (ユーザー利便や使い勝手)に関係していれば問題視されません。

というかね、これFC2へのリクエスト案件だと思います(笑)
「アイキャッチをRSSに〜」というのはこれも逆にGoogleの判断が危険なので、せめて「FC2ランキングなど自社サービス内では有効にしてくれ」とかそんな感じかなぁ。

結果として正攻法はやっぱり画像を素直に掲載することですよね。

-----
> なぜ×の部分があるのか意味がわかりません。〜

これはたぶんFC2がOGPを重視しているとかそんなところだと思います。良い受け止め方をすれば、です。
いや単にプログラム上の問題かも(笑)

2020/04/12 (Sun) 13:19
-
管理人のみ閲覧できます

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

2020/04/12 (Sun) 14:44
bon
To Akiraさん

こんにちは。

私もランキング上位を目指すわけでもないし、読者の方に「1日1クリックお願いします!」と要求するなんて考えたこともありません。RSSがなんたるかもよくわかりません。ただ、Googleの方針に沿うようにしたほうが良いとは思います。情報を求めて検索する人に最適な情報が届いてほしい、ということも思います。

RSSの説明もありがとうございます。Akiraさんの推奨される内容に設定しております。

今現在のブログの書き方の流行のお話も参考になりました。
確かにまず画像1枚→序文→(ここから追記で)目次・・・というサイトをよく見かけます。そしてこうすれば、今回の悩みは全て解決しますよね。

これを機に、自分の記事の書き方をこれまでと変える…たとえば一つのお店の紹介ならば、そのお店の商品のベストショットをまず掲載する。「関西の美味しいパンいろいろ」という記事であれば、まず関連するフリー画像を掲載するなど。
RSSとランキングにも画像を表示させることにこだわるならば、工夫次第でなんとでもなりますよね。
サイズ0, display: noneはリスクもあるし、そこまでしなくてもいいなぁと思いました(^^;
それか、RSSやブログランキングはユニコーンでもええわ、と割り切り、記事の書き方は現在のままでアイキャッチ画像は設定する。ということですよね。私にはこっちのほうが合っているかもしれません。
どれを優先するかはブログ管理人の方針と思うのですが、その判断基準もわからなかったので、今回お話を聞けてとてもよくわかりました。ありがとうございました。

昨日から長い間お付き合い下さり本当にありがとうございました。
今後とも、よろしくお願い致します(*^^*)

追伸
今FC2リクエストを覗いたところ、ちょうど同じ要望(アイキャッチをランキングや新着記事に反映してほしい)が出ていましたので、賛成を押してきました。
それとコメント返信ですが、私は管理画面の他ブログへのコメントβ版はその存在もAkiraさんのブログで知ったくらいで、不慣れなこともあって見ていません。自分からお返事を覗きにきていますから、Akiraさんのやりやすい方法でなさってくださいね。

2020/04/12 (Sun) 14:46
vanillaice (Akira)
Akira
To ブログ村OGPの件 内緒さん

こんにちは。

ご指摘とお叱りをありがとうございます :)

> ご自身が詳しくないことは、他人に向かって「断言」をされないほうが、よろしいのでは〜私からの指摘があったということについては、伏せていただいてけっこうでございます。〜

はい。肝に銘じようと思います。

2020/04/12 (Sun) 16:46
vanillaice (Akira)
Akira
To bonさん(重要)

ひとつ訂正させてください。
ブログ村なんですが、現在はOGPを参照しているそうです。他の方から教えて頂きました。
調べたところ2019年に改正があったそうです。
誤情報を訂正し、お詫び申し上げます。

となるとアイキャッチ画像でも良いのかな、という気はしますよね(笑)
つか、世に倣ってOGPで取れば良いじゃんね。FC2も (´・ω・`)

コメント返信の件もお気づかいありがとうございます :)

2020/04/12 (Sun) 16:50
bon
To Akiraさん

こんばんは。ご丁寧にありがとうございます。私はブログ村には関わったことがないので、そうなんだなぁ、と参考に読ませていただきました。ので、影響は何もありません(^^)し、前回のお返事時と考えは変わりません。メイン画像だからといって文脈に合わないものをわざと先頭に置くこともないと思います。そのかわり、アイキャッチ画像指定は忘れずにやりますね。

Akiraさんがおっしゃる、
fc2ブログはユーザーの自助努力でここまできた
というのが何につけても感じられますよね^^;

お忙しいところ、終始丁寧にご対応下さり本当にありがとうございました。

2020/04/12 (Sun) 18:36
vanillaice (Akira)
Akira
To bonさん(終了のご報告)

bonさん、こんばんは ('0')/
ごめんなさい。私bonさんのこのコメント見落としておりました (*_ _) そしてお返事不要です。
こちらこそ誤情報などで手間取らせてごめんなさいね。お疲れ様でした :)

2020/04/14 (Tue) 20:19

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

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ