BEGINNER'S GUIDE

WordPressに
ポートフォリオ作品を掲載する方法

作品フォルダのアップロードから、投稿の公開・修正・最終確認まで。実際の画面に沿って順番に進めます。

全16 STEPFileZilla＋WordPress初心者向け

はじめに

このマニュアルで行うこと

公開したい作品をサーバーへ置き、WordPressで紹介投稿を作成します。今回の「買い物リスト」は操作を説明するための実例です。Webサイト、アプリ、バナー、動画など、別の作品を掲載するときも同じ流れで進められます。

作品をアップロード投稿を作成公開後に確認

始める前に

作品フォルダと、投稿に使用するアイキャッチ画像を準備してください。保存場所は利用するPCによって異なります。

STEP 01

公開する作品を準備する

PC側で公開したい作品フォルダを開きます。ブラウザで表示するために必要なHTML、CSS、JavaScript、画像などが揃っていることを確認してください。

作品フォルダ名を確認する
作品のトップページ（index.html）が開ける状態にする
投稿用のアイキャッチ画像を用意する

STEP 02

FileZillaで作品をサーバーへアップロードする

FileZillaでは、左側のPCにある作品フォルダを、右側のサーバーにある公開用フォルダへアップロードします。

FileZillaの左側にPC、右側にサーバーのフォルダが表示された画面 — 1 PC側で作品フォルダを選び、サーバー側の公開用フォルダへアップロードします。

今回の画面では

shopping-listフォルダをapli内へ置いています。apliはこのサイトの公開先であり、すべての環境で同じ名前とは限りません。

STEP 03

作品URLをブラウザで確認する

アップロードが終わったら、WordPressの投稿を作る前に作品の公開URLをブラウザで開きます。画面が崩れていないか、基本操作ができるかを確認します。

ブラウザで正常に表示された買い物リスト作品 — 2 作品が正常に表示されたことを確認してから次へ進みます。

STEP 04

WordPressで新しい投稿を作る

WordPress管理画面を開き、左側の「投稿」から新しい投稿を作成します。

WordPressのダッシュボード画面 — 1 管理画面で「投稿」を選びます。

WordPressの投稿一覧画面 — 2 「投稿を追加」を押します。

WordPressの新規投稿編集画面 — 3 新しい投稿編集画面が開きます。

右側の設定

スラッグ、アイキャッチ画像、カテゴリーを設定するときは、右側の「投稿」を選びます。

STEP 05

作品タイトルを入力する

「タイトルを追加」へ作品名を入力します。タイトルは日本語でも英語でも構いません。今回の実例では「買い物リスト」と入力しています。

投稿タイトルに買い物リストと入力した画面 — 1 紹介する作品の名前をそのまま入力します。

STEP 06

スラッグを確認・変更する

スラッグは、投稿ページのURLの最後に使用される文字列です。日本語タイトルを入力すると、スラッグも日本語で自動生成される場合があります。

日本語の買い物リストがスラッグに設定された変更前の画面 — 自動生成された日本語スラッグ

shopping-listへ変更した後のスラッグ画面 — shopping-listへ変更

付け方の目安

半角英数字とハイフンを使い、作品内容が分かる短い文字列にします。タイトルを英語へ変更する必要はありません。

STEP 07

アイキャッチ画像を設定する

右側の「アイキャッチ画像を設定」を押します。新しい画像を使う場合と、アップロード済みの画像を使う場合で入口が分かれます。

ファイルをアップロードとメディアライブラリを選べるアイキャッチ画像画面 — 1 新しい画像は「ファイルをアップロード」、登録済み画像は「メディアライブラリ」を選びます。

今回は新しい画像を使用するため、まず「ファイルをアップロード」を選びます。続いて「ファイルを選択」を押し、PCから目的の画像を選びます。

PC上でshopping-thumbnail.pngを選択した画面 — 2 ファイル名を確認して画像を選択します。

メディア画面でアイキャッチ画像を選択済みの状態 — 3 目的の画像にチェックが付いたことを確認します。

投稿設定欄にアイキャッチ画像が表示された画面 — 4 右側に画像が表示されれば設定完了です。

STEP 08

カテゴリーを設定する

右側の「カテゴリー」を開き、作品に合うカテゴリーを選びます。

カテゴリー一覧を開いた選択前の画面

allとアプリを選択した画面

カテゴリーはサイトに合わせます

今回のサイトでは、既存作品の運用に合わせて「all」と「アプリ」を選択しています。「all」はすべてのWordPressサイトで必須という意味ではありません。

STEP 09

投稿本文を作成する

本文は「使用ツール」「使用技術」「作品概要」「工夫した点」「制作時間」の順に作ります。最初の【使用ツール】を例に、見出しと本文の作り方を確認します。

ブロック追加メニューで見出しとH2が表示された画面 — 1 「＋」から見出しブロックを追加します。

H2の見出しブロックを追加した状態 — 2 見出しレベルはH2を使用します。

H2見出しに使用ツールと入力した状態 — 3 【使用ツール】と入力します。

Shift＋Enterは使いません

【使用ツール】の入力後はEnterを押し、新しい「段落」ブロックを作ります。Shift＋Enterでは同じ見出し内の改行になり、続く本文までH2になります。

使用ツール見出しの下に段落ブロックができた画面 — 4 Enterで段落ブロックを作ります。

段落ブロックへ使用技術を入力している画面 — 5 各見出しの下へ内容を入力します。例：この画面では【使用技術】の内容を入力しています。

使用ツール

制作・開発・公開に使ったソフトやサービス。

例：ChatGPT / Codex / Laragon / FileZilla

使用技術

作品を実装するために使った技術。

例：HTML / CSS / JavaScript / Web Speech API / LocalStorage / PWA

【作品概要】【工夫した点】【制作時間】も同じ方法で、H2見出しと段落を組み合わせて作成します。

使用ツール、使用技術、作品概要、工夫した点、制作時間を入力した本文全体 — 本文全体の完成例

STEP 10

公開作品へのリンクを設定する

本文の最後に「作品を見る」と入力し、その文字へSTEP 3で確認した作品URLを設定します。

作品を見るの文字を選択してリンクアイコンを押す画面 — 1 文字をドラッグして選択し、リンクアイコンを押します。

作品URLをリンク入力欄へ入力する画面 — 2 作品URLを入力し、送信ボタンで確定します。

作品を見るへのリンク設定が完了した画面 — 3 文字がリンクになったことを確認します。

STEP 11

公開前にプレビューする

公開前に右上のプレビューアイコンを押します。表示されたメニューから「新しいタブでプレビュー」を選びます。

プレビューアイコンを押す前の投稿編集画面 — 1 右上のプレビューアイコンを押します。

デスクトップ、タブレット、モバイル、新しいタブでプレビューが表示されたメニュー — 2 「新しいタブでプレビュー」を選びます。

新しいタブに表示された投稿プレビュー — 3 アイキャッチ画像、タイトル、本文、文字の大きさ、レイアウト、「作品を見る」リンクを確認します。

STEP 12

投稿を公開する

公開操作は2段階です。編集画面右上の「公開」を押し、最終確認画面でもう一度「公開」を押します。

編集画面右上に公開ボタンが表示された公開前の画面 — 1 右上の「公開」を押します。

公開してもよいですかと表示された最終確認画面 — 2 最終確認後、もう一度「公開」を押します。

買い物リストを公開しましたと表示された公開完了画面 — 3 「○○を公開しました。」が表示されれば完了です。

STEP 13

公開済みの投稿をあとから修正する

投稿一覧を開き、修正したい作品タイトルを押します。公開済み投稿の編集画面が開きます。

買い物リストが追加された公開後の投稿一覧 — 1 修正したい作品タイトルを押します。

公開済みの買い物リスト投稿を開いた編集画面 — 2 公開済み投稿では右上に「保存」が表示されます。

内容変更前で保存ボタンが薄い状態 — まだ変更がないため「保存」は薄い状態です。

内容を修正して保存ボタンが濃い青になった状態 — 内容を修正すると「保存」が濃い青になり、押せる状態になります。

修正を反映する

濃い青になった「保存」を押します。保存が完了すると、一時的に更新完了のメッセージが表示されます。

STEP 14

リンクと作品本体を確認する

「作品を見る」に正しいリンクが設定されていることを確認し、リンクから実際の作品を開きます。

公開済み投稿で作品を見るリンクを確認する画面 — 1 「作品を見る」を選択し、リンク先を確認します。

リンクから正常に開いた買い物リスト作品 — 2 リンクを開き、作品が正常に表示・操作できるか確認します。

STEP 15

ポートフォリオ一覧への反映を確認する

ポートフォリオの一覧ページを開き、公開した作品が表示されていることを確認します。

買い物リストが表示されたポートフォリオのアプリ一覧 — 作品タイトルとサムネイルが表示され、選択したカテゴリーの一覧へ反映されているか確認します。

STEP 16

公開した投稿ページを最終確認する

一覧から作品を選び、公開済みの投稿ページを上から下まで確認します。次の2枚は、同じ投稿ページの上部と下部です。

公開した買い物リスト投稿ページの上部 — 同じ投稿ページ：上部

途中を省略

同じ買い物リスト投稿ページの下部 — 同じ投稿ページ：下部

コメント欄について

使用しているテーマや設定によって、投稿下部にコメント欄が表示される場合があります。

FINAL CHECK

公開作業は完了です

最後に、次の項目がすべて確認できれば完了です。

投稿ページが正常に開く
タイトル・本文・アイキャッチ画像が正しい
「作品を見る」から実際の作品が開く
作品本体が正常に表示・操作できる
ポートフォリオ一覧に作品が表示される
サムネイルとカテゴリーへの反映が正しい

ページ上部へ戻る