前回はビジュアルエディタの使い方を説明しましたが、ちょっと長くなって私の集中力がなくなってしまったので、書ききれなかった画像の挿入方法について解説します。
アイキャッチ画像と記事内の画像
その前にこの記事のタイトルの下にある画像を見てください。タイトルの下にある画像は「アイキャッチ画像」という物でこれは記事内に挿入した画像ではないです。
記事投稿画面にこのアイキャッチ画像を設定する場所があります。投稿画面の右下にこのような項目があります。
ここをクリックして画像を設定すると私のブログのように記事の先頭にアイキャッチ画像が表示されます。
選ぶテーマによって画像がタイトルの上だったり、下だったりしますが、私の場合はカスタマイズしてタイトルの下にアイキャッチ画像を表示するようにしてます。このカスタマイズはまた後々書きますね。
えっと、何が言いたかったと言うと、私のブログのタイトル下にある画像は「アイキャッチ画像」だよって事ですので、記事内に挿入している訳ではなくて、「アイキャッチ画像の設定」でやっているという事です。
今回説明するのはこのアイキャッチ画像ではなくて、記事内に画像を挿入する方法です。
記事内に画像を挿入する方法
記事内に画像を挿入する場合にはメディアの追加という部分をクリックします。
ここですでにアップしている画像を使う場合はアップしている画像の一覧が表示されますので、使う画像を選択します。まだアップしてない画像は「ファイルをアップロード」⇒「ファイルを選択」をクリックしてアップロードして下さい。
アップロードして使いたい画像を選択すると右側にこのような欄があります。
このタイトルは分かると思いますが、「キャプション」「代替テキスト」等の項目があると思います。私は面倒なので、最初に設定した設定でずっとやってます。実際に設定をしてみましょう。
■キャプション
入力した文字が画像の下に表示されるようになります。
■代替テキスト
画像が表示されなかった場合に画像の代わりに表示されるテキストのことです。入力した方がいいですが、私は面倒でやってません。でも書いといた方がいいです念のため。
■説明
個人的なメモ的な部分です。これは空白でＯＫ。
■配置
画像を配置する位置を指定することが出来ます。「なし」にすると左側に表示され、文字は回り込みしません。「左」は画像が左に回りこみ右側に文字が表示されます。「右」は右に回りこみます。「中央」は中央表示。例えば「左」を選択するとこのような構図になります。
画像が左に回りこみ、文字が右側に表示されてますね。
■リンク先
「リンク先」は画像に対するリンクの設定です。「メディアファイル」「添付ファイルのページ」「カスタムURL」「なし」から選択できます。例えば私の場合は挿入した画像がやや縮小されて表示されていますので、「メディアファイル」を選択しています。メディアファイルを選択すると画像をクリックした時に画像のフルサイズの大きさを表示する事ができます。
「カスタムURL」を指定すると画像をクリックした時に任意のURLへ飛ばす設定できます。「カスタムURL」を選択した場合はリンク先のURLをすぐ下のテキストボックスに入力して下さい。
■サイズ
これは以前メディアの設定で設定したサイズが表示されているはずです。「サムネイルサイズ」「中サイズ」それから「フルサイズ（オリジナルサイズ）」から選択することができます。
以上が設定です。設定が済んだら「投稿に挿入」をクリックします。
一度設定するとその内容が記憶されているようなので、最初にどのように画像を表示させるか決めて設定しておくといいでしょう。もちろん毎回設定を変えてもいいです。以上が画像の挿入と設定でした。
⇒WordPressのナビゲーションメニューの使い方と設定
コメント
しげぞう様
こんにちは！
ありがとうございました。
最初 margin-bottom: 0 で作業したらん？どこがどうなった？（さすがのポンコツ）
それで margin-bottom: 10にしたら何か変化おきるかな？で、ん？文字と写真の間が大きくなったか？文字が折り返しちゃった！
先ほど、あれこれして文書を短くして…
ただ、margin-bottom: 0に戻して、今の状況・・・
写真と、キャプチャー文字の行間はもう少し近くになりますか？
キャプチャ下の行間は、これ位ないとかえって・・・見にくくなるかな？と言う気も。
行間は他の記事も書いて比べながら再チャレンジします。
本当にありがとうございます。本当に助けられています。
お礼がいつも足らない・・・ごめんなさい。
okinagatarashi様
返信ありがとうございます。昨日紹介したコード、↓↓これですが、
.wp-caption .wp-caption-text, .gallery-caption, .entry-caption { margin-bottom: 0 !important; }「margin-bottom:0」の部分で下の余白をゼロにするというコードです。okinagatarashi様のスタイルシートにはこの部分がゼロではなく「10」となっています。ここを一度「10」ではなく「0」にしてみて下さい。もし、ゼロではなくて10pxの余白を作りたいのであれば「10」ではなくて「10px」と単位（px）を付けてみて下さい。
それと、赤文字の部分ですが、この赤文字の下に画像が入っている関係でちょっと余白があきますね。このままでもあまり気にならないのですが、（すみません！大雑把な性格）もし、この部分の余白を無くしたい場合には以下のコードもスタイルシートに追加して下さい。
.entry-content p { margin: 0px; }ただ、これは記事全体の文字に影響があります。なので一度試してみてからどちらがいいか判断されて下さい。
しげぞう様
こんばんは！HELP！です。
今、キャプション下の余白を詰めるコードにチャレンジしたのですが
画像と文章の回り込みの影響か、(welcartの都合かあるかも！)表示されるページ画面には出てないですが、編集の画面のビジュアルではキャプションを表示するらしきコード？が
[caption id='attachiment_165" again=・・・・・・・・・・・・](テキスト)[/caption]
と出ていて、プレビューでは赤字のThe tableware used every day.と黒字の文書の間が空いちゃうんですね。ワードプレスのフォーラムでも回り込みの話が出てますが、
素人の私にはフォーラム…ちんぷんかんぷんで、読んだら余計分らなくなり・・・ワードプレスムリ！と落ち込みます。ここに来ると、すごーい！解決！頑張ろう！になるけど・・・
お蔭でしげぞう様HELP！になっちゃうので、ご迷惑です。
画像は赤字のThe tableware used every day.のピリオド後に右寄せでついています。
当分、教えて頂いたコードのままにしておきます。
手が空いた時ご検討を頂けると幸せます。
宜しくお願いします。
しげぞう様
毎度、毎度、本当にお世話になります。
本当に、本当にありがとうございます。
びっくりのスピードとずっと気にしていた単語の改行…
ありがとうございます。読みやすさの点でどうしよう…って、悩んでいたんです。
実験するにしても、これについてはどっかで記事を読んで「どこだっけ？」と、思いつつ…
なんか…神様みたい…
この実験、やってみます。ポンコツでもここまでやれてるのはしげぞう様のお蔭なんです。
本当にありがとう。
出来たら、報告します。
okinagatarashi様
コメントありがとうございます。えっと、画像キャプションの部分の下の余白の事だと思いますが、これは今24pxの余白があるんです。これを無くせばいいので、スタイルシートに次のコードを追加します。
.wp-caption .wp-caption-text, .gallery-caption, .entry-caption { margin-bottom: 0 !important; }それと、記事を見て気がついたのですが、英語のコンテンツの場合、英単語が途中で改行されない仕様になっています。途中で改行されないので、右端がデコボコになりますよね。という訳で英単語も途中で改行できるようにするのが以下のコードです。スタイルシートに追加です。
body{ word-break: break-all; }英単語の途中改行は読む方によっては読みにくくなる可能性がありますので、一度変更してみてから使う使わないを判断してみて下さい。
追記：”うげッ”とは思ってません（笑）今後もよろしくお願いします。
しげぞう様
こんにちは！私の登場に”うげッ”だと思いますが( ´艸｀)
HELP！です。毎度、超～面倒なHELP！ですが、こん回な中でも…系じゃないかと思います。
投稿の画像にキャプション付けて表示は出来たのですが・・・記事の表示が不細工です。何か手をお持ちだったら教えて下さい。
このページです。
これの行間を詰めてバランスを変えるのはどうしたらいいですか？写真とキャプションの距離はいいけど、下のスペースが大きすぎるかなぁ～と思います。
お勧めの空きスペース分量もアドバイスを頂けると本当に助かります。
またまた、ご面倒な事ですがご検討頂けますと幸せます。
どうぞ宜しくお願いします。
山下様
コメントありがとうございます。WordPressの場合は設定でメディアのサイズを変更できますが、変更する前にアップロードした画像に関しては以前の設定が反映されています。なので、メディアのサイズの変更をした場合には面倒ですが、再度同じ画像をアップロードする必要があります。また、サイズの変更をした時にこれまでアップした画像をまとめてリサイズして再アップするようなプラグインもあると思いますが、枚数が少ないなら単純に画像を再度アップロードする方が確実かと思います。
しげぞう様
サムネイル、中サイズの画像が生成されるように「メディア設定」にてそれぞれ幅の上限100、450、高さ100、0と設定してあるのですが「メディアを追加」から「添付ファイルの表示設定」の「サイズ」の項目の中に「中サイズ」の選択肢が出てきません。
あるのはサムネイル（100×100）、フルサイズ（374×450）です。
Word Pressというのは色々と疑問なことが多いブログシステムですね、、、。
泣けてきます。