WordPressで画像のアップロード、サイズ調整、リンクを設定

WordPressでは、ただ単純に画像ファイルをアップロードして投稿に挿入するだけではなく、自動で複数サイズの画像ファイルを作成したり、画像のサイズを変更したりする事もできます。

※目次をクリックすると目次の下部にコンテンツが表示されます。

大きい画像をアップロードすると自動で小さいサイズの画像を作成?
1)ファイルのアップロード方法
 
WordPressの管理画面からファイルをアップロードするには、下記3つの方法があります。(もちろん、SFTPなどのファイル転送ツールを使ってアップロードする事もできます。)
 
①「メディア」→「新規追加」
②「メディア」→「ライブラリ」→「新規追加」
③投稿または固定ページの編集画面→「メディアを追加」
 
2)管理画面からアップロードした場合の保存場所
 
WordPressディレクトリの”wp-content/uploads/西暦年/月”ディレクトリ内に保存されます。
 
3)アップロード後に作成されるファイル
 
例えば、1575×517のサイズのimagetest.pngという名前の画像ファイルをアップロードすると、アップロード先のディレクトリに、3つの小さいサイズの画像ファイルも一緒に保存されています。
 
imagetest.png
imagetest-1024×336.png
imagetest-300×98.png
imagetest-150×150.png
 
4)なぜ小さいサイズの画像ファイルが自動で作成されるか?
 
WordPressでは、画像サイズの上限設定が大、中、サムネイルと3つの種類ごとに決まっていて、この上限設定より大きい画像サイズをアップロードすると自動でそれより小さい画像サイズのファイルを作成してくれるようです。
 
①画像サイズの上限設定
 
管理画面の「設定」→「メディア」

“画像サイズ”
 投稿本文に挿入するときに使われる上限寸法のデフォルト値
・サムネイル 150×150
・中サイズ  300×300
・大サイズ  1024×1024
 
②1575×517のサイズのimagetest.pngをアップロードした場合
 
下記のようにオリジナルのファイル以外に、大、中、サムネイル用のサイズの画像ファイルを自動で作成
 
imagetest-1024×336.png
imagetest-300×98.png
imagetest-150×150.png
 
③700×230のサイズのimagetest2.pngをアップロードした場合
 
下記のようにオリジナルのファイル以外に、大、中、サムネイル用のサイズの画像ファイルを自動で作成
 
imagetest2-300×98.png
imagetest2-150×150.png

WordPressで画像の編集もできる
1)画像の編集方法
 
アップロード済みの画像ファイルの編集や投稿に挿入済みの画像の編集を行う事ができます。
 
①アップロードしたファイルの画像の編集
 
管理画面の「メディア」→「ライブラリ」
→編集対象の画像にカーソルをあて、「編集」をクリック
→「画像編集」をクリック
 
・画像の拡大縮小
 画像のサイズを変更すると、アップロード先のディレクトリ内では下記のように元の画像ファイルは保持されたまま、別の画像ファイルが作成されます。
 
元の画像 imagetest.png
変更後  imagetest-e1378868563189.png
 
・元の画像を復元
 画像の拡大縮小を実行すると、”元の画像を復元”というリンクが表示されるようになり、元の画像にすぐに戻す事ができます。
 
②投稿に挿入した画像の編集
 
投稿または固定ページの編集画面
→ビジュアルエディタに切り替える
→挿入した画像が表示されるので、画像をクリックし、左上の”画像を編集”をクリック
 
画像のサイズ、配置、テキストの回りこみ、その他様々な項目を設定できます。

自動作成された中(300ピクセル幅)サイズ画像を投稿に挿入して、リンク先にオリジナルの画像ファイルを指定
画像を投稿に挿入する場合は、画像サイズをどのぐらいのサイズにして、どのように配置するか決める必要があります。
 
WordPressでは、大きいサイズの画像ファイルをアップロードした場合は、自動で中サイズ(300ピクセル幅)の画像ファイルも作成してくれるので、下記のような設定は簡単に実施できます。
 
挿入する画像サイズ:300ピクセル幅
画像のリンク先  :オリジナルの大きいサイズの画像ファイル
 
以下、画像の挿入手順の例を示します。
 
●投稿に画像ファイルを挿入する手順
 
①画像を挿入する位置にカーソルを合わせる。
 
②”メディアを追加”ボタンをクリック。
 
③挿入する画像選択を選択
 画像ファイルを選択すると右側のウィンドウに画像ファイルの詳細情報が表示されます。
 
④”添付ファイルの詳細”ペインでタイトル、キャプション(画像の下に表示される)、代替テキスト、説明の項目を適宜設定
 
⑤”添付ファイルの”表示設定”ペインで配置を設定
 
・なし
 配置設定なし。画像は左。テキスト回り込みなし。
・左
 画像は左。テキストは右に回りこむ。
・中央
 画像は中央。テキストは画像の両側に回りこまない。
・右
 画像は右。テキストは左に表示される。
 
⑥”添付ファイルの”表示設定”ペインで”サイズ”と”リンク先”を設定
 
下記画像ファイルを挿入する場合の例です。
imagetest2.png(オリジナル700ピクセル幅)
imagetest2-300×98.png
imagetest2-150×150.png
 
ここでは、挿入する画像サイズは300ピクセル幅、リンクはオリジナル画像にするので、下記のように指定します。
 
リンク先:”メディアファイル”を選択
サイズ :中-(300×98)
 
⑦”投稿に挿入”ボタンを押下
 下記のように、挿入された画像ファイルが300ピクセル幅、リンク先がオリジナルの大きい画像として画像が挿入されました。
<a href=”http://example.com/wp-content/uploads/2013/09/imagetest2.png”><img src=”example.com/wp-content/uploads/2013/09/imagetest2-300×98.png” alt=”imagetest2″ width=”300″ height=”98″ class=”alignleft size-medium wp-image-725″ /></a>

関連記事の目次
VPSサーバーでスナップショットを取得
~障害に備え、リカバリーポイントを作成。
VPSサーバーにログインして、設定内容を確認
~グローバルIPアドレス確認、SSHキーを作成。
VPSサーバーにSSHでログイン
~Tera Term、SSH、公開鍵認証方式
yumコマンドで最新のパッケージにアップデート
~全パッケージを最新にアップデート
Apacheのインストール
~yumコマンドでApacheインストール、iptablesでファイアウォールの設定
PHPとMySQLをインストール
~yumコマンドでPHP、MySQLインストール
WinSCPを使ってWordPressをアップロード
~WinSCPをクライアントPCにインストール、ファイルアップロード方法
WordPressをインストール
~MySQLでWordPress用データベース作成、wp-config.phpファイルの設定
CentOSのファイアウォール設定
~iptablesを使ってネットワークフィルタリング設定を一から行う
OpenSSHの設定をよりセキュアに
~ログイン制限、ポート変更、認証方式
ApacheでTCPのTraceメソッドを無効にする
~Apacheの設定変更、Telnetで動作確認
ヘッダーにApacheバージョンが表示されないようにする
~Apacheの設定変更、Telnetで動作確認
Apacheでディレクトリ内一覧表示を無効にする
~autoindex_moduleのロードを無効にする
セキュリティを考慮し、MySQLの匿名ユーザーにパスワードを設定、または削除
~MySQLの匿名ユーザーにパスワードを設定、または削除
PHPのバージョンが表示されないようにする
~php.iniの設定変更
WordPressディレクトリのパーミッションをセキュアに
~WordPress用ディレクトリの所有グループ、ユーザー、パーミッション設定
パーマリンク設定時のApache設定
~WordPressパーマリンクの設定、Apache .htaccessの設定
WordPressテーマの選定
~テーマ追加の特徴フィルターの項目、テンプレートキング
WordPressで画像のアップロード、サイズ調整、リンクを設定
~アップロード画像の画像サイズ、サムネイル、画像編集、リンク設定
更新可能なRPMパッケージのリストをメールで送信する
~yumコマンド、Bashスクリプト、Cron
Linuxでディスク使用量が多いディレクトリを調べる方法(1)
~du --max-depth
Linuxでディスク使用量が多いディレクトリを調べる方法(2)
~duコマンド、sortコマンド
WordPressデータベースのバックアップとリストア
~コマンドラインでバックアップ、リストア
WordPressのバージョンアップと旧バージョンへの戻し
~データベースとディレクトリのバックアップ、リストア
BashスクリプトでWordPressデータベースを自動バックアップ
~MySQLデータベースをBash、Cronを使って自動バックアップ、メール通知
BashスクリプトでDos攻撃など大量アクセスのログを検知
~Apacheアクセスログ、Dos、Cron、メール通知
テーマ作成
 
ブートストラップ3を使って自作テーマ作成
~Bootstrap3、自作テーマ作成、TwentyFourteen
Bootstrapのフリーのテーマを使ってデザインを簡単にカスタマイズ
~Bootstrap3のスタイルをカスタマイズ
 
WordPresssショートコード
 
簡単なショートコードを作ってみる
~ショートコードの作り方
ショートコードを使って関連記事のリンクを自動で挿入
~ショートコードの簡単なサンプル
ショートコードを使ってディレクトリ内のファイル名を取得し、投稿内にリンクを挿入
~カスタムフィールド利用、PHPで日本語文字列検索などのコーディング
 
AJAX、AngularJSなどその他応用
 
WordPress投稿内でAngularJSを使用
~AngularJS、Bootstrap、アコーディオン
Bootstrap3で作成したナビゲーションメニューをAngularJSに変更
~AngularJS、Bootstrap、自作テーマheder.php
WordPressでAngularJSを使ったGoogleマップを使えるようにする
~AngularJSを使って投稿内にGoogleマップ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください