画像にまつわるエトセトラ

画像にまつわるエトセトラ

webのあれこれ
2019/05/13 4
vanillaice (Akira)
vanillaice (Akira)
初心者向け Education Instruction Tips トラブル対処 引っ越し Yahoo!

「画像は紀元前xx年に…」なんちゃって (´・ω・`)
まつわるエトセトラとはそういうお話ではなく。画像をアップロードした「後」に何らかの失敗をする方が多い という点に気づきましたので、画像関連説明をしたいと思います。web上だけではなく社会生活に於いても「理由」と「理屈」がわかればミスを回避できることが多いからです。

アップロードした画像をファイル一覧から消してしまった

もうアップロードが済んだので、元の画像をゴミ箱へポイ。
これを行って良いのは パソコン上の画像だけ です。

例えばデスクトップにある画像をFC2ブログのアップローダーを利用し FC2ブログサーバー に記録したとします。その後パソコン上にある画像をゴミ箱に入れても構いません。

FC2ブログサーバーにある画像を記事に掲載したとします。その後サーバー内にある画像をゴミ箱に入れたらその画像は表示されなくなってしまいます。

仕組みを理解している方は「え?そんな人居る?」という感じかもしれません。ところが初心者の方は以外とやってしまうんですね。特に旧Yahoo!ブロガーさんは FC2ブログのような「アップロード済みファイルの一覧」を閲覧するシステムがありません。それ故に「パソコン内の画像を記事に掲載した後に捨てる」という作業を結構当たり前にやっていたと思うんです。その感覚で「もう記事には掲載したから〜」とファイル一覧から消去してしまうことがあるようです。

これは画像表示の仕組みを知る必要があります。

画像を表示させるにはサーバーが必要

web上で画像を表示させる時に、各個人が所有するパソコンにアクセスされるとした恐ろしいことですよね。中身を参照する、覗くということになるのですから、パソコン内を覗かれるなんてありえないと思いませんか。ですから誰でも参照できる、覗くことができる「倉庫」が必要です。その倉庫がブログサービス各社の「画像サーバー」です。

必ずどこかに「原本」を残さなければいけません。自分のパソコン内ではダメです。画像を表示させるためには、その画像が収められているサーバーに問い合わせ(request)をし、データを渡してもらい(download)、そしてようやくwebページ上に表示されます。

「画像を消してしまった」方はまずこの仕組を理解できていなかったのだろうと思います。Yahoo!の画像アップロードは「サーバーへ収める」という作業を実際には行っているのですが、直接記事内に張り付くもんですからその意識が薄いんですね。記事に掲載された時点で 原本はYahoo!画像サーバーに存在 しています。画像は記事内に貼り付けたから表示されるのではなく、原本がYahoo!サーバーにあるから表示されています。

Yahoo!では
パソコン → 記事内掲載
という手順でもう完了しているような錯覚に陥るかもしれませんが、実際は
パソコン → Yahoo!サーバー → 記事内掲載
という手順をちゃんと踏んでいるんです。

Yahoo!の場合はアップロード済み画像の一覧が見られませんので、「Yahoo!サーバーから画像を消去する」という操作自体も「記事内から消す(Deleteする)」という感覚なのだろうと思います。これも同様に
記事内 → 記事から消去
ではなく
記事内 → 記事から消去 → Yahoo!サーバーから消去
という段階です。

この段階を理解できていないので、ファイル一覧を目視可能なFC2ブログに於いて 記事内に掲載したのだからもう一覧からは不要 と考えてしまう、と。そういうことでしょうね。

「Yahoo!の画像アップロードは便利だ!優れている!」とYahoo!ブロガーさんはおっしゃるのですが、そのためにwebの知識が追いつかないってのも実はあるのですよ (´・ω・`)
ファイル一覧から削除したらもう画像は表示されない、という事実は他サービスでは常識です。Yahoo!の画像アップロードが他社より1手順少ないのは、アップロード済みのファイル一覧を見せない・操作させない方針だから です。ユーザーに権限を与えないことが結果的に作業の簡略化に繋がっているというカラクリ。

アップロード済みの画像は「使わない」と断言できるもの以外は削除してはいけない。参照する原本が消滅してweb上で表示させることができなくなる。

原則として使用済画像の「ファイル名」を修正してはならない

画像のURLというのは以下のようなものです。

https://blog-imgs-サーバー番号.fc2.com/x/y/z/xyz/ファイル名.jpg

サーバー番号 はFC2ブログ運営が割り当てますのでユーザーの任意指定は不可です。xyzサブドメイン と同じ文字列です。サブドメインとは

https://サブドメイン.blog.fc2.com/

緑部位ですね。自身のブログアドレスのこの部位を指します。これも覚えてください。でないとYahoo!ブロガーさんのお引越し時によく見られた「ニックネーム」が何の事だかわからず何度やっても引っ越せない、といったことが起こるわけです。FC2ブログのサブドメインは開設時に自身で決めた文字列で、ブログID でもあります。そして「ドメイン」と呼ばれるのが blog.fc2.com の部分です。

URLは一文字でも違えば別のもの

例えば既存の記事に

https://blog-imgs-サーバー番号.fc2.com/x/y/z/xyz/aaa.jpg

という画像を掲載している状態で、この画像の aaa の部分を変更すると表示が行われなくなります。

ファイル名をうっかり修正しそうな場面

alt属性の変更時

alt属性(オルト )は「何が写っているのか」をテキストで記すことによって、視覚障害をお持ちの方への「読み上げ機能」へ貢献したり、クローラー(検索ロボット)に画像情報を伝える大事な役割を持っています。

FC2は 旧投稿画面新投稿画面 の2種のエディターがあります。いずれもツールバーを利用して画像を掲載した場合は以下のような内容になります。

<img src="https://blog-imgs-サーバー番号.fc2.com/x/y/z/xyz/aiueo.jpg" alt="aiueo.jpg" width="横原寸" height="縦原寸" />

alt属性値として「ファイル名称 + 拡張子」が自動で出力されます。

これでは先程の例えば「音声読み上げ」で意味を為しません。「今日私は遊園地に行きました。えーあいゆーいーおー どっと じぇいぴーじー」では意味がわからない。なのでSEOに気を使うならばaltは適切に書き換えるべきです。例えば「今日私は遊園地に行きました。遊園地の観覧車に親子で乗車」とか。
* ローマ字の読み上げは「オプション」扱いではないかと思います。日本語独自の表記方法(発音の表記)なのでやはりSEOでは難ありかと。

旧投稿画面 ではhtmlタグが目視できますので貼り付けた後に手入力で修正すれば良いんですが、新投稿画面(デフォルトモードはhtmlタグが不可視)の場合は以下の記事にある手順で変更します。

アメブロの機能改善「画像の代替テキストが入力しやすくなりました」はFC2ブログでも既にできます

アメーバブログで「アクセシビリティに関するアップデート」と冠してエディターの機能改善が行われたようです。注目するのは PC最新版エディタで、画像の代替テキストが入力しやすくなりましたということで 画像のalt属性の書き直しが容易になった ようですね。...

またあるいは、ファイルアップロード時に事前に修正しておく 方法もあります。

Yahoo!ブログとFC2ブログの記事の書き方・特徴の違いと攻略ヒント

Yahoo!ブロガーさんが口々に「FC2ブログは難しい…」とおっしゃってますね。FC2ブロガーさん的には「… 何が? (´・ω・`)」という感じではないでしょうか(笑) システムの違いや慣れの問題もありますが、実際のところは どうすれば良いのか理解できていない だけで、それを「難しい」と表現しているにすぎないような気がします。...

上記記事では「先行アップロードは寧ろ便利」の章をご覧ください。これらの作業は alt属性値の書き換え のために行うものです。間違えて「ファイル名」を修正してしまわないよう注意。

ファイル名修正の機能を使うな、ということではないですよ。既に掲載済みの画像に注意しましょうね、ということです。

同名ファイルのアップロードに注意

例えば自分で書いた絵のファイル名を jigazou にしたとします。アップロード後に手直ししたい点があったので絵に書き加え、アップロードしたものを一旦削除、その後新しいものを再度同じファイル名のままアップロード。

FC2ブログでは広告表示と引き換えに利用できるCDNサーバーが存在します。

CDNサーバーというのは、原本を置く1つのサーバーにアクセスが集中しないよう、コピーを作成して負荷を分散させるシステムです。基本的には原本ではなくコピーを表示させることになります。閲覧者にとって地理的に最も都合の良いサーバーを選択します。

このコピーはいわゆる キャッシュファイル なので、一定期間は内容が保持されます。ファイル内容に変化があってもすぐに反映されるとは限りません。「新着サムネイル画像が古いままで新しいものに変わってくれない」などの問題が生じた時はCDNの特性によるものかもしれません。

困惑する場面に出会う確率を減らすために、被らないよう名称に変更してアップロードした方が良いと思います。CDNのこの特性というのは不具合ではなく特徴であり、恩恵は十分ありますので自身が上手くファイル操作するようにしてください。タイムラグは同名ファイルだから起こるのであって、ファイル名が異なる場合には起こりません。例に出したもので言えば jigazoujigazou_1 に変更するなど。

ファイル一旦削除 → 削除したファイルと同じ名称ファイルを再度アップロード
という手続きを踏む場合も
ファイル温存 → 内容修正ファイルを同じ名称で「上書き保存」
この場合も同じことが起こります。「上書き」も利用しないようにすることが対策です。

フィアル名には「ハイフン」と「アンダースコア」しか利用しない

使う記号は -(ハイフン)と _(アンダースコア)のみに自身で制限をしておくと良いでしょう。絶対使ってはいけない記号()(半角カッコ)です。

aaabbb(1).jpg

半角カッコのついたファイルはアップロード自体はできますが、トップページや新着記事や関連記事などのサムネイルとして取得されません。システム上の欠陥なのかどうか知りませんが、そういうことになってます(笑)
いずれにしろファイル名で安全に使えるのはハイフン・アンダースコアのみ、と思っていたほうが良いと思います(どこのサービスであったとしても、です)

トップページサムネイル対象画像及びOGP画像変更に注意

以下の記事を参照のこと。

記事内の画像を変更してもサムネイルが変わらないという方へ【FC2ブログアイキャッチ仕様変更】

書こうかなと思いながら長らくスルーしていた 【アイキャッチ画像】設定の仕様変更 についてです。 えっとねー、いつだったかな? 6月からFC2ブログが各機能をにちょこちょこと変更かけてたんですよね。 「… 迷走しとる (´・ェ・`)」などと思ったものです。 システムを変えてみたり戻してみたりやっぱり変えてみたり… という時期があったんです(笑) 迷走なんて言葉を使うと失礼ですね。「調整」という表現の方が良いか。 ...

アルバムへのリンクはおすすめしません

ブログ個人設定に画像ハイパーリンクをどうするか決める項目があり、その選択肢の中に「アルバムにリンク」というのがあります。これを個人的にはおすすめしない。

例えば「右クリックの禁止」をしている方もいらっしゃいますよね。画像の保存をさせないための対策だと思います。ところがアルバムへリンクしているものだから、そこから簡単に保存できるんです。アルバムリンクだけでなく、元画像を別タブで開く場合でも同じです。テンプレートの「外」に出てしまえば禁止の効力は無くなります。

例えば後々「画像拡大スクリプト」を導入したくなるかもしれません。アルバムにリンク指定しているとアドレス修正の必要が生じます。

おまけ「FC2ブログの機能名称」

ほんとどうなのかなー (∵`)
機能名称の付け方や表現が変じゃない?難しい表現・専門用語を避けようとして逆に混乱を招いているような気が…。

alt属性値の書き換えが新旧投稿画面いずれも「タイトル」になっていますが、ここは素直に「alt」「代替テキスト」にした方が良かったのではないだろうか。タイトルといえば通常は title属性 のことかと思ってしまいます。

「アイキャッチ画像」も変。アイキャッチって和製英語でしょうか。新投稿画面ではさらにわかりにくく、右側(サイドメニュー)にある「メタタグ編集」の項目の中に隠れています。これも素直に「トップページサムネイル画像・OGP画像」にした方が。メタタグ(meta要素)というのはOGPだけに利用するものではありませんし、パッと見「head情報の編集をここからできるの?」と錯覚してしまう人も居るかも(実際はテンプレートhtmlを触ることになります)

「スマートフォン版の表示設定」もそう。「レスポンシブ設定」が一番わかりやすかったと思いますけれども(笑)
「レスポンシブ」で検索すれば山ほど情報が出てきますが、「スマートフォン版非無効化」では検索意図すらわかりません。しかも設定の選択肢が「無効」だなんて表現。「スマホでブログ見られなくなっちゃうの?」と勘違いする人が居ても頷けます。「パソコン・タブレット・スマートフォンでテンプレートを共通化する」とか、長ったらしいけどこっちの方がわかりやすかろう。

他にもいろいろあるけどこのぐらいで(笑)

 4

There are no comments yet.
Orca

質問ばかりで申し訳ありません。
今回画像記事でしたのでテンプレート記事で質問しようか、こちらのエントリーで質問したほうが良いのか迷ったのですがこちらで。Akiraさんのサイトでは画像をクリックするとページ内で画像が大きくなりますよね。非常に実用的でカッコいい!
私のサイトでは別タブが開いて画像が表示されます。Akiraさんのサイトのようにページ内で画像を拡大するためには別テンプレートを使用する必要があるのでしょうか?
https://vanillaice000.blog.fc2.com/blog-entry-742.html

こちらの記事を参考にして私のテンプレートでも使用可能でしょうか?
私が使用させて頂いているテンプレートはBron-Broenになります。

2019/05/14 (Tue) 23:34
vanillaice (Akira)
Akira
To Orcaさん

Orcaさん、こんにちは。

> ページ内で画像を拡大するためには〜

私がおすすめしているのは imgix.com の Luminous です。手順に従って導入すればBron-Broenでも使えますよ。

2019/05/15 (Wed) 14:53
Orca

ありがとうこざいます!
やはり設定は1枚1枚しなくてはいけないのですね。
貴重な情報をありがとうこざいます。

2019/05/16 (Thu) 19:56
vanillaice (Akira)
Akira
To Orcaさん

こんばんは。

「設定」の意味がimg要素へのclass属性の付与、という意味ならばYESです。

2019/05/17 (Fri) 00:09

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

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

webのあれこれ