WordPressでの画像挿入とアイキャッチの設定

前回はビジュアルエディタの使い方を説明しましたが、ちょっと長くなって私の集中力がなくなってしまったので、書ききれなかった画像の挿入方法について解説します。

スポンサーリンク

アイキャッチ画像と記事内の画像

その前にこの記事のタイトルの下にある画像を見てください。タイトルの下にある画像は「アイキャッチ画像」という物でこれは記事内に挿入した画像ではないです。

記事投稿画面にこのアイキャッチ画像を設定する場所があります。投稿画面の右下にこのような項目があります。

画像の挿入-1

ここをクリックして画像を設定すると私のブログのように記事の先頭にアイキャッチ画像が表示されます。

選ぶテーマによって画像がタイトルの上だったり、下だったりしますが、私の場合はカスタマイズしてタイトルの下にアイキャッチ画像を表示するようにしてます。このカスタマイズはまた後々書きますね。

えっと、何が言いたかったと言うと、私のブログのタイトル下にある画像は「アイキャッチ画像」だよって事ですので、記事内に挿入している訳ではなくて、「アイキャッチ画像の設定」でやっているという事です。

今回説明するのはこのアイキャッチ画像ではなくて、記事内に画像を挿入する方法です。

記事内に画像を挿入する方法

記事内に画像を挿入する場合にはメディアの追加という部分をクリックします。

画像の挿入-2

ここですでにアップしている画像を使う場合はアップしている画像の一覧が表示されますので、使う画像を選択します。まだアップしてない画像は「ファイルをアップロード」⇒「ファイルを選択」をクリックしてアップロードして下さい。

画像の挿入-3

アップロードして使いたい画像を選択すると右側にこのような欄があります。

画像の挿入-4

このタイトルは分かると思いますが、「キャプション」「代替テキスト」等の項目があると思います。私は面倒なので、最初に設定した設定でずっとやってます。実際に設定をしてみましょう。

キャプション
入力した文字が画像の下に表示されるようになります。

代替テキスト
画像が表示されなかった場合に画像の代わりに表示されるテキストのことです。入力した方がいいですが、私は面倒でやってません。でも書いといた方がいいです念のため。

説明
個人的なメモ的な部分です。これは空白でOK。

配置
画像を配置する位置を指定することが出来ます。「なし」にすると左側に表示され、文字は回り込みしません。「左」は画像が左に回りこみ右側に文字が表示されます。「右」は右に回りこみます。「中央」は中央表示。例えば「左」を選択するとこのような構図になります。

画像の挿入-5

画像が左に回りこみ、文字が右側に表示されてますね。

リンク先
「リンク先」は画像に対するリンクの設定です。「メディアファイル」「添付ファイルのページ」「カスタムURL」「なし」から選択できます。例えば私の場合は挿入した画像がやや縮小されて表示されていますので、「メディアファイル」を選択しています。メディアファイルを選択すると画像をクリックした時に画像のフルサイズの大きさを表示する事ができます。

「カスタムURL」を指定すると画像をクリックした時に任意のURLへ飛ばす設定できます。「カスタムURL」を選択した場合はリンク先のURLをすぐ下のテキストボックスに入力して下さい。

サイズ
これは以前メディアの設定で設定したサイズが表示されているはずです。「サムネイルサイズ」「中サイズ」それから「フルサイズ(オリジナルサイズ)」から選択することができます。

以上が設定です。設定が済んだら「投稿に挿入」をクリックします。

画像の挿入-6

一度設定するとその内容が記憶されているようなので、最初にどのように画像を表示させるか決めて設定しておくといいでしょう。もちろん毎回設定を変えてもいいです。以上が画像の挿入と設定でした。
WordPressのナビゲーションメニューの使い方と設定

最終更新日:2017/12/27

 にほんブログ村 小遣いブログ アフィリエイトへ
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

WordPressでの画像挿入とアイキャッチの設定”に8件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


  1. okinagatarashi

    しげぞう様
    こんにちは!
    ありがとうございました。

    最初 margin-bottom: 0 で作業したらん?どこがどうなった?(さすがのポンコツ)
    それで margin-bottom: 10にしたら何か変化おきるかな?で、ん?文字と写真の間が大きくなったか?文字が折り返しちゃった!

    先ほど、あれこれして文書を短くして…
    ただ、margin-bottom: 0に戻して、今の状況・・・

    写真と、キャプチャー文字の行間はもう少し近くになりますか?

    キャプチャ下の行間は、これ位ないとかえって・・・見にくくなるかな?と言う気も。
    行間は他の記事も書いて比べながら再チャレンジします。

    本当にありがとうございます。本当に助けられています。
    お礼がいつも足らない・・・ごめんなさい。

  2. しげぞう 投稿作成者

    okinagatarashi様

    返信ありがとうございます。昨日紹介したコード、↓↓これですが、

    「margin-bottom:0」の部分で下の余白をゼロにするというコードです。okinagatarashi様のスタイルシートにはこの部分がゼロではなく「10」となっています。ここを一度「10」ではなく「0」にしてみて下さい。もし、ゼロではなくて10pxの余白を作りたいのであれば「10」ではなくて「10px」と単位(px)を付けてみて下さい。

    それと、赤文字の部分ですが、この赤文字の下に画像が入っている関係でちょっと余白があきますね。このままでもあまり気にならないのですが、(すみません!大雑把な性格)もし、この部分の余白を無くしたい場合には以下のコードもスタイルシートに追加して下さい。

    ただ、これは記事全体の文字に影響があります。なので一度試してみてからどちらがいいか判断されて下さい。