かとりぶたとあじさいの、子どもと遊ぶログ

かとりぶたとあじさい夫婦による、男子3兄弟育児での体験や、考えたことのブログ。

はてなブログの写真・画像の扱いまとめ

スポンサーサイト

f:id:masahikoh0:20180908171710j:image



はてなブログ上の写真や画像の扱いについてまとめておきます。
よく知らないと、迷うこともあります。

画像サイズの設定

記事に画像を貼る場合、サイズの設定ができます。

以下のヘルプの「画像を表示する」が参考になります。
リンクを簡単に記述する(http記法、mailto記法) - はてなダイアリーのヘルプ
簡単に以下に記載しますが、より詳細にはリンク先を見るのが良いです。

右寄せ(文章回り込み)

[ http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg:image:right]
文章を何か書きます。

http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg
文章を何か書きます。

 

右寄せ(画像の下から文章を書く)

[ http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg:image:right]
< br clear="all">
文章を何か書きます。

http://d.hatena.ne.jp/images/diary/s/sample/2004-08-20.jpg


文章を何か書きます。

写真の位置情報(Exif情報)の扱い

スマホで撮った写真には、撮影した場所の情報が記載されます。
Exif情報というようです。
Exchangeable image file format - Wikipedia
自分で記録含めて使うには大変有用ですが、そのまま他人に渡ると撮影地が正確に知られてしまうので注意が必要です。

ブラウザの「写真を投稿」機能と、「はてなブログ」アプリでは削除される

以下のヘルプに詳細がありますが、抜粋します。

スマートフォンなどの普及により、撮影日時や機種などだけでなく、撮影した位置情報が記録された写真がブログに掲載され、プライバシー上の問題となることが懸念されます。このため、はてなブログから「写真を投稿」したときのみ、写真に位置情報が含まれていたら削除するようにしました。

スマートフォンアプリ「はてなブログ」を利用して写真をアップロードする場合は、iOSAndroidともにアプリの機能として以前から画像情報を削除しています

「写真を投稿」機能を改善し、画像サイズを大きく、位置情報を削除するようにしました。また、無料ユーザーの写真容量を10倍に増量しました - はてなブログ開発ブログ

「写真を投稿」は、ブラウザ(ダッシュボード)から記事を書く場合の右側にあるツールバーにある機能です。
f:id:masahikoh0:20180908170106j:image
つまり、アプリやブラウザから記事を書いて写真を載せる場合、写真の位置情報を気にする必要はないということです。

はてなフォトライフから直接アップロードすると削除されない

位置情報を記録したままの写真をはてなブログに投稿したい場合は、はてなフォトライフから直接アップロードいただくと画像情報を処理しません

はてなフォトライフを常用してない限りは普通はやらないかな。

記事のアイキャッチ画像(サムネイル)

記事公開後に記事の写真を削除したり入れ替えてもアイキャッチ画像は変わらない

記事公開時に記事中の写真が自動的に記事のアイキャッチ画像に登録されますが、公開後に写真を削除してもアイキャッチ画像は消えてくれません。
新しい写真を貼り付けてもアイキャッチ画像は古いままです。

アイキャッチ画像を自分で変更できる

上のような場合、アイキャッチ画像を自分で変更できます。
変更方法は、以下のヘルプにあります。

アイキャッチ画像(記事のサムネイル) - はてなブログ ヘルプ

 

はてな記法、Markdownでは記法の中でaltとtitleを指定できる

以下のように記述します。

[f:id:hatenablog:xxxxxx:plain:title= かとりぶた:alt=部屋にたたずむかとりぶた]

観たままモードではHTML編集タブから書き換えられます。

 

以下のヘルプにあります。

はてなフォトライフの写真を貼り付ける(fotolife記法) - はてなブログ ヘルプ

 

alt属性について

alt属性を適切に設定することは、Googleが推奨しています。
クローラが画像を理解できるようになり、検索されやすくなるようです。
<title> タグの要素と alt 属性の説明をわかりやすく正確なものにします。
わかりやすい代替テキストを使用する
代替テキスト(画像について説明するテキスト)は、スクリーン リーダーを使用するユーザーや、低帯域幅のネットワークを使用しているユーザーなど、ウェブページの画像を確認できないユーザー向けの補助機能として役立ちます。
(中略)
悪い例(代替テキストがない): <img src="puppy.jpg" alt=""/>
悪い例(キーワードの乱用): <img src="puppy.jpg" alt="puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever  labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food"/>
良い例: <img src="puppy.jpg" alt="puppy"/>
最も良い例: <img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/> 
ほかにも何か画像の扱いで出てきたら追加します。

ではまた。