WordPressでは、ただ単純に画像ファイルをアップロードして投稿に挿入するだけではなく、自動で複数サイズの画像ファイルを作成したり、画像のサイズを変更したりする事もできます。
※目次をクリックすると目次の下部にコンテンツが表示されます。
- 1.大きい画像をアップロードすると自動で小さいサイズの画像を作成?
- 2.WordPressで画像の編集もできる
- 3.自動作成された中(300ピクセル幅)サイズ画像を投稿に挿入して、リンク先にオリジナルの画像ファイルを指定
大きい画像をアップロードすると自動で小さいサイズの画像を作成?
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つの種類ごとに決まっていて、この上限設定より大きい画像サイズをアップロードすると自動でそれより小さい画像サイズのファイルを作成してくれるようです。
①画像サイズの上限設定
管理画面の「設定」→「メディア」
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
・元の画像を復元
画像の拡大縮小を実行すると、”元の画像を復元”というリンクが表示されるようになり、元の画像にすぐに戻す事ができます。
②投稿に挿入した画像の編集
投稿または固定ページの編集画面
→ビジュアルエディタに切り替える
→挿入した画像が表示されるので、画像をクリックし、左上の”画像を編集”をクリック
画像のサイズ、配置、テキストの回りこみ、その他様々な項目を設定できます。
アップロード済みの画像ファイルの編集や投稿に挿入済みの画像の編集を行う事ができます。
①アップロードしたファイルの画像の編集
管理画面の「メディア」→「ライブラリ」
→編集対象の画像にカーソルをあて、「編集」をクリック
→「画像編集」をクリック
・画像の拡大縮小
画像のサイズを変更すると、アップロード先のディレクトリ内では下記のように元の画像ファイルは保持されたまま、別の画像ファイルが作成されます。
元の画像 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>
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を使って自作テーマ作成
- (1)全体概要
- (2)ブートストラップのサンプルを使ってindex.phpを作成
- (3)header.php、sidebar.php、footer.php、index.phpのテンプレートファイル作成
- (4)JavaScriptインクルードの設定
- (5)投稿本文表示用のテンプレートファイルを作成
- (6)単一投稿用(single.php)のテンプレートファイル作成
- (7)固定ページ用(page.php)のテンプレートファイル作成
- (8)検索結果表示用(search.php)のテンプレートファイル作成
- (9)アーカイブ表示用(archive.php)のテンプレートファイル作成
- (10)カテゴリー表示用(category.php)のテンプレートファイル作成
- (11)WordPressのメニュー画面でナビゲーションメニューを設定
- (12)サイトタイトル、キャッチフレーズを表示できるようにheader.phpを修正
- (13)カスタムヘッダー画像を使えるようにheader.phpを修正
- (14)404.phpテンプレートファイルを作成
- (15)記事タイトル部分のCSS設定
- (16)記事メタデータ部分のCSS設定
- (17)記事本文部分のCSS設定
- (18)前後のページへのリンクのCSS設定
- (19)前後の投稿へのリンクのCSS設定
- (20)コメント投稿フォーム、コメント表示部のCSS設定
- (21)ウィジェット部のCSS設定
- (22)アーカイブページのCSS設定
- (23)画面を左右にスライドさせるボタンのCSS設定
- ~Bootstrap3、自作テーマ作成、TwentyFourteen
- Bootstrapのフリーのテーマを使ってデザインを簡単にカスタマイズ
- ~Bootstrap3のスタイルをカスタマイズ
- 簡単なショートコードを作ってみる
- ~ショートコードの作り方
- ショートコードを使って関連記事のリンクを自動で挿入
- ~ショートコードの簡単なサンプル
- ショートコードを使ってディレクトリ内のファイル名を取得し、投稿内にリンクを挿入
- ~カスタムフィールド利用、PHPで日本語文字列検索などのコーディング
- WordPress投稿内でAngularJSを使用
- ~AngularJS、Bootstrap、アコーディオン
- Bootstrap3で作成したナビゲーションメニューをAngularJSに変更
- ~AngularJS、Bootstrap、自作テーマheder.php
- WordPressでAngularJSを使ったGoogleマップを使えるようにする
- ~AngularJSを使って投稿内にGoogleマップ
WordPresssショートコード
AJAX、AngularJSなどその他応用
- Ruby on Rails(他サイト)
- ~構築、CMS、Bootstrap、AngularJS
-
WordPress設定
- WordPressリファレンス、メモ
- パーマリンク設定時のApache設定
- WordPressテーマの選定
- WordPressで画像のアップロード、サイズ調整、リンクを設定
- マルチサイト化に伴う制約、デメリット
- WordPressのwp-config.phpでテーブルプレフィックスを変更
- WordPress投稿のリビジョン管理と自動保存
- WordPressディレクトリのパーミッションをセキュアに
- WordPressの認証用ユニークキーをセキュアに
- WordPressのバージョン情報を表示しないようにする
- WordPressでGoogleの2段階認証プロセスを使用する手順
- WordPressの更新情報・要件、各バージョンの新機能
- WordPressデータベースのバックアップとリストア
- WordPress用データベースバックアップをbashスクリプトとcronで定期実行
- WordPressのバージョンアップと旧バージョンへの戻し
- WordPressの記事をサイト間でコピーする方法
- WordPressのアップデート方法の種類、注意点
- WordPressのメンテナンスモード、カスタムメンテナンスページ
- WordPressでデバッグを有効にする方法
- WordPressの投稿内でJavaScriptを使う方法
- WordPressでJavaScriptを使って折りたたみリンクメニューを作成
- 自ブログ動作確認時にGoogleアドセンスの広告を表示しない
- WordPressでAngularJSを使ったGoogleマップを使えるようにする
- WordPressの投稿にAngularJSのディレクティブを記述する方法
セキュリティ
メンテナンス
その他、応用