Webの最新トピックを配信中!

ポートフォリオ用WordPressテーマ『PORTFOLIOベーシック』マニュアル


WordPressテーマ『PORTFOLIOベーシック』の使い方を解説します。

商品販売ページはこちらです。
『PORTFOLIOベーシック』

テーマを使うにはレンタルサーバーとWordPressが必要です。もしまだレンタルサーバーを契約していない方は、こちらの記事を参考に契約してみてください。
ロリポップでレンタルサーバーを契約してWordPressをインストール方法を解説

目次

1.テーマのインストール


WordPressの管理画面の【外観】→【テーマ】の「新規追加」ボタンをクリックします。


「ファイルを選択」でテーマのzipファイルを選択し、「今すぐインストール」をクリックします。


インストールが始まります。完了したら「有効化」をクリックします。これでインストールは完了です。


サイトを表示してみます。まだメインビジュアルやナビなどが設定されていない状態です。

2.不要なパーツなどを削除/非表示にする

最初に自動で表示されてしまっているパーツなどを削除したり非表示にしましょう。

デフォルト表示のウィジェットを削除する


このWordPressテーマでは、ウィジェット機能を使って、トップページの投稿一覧の上部と下部を編集可能にしています。最初に自動で「アーカイブ」と「カテゴリー」が表示されてしまっているので削除しておきましょう。

管理画面の【ウィジェット】をクリックします。「トップページ下部」内の「アーカイブ」と「カテゴリー」をマウスで選択してBackspaceやdeleteキーで削除してください。削除したらページ右上の「更新」をクリックします。

不必要ならキャッチフレーズを削除


もしキャッチフレーズが不要なら削除しておきましょう。キャッチフレーズはサイト名で「Web Designer Yoshi – キャッチフレーズ -」という形式で利用できます。

ツールバーの非表示


WordPressにログインしている状態だと、サイトでこのようにツールバーが表示されます。不要なら非表示にしておきましょう。私はいつも非表示にしています。


管理画面の【ユーザー】→【○○○(自分のユーザー名)】内の「サイトを見るときにツールバーを表示する」のチェックボックスを外すと非表示になります。

3.プラグインのインストール

SEOやお問い合わせなどの設定をするため、4つのプラグインをインストールします。

『WP Multibyte Patch』


日本語に対応するための定番プラグインです。日本語の全角に対応したり、文字化けなどを防ぎます。

管理画面の【プラグイン】→【新規追加】内の検索ボックスにプラグイン名「WP Multibyte Patch」を入力すると検索結果が表示されます。プラグインの検索機能がやや弱く正確にプラグイン名を入力する必要があるため、プラグイン名をコピー&ペーストして検索することをオススメします。

『Yoast SEO』


SEO対策用の定番プラグインです。サイトやページのタイトルや、SNSでシェア時の画像などの設定に加えて、パンくずリストの設定もできます。

『Contact Form 7』

contact-form7
お問い合わせページ作成用の定番プラグインです。お問い合わせページを設置しない場合はインストール不要です。

『Intuitive Custom Post Order』


カテゴリーや記事の順番を自由に変えられるプラグインです。「カテゴリーを好きな順番に表示したい」「この作品は前の方に表示しておきたい」を実現します。

4つのプラグインはインストールできましたでしょうか。
これでプラグインのインストールは完了です。

4.各ページの作成

作品一覧ページやABOUTページ、お問い合わせページなどを固定ページ機能で作成します。

管理画面の【固定ページ】をクリックします。WordPressをインストールしたばかりの状態だと「サンプルページ」「プライバシーポリシー」が最初から存在しているので「ゴミ箱へ移動」をクリックして削除しておきましょう。

作品一覧ページの作り方


作品一覧ページを作ります。管理画面の【固定ページ】→「新規追加」をクリックします。ページ名は自由に入力します。ここではWORKSと入力しています。このページは投稿一覧を自動で表示するページになるので、記事の本文を入力する必要はありません。


右側のサイドバー内に【テンプレート】項目があるので、「投稿一覧テンプレート」を選択してください。この指定によってこのページには投稿一覧が並ぶテンプレートが設定されます。


同じく右側のサイドバー内の【パーマリンク】でURLスラッグ(このページのURLのこと)を入力します。自動でページタイトルが「URLスラッグ」欄にも入力されているので、変更したい場合は好きなURLを入力してください。worksと入力すると、https://xxxx.com/worksというURLになります。

右上の「公開」をクリックします。


URLを入力してアクセスしてみます。この状態になっていればOKです。1記事だけ表示されているのはサンプルの投稿です。

その他のページの作り方


他のページも【固定ページ】で作っていきます。ここではABOUTページとSKILLページを作りました。「ブロックを選択するには「/」を入力」の箇所をクリックして文章を書いたり画像を設置していくことができます。


テンプレートは通常の「デフォルトテンプレート」をそのまま指定します。パーマリンクはお好きなURLを指定してください。

編集が終わったらページ右上の「公開」をクリックします。

お問い合わせページの作り方

お問い合わせページでは、先ほどインストールしたプラグイン『Contact Form7』の機能を使います。


まずは今まで通り【固定ぺージ】からお問い合わせページを作ります。ここではページ名を「CONTACT」にしました。テンプレートは「デフォルトテンプレート」です。パーマリンクも自由に設定してください。ここではパーマリンクは「contact」にしました。


管理画面の【お問い合わせ】をクリックします。最初から「コンタクトフォーム1」というフォームが存在するのでそれを編集していきます。「コンタクトフォーム1」をクリックします。


フォーム名は自由でOKです。ここでは「お問い合わせ」と入力しておきました。

フォームに表示したい内容を入力します。テンプレートを用意したので下記の内容をコピーして赤枠内に貼り付けてください。必要に応じて不要な項目は消してください。

お問い合わせ種別<span class="form-require">*必須</span>[radio your-purpose use_label_element default:1 "お仕事のご依頼・ご相談" "お見積りのご依頼" "その他"]

<label>お名前<span class="form-require">*必須</span>[text* your-name]</label>

<label>貴社名<span class="form-require">*必須</span>[text* your-company]</label>

<label>メールアドレス<span class="form-require">*必須</span>[email* your-email]</label>

<label>電話番号<span class="form-note">(半角数字ハイフンなし)</span>[tel your-tel]</label>

<label>本サイトをどちらでお知りになりましたか?[select* your-how include_blank "Google/Yahoo検索" "SNS" "ブログ" "友人や知人" "その他"]</label>

<label>お問い合わせ件名[text* your-subject]</label>

<label>お問い合わせ本文[textarea* your-message]</label>

<div class="btnWrap">[submit class:btn "送信"]</div>

次に、お問い合わせがあった時にその内容を自分へ送る時のメール内容を設定します。「メール」タブをクリックしてください。


こちらについてもテンプレートを用意しました。下記を赤枠内に貼り付けてください。

差出人: [your-name] <[your-email]>
題名: [your-subject]

お問い合わせ種別:
[your-purpose]

お名前:
[your-name]

会社名:
[your-company]

電話番号:
[your-tel]

メールアドレス:
[your-email]

本サイトをどちらでお知りになりましたか?:
[your-how]

お問い合わせ件名:
[your-subject]

メッセージ本文:
[your-message]

--
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

ペーストしたらページ右上の「保存」をクリックします。


表示されているショートコードをコピーします。選択してCtrl+C、MacならCmd+Cでコピーできます。

【固定ページ】のCONTACTページを開きます。


「ブロックを選択するには「/」を入力」の箇所にショートコードを貼り付けます。Ctrl+V(MacならCmd+V)です。すると自動で上のような表示になります。先ほど設定した「お問い合わせ」が選択されていればOKです。


フォームの上にテキストを表示したい場合は入力してください。ページタイトルの最後でエンターを押すと入力できますね。ブロックエディタはやや癖があり入力しづらいので少し慣れが必要かもしれませんね。ブロックエディタに馴染みのない方は「ブロックエディタ 使い方」などでGoogle検索して編集方法を調べてみてください。中央寄せなども指定できます。

ページ右上の「更新」をクリックします。CONTACTページにアクセスしてみましょう。


このように表示されていればOKです。

これで問い合わせページの設定は完了です。

5.ナビの作り方

ヘッダーとフッターのナビゲーションを作っていきます。


こちらがヘッダーのナビの完成イメージです。


こちらがフッターのナビの完成イメージです。


ナビは【外観】→【メニュー】で作ります。まずは自由なメニュー名を入力して「メニューを作成」をクリックします。


次に、メニューに項目を追加していきます。左の固定ページの枠に今まで作成した固定ページが表示されているので「すべて選択」にチェックを入れて、「メニューに追加」ボタンをクリックしてください。


右の「メニュー構造」の中にナビの一覧が作成されます。表示したい順番にドラッグで並び替えができます。上から左→右に並びます。


ナビにトップページへのリンクである「HOME」も欲しいので「カスタムリンク」に上記の内容を入力し「メニューに追加」をクリックし追加します。トップページのURLはご自身の環境に合わせて入力してください。ここでは一番上の階層の「/」を指定しています。


最後に、「メニューの位置」の「ヘッダー」と「フッター」を両方選択してください。これで作成したナビをヘッダーとフッターの両方に表示することができます。

「メニューを保存」をクリックし、ナビの設定は完了です。

6.サイトのカスタマイズ

メインビジュアル画像の設定や色(文字色や背景色)の設定方法です。


【外観】→【カスタマイズ】をクリックします。


左には「色の設定」「ロゴ画像」「メインビジュアル」などの項目が並んでいます。このパネル内で設定した内容が右側にリアルタイムで反映されるので、変化を確認しながらカスタマイズができます。
※一部の機能はリアルタイムに反映されないので保存してから公開サイト上で確認してください。

トップページのメインビジュアルの設定

まずはメインビジュアルを設定してみましょう。


メインビジュアルでは「メインビジュアル画像(PC/スマホ)」「タイトル」「サブタイトル」「ボタンとそのリンク先」などを設定できます。


「メインビジュアル」パネルをクリックします。


さまざまな項目があります。「タイトル」や「サブタイトル」を変えてみましょう。リアルタイムに変更が反映されます。


メインビジュアル画像の「画像を選択」をクリックします。


画像ファイルをドロップしてアップロードができます。

サンプル画像が必要な場合はこちらからダウンロードできます。
PC用画像 スマホ用画像
こちらは軽量な画像形式WebPです。もちろんJPGやPNGでもOKです。

PC用の画像は1920 ✕ 800pxが目安です。スマホでは750 ✕ 900pxが目安です。背景画像として表示されるため画面幅によって上下が見切れます。画像のサイズはご自身で理想の表示のされ方をいろいろ試してみてください。


プレビューを確認して問題なければ、左上の「公開」をクリックします。これでメインビジュアル画像が設定されました。スマホ用の画像を設定しなかった場合は、PC用の画像がそのまま表示されます。

「メインビジュアル」項目では、その他に「タイトルエリアの表示位置の指定」「タイトルエリアのフェードイン表示」「メインビジュアルの高さ」「パララックス表示」の設定などがあります。実際にいろいろ触ってみてどのように変化をするのか試してみてください。

色の設定


「通常テキスト色」や「リンク色」に加え、可能な限り多くの色が設定できるようにしています。

ロゴ画像の設定

ロゴ画像をアップロードできます。ロゴの表示は高さが最大で50pxに指定してあります。ロゴ画像が無い場合はサイト名がテキストで表示されます。

SVG画像をアップロードしたい場合は下記のプラグインをインストールしてください。


SVG画像がアップロード可能になります。

ヘッダーの設定


ヘッダーの高さを変更できます。また、ヘッダーを透過にできます。


ナビの項目が多い場合は「スマホ時にハンバーガーメニューにする」へのチェックをオススメします。このようにナビが表示されます。

投稿の設定

各ページに表示する投稿一覧の最大投稿表示数を指定できます。
また、ブログのように使いたい場合は、各記事に投稿日時の表示が可能です(通常は非表示です)。

ボタン/リンクの設定


ボタンの角丸の設定が可能です。数値を指定して角丸の半径を指定します。

コンテンツ幅の設定

サイトの横幅、投稿ページの横幅、その他のページの横幅をそれぞれ指定できます。

その他の設定


Googleアナリティクスのタグはこちらに貼り付けてください。

「ページ遷移時のフェードイン」にチェックをすると、ページ遷移の際にフェードインしながら遷移します。ぜひ試してみてください。

ファビコンの設定


「サイトの基本設定」パネルでファビコンの設定ができます。画像をアップロードしましょう。

独自のCSSを記入する方法


CSSを記述したい場合は、「追加CSS」パネル内で記述が可能です。

7.SEOの設定(Yoast SEOの使い方)

『Yoast SEO』プラグインを使用したSEOの設定方法です。

初回SEO設定


まずはじめに「設定ウィザート」を行います。
管理画面の【SEO】→【一般】内の「設定ウィザード」リンクをクリックします。


設定ウィザードが始まります。ご自身の環境に合わせて回答をしていきます。基本的には下記の通りに回答してOKです。

  1. 環境:選択肢 A: サイト公開中で、インデックスされる準備ができている
  2. サイトタイプ:「ポートフォリオ」
  3. 組織または個人:「個人」(自分のユーザー名を選択してもしなくてもどちらでもOK)
  4. 検索エンジンでの表示:両方チェック
  5. 複数の作成者:「いいえ」
  6. タイトル設定:好きな区切り文字を指定。ここではそのまま。
  7. Yoast SEO の改善にご協力ください:「いいえ」
  8. 学習を続ける:登録しなくてOKです。一番下の「次へ」をクリック
  9. 成功しました !:「閉じる」をクリック

設定ウィザードはこれで完了です。


続いて、【一般】内の「機能」タブをクリックして、「Slack 共有の強化」をオフにしてください。オンだとソースコードにユーザー名が表示されてしまいセキュリティ的に良くないためです。

タイトルやメタディスクリプションの表示設定


【SEO】→【検索での見え方】に移動し、タイトルやメタディスクリプションを設定します。

SEOタイトル(サイトのタイトル)で、タグライン(キャッチフレーズのこと)を表記しない場合は赤枠内を削除しましょう。

メタディスクリプションはGoogleの検索結果に表示されます。サイトの説明文を入力しましょう。

ソーシャル画像(OGP画像)はFacebookやTwitterでSNSでシェアされた時に表示される画像です。1200✕630pxの画像を指定してください。


「コンテンツタイプ」タブでは、投稿記事ページと固定ページのタイトルとメタディスクリプションを設定します。メタディスクリプションは各記事ページの投稿画面で指定できますが、一記事ずつ入力するのが面倒な場合は、ここで「Excerpt」(「抜粋」の意味)と入力しておくことで、自動で記事の最初の方の文章が反映されるようになります。「%e」と入力するとExceprtが選択できます。

下の方に「固定ページ」項目もあるので忘れないように設定しておきましょう。投稿と同じ設定でよければメタディスクリプションに「Excerpt」を入力しておきましょう。


「タクソノミー」タブでは、カテゴリーページのタイトルとメタディスクリプションを設定できます。ここではメタディスクリプションの一例として、文章の始めに「Term title(例えば「コーディング」)カテゴリ一覧です」と表示しています。その後はトップページと同じ内容です。

記事にタグを指定している場合は、「タグ」項目のSEOタイトルとメタディスクリプションも設定してください。

「変更を保存」をクリックして、SEOの設定は完了です。

8.投稿記事の作成

投稿記事の作成方法です。

パーマリンクの設定

まずは各記事のURL形式であるパーマリンクを設定します。


管理画面の【設定】→【パーマリンク】内でパーマリンクを設定します。好きな形式を選択してください。
ここではドメイン以下のURLが自由に決められる「投稿名」を指定しました。(環境によっては最初から「投稿名」が選択されている状態かもしれません)

カテゴリーの作り方


記事のカテゴリーは事前に設定しておきます。【投稿】にマウスオーバーし「カテゴリー」をクリックします。


設定したいカテゴリ名とスラッグ(URL)を入力し、「新規カテゴリーを追加」をクリックします。追加したいカテゴリーの分だけ同じ作業を繰り返します。


ここでは「デザイン」「コーディング」「WordPress」の3つのカテゴリーを作成しました。
このままだと順番が逆さなので事前にインストールしたプラグイン『Intuitive Custom Post Order』の機能で並べ替えをします。


【設定】→【並べ替え設定】をクリックします。


2つある「すべて選択」にチェックを入れて「更新」ボタンを押します。


カテゴリーページに戻ります。作成したカテゴリがドラッグで移動できるようになっているので並べ替えます。上→下に並べ替えることで、サイト上では左→右の順番に表示されます。


並べ替えが完了した状態です。

これでカテゴリーの設定は完了です。

タグの作り方

タグについてもカテゴリーと同様の方法で作成できます。タグはあってもなくてもOKです。タグはカテゴリーでは分類しきれない項目に設定することが多いです。デモサイトでは「企業」「ゲーム」「飲食」などのジャンルを指定しています。
デモサイトでのタグの使用例(「ジム」のタグページ)


記事にタグを指定すると、記事ページの下にこのように表示されます。


タグの一覧ページも自動で作成されます。

投稿記事の作成

さて、ようやく記事の作成方法です。


【投稿】内の「新規追加」ボタンをクリックして記事を作成します。サンプル投稿「Hello world!」は「ゴミ箱へ移動」をクリックして削除しておきましょう。

記事の書き方


タイトルと本文を入力していきます。


画像を挿入する時は+ボタンをクリックし、「画像」をクリックします。


画像が挿入できました。

見出しの指定方法


見出しにしたい文章を選択して赤枠のアイコンをクリックします。「見出し」を選択します。


見出しのスタイルは3種類を用意しています。ここでは「左ボーダー付き見出し」を選択し反映しました。

カテゴリーの指定


「投稿」タブ(右のサイドバーの上部にあります)に戻り、この記事のカテゴリーを設定します。ここでは「デザイン」と「コーディング」の2つにしました。「メインカテゴリーを選択」はYoastSEOプラグインの機能で、パンくずリストで表示するメインカテゴリ名を指定できます(パンくずリストには1つだけしかカテゴリー名を表示できないため)。

アイキャッチ画像の設定


「アイキャッチ画像を設定」をクリックして、画像をアップロードします。
アイキャッチ画像は800✕600px(4:3の縦横比)以上を指定してください。それ以上の大きな画像がアップロードされると自動で800✕600pxにトリミングされます。


アイキャッチ画像が設定された状態です。

記事のスラッグ(URL)の設定


記事のURLは「パーマリンク」で設定します。事前に管理画面の【パーマリンク】で「投稿名」を指定している場合は、ページ名(記事のタイトル名)が自動で入っています。ここでは「様」を削除して「smoothista」としました。

コメント欄の表示/非表示


コメント欄を非表示にするには「ディスカッション」内の「コメントを許可」のチェックを外します。


事前に管理画面の【設定】→【ディスカッション】内の「新しい投稿へのコメントを許可」のチェックを外しておくとコメント欄は表示されないようになります。

右上の「公開」をクリックして、投稿記事の公開は完了です。

9. トップページの編集方法

トップページは2つの方法で編集可能です。

方法1. 【ウィジェット】から編集する

ウィジェット機能を利用して、トップページの投稿一覧の上部と下部を編集可能です。


編集が可能なエリアです。サービス内容や料金表などを表示できます。


管理画面の【外観】→【ウィジェット】内の「トップページ上部」「トップページ下部」で編集します。


試しに「トップページ上部」内をこのように編集しました。


試しに「トップページ下部」内をこのように編集しました。
この緑パーツのように画像の上にテキストなどを置くパーツを「カバー」と呼ぶのですが、ウィジェットの中で使う場合は横幅100%で表示する「全幅」が使えないようです…。そのため全幅で表示したければ、この「カバー」パーツを選択した状態で、下記のように画面右側のサイドバーの「高度な設定」→「追加CSSクラス」に「alignfull」と記入してください。


これで横幅100%の全幅で表示されます。


これで完成です。トップページの編集が完了しました。

方法2. 固定ページ機能を使う

方法2は、メインビジュアルも投稿一覧も無いまっさらな状態からトップページを作る方法です。
この方法はブロックエディタをフルに駆使してページを作っていく方法で中上級者向けです。


【固定ページ】から新規ページを作ります。タイトルは何でもOKです。「テンプレート」で「トップページ用テンプレート」を指定してください。公開ボタンをクリックします。このページをトップページとして編集していきます。


次に、管理画面の【設定】→【表示設定】の「ホームページの表示」項目で「固定ページ」を選択します。そして、「ホームページ」プルダウンで、先ほど作成した固定ページを選択してください。ここでは先ほど作った「HOME」を選択しています。「変更を保存」をクリックします。


トップページを見ると、このようにまっさらな状態になっています。作成した固定ページに内容を入力することで、トップページを編集できます。

10.テーマをカスタマイズする場合

「CSSを追加・編集したい」「header.phpなどのテンプレートを改修したい」など、テーマをカスタマイズする方法です。

方法1. 【カスタマイズ】の「追加CSS」項目で編集する(CSSを少しだけ編集したい場合)

CSSを少しだけ編集したい場合は、管理画面の【外観】→【カスタマイズ】→「追加CSS」パネルからCSSを上書きします。


「追加CSS」のこちらにCSSを記入します。ここにCSSを書くと既存のCSSを上書きできます。
ここでは一例として、「PCの画面では作品一覧を3カラム表示、スマホでは1カラム表示」のCSSを書いています。通常はPCは4カラムでスマホは2カラムの表示ですが、それを上書きした状態です。

方法2. 子テーマをダウンロードし編集する(中上級者向け/テーマファイルを上書きして編集したい場合)

style.cssやheader.php、functions.phpなどを編集していきたい場合は、子テーマを編集していきます。

子テーマを使って編集をするメリットは、運営側による親テーマ(テーマファイル自体)のアップデートがあっても、子テーマの編集内容が保持される点です。親テーマを編集してしまうと運営側による親テーマのアップデートがあると、編集した内容が上書きされて消えてしまいます。

子テーマは自作できますが、こちらで用意しました。
子テーマのダウンロードはこちら (zipファイル/16KB)


ダウンロードした子テーマ(zipファイル)を、【外観】→【テーマ】の「新規追加」からアップロードし有効化します。


空のstyle.cssとfunctions.phpが入っています。こちらを編集しFTPソフトなどでアップロードしてください。編集内容が反映されます。
header.phpやsingle.phpを編集したい場合は、親テーマのファイルから必要なファイルをコピーして、子テーマフォルダに移動して編集します。FTPソフトなどでアップロードして反映してください。

方法3. 親テーマをそのまま編集する(中上級者向け/テンプレートとして編集したい場合)

この方法は本テーマを「テンプレート」としてゴリゴリと自分で編集していける中上級者の方向けです。また、WordPressのテーマ作成の学習をしたい方にもこの方法はオススメです。

子テーマの解説でも書いたとおり、親テーマをそのまま編集してまうと、運営側による親テーマのアップデートに伴い、編集した内容は上書かれて消えてしまいます。
しかし、特にテーマをアップデートさせるつもりがなく、本テーマをテンプレートとしてご自身でどんどん編集していくつもりなのであれば、そのまま親テーマを編集していくことをオススメします。

 

以上、マニュアルをお読みいただきありがとうございました!
ご質問は正式にはサポートはしていませんが、下記のコメント欄にて可能な限り対応いたします。不明点などあれば具体的にご質問をお願いします。

“ポートフォリオ用WordPressテーマ『PORTFOLIOベーシック』マニュアル” への4件のフィードバック

  1. 川口あけみ より:

    はじめまして。
    「PORTFLIOベーシック」を購入させていただいた者です。

    ご質問がありコメントさせていただきました。
    「トップページ上部」の箇所につきまして
    でもサイトと同じような
    SERVICE
    デザイン コーディング WordPress

    という風に横並びに3つのSVGを並べて
    その下にテキストを配置するには
    どうすればよいのでしょうか。

    スマホ対応の場合も併せてお教えいただけますと幸いです。

    お手数をお掛けして恐縮ですが、ご教示のほどお願いいたします。

    • ねこポン より:

      川口さま

      この度はご購入していただきありがとうございました!
      またコメントもありがとうございます。

      「トップページ上部」の箇所はWordPressのブロックエディタで編集するのですが、
      ちょっとわかりづらいですよね…。

      ↓ここの編集方法の動画を作成してみました。このようにブロックエディタで作っていきます。
      https://webdesigner-go.com/portfolio-basic-wordpress/edit-service.mp4
      3カラムを作って、その中に画像とテキストを入力していきます。
      スマホの場合は、3カラムは自動で縦に1カラムずつ並ぶので、特に何かスマホ用に設定する必要はありません。

      まだ分かりづらい点などございましたら、ご気軽にコメントをください。
      よろしくお願いいたします。

      • 川口あけみ より:

        お忙しい中、早々にご回答くださいましてありがとうございます!!
        動画の解説の通りに実行し、できました!!
        大変ご親切に対応してくださり感謝しております。
        すばらしいテーマを作ってくださりありがとうございました!!

        • ねこポン より:

          ご希望のレイアウトが作れたようで安心しました。
          お褒めの言葉もありがとうございます!
          また何か不明点がございましたらコメントをください^^

ご質問や感想など、お気軽にどうぞ!

みなさまからのコメントを元に記事を作成することありますので、あらかじめご了承ください。
メールアドレスが公開されることはありません。
こちらで承認後にコメントは表示されます。
* が付いている欄は必須項目です。

  • 管理人(ねこポン)について

    週3日だけ会社で働く30代前半ウェブデザイナーです!
    インテリ風&仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
    現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。

    ★ 僕の20代まるごと黒歴史ストーリー

    最近ちょこっと『月曜から夜ふかし』に出演しました↓

    ★ 『月曜から夜ふかし』にちょこっと出演したら『BizSPA!』さんにインタビューしてもらいました!

    お問い合わせはこちら

  • なんでもWebの質問受け付け中 (^o^) /♪

  • ポートフォリオ用WordPressテーマ作りました!PORTFOLIOベーシック
    スクール23校をまとめました!Webデザインスクール一覧

    おすすめのWebデザインスクール一覧

    おすすめのWebデザイン&プログラミングスクールを一部紹介!主要なスクール23校は『Webデザインスクールの一覧』でチェックしましょう。

    スクール名 料金 授業形式 ジャンル 就職支援

    求職者支援訓練
    ハロートレーニング
    無料
    (教材費のみ)
    通学
    (約6ヶ月/週4〜5日)
    Webデザイン ハローワークによるサポート
    プロによる総評

    一番おすすめのスクールは国の運営する求職者支援訓練(ハロートレーニング)です。授業料が無料!しかも約6ヶ月という期間がWebデザインの基礎スキルを習得するのに十分な長さです。僕自身も求職者支援訓練を経てWebデザイナーになりました。
    東京にはWebデザイナー系の訓練校は6校ほどあり、各地域にも1〜3校ほどは見つかるため、どんな人も通いやすいのもおすすめのポイントです。
    ふだん税金を払っているので、このようなスクールはしっかり活用させてもらいましょう笑。


    失業保険が受給できる方は職業訓練がおすすめです。期間が約3ヶ月と短くやや理解が浅くなる点は不安ですが、復習や独学で補えれば問題ありません。最近は数は2校ほどで少ないですが6ヶ月コースも登場しました!
    スクール名 料金 授業形式 ジャンル 就職支援

    LIG
    有料
    (¥450,000 〜)
    通学
    (6ヶ月)
    Webデザイン 転職セミナーあり/LIGへの採用実績もあり
    プロによる総評

    金銭的に余裕があればLIGを検討しましょう。超有名Web制作会社LIGによるWebデザインスクールです。現役のプロデザイナーが講師で、Mac&デュアルディスプレイという最新設備で学べます!LIG運営のコワーキングスペースも無料で使い放題。生徒のレベルによってはLIGへの就職も可能です。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    デイトラ
    有料
    (¥89,800〜)
    オンライン
    (90日間/質問期間は1年)
    Webデザイン なし
    プロによる総評

    『デイトラ』はかなりコスパの高いオンライン完結型のWeb制作スクールです。格安ながらもデザインとコーディングのレビュー(添削)が受けられます。人気急上昇中でTwitterで受講生のツイートを見ない日はありません。「課題 + 課題のレビューあり + 質問し放題」というサービスを提供しています。

    デザイン力とコーディングスキルはレビューをしてもらってこそ急速に成長するため、かなりオススメのスクールです。というか今のところ低価格で他にデイトラのようなスクールが存在しないんですよね...。通学式のスクールに40、50万円も払う余裕はないけど、デザインやコーディングのレビューはしてほしい!という方はデイトラを受講しましょう。

    Twitter内にはデイトラの受講生がかなり多くいるので、一緒に学習を頑張る仲間も見つけられます。

    デザインを重点的に学びたい方は「Webデザインコース」、コーディングスキルを高めたい方は「Web制作コース」を受講しましょう。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    Famm
    有料
    (¥162,800)
    オンライン
    (1ヶ月)
    Webデザイン なし(案件獲得サポートあり)
    プロによる総評

    ママさん専用Webデザインスクールです。現在はコロナでライブ配信授業が中心です。なんと授業中は自宅にシッターを手配してくれるのでしっかり集中できます。受講期間は1ヶ月で5日間という超短期間なので、忙しいママさんでも時間を確保しやすいです。生徒はママさんだけなので、ママさん同士の交流も楽しめます。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    CodeCamp
    デザインマスターコース
    有料
    (¥148,000 〜)
    オンライン
    (2ヶ月〜)
    Webデザイン キャリア支援あり
    (就職エージェントの紹介)
    プロによる総評

    CodeCampはオンラインのWebデザインスクールです。低価格ながら講師から直接指導とフィードバックを受けられるのが最大の特長です!おすすめのコースは「デザインマスターコース」。コスパ重視で講師と対話しながら学びたい人に最適なスクールです。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    プログラマカレッジ
    無料 通学 プログラミング あり
    プロによる総評

    『プログラマカレッジ』は20代限定の通学式で完全無料のプログラミングスクールです。無料なのでエンジニアになりたい方はぜひ挑戦してみてください。スクール側は就業先の企業からお金をもらうことで無料で運営をしています。とはいえ授業の質は高いと評判です。『プログラマカレッジ』の卒業生による体験談記事はこちらです。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    GEEK JOB
    無料 通学 プログラミング あり
    プロによる総評

    上で紹介した『プログラマカレッジ』と同様の20代限定の通学式で完全無料のプログラミングスクールです。プログラマカレッジは決まった時間に通学しますが、GEEK JOBは個別指導なので自分のペースで通学できます。エンジニアになりたい方は、自分の生活スタイルに合わせてどちらのスクールに行くか検討してみましょう。就職率97.8%は驚異的です!

    詳しくはこちら

    Web制作会社を歩き回れるゲームを作ってみました!ぜひ探検してみてください。(注意:音が出ます!)

    一番上へ