画像の扱い方(アップロード, 挿入, 編集, アイキャッチ)

ここでは、WordPressで画像を扱う上で知っておくべき知識をまとめました。「画像アップロード」「画像の挿入」「画像編集」「アイキャッチ」について紹介します。

画像アップロード

投稿の編集時に、記事の中で利用したい画像をアップロードする方法を紹介します。

649-wordpress-migration_1.png

まず、「メディアを追加」をクリックします。

649-wordpress-migration_2.png

表示された画面で「ファイルをアップロード」を選択します。

649-wordpress-migration_3.png

すると、画面のように、ローカル上にある画像ファイルをドラッグ&ドロップすることができます。

これで、サーバ上に画像をアップロードすることができました。

画像の挿入

アップロードした画像を記事に挿入してみます。

649-wordpress-migration_4.png

記事へ挿入したい画像を選択します。

649-wordpress-migration_5.png

サイズや配置を選択して、「投稿に挿入」をクリックします。

649-wordpress-migration_5_5.png

すると、画面のように選択した記事を表示するためのHTMLが自動で記述されます。

画像サイズについて

649-wordpress-migration_6.png

挿入する画像のサイズは、「サムネイル」「中」「大」「フルサイズ」から選択できるようになっています。

「フルサイズ」は、アップロードした画像のことをさしています。「サムネイル」「中」「大」は、画像をアップロードしたとき自動で生成された異なるサイズの画像です。

649-wordpress-migration_7.png

この異なる画像のサイズは管理画面の「設定」⇒「メディア」から変更できます。

「中サイズ」と「大サイズ」は、元の画像の縦横比のまま上限サイズの範囲内で最大の大きさになるように縮小されます。

画像編集

649-wordpress-migration_8.png

WordPress上で簡単な画像編集もできます。まずは、編集したい画像を選択して「画像を編集」をクリックします。

649-wordpress-migration_9.png

すると、画像の編集画面が表示されます。この画面で、「画像の回転、反転」「画像縮尺の変更」「トリミング」をすることができます。

アイキャッチ設定

アイキャッチ画像を設定する方法を紹介します。まずは、アイキャッチ画像の機能を有効化させる必要があります。functions.phpに次の記述をします。

add_theme_support('post-thumbnails');
649-wordpress-migration_22.png

add_theme_support関数は、引数で指定されたWordPressの機能を有効化させます。この記述をすることで、画像のようにアイキャッチ画像を設定するエリアが表示されるようになります。

649-wordpress-migration_23.png

「アイキャッチ画像を設定」をクリックすると、アイキャッチとして表示する画像を選択することができます。

649-wordpress-migration_24.png

アイキャッチを設定すると、設定エリアに指定した画像が表示されるようになります。

アイキャッチ画像の表示

アイキャッチ画像を表示するには、 the_post_thumbnail関数 を利用します。the_post_thumbnail関数 は2通りの利用方法があります。

方法1

// functions.phpに記述
set_post_thumbnail_size(200, 150, true);
 
// テンプレートファイルに記述
the_post_thumbnail();

the_post_thumbnail関数を引数なしで実行した場合、set_post_thumbnail_sizeで指定したサイズで表示されます。上記の例ですと、「横200px 縦150px トリミングあり」で画像が表示されます。

方法2

// functions.phpに記述
add_image_size('small_thumbnail', 150, 110, true);
 
// テンプレートファイルに記述
the_post_thumbnail('small_thumbnail');

もう1つの方法は、add_image_size関数の第一引数で設定した文字列をthe_post_thumbnail関数の引数に渡して実行する方法です。上記の例ですと、「横150px 縦110px トリミングあり」で画像が表示されます。

トリミングについて
もとの画像の縦横比を維持したまま縮小したうえで画像の中央部を設定値に合わせてトリミングします。
Regenerate Thumbnails
set_post_thumbnail_size関数、add_image_size関数での設定はアップロード済みのアイキャッチ画像には適用されません。既にアップロードした画像に適用させたい場合は、Regenerate Thumbnailというプラグインを利用することをおすすめします。このプラグインは既にアップロードした画像の再生成をしてくれます。
【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。

logo
わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。