WordPress管理画面の投稿画面にある『メディアを追加』。その画面で簡単に画像サイズを変更したり、アップした画像のURLを知りたいけど場所が分からない。。ほか初心者は慣れるまで解らないことの説明です。
また画像をアップするとき名前、キャプション・代替テキストなど、大事なことなのでメディア内で重要なこと・よく使うものをブログも紹介＾＾
『ブログは見るもの』と考えてる人に、知って欲しいことも一部書いてるので見てくださいね。
メディアの追加画面の説明
- 添付ファイルの詳細
- 画像のURL
- 画像タイトル
- キャプション
- 代替テキスト
- 画像の説明
WordPressで新規投稿を書いて、使いたい画像の追加するとき、ローカルから画像をアップしたら自動的に開かれる画面に書かれてるものを説明しますね。
はじめてWordPressを開くと何のことだか解りませんよね！？ PC上から画像を、ドラック＆ドロップして、アップした画像は、左上に選択されている状態です。選択している画像の情報が右サイドに羅列されます。
添付ファイルの詳細
アップした画像とそのファイル名・日付け・ファイルのサイズなどが書かれています。star.pngの拡張子はpngで、ファイル名は『star』と付けてアップしたので、このようになっています。star.pngの詳細は、
- ファイル名：star.png
- 更新日：2016年10月24日
- ファイルサイズ：5KB
- 幅は、横128px・縦128pxこの通り。
ファイル名を日本語にして画像をアップすると、ファイル名がおかしな文字列になり、画像のURLの最後におかしなファイル名が載ることになります。
d61b8ab7c65e019009a7d03e13b5b6f6.png
画像を編集は、アップした画像の縮尺や加工ができる
画像をワードプレスで簡単に縮尺だけでなく、ちょっとした加工が出来るので紹介しますね。
画像の縮尺はアップして、縦横の比率をたもったまま画像を小さしたいときサイズをpxで指定できるのが便利です。
その他、画像を反転させたり、1つ前の作業に戻ったり、進めたりできますよ＾＾
これはめったに使わなかったかも…。画像を作ってしまった＞＜
一応こんなこともできるってことで＾＾
添付ファイルのURL
画像のURLは、画像がどのフォルダ（ディレクトリ）のどこに保存されてるかが分かるパスになっています。
https://bibabosi-rizumu.com/wp-content/uploads/2016/10/Additional-media1.png
- wp-contentフォルダにある
- uploadsフォルダ内
- 2016フォルダ内
- 10フォルダ内
- Additional-media1.pngファイル
FTPソフトでバックアップしてるならピンときましたね＾＾『uploads』をPCにダウンロード。それは画像ファイルをバックアップしているってわけですね。
画像を使ったカスタマイズ、たとえば内部リンクにマークを付けたい時やトップに戻るボタンを画像に変更するカスタマイズなどでパスを知りたいときに使います＾＾
画像のURLをコピーする
管理画面の『メディア』から、コピーしたい画像をクリックして選択したらURLが右側にでてます。そこをクリックして、Ctrl（コマンド）キー+AボタンでURLを全選択してコピー・ペーストできます。
CSSなどで画像を使いたいときも使うこともあるのでチェック！
添付ファイルのタイトル
このタイトルは画像をアップするとき、ローカル上で付いている（付けた）ファイル名がタイトルになります。元々日本語で編集しなかったら、
%e7%94%bb%e5%83%8f%e3%82%92%e3%82%a2%e3%83%83%e3%83%97
こんな感じになって文字化けしたかのようで、意味が分かりません。デコードしたら、文字列が何か分かりますが❦
WordPressの仕様で色々変更されてます。以前は日本語のままだった。とだけ。次から大事です＾＾
キャプション
キャプションは画像の下に、その説明文を付けることが出来ます。
メディア添付ファイルの詳細画面：この文字列がキャプション
キャプションにリンクを付けることも可能です。画像の出典の書きかたでは、キャプションにリンクを付ける方法を書いてます。ただの横着で意味ない画像転用と、本文の引用はダメ。リンク元を明確にしないとダメですよぉ！
あとキャプションを付て、スマホビューで画面が横揺れしているのがよく見かけるので、横揺れしてるなら直してくださいね＾＾
代替テキスト
画像の代替テキストは、目が見えない人への配慮であるアクセシビティや、ブログで画像が表示されないとき、テキストを置いて画像にある情報を伝えるためのテキストになります。
ここにテキストを入れたら、画像のタグの中に、alt=”代替テキスト” という属性が自動で埋め込まれます。<img src=”画像URL” alt=”画像の説明テキスト” />
そのため画像には、代替テキストはキチンと付けましょうね。空白のときは、画像タイトルが代替テキストになります。上の例では『star』『%e7%…e3%83%97』など。
キャプション・代替テキストを両方書いたとき、キャプションが優先されるので、覚えておいてくと、迷わずに済みそうです＾＾
またメディア内の古い画像を再利用するとき、再度見合った代替テキストと、キャプションを書きましょう＾＾
投稿画面、本文中からメディアを追加したり、過去記事の自分の画像をコピペしたとき、過去の代替テキストは変更しないので、ご安心を。
人の画像をコピペしてパクるのはダメ！また無料素材屋さんなどの直リンクもマナー違反だからダメですよ。
話を戻してココでのポイントは下記。
代替テキストを空白にすると、文字列がおかしい場合、文字化けが表示されて意味が分からず気持ち悪い…。しかも目が見えない人は耳で聞きます。
%e7%…e3%83%97など長々、気持ち悪い文字列を長々と聞かされる羽目になりかねないので、注意してください＾＾；
ほか検索エンジンにも、画像の内容を伝える役目もあるのでどうぞ。
添付ファイルの説明
画像の検索するときに便利なのが、説明になります。もし書くなら過去の画像を探すとき、どんな単語で検索するかを、その言葉を書いておけば便利です。
たくさんの画像から欲しいモノを探したいとき、入れとけば良かった！？いや、そうでもないかぁ…と思う程度ですが。ちょっと思ったことがあったので＾＾；
やることが多いので私は放置、空白のままですｗ
メディアライブラリの画像の検索
画像の検索は、月ごとの日付を指定して検索することも可能です。検索範囲は、上述のタイトル・キャプション・代替テキスト・説明から文字列をピックアップします。
あまりにもヒットしなければ、自分のブログ内検索を使った方が早いですよ。ブログページに行くのが面倒ならあきらめて、新たに画像を作った方が早い気もします。
さいごに
メディアの追加は、画像に関しての情報が詰まってましたね。
URLのコピー場所も大事ですけど、代替テキストやキャプションは大事、ついでに無断転載はダメ！など、気付いてくれたらと思います＾＾
それでは、かうたっくでした！
Comments