この記事を読むのに必要な時間は約 29 分です。

 

本記事では、未経験からWebデザイナーを目指すために、2023年1月～10月までの間、私が実際に行ってきた学習方法についてまとめましたので、簡単にご紹介していきたいと思います。

 

コーディング方法などの各学習工程の詳細はリンク先の記事に記載しておりますので、そちらをご覧ください。

 

 

 

<1月上旬～2月上旬>
HTML５/CSS3によるwebサイト制作における基礎学習

 

 

この期間の学習工程を大きく分けると、次のようになります。

 

• <1月上旬>
  HTML/CSSの基礎的なコードを学習開始
• <1月中旬>
  HTML/CSSのみ・レスポンシブ未対応の簡単なサイト模写開始/Googleマップ導入
• <2月上旬>
  HTML/CSSのみ・レスポンシブ対応のサイト模写開始/お問い合わせフォーム作成

 

学習方法は以下の通りです。

 

 

<1月上旬>
HTML/CSSの基礎的なコードを学習開始

 

2023年1月上旬からwebサイト制作学習を本格的に開始しました。

まず、webサイト制作の基礎的な部分の学習として以下のことを行いました。

 

• プログラミング学習サービス「ドットインストール」を利用し、HTML/CSSの基礎的なコードを学習
• youtube上のHTML/CSSのコーディング動画視聴

 

 

「ドットインストール」とは、無料で73のレッスン動画が視聴可能なプログラミング学習サービスです。

Web制作学習開始直後は、こちらのサービスを利用し、基本的なコードを学習しました。

 

参考：ドットインストール

 

 

また、YouTube上の初心者向けのHTML/CSSコーディング動画を視聴し、基本的なコーディングの流れについて理解していきました。

 

参考：youtube上のコーディング作業紹介動画（HTML）

参考：youtube上のコーディング作業紹介動画（CSS）

 

 

<1月中旬>
HTML/CSSのみ・レスポンシブ未対応の簡単なサイト模写とGoogleマップの導入

 

1月中旬から、実際にHTML/CSSのコードを打ち込んでいき、コーディングの練習を開始しました。

主に行ったことは以下の通りです。

 

• HTML/CSSのみ・レスポンシブ未対応の簡単なサイト模写開始
• Googleマップ導入

 

 

サイト模写では、1ページのみの簡単なサイトをお手本にし、同じように作っていきました。

この段階ではレスポンシブ未対応であり、PC版のみのコーディングを行いました。

 

 

 

 

Googleマップは、Googleマップ上のHTMLコード（iframeタグ）をコピペしてきて実装しました。

サイズ調整はCSSで行いました。

 

参考：googleマップ実装方法

 

 

<2月上旬>
HTML/CSSのみ・レスポンシブ対応のサイト模写とお問い合わせフォーム作成

 

2月上旬からも引き続き、HTML/CSSのコーディングの練習を行いました。

主に行ったことは以下の通りです。

 

• HTML/CSSのみ・レスポンシブ対応のサイト模写開始
• お問い合わせフォーム作成

 

 

レスポンシブ対応とは、PCやスマートフォンなど様々なデバイスのサイズに合わせて、見やすくサイト表示をさせることを言います。

メディアクエリを使用し、以下のように横幅が変わっても見やすく表示されるようなサイトをコーディングしました。

 

 

お問い合わせフォームはinputタグやtextareaタグなどを使って作成しました。

ただし、あくまで表面上の形のみの作成であり、実際のフォーム送信はこの段階では不可能です（後々ご紹介するWordPress学習においてフォーム送信が可能となります）。

 

 

 

こちらの学習工程の詳細については以下の記事をご覧ください。

【はじめてのHTML/CSS】HTML５/CSS3によるwebサイト制作における基礎学習

 

 

 

<3月中旬～4月下旬>
webサイト設計の実装（必要機能・制作補助ツール「Bootstrap4」の導入）

 

 

この期間の学習工程を大きく分けると、次のようになります。

 

• <3月中旬>
  ボックス配置学習/ブラウザ上でのデバッグツールの検証
• <4月上旬>
  JavaScript(jQuery)を用いたハンバーガーメニュー実装
• <4月中旬>
  フレームワークの「Bootstrap4」を用いた簡単なオリジナルサイト作成開始
• <4月下旬>
  新たにサイト模写開始/ドロップダウンメニュー実装

 

学習方法は以下の通りです。

 

 

<3月中旬>
ボックス配置学習とブラウザ上でのデバッグツールの検証

 

3月中旬から、webサイト設計の際に必要となる基本的な知識について学習していきました。

主に行ったことは以下の通りです。

 

• ボックス配置学習
• ブラウザ上でのデバッグツールの検証

 

 

ボックス配置とは、Webサイト上に複数のボックスを作り、各ボックスにヘッダーやフッター、ナビゲーションメニュー、メイン部分などを当てはめてレイアウトを決めていく方法です。

Webサイトを設計する際のレイアウトは、基本的にはこのボックス配置により構成していきました。

 

 

デバッグツールは、コーディングの際、バグが起こった原因を調べるためによく使用されます。

以下はGoogle Chromeのデバッグツールを使用した検証画面です。

 

 

<4月上旬>
JavaScript(jQuery)を用いたハンバーガーメニュー実装

 

4月上旬からはJavaScript(jQuery)の学習を始めました。

まず、PC時とスマホ時でナビゲーションメニューの表示が切り替わるハンバーガーメニューの実装を行いました。

 

 

 

 

参考：ハンバーガーメニュー実装方法

 

 

<4月中旬>
フレームワークの「Bootstrap4」を用いた簡単なオリジナルサイト作成開始

 

4月中旬からは、グリッドデザインフレームワークである「Bootstrap4」を用いてコーディングの効率化を行いました。

主に行ったことは以下の通りです。

 

• 「Bootstrap4」の導入
• 「Bootstrap4」の「12グリッド」を用いた簡単なオリジナルサイト作成

 

 

Bootstrap4専用クラスを使用することで簡単にレイアウトを組むことが可能です。

以下は「containerクラス」「rowクラス」「colクラス」を使用した12グリッドレイアウトです。

 

 

<4月下旬>
新たなサイト模写開始とドロップダウンメニュー実装

 

4月下旬からも引き続き、「Bootstrap4」によるコーディングの効率化を行いました。

主に行ったことは以下の通りです。

 

• 新たにサイト模写開始（複雑な形のグリッドデザイン）
• 「Bootstrap4」を用いたドロップダウンメニュー実装

 

 

以下のような複雑な形のグリッドデザインも作成しました。

こちらも「containerクラス」「rowクラス」「colクラス」を使用することで実装が可能です。

 

 

Bootstrap4を使用すればドロップダウンメニューも簡単に作ることができます。

ドロップダウンメニュー専用クラスの使用で、以下のような形が実装可能です。

 

 

 

こちらの学習工程の詳細については以下の記事をご覧ください。

【webサイト設計の実装】必要機能・制作補助ツール（Bootstrap4）の導入

 

 

 

<5月上旬～5月下旬>
Webデザインのためのデザインソフト「photoshop」を用いたデザイン学習

 

 

この期間の学習工程を大きく分けると、次のようになります。

 

• <5月上旬>
  photoshop CCでの画像加工学習開始/実践バナー作成
• <5月中旬>
  画像ファイル拡張子の種類・違い・役割について学習/web媒体と紙媒体の色・解像度の違いについて学習
• <5月下旬>
  photoshop CCで作成した画像を用いたオリジナルサイト作成開始/リピート背景画像作成/トップへ戻るボタン画像の作成・実装

 

学習方法は以下の通りです。

 

 

<5月上旬>
photoshop CCでの画像加工学習開始

 

5月上旬より、photoshop CCを用いた画像加工学習を開始し、主に以下のことを行いました。

 

• photoshop CC基本操作学習（切り抜き/文字入れ/レイヤー効果）
• 実践バナー作成

 

 

基本操作はphotoshop CC内のチュートリアルを利用し、実際に操作しながら学びました。

以下は人物の切り抜きや文字入れ、影を付けるなどのレイヤー効果を使用し作成したバナーです。

 

参考：切り抜き、文字入れ、影や境界線付ける方法

参考：モフモフした動物の切り抜き方

参考：グラデーションのかけ方

参考：バナー作成

 

 

<5月中旬>
画像ファイル拡張子とweb・紙それぞれに適した形式設定について学習

 

5月中旬より、Webデザインで重要となる、画像ファイル拡張子とweb媒体・紙媒体それぞれに適した形式設定について学習を行っていきました。

主な学習内容は以下の通りです。

 

• 画像ファイル拡張子（JPEG/PNG-24/PNG-8/GIF）の種類・違い・役割の理解
• web媒体と紙媒体の色・解像度の違いに関する学習

 

 

画像ファイル拡張子（JPEG/PNG-24/PNG-8/GIF）の種類や、色数・圧縮形式・透過・データ容量・役割などの違いについて学習しました。

以下はそれらをまとめた表となります。

 

参考：それぞれの画像ファイルの違い１

参考：それぞれの画像ファイルの違い２

 

 

web媒体と紙媒体のそれぞれの色・解像度の指定方法についても学習しました（WebがRGB・72dpiまたは72ppi、紙がCMYK・360dpiまたは360ppi）。

例えば、Web媒体の色・解像度を指定する場合、photoshopでの設定方法は以下の通りになります。

 

 

<5月下旬>
実践オリジナルサイト作成

 

5月下旬より、photoshop CCで作成した画像を用いたオリジナルサイトを作成開始しました。

photoshop CCで作成した画像は以下の通りです。

 

• リピート背景画像の作成と実装
• 猫の切り抜き画像の作成
• トップへ戻るボタン画像の作成と実装

 

 

リピート背景画像を繰り返し表示させることによって、以下のような背景を作成しました。

実装にはCSSのbackground-repeatプロパティを使用しました。

 

参考：リピート背景作成方法

 

 

モフモフとした輪郭の猫の切り抜きを行いました。

切り抜く際は適度にぼかしを入れるなどして、猫の柔らかさが消えないように意識しました。

 

 

トップへ戻るボタンを作成し、押すとページ上部になめらかに戻るようにしました。

jQueryは使わずHTMLとCSSのみで実装しました。

 

参考：トップへ戻るボタンの作成方法

 

 

 

こちらの学習工程の詳細については以下の記事をご覧ください。

【photoshop】Webデザインのためのデザインソフト/デザインの学習

 

 

 

<5月下旬～9月下旬>
より高度なデザイン・コーディングスキルの習得

 

 

この期間の学習工程を大きく分けると、次のようになります。

 

• <5月下旬>
  複雑な形のハンバーガーメニュー実装
• <6月上旬>
  一部オリジナルデザインの動きのあるサイト模写開始/LP（ランディングページ）画像のデザイン学習・作成開始
• <6月中旬>
  LP（ランディングページ）のコーディング開始
• <6月下旬>
  画像やテキストのフェードイン実装/画像遅延読み込み「lazysizes」実装/動画挿入
• <7月上旬>
  別商品のLPデザイン作成開始
• <7月中旬>
  「slick」を用いたスライドショー実装
• <8月下旬>
  「続きを読む・もっと見る」ドロップダウン機能の実装
• <9月下旬>
  LP申し込みフォーム作成（入力内容エラーチェック）/選択肢によって表示内容が変わるプルダウン実装

 

学習方法は以下の通りです。

 

 

<5月下旬>
複雑な形のハンバーガーメニュー実装

 

5月下旬には、

 

• 画面の横幅90％で開く
• 隙間から見えているホームページ部分を少し暗くする
• 隙間から見えているホームページ部分をクリックしてもハンバーガーメニューを閉じることができるようにする

 

といった複雑な形のハンバーガーメニューの実装を行いました。

 

 

 

参考：複雑な形のハンバーガーメニュー実装コード

 

 

<6月上旬>
一部オリジナルデザインの動きのあるサイト模写とLP（ランディングページ）デザイン学習・画像作成開始

 

6月上旬から行ったことは以下の通りです。

 

• 一部オリジナルデザインの、動き（フェードインなど）のあるサイト模写開始
• LP（ランディングページ）画像作成開始

 

 

新たに作り始めたサイトでは、デザイン面に関しては、背景をグラデーションにしてみる、キャッチコピーを考えるなど、一部オリジナル要素を足して作成しました。

サイト設計に関しては参考サイトと同じような作りになっています。

 

 

実際のLPやPinterest内のLPデザインを参考に、LP画像を制作していきました。

以下はphotoshop CCを使用し作成したLPトップ画像です。

 

 

<6月中旬>
LP（ランディングページ）のコーディング開始

 

6月中旬からは、photoshop CCでLP画像を作成していきつつ、すでに出来上がったLP画像を用いてLPの作成を開始しました。

主に行ったことは以下の通りです。

 

• 作成済みLP画像を用いてLPのコーディング開始
• 動く購入ボタンの作成と実装

 

 

購入ボタン画像は、プルっとした水っぽいデザインにし、photoshop CCで作成しました。

ゆっくりと拡大・縮小を繰り返す動きは、CSSのkeyframesとanimationを利用して実装しました。

 

参考：拡大縮小を繰り返す購入ボタンのデザイン

参考：拡大縮小を繰り返す購入ボタンの実装方法

 

 

<6月下旬>
フェードインと画像遅延読み込み「lazysizes」実装/動画挿入

 

6月下旬から行ったことは以下の通りです。

 

• 画像やテキストのフェードイン実装
• 画像遅延読み込み「lazysizes」実装
• LP内に好きな形に切り抜いて動画挿入

 

 

スクロールすると下から画像がフワッと出てくるようなフェードインの実装を行いました。

以下の画像は下スクロールでフェードインが繰り返し可能となっています。

 

 

「lazysizes」は、画像などを遅延読み込みするための「JavaScript製プラグイン」であり、実装によって、サイト上に多くの画像を使用していても読み込み処理に負担をかけず、表示速度が遅くなるのを防ぐことができます。

lazysizesの実装は、SEO対策（クローラー対策）としても有効です。

 

 

参考：「lazysizes」実装方法１

参考：「lazysizes」実装方法２

 

 

<7月上旬>
別商品のLPデザイン作成開始

 

7月上旬からは、別商品のLP画像をphotoshop CCで作成していきました。

前回作成していたLP画像よりも、よりデザインにこだわって制作しました。

 

 

 

 

<7月中旬>
「slick」を用いたスライドショー実装

 

7月中旬には、以下のようなフェードインで切り替わるスライドショーの実装を行いました。

こちらはスライダープラグイン「slick」を使用し実装しました。

コーディングが複雑ではないので、とても簡単に実装することができました。

 

 

• 
• 
• 

 

参考：「slick」を用いたスライドショー実装方法

 

 

<8月下旬>
「続きを読む・もっとみる」ドロップダウン機能の実装

 

8月下旬には、より複雑な形をしたドロップダウンの実装を行いました。

具体的には、「もっとみる」ボタンを押すと、グラデーションで隠れていた続きのコンテンツ内容が表示されるというもので、以下のような形のドロップダウンを実装しました。

 

 

「もっとみる」ボタンを押すと

 

続きのコンテンツ内容が表示される

 

参考：「続きを読む・もっとみる」ドロップダウン機能実装方法

 

 

<9月下旬>
LP申し込みフォーム作成（入力内容エラーチェック）と選択肢によって表示内容が変わるプルダウン実装

 

9月下旬から行ったことは以下の通りです。

 

• LP申し込みフォーム作成（入力内容エラーチェック）
• 選択肢によって表示内容が変わるプルダウン実装

 

 

入力内容エラーチェックは、inputタグと、required属性・pattern属性・minlength属性などを使用して実装しました。

これによって、空欄のまま送信したり、入力文字数が必要文字数に達していないまま送信すると、エラーメッセージが表示されるようになります。

 

 

申し込みフォームで、空欄のまま送信すると入力必須を知らせるエラーメッセージ

 

必要な文字数に達していないと以下のエラーメッセージ

 

参考：生年月日入力フォームの作り方

参考：required属性を使って入力フォームに必須項目を作る方法

参考：パスワード入力欄作成と入力文字の制限方法

参考：pattern属性で電話番号・郵便番号・フリガナ・空白などを判別する方法

 

 

セレクトメニューの選択肢によって下に表示される内容が切り替わるプルダウンの実装を行いました。

具体的には以下のように、「お支払い方法」のセレクトメニューで何を選ぶかによって、その下に表示される内容が切り替わるというものです。

 

 

参考：選択肢によって表示内容が変わるプルダウン実装方法

 

 

 

こちらの学習工程の詳細については以下の記事をご覧ください。

【より高度なweb制作スキルの習得】デザインとコーディングの実践練習

 

 

 

＜7月中旬～8月下旬＞
ポートフォリオサイト制作

 

 

この期間の学習工程を大きく分けると、次のようになります。

 

• <7月中旬>
  ポートフォリオサイトの設計開始/サイトマップ作成/ワイヤーフレーム作成
• <7月下旬>
  ポートフォリオサイトのデザインカンプ作成/コーディング開始/モックアップ作成
• <８月上旬>
  自動スライダー実装/タブ切り替えメニュー実装
• <８月中旬>
  photoshop CCでポートフォリオサイト内の装飾用画像（ファーストビュー/ロゴ/複雑な形のリピート背景/About用似顔絵イラスト/トップへ戻るボタン画像）作成
• <８月下旬>
  下スクロールで出てくるトップへ戻るボタン実装

 

学習方法は以下の通りです。

 

 

<7月中旬>
ポートフォリオサイトの設計開始【サイトマップ・ワイヤーフレーム作成】

 

7月中旬より、ポートフォリオサイトの設計を開始し、主に以下のことを行いました。

 

• サイトマップ作成(トップページ/Worksページ/Aboutページ/Contactページ/作品詳細ページ)
• ワイヤーフレーム作成

 

 

設計段階では、まず、今回作るポートフォリオサイトに必要なページは何かを考え、photoshp CCでページ構成を視覚的に示すためのサイトマップを作成しました。

そのあと、各ページのコンテンツ内容やレイアウトなどを考え、同じくphotoshop CCでワイヤーフレームを作っていきました。

 

参考：サイトマップ作成方法

 

 

ワイヤーフレーム作成

 

 

<7月下旬>
デザインカンプ作成とコーディング開始

 

7月下旬よりデザインカンプを作成し、それをもとにコーディング作業を開始しました。

主に行ったことは以下の通りです。

 

• デザインカンプ作成
• デザインカンプをもとにコーディング開始
• パソコン/スマホ/タブレットのモックアップ作成

 

 

ポートフォリオサイトのデザインは、Pinterest内のアイデアを参考にしながら決めていきました。

デザインカンプも設計時と同じくphotoshopで作成しました。

 

 

webサービス「Mockup Photos」を利用し、作品紹介用モックアップを作成しました。

Mockup Photosを利用すれば、以下のようなモックアップやPC単体・スマホ単体など様々なモックアップを作成することができます。

 

 

<８月上旬>
自動再生スライダーとタブ切り替えメニュー実装

 

８月上旬より、JavaScript (jQuery)による以下の実装を行いました。

 

• 「slick」を使用した自動再生スライダー実装
• 「Bootstrap4」を使用したタブ切り替えメニュー実装

 

 

自動再生スライダーは、jQueryベースのスライダープラグインである「slick」を用いて実装しました。

スライダーの1段目と2段目で流れる方向が逆になるように設定しました。

 

参考：「slick」を使用した自動再生スライダー実装方法

 

 

タブ切り替えメニューは、Bootstrap4の専用クラスを使用して実装しました。

以下のように、カテゴリーごとに作品の表示を切り替えることが可能です。

 

 

参考：「Bootstrap4」を使用したタブ切り替えメニュー実装方法

 

 

<８月中旬>
photoshop CCでポートフォリオサイト内の装飾用画像作成

 

８月中旬より、ポートフォリオサイト内で使用する装飾用画像の作成を開始しました。

 

主に

 

• ファーストビュー
• ロゴ
• 複雑な形のリピート背景（ヘッダー・フッターのクリーム/大きいクリーム/ホイップクリーム）
• About用似顔絵イラスト
• トップへ戻るボタン画像

 

などの画像をphotoshop CCを使用して作成しました。

 

 

ファーストビュー

 

 

ロゴ

 

 

複雑な形のリピート背景

 

 

似顔絵用イラスト

 

 

トップへ戻るボタン画像

 

 

<８月下旬>
下スクロールで出てくるトップへ戻るボタン実装

 

８月下旬には、上記で作った画像を用いて下スクロールで出てくるトップへ戻るボタンの実装を行いました。

実装には、HTML/CSSのほか、jQueryを使用しました。

 

 

ページ最上部にいるときは表示されないが

 

そこから少し下へスクロールするとフワッと出てくる

 

参考：下スクロールで出てくるトップへ戻るボタンの実装方法

 

 

 

こちらの学習工程の詳細については以下の記事をご覧ください。

ポートフォリオの作り方【未経験】（サイトマップ作成から静的コーディング完了まで）

 

 

 

＜9月上旬～9月下旬＞
WordPress学習①（導入～テーマ化）

 

 

この期間の学習工程を大きく分けると、次のようになります。

 

• <9月上旬>
  ポートフォリオサイト（当サイト）のWordPress自作テーマ化開始/ローカル環境構築/PHP学習開始
• <9月中旬>
  ファイル分割によるテーマ化（home.php・header.php・footer.php）/固定ページ作成/「contact form 7」を用いたお問い合わせフォーム実装（メール送受信検証済み）
• <9月下旬>
  問い合わせ完了ページ作成/WordPressリンク調整

 

学習方法は以下の通りです。

 

 

<9月上旬>
ポートフォリオサイトのWordPress自作テーマ化開始

 

9月上旬より、ポートフォリオサイト（当サイト）のWordPress自作テーマ化を開始しました。

最初に、WordPress化の下準備として以下のことを行いました。

 

• 「Local by Flywheel」を利用したローカル環境構築
• テーマフォルダ内に、index.php/style.css/functions.phpを作成

 

 

まず、WordPressを動作させるために、「Local by Flywheel」を利用してローカル環境を構築しました。

Local by Flywheelのダウンロード・インストールの流れで、WordPressのインストールも完了させました。

 

参考：Local by FlywheelでWordPressのローカル環境を構築する方法

 

 

WordPressのインストール後は、オリジナルテーマ化をするために必要なテーマフォルダを作成しました。

そしてその中に、index.php・style.css・functions.phpを作成し、ポートフォリオサイトのCSSフォルダ・imagesフォルダ・jsフォルダをコピペしてくることで、WordPress化の下準備を完了させました。

 

参考：必要なテーマフォルダやテンプレートファイルを作成

 

 

<9月中旬>
基本的なテンプレートファイル作成と「contact form 7」を用いたお問い合わせフォーム実装について学習

 

9月中旬より、WordPress自作テーマ化をするためのテンプレートファイル作成を本格的に開始し、主に以下のことを行いました。

 

• ファイル分割によるテーマ化（home.php/header.php/footer.php）
• 各固定ページ作成（Works/About/Contact/各作品詳細ページ）
• 「contact form 7」を用いたお問い合わせフォーム実装（メール送受信検証済み）

 

 

この段階から、ポートフォリオサイトで使用していたHTMLのコードを、WordPressに適用させるためのPHPのコードに書き換える作業を行っていきました。

お問い合わせフォームは、WordPressフォームプラグイン「contact form 7」を用いて実装し、これによりメール送受信が可能となりました。

 

参考：ファイル分割によるテーマ化

参考：固定ページの作り方

参考：「contact form 7」を用いて自作のフォームデザインと同じに作る方法

参考：メール受信・自動返信設定１

参考：メール受信・自動返信設定２

 

 

<9月下旬>
問い合わせ完了ページ作成方法とWordPressリンク調整について学習

 

9月下旬からも引き続きポートフォリオサイトのWordPress自作テーマ化のために必要な機能の実装を行いました。

具体的には以下のことを行いました。

 

• お問い合わせフォームで送信された後に表示する「問い合わせ完了ページ（送信完了ページ）」の作成
• WordPressリンク調整(トップページへ飛ぶ/トップページ以外のページへ飛ぶ/あるページの特定箇所へ飛ぶ)

 

 

問い合わせ完了ページ（送信完了ページ）を作成したことにより、フォーム送信完了後に以下のような画面が表示されるようになりました。

 

参考：問い合わせ完了ページ作成方法

参考：リダイレクト設定・メッセージ変更方法

参考：リダイレクト設定・問い合わせ完了ページデザイン

 

 

また、HTML内に書いたページリンクのコードでは、WordPress化をした際に上手く作用しなくなってしまうので、それらをWordPressに適したページリンクのコードに書き換える作業を行いました。

 

参考：トップページ以外のページに飛ぶ方法

参考：トップページに飛ぶ方法

参考：あるページの特定箇所に飛ぶ方法

 

 

以上の全ての工程を経て、ポートフォリオサイトのWordPress自作テーマ化は一応完了となります。

 

 

 

こちらの学習工程の詳細については以下の記事をご覧ください。

【ポートフォリオのWordPress自作テーマ化】WordPress学習①（Local導入～テーマ化）

 

 

 

<10月上旬～10月中旬>
WordPress学習➁（投稿機能）

 

 

この期間の学習工程を大きく分けると、次のようになります。

 

• <10月上旬>
  投稿ページ（single.php）作成/サイドバー（sidebar.php）作成/検索ボックス・月別アーカイブリスト・カテゴリーリスト作成
• <10月中旬>
  固定ページ内に全投稿記事一覧ページ作成/ページネーション実装/検索結果一覧ページ（search.php）作成/カテゴリー・タグ・月別一覧ページ（archive.php）作成

 

学習方法は以下の通りです。

 

 

<10月上旬>
投稿ページ（single.php）作成方法について学習

 

10月上旬より、WordPressループによる投稿機能（投稿ページsingle.php/一覧ページarchive.php）の実装を開始しました。

まず、投稿ページ（single.php）を作成するために、

 

• single.php内に投稿ページの内容をループで取得して表示させるためのコードを記述
• 投稿ページ内に記事内容を執筆
• 投稿ページに使用するサイドバー（sidebar.php）内コンテンツ（プロフィール/検索ボックス/月別アーカイブリスト/カテゴリーリスト）を作成

 

などを行いました。

 

 

以上より、出来上がった投稿ページはこちらです。

見た目はCSSで整えました。

 

参考：大まかなsingle.phpの書き方

参考：投稿日・更新日を取得するコード１

参考：投稿日・更新日を取得するコード２

参考：「前の記事へ/次の記事へ」の実装方法

参考：投稿カテゴリーを取得するコード

参考：WordPressのビジュアルエディタとテキストエディタの使い方１

参考：WordPressのビジュアルエディタとテキストエディタの使い方２

参考：アイキャッチ画像を設定するためにfunctions.phpに書くコード

参考：サイドバーに月別アーカイブリストを表示するためのコード

参考：サイドバーにカテゴリーリストを表示するためのコード

参考：検索ボックスと検索結果表示コード

 

 

<10月中旬>
各種一覧ページ作成方法について学習

 

10月中旬からは、

 

• 固定ページ（page-blog.php）内に全投稿記事一覧ページ作成
• ページネーション実装
• 検索結果一覧ページ（search.php）作成
• カテゴリー/タグ/月別一覧ページ（archive.php）作成

 

などを行い、各種一覧ページを作成しました。

以下、作成した一覧ページを１つずつ紹介します。

 

全投稿記事一覧ページ

 

参考：固定ページで全投稿記事の一覧ページを作成する方法

参考：固定ページに全投稿記事の一覧ページとページネーションを作成する方法

参考：サブループのコードの解説

参考：ページネーション作成の際に必要な情報

 

 

検索結果一覧ページ

 

参考：searchform.php/search.php内に書くコード

参考：メインループ・サブループそれぞれのページネーションの書き方

参考：WordPressの設定画面から表示記事数を変更する方法

 

 

カテゴリー/タグ/月別一覧ページ

 

 

参考：archive.phpにカテゴリー・タグ・月別の一覧を表示させるためのコードの書き方

参考：「〇件の記事が見つかりました」の表示方法

 

 

 

こちらの学習工程の詳細については以下の記事をご覧ください。

【WordPressオリジナルテーマ化】WordPress学習➁（投稿機能）

 

 

 

まとめ

 

今回は、未経験からWebデザイナーを目指すために、2023年1月～10月までの間、私が実際に行ってきた学習方法について簡単にご紹介させていただきました。

コーディング方法などの詳細は各学習工程のリンク先記事に記載しておりますので、そちらをご覧いただければと思います。

最後まで読んでいただきありがとうございました。