WordPressでの画像の貼り方いろいろ

 WordPress の記事に画像を貼るには、「メディアを追加」ボタンを押して「メディアを挿入」画面を表示させると思います。

20150730_1

赤枠で囲んだ部分の「添付ファイルの表示設定」でどのような設定ができるのか見てみましょう。

準備

 テキストエディタの赤枠の部分にメディアを追加したいと思います

20150730_2

カーソルを移動しておいてください。

配置

20150730_3

 画像が左側に表示され、右側の空いたスペースに文章がまわりこみます。

20150730_4

中央

 画像が中央に表示されます。文章のまわりこみはありません。

20150730_5

 画像が右側に表示され、左側の空いたスペースに文章がまわりこみます。

20150730_6

なし

 スタイルシートで画像の表示位置を決めたい場合は、こちらを選んでください。

リンク先

20150730_7

メディアファイル

 リンクのついた画像を貼ることができます。画像のリンクをクリックすると、

20150730_8

ブラウザの画面いっぱいに画像を表示します。表示されるサイズはフルサイズ、すなわち WordPress に画像をアップロードした時の元のサイズです。

20150730_9

 画像を新規のウィンドウ・タブで表示したい場合、投稿画面のテキストエディタで「target=”_blank”」と打ち込んでもいいのですが、2クリックで「target=”_blank”」を挿入する方法があります。

 まずは、記事に画像を挿入しておいてください。次にビジュアルエディタに移動します。

20150730_10

挿入されている画像を一度左クリックし、選択された状態にしてください

20150730_11

「リンクの挿入/編集」ボタンをクリックします。

20150730_12

ダイアログが表示されるので、

20150730_13

「リンクを新ウィンドウまたはタブで開く」にチェックをいれて、更新ボタンを押します。これで画像をクリックすると新しいウィンドウ・タブで開いてくれるようになります。

添付ファイルのページ

 リンクのついた画像を貼るまではメディアファイルと同じなのですが、

20150730_14

画像のリンクをクリックすると、

20150730_15

WordPress が画像専用ページを自動で作成してくれます。画像をフルサイズで表示し、かつサイドバーも活用したい場合などに便利です。

カスタム URL

 画像に外部へのリンクをつけるのに使います。例として、麻婆豆腐の画像をクリックすると Wikipedia の「麻婆豆腐 – Wikipedia」に飛ぶように設定してみます。

 「メディアを挿入」画面でリンク先を「カスタム URL」にすると、リンクを入力する状態になりますので、

20150730_16

ここに目的のリンクを入力すればいいだけです。

20150730_17

表示されている画像をクリックすると、

20150730_18

リンク先へジャンプできます。

なし

 リンクなしの画像を貼ることができます。

サイズ

20150730_19

 エントリーに貼り付ける画像の大きさをマウスの操作のみで決めることができます。

 WordPress はアップロードした画像を基に縮小版を自動で作ってくれます。画像が大きすぎる場合は作成された縮小版を記事に挿入します。作成される縮小版の大きさの設定は別エントリーで記事にしていますので、そちらも参考にしていただければ、と思います。

まとめ

 以前、WordPress で記事に挿入する画像について書いたエントリーです。

WordPressで記事に画像を挿入するには | Naokix.net

WordPressの「添付ファイルの詳細」でなにができるのか | Naokix.net

併せてご活用いただければ幸いです。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP