FC2ブログ「アイキャッチ画像」機能を利用する際の注意点

vanillaice (Akira)

vanillaice (Akira)

既に一度記事にはしておりますけれども 改めてまとめます

【ブログ】記事の見出し画像をお好みに!アイキャッチ画像の設定が可能になりました!

こちらの機能を利用する際に知っておくべき大きな注意点があります


アイキャッチ画像機能を使わないほうが良いであろう と思われる方は以下の通り


・facebookやTwitterなどの SNSシェアを重要視される方
・RSS取得(xmlパース)を利用した 新着サムネイルリストなど を掲載されている方


上記に該当する方は読んでくださいね (●'0'●)/

追記
現在ではOGPのimageに設定されるようになっています。
以下の本文は SNSシェア の概念を取り除いて RSS に注視してお読みください。

------- 以下本文


この「アイキャッチ画像」のシステムですが
FC2外部へ画像情報が発信されません
外部へ発信 というのは
SNSシェアもそれにあたりますし RSS配信も同様です
アイキャッチ画像機能はFC2サーバー内の補完処理のみですので

・facebookにシェアをしたけれども 何故か画像がNo image
・新着サムネイルが何故かNo image


といったことが起こります


「アイキャッチ画像」とは


いわゆる「サムネイル画像」のことです
「サムネイル」を言い換えると「アイキャッチ」
FC2に於ける「アイキャッチ画像指定」とは

サムネイルとして表示させる画像を任意に選ぶ機能

ということになりますので 一般的なアイキャッチという名称がそのまま機能名称にもなっています



まずFC2に於ける「サムネイル画像」ですが
トップページが要約表示の際に多く使われます
他にも「関連記事リスト」「検索結果」などでも利用されます

サンプル (Corridorテンプレート トップページ)



左側の泳ぐ女性の画像は「アイキャッチ画像を選択する」という
記事作成時画面の下の方にある設定を利用しています
右側のカップル画像は 記事内に直接画像を貼り付けています

アイキャッチ画像設定




FC2ブログ と RSS それぞれのサムネイル取得条件


■ 以下はFC2ブログのサムネイル取得です ■

「本文の編集」内で一番最初に掲載されている画像が対象 (追記掲載の画像は対象外 本文掲載でも2件目以降は対象外)

● 本文一番最初の画像が「FC2ツールバーの絵文字」の場合には無視される

● 画像アップロード時のファイル名称に半角カッコ () が含まれる場合は取得されない
12345.jpg --- 取得できる
123(45).jpg --- 取得できない

● 自分のFC2ブログサーバーへアップロードしたもののみ有効 (同じFC2ブログでも別アカウントサーバーは対象外, FC2外部のサービスからの直リンク掲載も対象外)


上記がFC2の仕様であり 注意点です
一番最初の画像がFC2ツール以外の絵文字 (絵文字も「画像」です こういうの → )
絵文字については class="emoji" を追加するとサムネイル対象から外すことができますので 小技として覚えておいても良いと思います

例)
<img src="絵文字画像" alt="" class="emoji">
--- サムネイル対象
<img src="絵文字画像" alt="">
--- サムネイル対象

■ 以下はRSS新着サムネイル(RSS配信)のサムネイル取得です ■

「本文の編集」内で一番最初に掲載されている画像が対象 (追記掲載の画像は対象外 本文掲載でも2件目以降は対象外) --- FC2と同じ

● 本文一番最初の画像が「FC2ツールバーの絵文字」の場合でも無視されない --- FC2と異なる

● 画像アップロード時のファイル名称に半角カッコ () が含まれる場合でも取得される --- FC2と異なるが基本的にファイル名にハイフン, アンダースコア以外はおすすめしません

● 自分のFC2ブログサーバーへアップロードしたもの以外も有効 (FC2外部のサービスからの直リンク掲載も対象になる) --- FC2と異なる


RSS新着サムネイルというのはこういうの ↓



新着記事+サムネイル表示
というものですが これは FC2の公式機能ではありません
FC2ブログでは「新着記事リスト」を掲載することはできるのですが
各々の記事の「サムネイル」を取得する変数がありません
早期実装お願いします(笑)
というわけで RSSとして外部へ発信された内容をFC2へ再取り込みしています
私はGoogle提供のAPIを導入していますが
外部プラグインサービス
・複眼RSS
・Milliard
なども同じシステムです


「アイキャッチ画像」設定を使うのはどんな時か


主に上記に記したサムネイル取得条件と合致しない場合です

● 記事内に画像が数点あり 一番最初の画像以外を指定したい時
または 記事内には存在しない画像をサムネイルに用いたい時

● そもそも 記事内に画像を掲載したくはないが トップページなどのサムネイル表示は必要な時

● 本文最初の画像がFC2以外の絵文字の時


こんなところかと思います
アイキャッチ画像設定を使うと具体的にはこうなります ↓

トップページ --- サムネイルあり


個別記事


対象記事内に指定した画像は出てきません
この機能を「使いたい」と思ったとき(サムネイル取得条件をクリア出来ない時)は
簡単に画像を指定できますので大変便利ですが
当該記事で最初に述べたように この方法では 外部への配信が行われません
SNSシェアがNo imageになるのが嫌
RSSサムネイルがNo imageになるのが嫌
という方は この機能を使わない方が良いですね (´・ω・`)

これはFC2の「不具合」「調整不足」「設計ミス」というわけでもありません
本来「アイキャッチ」というのは 記事内にどんな画像があるのか知ってもらう
というのが一番
場合によっては 同じカテゴリの記事は同じサムネイルで揃えたい
なんてのもあるかもしれませんが それはまた特殊な使い方例です
記事内に無い画像など情報として発信しなくても良いんです(と私は思う)


対策


おすすめしております通り サムネイル対象画像を
「サイズ 0✕0 掲載」あるいは「display: none; を指定して非表示」
このいずれか
display: none は文字数多いですし 使いどころもしっかり理解するべきCSSプロパティですので
0✕0が簡単でおすすめ

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


10月中旬 あるいは下旬になると思いますが
ヒーローヘッダーを利用したテンプレートを申請予定です
お使い頂く前にしっかり覚えて欲しい「アイキャッチ画像」指定の仕様でございます
こんな感じになる予定 (ぼかし掲載 ^^;) ↓



こういうタイプはサムネイルを理解していないと利用が厳しい気がする (●'0'●)/


まとめ


よくある困りごと

QトップページサムネにもRSSサムネにも画像が出ない

A本文ではなく追記に掲載されていませんか?

Qトップページには出ないRSSには出る

A外部直リンクです

Qトップページには出るRSSには出ない

Aアイキャッチ画像機能を利用していませんか?

Qアイキャッチ機能は使っていない トップページには出る RSSには出ない

ARSS設定が「全文」になっていないためです

Qアイキャッチ機能は使っていない 直リンクもしていないのにトップページに出ない RSSには出る

Aファイル名称にカッコが付いていませんか?
You may also like
Posted byvanillaice (Akira)

Comments 21

There are no comments yet.

-  

管理人のみ閲覧できます

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

2018/03/10 (Sat) 21:30 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/03/11 (Sun) 00:24 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To No imageの件 内緒さん

こんばんは。

えっと。まずですね、その作業の意味を理解しているか
というところから始めましょう。
なんのために0サイズ掲載をするのか、というところ。その意味がわかってるかどうか。

・作業の意味(意義)を理解している
・RSSのことを知っている・気にかけている

上記2項目に当てはまらない、あるいは「意味がわからん…。」の場合にはやらなくて良い作業です。
先日お伝えした「アイキャッチ画像」の指定でサムネイルがNo imageになるのを避けられるわけですから、RSS対策と無関係ならば無理にする必要はないですよ。

この件お返事待ちでお願いします。
もちろん「RSSってなんですか?」でも良いんだけども。
内緒さんには不要な作業のように思います (´・ω・`)

2018/03/11 (Sun) 00:40 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/03/11 (Sun) 11:18 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To RSSの件 内緒さん

RSS = Rich Site Summary(リッチ サイト サマリィ)またはReally Simple Syndication(リァリィ シンプル シンディケィション)

これは「閲覧者側」の利便に関わる機能です。ブログ管理人でなく。
内緒さんがお使いのMessageテンプレートでは、グローバルナビゲーション(ブログ説明文下のリンクの集合体)の虫眼鏡マークの右側に RSS とありますよね。
これを閲覧者さんが押すのは「読者登録」をするためです。
閲覧者がRSSリーダーに内緒さんのブログを登録すると、内緒さんが記事をUPする都度登録者に新着のお知らせが届きます。

RSSリーダーは「テキストのみ」というのが多いですが、最近ではサムネイル画像も抽出して見栄え良く配信するサービスも増えています。
参考記事
https://vanillaice000.blog.fc2.com/blog-entry-567.html

内緒さんが「読者登録をしてもらう」ことに関心があり、登録者の利便を考慮したいというのであればアイキャッチではなく0サイズ掲載の方が親切かもしれませんね。
ただ最近のこの手のサービスはRSSの内容だけでなくOGPも参照していますので、アイキャッチで指定した画像もちゃんと出てたりしますけどね (´・ω・`)

RSSはこうしたサービスを経由して個人利用する場合もありますし、先日おすすめしたlivedoorのそれなんかは自分のブログに他ブロガーの更新情報を載せるために利用します。
参考としてFC2ブロガーのぼっちんさんのページ ↓
https://oops0011.blog.fc2.com/page-0.html

「気にしてるブログのRSS更新情報」とサイドメニューにありますよね。これのことです。
livedoorの「相互RSS」というプラグイン(ブログパーツ)ですが、こちらはサムネイルは出ません。

他にもRSSの情報をJSで内容解釈し、自分のブログ内で他者ブログの更新を掲載している方も居ます。
そういうのを一般的に「xmlのパース」と言います。RSSのパースでも良いんですが。
パースをサムネイル付きで行う方も居ますので、その場合にFC2ブログのアイキャッチ画像設定では相手方に画像の配信ができないよ、というのが本記事の内容です。

ちょっと難しいかな。わかるかな? ^^;

2018/03/11 (Sun) 16:25 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To RSSの件 内緒さん②

内緒さんたぶん「OGP」もご存知ないかもですね。
yahooブロガーさんはその辺り結構無関心な場合が多いので仕方が無いよねぇ (´・ω・`)

OGPというのはこちら ↓
https://vanillaice000.blog.fc2.com/blog-entry-297.html

現在ではFC2ブログの個人設定でこのOGP設定が可能です。で、内緒さんは未設定なのでどうなるかというと、誰かが内緒さんの記事を「シェア」した場合にサムネイル画像の添付が行われません。
Twitterの場合は記事タイトルと記事のリンクが表示されるだけ。
Facebookの場合はサムネイル画像の指定が無いのでページ内にある一番最初の画像、内緒さんの場合にはテンプレートの上部にあるお花の水彩画が出てしまいます。

OGP設定ページ
https://admin.blog.fc2.com/control.php?mode=setting&process=2#meta_tag
メタタグの設定「OGP設定」を有効にすると正しいサムネイルが表示されます。
Twitterの場合は個人IDが必要ですので上記参考記事を見ながら設定してください(テンプレートhtmlを編集することになります)

2018/03/11 (Sun) 16:35 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/03/12 (Mon) 06:07 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To RSSの件 内緒さん(重要な内容あり)

こんにちは (o'ω')ノ

シェアが0%とは思わない方が良いですね。SNSボタンがあるということはシェアが許可されているという暗黙の了解ですので絶対とは言い切れません。

で、以前に「スマートフォン閲覧でスマホ版が出てしまう件」についてご質問を受けたと思います。
?sp を付けると確認できますよ、というあの要件ですが覚えておいででしょうか。
先日もお伝えしましたが、内緒さんの設定は「スマホ版を表示する」になっていますのでレスポンシブになっていません
当初の方針を変更して敢えてそうしているのならば何度もお知らせする必要が無いのでその旨お伝えください。
「重要」はこのことです(笑)
よろしくお願いします。

2018/03/12 (Mon) 17:52 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/03/12 (Mon) 23:45 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To スマホ版非表示の件 内緒さん

確認しました。スマホでもMessageテンプレで表示されるようになりました。
お疲れ様でした。

> やり方が難しいので記事タイトルと記事のリンクの表示だけでもいいです〜

シェアアイコンを押すだけで勝手にリッチリンクでシェアできますよ。そのためのOGP設定です。

2018/03/13 (Tue) 00:41 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/03/14 (Wed) 03:50 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To シェアアイコンの件 内緒さん

> シェアアイコンは画面下にある鳥のマークですよね?〜

そうですね。と言っても「シェアアイコン」というのは各SNSへシェアするものですから「鳥のマーク」イコール「シェアアイコン」ではないですけどね。
「鳥のマーク」は「Twitter用シェアアイコン」です。
細かいことを言うようですが他所での質問時などに誤解を招かないようにお伝えしています。
なるべく用語は正しく (´・ω・`)

内緒さんは既にOGPを設定しており、Twitterシェア(「する」側ではなく「される」側として)は考慮しないということなので、後は何もする必要無いですよ。
現在の内緒さんの状態
・Facebook, Pinterest, Google + に誰かが内緒さんの記事をシェアした場合 = リッチリンク
・誰かが内緒さんの記事をブログカード掲載した場合 = リッチリンク
になってます。これは内緒の利便ではなく閲覧者利便です。

* ブログカードというのはこれです ↓
https://vanillaice000.blog.fc2.com/blog-entry-677.html

「Font Awesomeの〜」というタイトルで枠で囲ったリンクがありますよね。これのことです。
FC2ブログには「転載」というシステムはありませんので、他者のコンテンツを引用する際にはコピペ厳禁、ブログカードか通常のテキストリンクか、または引用タグ(blockquote)を利用した上でリンクを記すか。
ここは諍いになりやすいのでルールに則った使用をされると良いですね。
(Yahoo!感覚で行うとトラブルになります)

2018/03/14 (Wed) 14:21 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/03/15 (Thu) 02:28 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To 引用の件 内緒さん

こんにちは (o'ω')ノ

前にもお伝えしたんですが、内緒さんの知識量やそのあたりのことがわかりませんので、どこからどこまで説明したものやら。
なので若干失礼になってしまうこともあるかと思いますが、yahooしかご経験が無いということで「初心者」であるという前提でお話ししますね。
中には「そんなことぐらい知っとるわ。」とムカっとくることもあるかもしれません。その際はご容赦くださいと予防線を張っておく(笑)

------
> フェイスブックやツイッターなどのシェア出来るマークのものをシェアアイコンなんですね〜

そうですね。「シェアアイコン」は総称ですので特定のサービスでの動作だけを言っているのではありません。
各社のブランドアイコンを「シェアするためにクリックする」ので「シェアアイコン」と表現します。

------
> 他社のコンテンツを引用の場合コピペはダメなんですね〜

これはもう絶対ダメですね (´・ω・`)
yahooブロガーさんの移転で一番気をつけるのはここだと思います。
特に「装飾」なんかをしていらした方は「コピペで掲載する」というのが当たり前になっていますが、原則としてそれは「してはいけない」行動です。
yahooブログはhtmlがほとんど利用できるエディターシステムになっていませんので、それゆえに
① htmlローカルファイル作成

② ブラウザで表示

③ ブラウザ表示をコピー&ペースト
という段階を踏みますが、FC2ブログはローカルファイルなど作らなくとも直接ソースコード掲載ができます。

で、いわゆる「素材」なんかでも「コピーでお持ち帰りください。」としている方が多いですよね。
でもその「コピーで持ち帰る」ことによって何が起こっているのかわかっている人って少ないんです。
そしてコピーで持ち帰ることに対して何の疑問も持っていない。ここは問題だなぁと思います (´・ω・`)
こういう流れがあるもんだから、yahooの方ってなんでもかんでもコピーで済ませようとするでしょう?
でもそれはweb一般ではかなりイレギュラーというか、問題行為とされることが多いです。

あるページからコピーを行い、その内容をペーストした場合。
コピー内容に「画像」が含まれていた場合にはその画像もペーストされます。
ですがその画像はコピー元の管理人のサーバーへ直リンクです。
人様のサーバーに勝手にアクセスしているわけです。
もちろん本人が「良いよ」と言えばそれで良いんですが、それを良しとする人はほぼ居ません。従ってこれは迷惑行為。
yahooでコピペに慣れてしまった方が気軽に見ず知らずの方のページでコピーを行い、その内容を自分のブログに掲載した場合、根本的にそれはパクリであり著作権侵害です。

コピー&ペーストという動作そのものに問題があるわけではなく、ペースト後の文章にどのような処理をするかが大事です。
引用元をぼやかさない
これですよね。引用すること自体は「悪」ではないんです。引用の元を不明瞭にするのが悪。

・明らかな引用元がある場合には必ず出典として相手方のリンクを掲載する。
・OGPで設定しているもの以外の画像はコピーなどで盗用しない。
(OGP画像は基本的に直リンクになります。OGPが設定されているということはシェアの暗黙の了解と捉えて良いと思います)
・コピーした文章は<blockquote>タグで囲い、自分の文章でなく第三者から引用していることを明示する。

これらは絶対必要ですね。文章や画像だけコピペ掲載したらそれはパクリなので、原文を書いた方は怒ります。当たり前の話しですが。
yahooブロガーさんは引用元をぼかすのが得意ですよね。
なんでだろう??って思う。いつも(笑)
他人の知識や文章を自分の手柄にしちゃダメだよね (´・ω・`)

一旦投稿します。

2018/03/15 (Thu) 15:50 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To 引用の件 内緒さん②

FC2ブログには2種類のエディターがあります。
「旧投稿画面」と「新投稿画面」です。
内緒さんの記事を確認しますと、恐らく利用しているのは「旧投稿画面」ですね。

旧投稿画面 --- 初心者から上級者まで幅広く使える「htmlエディター」
新投稿画面 --- 初心者向け「WYSIWYGエディター(ウィジウィグ, 見たまんま編集)」

yahooのエディターに近いのは新投稿画面の方です。コピペの特徴もyahooのそれに近いです。
旧投稿画面の方はコピペしてもhtml内容が取り除かれますので上のコメントで書いた「画像コピペによる直リンク」などは発生しません。新投稿画面の場合は発生します。

旧投稿画面だと仮定して、上部のツールバーに Q のアイコンがありますよね。左から数えて9番目のアイコン。
それが「引用」に使うためのものです。QはQuote(引用)の頭文字Qです。
誰かの文章をコピペしたら、その内容をドラッグ選択状態にし、Qアイコンを押してください。
そうすることで「第三者の文章を引用している」ことがわかるようになります。
そして相手先のリンクも付けてください。
正しいhtmlコードは

<blockquote>
<p>ここに引用した文章</p>
<cite><a href="引用元のページアドレス" target="_blank">引用元サイト名</a></cite>
</blockquote>

ですが、citeタグはエディターのツールに用意されていませんので大抵の方は

<blockquote>
<p>ここに引用した文章</p>
</blockquote>
<a href="引用元のページアドレス" target="_blank">引用元サイト名</a>

こういう感じでやってるかもです。たぶん。
ともかく大事なのは「引用元へのリンクが掲載されているかどうか」です。
傍目に見て「自分の文章であるかのような誤解を招く」ような掲載の仕方はダメってことですね。

--------
> ブログカード見てみました。
あきらさんのブログカードの記事を読みましたが、出来ませんでした〜

どんな作業工程を踏まれたのかが不明ですのでこちらはスルーで良いですかね(笑)
ブログカードを使いたいと思った時・その機会が発生した時に再度お尋ねください。
今すぐにやる必要が無いので後回しで ^^;

-------
> テキストリンクとは引用した相手のブログ名をクリックすれば、その方の所に飛ぶようにすればいいのですか?〜

引用文をblockquoteで囲う、その近接に相手方ページへのリンクを設定すればOKです。
文章を引用しない場合はリンクだけで良いですよ。
例えば

このサイトが参考になります
<a href="" target="_blank">xxxさんのブログ</a>

これでも良いですね。単に「紹介」をし、そのサイトへの「誘導」をするパターン。

2018/03/15 (Thu) 16:09 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/03/16 (Fri) 03:40 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To 引用の件 内緒さん③

こんにちは (o'ω')ノ

> サーバーに負担がかかるとサーバーダウン 〜略〜 して相手のHPが表示されなくなるって事ですか

極端にアクセスが集中すればそうなることもありますね。接続不可状態に陥ります。
そこまでのケースは稀だとしても、サーバー契約内容によってはアクセス量計で料金が加算されたり機能制限を付けられたりすることもあります。

--------
> 私は新投稿画面でいつも記事を書いてます〜

えー。マジですか(笑)
お使いのブラウザを教えて頂けると助かります。
というのは文章の末尾が <br> になっていますので、これは内緒さんが意図的に改行を Shift+Enter/Returnキーで行っているか、旧投稿画面を利用しているかのどちらかだと思いまして。
もしかしてブラウザ依存もあるかもしんない。
この件は特に「問題点」とかではなく私個人の興味だけで聞いてます。ご協力頂けると嬉しい(笑)
あー。そういえばIEとかはそうだった気がする。もう忘れてたけど (´・ω・`)

--------
> 記事を全部書いたあとで「HTML表示」を押せばいいのですか?
でも、どこに<blockquote>から</blockquote>までを入れるのかわからないです。
引用する場合だけはじめから旧投稿画面で書けばいいのですね〜

いえ、そんな必要は無いですね。
新投稿画面の引用はツールバーの一番左「書式」をクリックすると一番下に「引用」というのがちゃんとあります。

① 引用文に該当する範囲をマウスでドラッグ選択状態にする

② ツールバーの「引用」をクリック

でできますよ。

2018/03/16 (Fri) 14:51 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/03/17 (Sat) 01:33 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To 改行の件など 内緒さん

> 正しい改行は、そのやり方と言われました。そのやり方が正しいのですか?〜

そうです。Enter/Returnキー押下は正しくは「改行」ではなく「改段落」です。
改行はShift + Enter/Returnキーで合ってます。

--------
> Ctrl+ C と Ctrl+ V を覚えるよう言われました〜

その方はとても親切ですね。
Ctrl+A --- 全選択
Ctrl+C --- コピー
Ctrl+X --- カット
Ctrl+V --- ペースト
この4動作は良く使いますのでショートカットを覚えておくと作業が捗ると思います。

-------
> スマホがなくてもPCからiPhoneを選べば掲示板に書き込みできる〜

UA(ユーザーエージェント)の偽装ですね。
yahooブログはスマートフォンから閲覧するとスマホ専用版で表示されます。
PC表示をクリックすることでPC版を表示するようになっていますが、あれもUA偽装です。
FC2の ?sp や ?pc はパラメータ指定なので違いますけどね。

2018/03/17 (Sat) 01:55 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/03/18 (Sun) 03:05 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To 改行の件など 内緒さん②

このあたりのことは知らなくても何ら差し支えありません。
ただ新しいことを知るのは楽しいですよね (o'ω')ノ

2018/03/19 (Mon) 02:08 | EDIT | REPLY |   
カスタマイズ Q&A 質問時の注意 テンプレート