management無料サイトブログ運営に便利コラム過去コラムCocoonサイトマップContact4月30日18時まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。2019.08.09いくみ当記事では、自分のパソコンに保存してある画像を表示させる方法について説明します。他に、外部の画像URLリンクを埋め込んでブログに表示させる方法もあるそうですが、私は一度も使っていません。注意事項が増えるようなので、初心者向けではない印象です。そちらの方法は一切触れません。パソコンに保存してある画像をブログに表示させる方法には以下の2種類があります。注:大まかな流れを捉えて「1ステップ」「2ステップ」としました。細かい手順にすると、数ステップあります。当記事のポイント画像の挿入方法による違いを説明。並べて表示する方法・画像と文章を並べる機能・カバー機能の紹介。画像をファイル保存していない場合です。(記事トップ)おわりに挿入方法による違いどちらの方法で画像を挿入しても、ブログでの表示は同じになります。1つだけ異なる点があります。WordPressのいけずなラベルに負けないをすでに読んでいただいた方は、スキップしてくださいね。)[メディアライブラリ]画面での[アップロード先]の表示どちらの画面から作業しても、アップロードした画像は、すべて[メディアライブラリ]画面にリストされます。その際、[メディアライブラリ]画面での[アップロード先]の表示に、以下のような違いがでます。1行目の画像は、[投稿]画面から画像をアップロードしました(1ステップ)。この方法だと、アップロード先に記事のタイトルが表示されます。2行目の画像は、[メディアライブラリ]画面で画像をアップロードしてから、[投稿]画面で画像を選択、という2ステップの方法で記事に挿入しました。すると[アップロード先]の情報が(未使用)となります。使っているんですけどね。いくみ[メディアライブラリ]にアップロードした後に、その画像を記事に挿入しても、[アップロード先]に記事タイトルが自動挿入されないのです。このステータス機能は、「手動更新」です。(未使用)になっていても、後からタイトルを挿入できます。気にならない場合は、そのままでも大丈夫です。この[アップロード先]ステータスが間違っていても、ブログ表示に問題は出ません。ステータスを間違ったままにしておくと、「自分が誤解して誤操作をする」可能性は出てしまうので十分気を付けましょう。(例:「未使用」というステータスを見て、削除してしまったり。)注意:投稿画面で画像をアップロードした時には自動で記事タイトルが挿入されますが、その後は「手動更新」です。記事内で画像を削除したら、メディアライブラリからも完全に削除するか、[切り離す]をクリックして(未使用)の状態に戻すことをおススメします。[アップロード先]を変更する方法は以下で記事にしています。目次の2番をクリックすると[アップロード先]変更方法の説明に飛びます。表示されることがあります。その説明と防止策をまとめました。blogstudynotes.com2019.08.04いくみではそれぞれの挿入手順です。画像の挿入手順[投稿]画面からでも[メディアライブラリ]画面からでも、画像をアップロードする方法は、以下の種類があります。いくみ自分に合う方法をお好みで選びましょう。1ステップの良いところは「アップロード先」が自動で挿入されるところ。2ステップの良いところは「複数画像アップロード」が簡単。[メディアライブラリ]画面から画像を「選択」するときに、一通りの画像情報を入力できるのも魅力です。投稿画面で画像を挿入まずは、投稿画面を開いてください。下書き中の投稿は[投稿一覧]から選択、新規の投稿画面は[新規追加]をクリックです。クリック操作で挿入1.画像を挿入したいブロックをクリック。以下のようにアイコンが4つでます。1番左側のプラスサインアイコンをクリック。2.表示されるメニューから、[画像]アイコンをクリックします。[よく使うもの]に最初に含まれていたと思います。無ければスクロールして、[一般ブロック]から[画像]アイコンをクリック。何度か画像を使うと、ブロックをクリックしたときに、以下のように右側に[画像]アイコンが表示されるようになるので、プラスサインをクリックしなくても画像挿入できるようになります。3.[アップロード]をクリック。4.保存してある場所から、挿入したい画像を選択して完了です。すると、サイドに[画像設定]が表示されていますね。このAltテキスト(代替テキスト)は、入力する方が良いそうです。入力ボックスの下に説明があるように、画像が見られない方々に画像情報を伝えることができるそうです。画像が表示されないときに変わりにこのテキストが表示されます。SEO対策にもなるそうです。(ただ、長すぎると、スパム扱いされてしまったりするそうです。簡潔に入力しましょう。)下にスクロールすると、画像のサイズを調整できるオプションやリンク設定があります。オプションの種類については後述しています。ドラッグアンドドロップで挿入1.挿入したい画像を保存してあるフォルダを開いて、WordPressの投稿画面と並べます。2.画像をドラッグ&ドロップして完了。)いくみ挿入後に画像をクリックすると、先ほどの[画像設定]が表示されます。[Altテキスト(代替テキスト)]を入力すると良いですね。画像をファイル保存していない場合です。1.ペイント画面やパワーポイント画面などから、挿入したい画像をコピー(Ctrl+C)します。2.[投稿]画面で、画像を挿入したいブロックをクリック。貼り付け(Ctrl+V)て完了。いくみ画像「ファイル」ではありません。ペイント画面やパワーポイント画面でトリミング・編集して、「ファイル保存していない状態の画像」です。私はスクリーンショットはほぼこの方法で挿入しています。数が多すぎてファイル保存が面倒なのです・・・★。このコピペ挿入方法にすると、WordPressが自動でファイル名を付けます。私はこの方法でないと耐えられないので、そうしていますが、SEO対策的には良くないことでした★。以下のサイトで勉強させていただきました。画像ファイル名も意味ある名前にする方が良いそうです。画像検索のSEO対策。代替テキスト(alt属性)とファイル名の重要性。アフィリエイト保育園ブログに画像をアップロードしていて気付いた。いう訳で、サイトに画像を投稿する...affiliate-hoikuen.comいくみ・・・と分かっても、多分辞められない!いくみここでも同じく、挿入後に画像をクリックすると、先ほどの[画像設定]が表示されます。[Altテキスト(代替テキスト)]を入力すると良いですね。メディアライブラリ画面から画像をアップロード・投稿画面で選択1.[メディア]メニューの[新規追加]をクリック。2.クリック操作の場合:[ファイルを選択]をクリックしてアップロードしたい画像を選択。ドラッグ&ドロップの場合:保存場所のフォルダから点線内にドラッグ&ドロップ。どちらの場合も複数選択可能です。アップロードはこれで完了。3.記事内に挿入するステップ:[投稿]画面を開きます([投稿]>[投稿一覧]または[新規追加]をクリック)。画像を挿入したいブロックをクリックして、1番左側のプラスサインアイコンをクリック。4.表示されるメニューから、[画像]アイコンをクリック。[よく使うもの]に含まれていると思います。無ければスクロールして、[一般ブロック]から[画像]アイコンをクリック。5.[メディアライブラリ]をクリック。6.挿入したい画像にチェックを入れて、緑枠の情報は任意で入力。[選択]をクリックで完了。いくみ緑枠の情報は、入力しなくても大丈夫なのですが、SEO的には、「代替テキスト」は入れる方が良いらしいです。視覚情報を見られない方々に画像情報を伝えることができるので利用したいですね。「タイトル」もSEOに良いというサイトもちょっとありました。一般的には「代替テキスト」に比べたら重要ではないとされているようです。「キャプション」は投稿画面から情報を入れるほうが便利だと思います。「説明」は自分用のメモです。項目についてもう少し後述しています。画像に追加できる情報・リンク設定・サイズ調整・位置調整いくみ何もしなくても挿入さえすれば画像は表示されますので設定しなくても大丈夫です。「こういう事ができるのか~」と知っておくのは良いと思います。投稿画面で追加できる情報とリンク設定、サイズ調整オプションどの方法を使ったにしても、挿入した画像を投稿画面でクリックしてみてください。右サイドに以下のように様々な情報がでます。[Altテキスト(代替テキスト)]は大切ですね。これから設定するようにしたいと思います。[画像サイズ]のドロップダウンメニューと[画像の寸法]の%表示のボタンでサイズを調整できます。いくみクリックして動きを確認してみてくださいね。「画像の自動生成」を無効にしていると、[画像サイズ]機能の方は使えません。画像の自動生成については、記事を書く前に知っておきたかったこと3つの目次の2番をご参照ください。スクロールすると画像につけられる[リンク設定]があります。初期設定は[なし]です。その場合、読者が画像をクリックしても何も起こりません。[メディアファイル]を設定してある画像を読者がクリックしたときの見え方:黒い背景で画像のみ表示されます。[添付ファイルのページ]を設定してある画像を読者がクリックしたときの見え方:ブログの投稿画面に画像が表示されます。(読者目線で考えるとやや不便に感じました。上の[メディアファイル]だと、閉じたいときに×をクリックすればいいだけなので簡単。このオプションだと、[戻る]ボタンを使うことになります。)[カスタムURL]を選ぶ場合は、すぐ下の[リンクURL]ボックスに表示させたいサイトのリンクを入力します。これを設定すると、読者がその画像をクリックしたときに、指定したURLに飛びます。[リンク先]を[なし]以外にすると以下のように、更に他の設定項目が表示されますね。[リンクURL]:[カスタムURL]とセットで指定します。他のオプションのときはそのままで大丈夫です。[新しいタブで開く]:文字通りですね、オン・オフの設定ができます。いくみ後の2つは難しかった・・・。引用させていただきます。プラグインや子テーマを使用してリンクにスタイルを設定できます。http://wpdocs.osdn.jp/投稿・ページヘのメディア挿入いくみえぇっと・・・。コードで、例えば画像の周りに枠線などのスタイルをつけられるそうです。私はまだ使ったことが無く、当分使わないと思います。学びたい方は、ぜひ、以下のサルワカさんのページを読んでみてくださいね。HTMLのlinkタグとは?基本的な書き方とrel属性まとめいまいち分かりづらいlinkタグについて解説します。relやhrefの意味から、具体的な使い方まで分かりやすくまとめました。挿入した画像をクリックすると、青い丸が3か所に表示されます。ドラッグしてサイズ調整できます。キャプション画像下に表示する、画像の説明となるラベルや文を入力できます。メディアライブラリ画面で追加できる情報いくみ[メディアライブラリ]画面からも情報を追加できます。内容はほぼ同じですが、[タイトル]と[説明]の2項目が投稿画面とは違います。1.[メディアライブラリ]画面でリストされている画像ファイルにマウスを近づけると、ファイル名の下に[編集]というオプションがでるのでクリック。2.以下のような画面になります。[タイトル]:画像ファイル名とは別に付けられる、画像のタイトルです。目指す場合は利用してみると良いかもしれません。「関係ない」という情報のがチョット優勢でした。本当の所は私には分かりません。この[タイトル]の情報は、メディアライブラリ内で自分が画像検索するときに参照される情報です。ここにキーワードや記事タイトルを入力しておくと、後でその文言で画像検索ができます。[画像を編集]ボタンはあんまりおススメしません。自分のパソコンで編集するほうが簡単だと私は思います。[代替テキスト][キャプション]は、[投稿]画面で入力するほうが便利だと思います。文脈を見ながら設定できますね。[説明]は自分用のメモです。これも、[タイトル]と同じく、「あの画像はどこだっけ・・・」となって、メディアライブラリ内を検索するときに参照される情報です。[説明]に「画像の挿入」などのキーワードや記事タイトルを入れておけば、後でその文言で自分が検索できます。いくみ[タイトル]と[説明]がメディアライブラリ内の検索用文字列にできる、というのは結構便利。メディアライブラリの「絞り込み機能」はあんまり多機能ではないです。この2項目を工夫して管理すれば、「特定の記事で使った画像のみ」を表示させられますよね。私は今後[説明]には記事タイトルを入れようかなと思っています。いくみ以下のサイトでは、Googleのクロールについてや画像検索について説明されています。勉強になりますのでおススメです。知らないことだらけでした・・・!「WordPress」画像の代替テキスト・キャプションの効果的な使い方WordPressで画像を入れるときに「タイトル」「キャプション」「代替テキスト」「説明」キャプションや代替えテキストという4つの設定項目があります。挿入する画像のデータです。まmechalog.comいくみ以下のサイトは、SEO対策的には1番大事な「代替テキスト」を設定するときのコツが書いてあり、非常に参考になります。説明という項目が表示されます。挿入した画像をクリック選択すると、左上に位置を調整する選択肢がでます。お好みで使いましょう。[左寄せ][中央揃え][右寄せ]が、メインカラム内での画像の位置です。[幅広][全幅]は、位置&サイズという感じですね。この機能を2つのサイズで試したのですが、画像サイズによっては違いが出ないのと、どんな時にこれらを使うと効果的なのかも分からないため、私は使っていません。試して、使いたい機能かどうか見てみてくださいね。複数画像を並べる・文章を横にそえる・カバー機能いくみ更に、画像の表示方法を変化させられるオプションがあります!3つご紹介します。最初の2ステップはすべてに共通です。最初の共通ステップ1.[投稿]画面で、画像を挿入したいブロックをクリックして、1番左側のプラスサインアイコンをクリック。2.表示されるメニューから、[画像]アイコンをクリック。[よく使うもの]に含まれていると思います。無ければスクロールして、[一般ブロック]から[画像]アイコンをクリック。2.一番左端の、[ブロックタイプまたはスタイルを変更]というアイコンをクリック。ギャラリーの使用手順3.[ギャラリー]をクリック。4.画像をドラッグするか、[アップロード]ボタンから新規でアップロードするか、[メディアライブラリ]ボタンでアップロード済みの画像を選択。5.追記:[リンク先]を[メディアファイル]に設定します。1枚に設定すると、全部に反映されます。クリックすると、1枚1枚順番に拡大してみることができます。(拡大せずに、ただ並べておきたい場合は、上のステップ4を無視してください。)順番や枚数を変更したいとき:できあがったギャラリーの画像をクリックすると左上に鉛筆マークのアイコンが表示されます。鉛筆アイコンをクリックすると編集画面になり、枚数を増やしたり減らしたり、キャプションをつけたり、並び順を変えたりできます。([メディアライブラリ]から画像を選ぶ場合は、最初にこの画面になります。)カラム数を変更したいとき:できあがったギャラリーの画像をクリックすると、右サイドに[ギャラリーの設定]が表示されます。[カラム]の数字を変えれば、何列で並べるかを設定できます。いくみギャラリーの画像にリンク設定の[カスタムURL]があると便利!と思いましたが、その選択肢は出てきませんでした。メディアと文章を使用3.[メディアと文章]をクリック。4.[コンテンツ]という部分に文章を入力できます。上にアイコンが4つあります。左から、[幅広][全幅][メディアを左に表示][メディアを右に表示]です。お好みで選択しましょう。使用例ここに入力する文章も、「タイトル」や「リスト」にできます。「カバー」機能を使うと、投稿画面で画像を背景にして文字を入力できます。投稿画面で画像に入れる文字を編集できるんですね。うす暗くなってしまうんですね。ステップ1・2は今までと同じです。3.以下で[カバー]をクリック。4.お好みの方法で画像をアップロード。以下のようになります。カーソルが出るので文字を入力します。(記事トップ)いくみスタート地点が違うだけで、基本は同じです!1.[投稿]画面の右サイドにある[文書]タブをクリック。(サイドに何もない!と思ったら、[公開する]ボタンの横にあるお花のアイコンをクリックしてください。)2.少しスクロールすると、[アイキャッチ画像を設定]というボタンがあります。画像の挿入方法・画像に追加できる情報・表示機能3.画像ファイルを新規でアップロードする場合は[ファイルを選択]をクリック。ドラッグ&ドロップも可能です。画像がアップロード済みだったら、[メディアライブラリ]タブをクリックして画像を選択します。4.いずれの方法でも、画像を選んで、[代替テキスト]などの情報をお好みで入力します。[選択]をクリックで完了です。おわりに画像の挿入は、最初から簡単にできてしまった分、逆に何も学んでいなかったことが分かりました。いくみ画像が多いため「最適化」していく作業も大変ですが、少しずつ更新していこうと思います。2000文字くらいで書けるかなと思ったのですが、全然無理でした★。4倍になるとは・・・。1番勉強になった記事でもありました。コピーいくみをフォローするいくみあぁ、ブログ。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)いくみブログを読むのが大好きなアラフォーです。朝活でトコトコ綴っていきます。好きな食べ物は納豆とお寿司です。画像をファイル保存していない場合です。サイトコラム過去コラムCocoonサイトマップContactホーム検索トップサイドバーいくみブログを読むのが大好きなアラフォーです。朝活でトコトコ綴っていきます。好きな食べ物は納豆とお寿司です。画像をファイル保存していない場合です。(記事トップ)おわりにタイトルとURLをコピーしました。