おすすめのWebデザイン&プログラミングスクールを一部紹介!主要なスクール23校は『Webデザインスクールの一覧』でチェックしましょう。
WordPressテーマ『PORTFOLIOベーシック』の使い方を解説します。
商品販売ページはこちらです。
『PORTFOLIOベーシック』
購入したテーマを使ってインターネット上にWordPressのサイトを公開するには、レンタルサーバーとWordPressのインストールが必要です。もしまだレンタルサーバーを契約していない方は、こちらの記事を参考に契約してみてください。
ロリポップでレンタルサーバーを契約してWordPressをインストール方法を解説
まずはインターネット上に公開せずに、ご自身のPCでのみWordPressテーマを利用したい場合は、「Local」等のツールを使って、PCにWordPressの環境を構築することで、ご自身のPC内でWordPressの編集作業ができます。詳しくは「Local WordPress 使い方」などでGoogle検索して調べてみてください。ここではLocalの使い方については公式にはサポートしておりませんが、可能な範囲でサポートはしますので、ご質問などございましたら本記事のコメント欄からお願いいたします。
目次
WordPressの管理画面の【外観】→【テーマ】の「新規追加」ボタンをクリックします。
「ファイルを選択」でテーマのzipファイルを選択し、「今すぐインストール」をクリックします。
インストールが始まります。完了したら「有効化」をクリックします。これでインストールは完了です。
サイトを表示してみます。まだメインビジュアルやナビなどが設定されていない状態です。
最初に自動で表示されてしまっているパーツなどを削除したり非表示にしましょう。
このWordPressテーマでは、ウィジェット機能を使って、トップページの投稿一覧の上部と下部を編集可能にしています。最初に自動で「アーカイブ」と「カテゴリー」が表示されてしまっているので削除しておきましょう。
管理画面の【ウィジェット】をクリックします。「トップページ下部」内の「アーカイブ」と「カテゴリー」をマウスで選択してBackspaceやdeleteキーで削除してください。削除したらページ右上の「更新」をクリックします。
もしキャッチフレーズが不要なら削除しておきましょう。キャッチフレーズはサイト名で「Web Designer Yoshi – キャッチフレーズ -」という形式で利用できます。
WordPressにログインしている状態だと、サイトでこのようにツールバーが表示されます。不要なら非表示にしておきましょう。私はいつも非表示にしています。
管理画面の【ユーザー】→【○○○(自分のユーザー名)】内の「サイトを見るときにツールバーを表示する」のチェックボックスを外すと非表示になります。
SEOやお問い合わせなどの設定をするため、4つのプラグインをインストールします。
日本語に対応するための定番プラグインです。日本語の全角に対応したり、文字化けなどを防ぎます。
管理画面の【プラグイン】→【新規追加】内の検索ボックスにプラグイン名「WP Multibyte Patch」を入力すると検索結果が表示されます。プラグインの検索機能がやや弱く正確にプラグイン名を入力する必要があるため、プラグイン名をコピー&ペーストして検索することをオススメします。
SEO対策用の定番プラグインです。サイトやページのタイトルや、SNSでシェア時の画像などの設定に加えて、パンくずリストの設定もできます。
お問い合わせページ作成用の定番プラグインです。お問い合わせページを設置しない場合はインストール不要です。
カテゴリーや記事の順番を自由に変えられるプラグインです。「カテゴリーを好きな順番に表示したい」「この作品は前の方に表示しておきたい」を実現します。
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です。
これで問い合わせページの設定は完了です。
ヘッダーとフッターのナビゲーションを作っていきます。
こちらがヘッダーのナビの完成イメージです。
こちらがフッターのナビの完成イメージです。
ナビは【外観】→【メニュー】で作ります。まずは自由なメニュー名を入力して「メニューを作成」をクリックします。
次に、メニューに項目を追加していきます。左の固定ページの枠に今まで作成した固定ページが表示されているので「すべて選択」にチェックを入れて、「メニューに追加」ボタンをクリックしてください。
右の「メニュー構造」の中にナビの一覧が作成されます。表示したい順番にドラッグで並び替えができます。上から左→右に並びます。
ナビにトップページへのリンクである「HOME」も欲しいので「カスタムリンク」に上記の内容を入力し「メニューに追加」をクリックし追加します。トップページのURLはご自身の環境に合わせて入力してください。ここでは一番上の階層の「/」を指定しています。
最後に、「メニューの位置」の「ヘッダー」と「フッター」を両方選択してください。これで作成したナビをヘッダーとフッターの両方に表示することができます。
「メニューを保存」をクリックし、ナビの設定は完了です。
メインビジュアル画像の設定や色(文字色や背景色)の設定方法です。
【外観】→【カスタマイズ】をクリックします。
左には「色の設定」「ロゴ画像」「メインビジュアル」などの項目が並んでいます。このパネル内で設定した内容が右側にリアルタイムで反映されるので、変化を確認しながらカスタマイズができます。
※一部の機能はリアルタイムに反映されないので保存してから公開サイト上で確認してください。
まずはメインビジュアルを設定してみましょう。
メインビジュアルでは「メインビジュアル画像(PC/スマホ)」「タイトル」「サブタイトル」「ボタンとそのリンク先」などを設定できます。
「メインビジュアル」パネルをクリックします。
さまざまな項目があります。「タイトル」や「サブタイトル」を変えてみましょう。リアルタイムに変更が反映されます。
メインビジュアル画像の「画像を選択」をクリックします。
画像ファイルをドロップしてアップロードができます。
サンプル画像が必要な場合はこちらからダウンロードできます。
PC用画像 スマホ用画像
こちらは軽量な画像形式WebPです。もちろんJPGやPNGでもOKです。
PC用の画像は1920 ✕ 800pxが目安です。スマホでは750 ✕ 900pxが目安です。背景画像として表示されるため画面幅によって上下が見切れます。画像のサイズはご自身で理想の表示のされ方をいろいろ試してみてください。
プレビューを確認して問題なければ、左上の「公開」をクリックします。これでメインビジュアル画像が設定されました。スマホ用の画像を設定しなかった場合は、PC用の画像がそのまま表示されます。
「メインビジュアル」項目では、その他に「タイトルエリアの表示位置の指定」「タイトルエリアのフェードイン表示」「メインビジュアルの高さ」「パララックス表示」の設定などがあります。実際にいろいろ触ってみてどのように変化をするのか試してみてください。
「通常テキスト色」や「リンク色」に加え、可能な限り多くの色が設定できるようにしています。
ロゴ画像をアップロードできます。ロゴの表示は高さが最大で50pxに指定してあります。ロゴ画像が無い場合はサイト名がテキストで表示されます。
SVG画像をアップロードしたい場合は下記のプラグインをインストールしてください。
SVG画像がアップロード可能になります。
ヘッダーの高さを変更できます。また、ヘッダーを透過にできます。
ナビの項目が多い場合は「スマホ時にハンバーガーメニューにする」へのチェックをオススメします。このようにナビが表示されます。
各ページに表示する投稿一覧の最大投稿表示数を指定できます。TOPページと記事下に表示する投稿の表示数は数値で入力して指定ください。記事一覧とカテゴリーページの表示数は【外観】→【表示設定】→【1ページに表示する最大投稿数】から指定してください。
また、ブログのように使いたい場合は、各記事に投稿日時の表示が可能です(通常は非表示です)。
ボタンの角丸の設定が可能です。数値を指定して角丸の半径を指定します。
サイトの横幅、投稿ページの横幅、その他のページの横幅をそれぞれ指定できます。
Googleアナリティクスのタグはこちらに貼り付けてください。
「ページ遷移時のフェードイン」にチェックをすると、ページ遷移の際にフェードインしながら遷移します。ぜひ試してみてください。
「サイトの基本設定」パネルでファビコンの設定ができます。画像をアップロードしましょう。
CSSを記述したい場合は、「追加CSS」パネル内で記述が可能です。
『Yoast SEO』プラグインを使用したSEOの設定方法です。
まずはじめに「設定ウィザート」を行います。
管理画面の【SEO】→【一般】内の「設定ウィザード」リンクをクリックします。
設定ウィザードが始まります。ご自身の環境に合わせて回答をしていきます。基本的には下記の通りに回答してOKです。
設定ウィザードはこれで完了です。
続いて、【一般】内の「機能」タブをクリックして、「Slack 共有の強化」をオフにしてください。オンだとソースコードにユーザー名が表示されてしまいセキュリティ的に良くないためです。
【SEO】→【検索での見え方】に移動し、タイトルやメタディスクリプションを設定します。
SEOタイトル(サイトのタイトル)で、タグライン(キャッチフレーズのこと)を表記しない場合は赤枠内を削除しましょう。
メタディスクリプションはGoogleの検索結果に表示されます。サイトの説明文を入力しましょう。
ソーシャル画像(OGP画像)はFacebookやTwitterでSNSでシェアされた時に表示される画像です。1200✕630pxの画像を指定してください。
「コンテンツタイプ」タブでは、投稿記事ページと固定ページのタイトルとメタディスクリプションを設定します。メタディスクリプションは各記事ページの投稿画面で指定できますが、一記事ずつ入力するのが面倒な場合は、ここで「Excerpt」(「抜粋」の意味)と入力しておくことで、自動で記事の最初の方の文章が反映されるようになります。「%e」と入力するとExceprtが選択できます。
下の方に「固定ページ」項目もあるので忘れないように設定しておきましょう。投稿と同じ設定でよければメタディスクリプションに「Excerpt」を入力しておきましょう。
「タクソノミー」タブでは、カテゴリーページのタイトルとメタディスクリプションを設定できます。ここではメタディスクリプションの一例として、文章の始めに「Term title(例えば「コーディング」)カテゴリ一覧です」と表示しています。その後はトップページと同じ内容です。
記事にタグを指定している場合は、「タグ」項目のSEOタイトルとメタディスクリプションも設定してください。
「変更を保存」をクリックして、SEOの設定は完了です。
投稿記事の作成方法です。
まずは各記事のURL形式であるパーマリンクを設定します。
管理画面の【設定】→【パーマリンク】内でパーマリンクを設定します。好きな形式を選択してください。
ここではドメイン以下のURLが自由に決められる「投稿名」を指定しました。(環境によっては最初から「投稿名」が選択されている状態かもしれません)
記事のカテゴリーは事前に設定しておきます。【投稿】にマウスオーバーし「カテゴリー」をクリックします。
設定したいカテゴリ名とスラッグ(URL)を入力し、「新規カテゴリーを追加」をクリックします。追加したいカテゴリーの分だけ同じ作業を繰り返します。
ここでは「デザイン」「コーディング」「WordPress」の3つのカテゴリーを作成しました。
このままだと順番が逆さなので事前にインストールしたプラグイン『Intuitive Custom Post Order』の機能で並べ替えをします。
【設定】→【並べ替え設定】をクリックします。
2つある「すべて選択」にチェックを入れて「更新」ボタンを押します。
カテゴリーページに戻ります。作成したカテゴリがドラッグで移動できるようになっているので並べ替えます。上→下に並べ替えることで、サイト上では左→右の順番に表示されます。
並べ替えが完了した状態です。
これでカテゴリーの設定は完了です。
タグについてもカテゴリーと同様の方法で作成できます。タグはあってもなくてもOKです。タグはカテゴリーでは分類しきれない項目に設定することが多いです。デモサイトでは「企業」「ゲーム」「飲食」などのジャンルを指定しています。
→ デモサイトでのタグの使用例(「ジム」のタグページ)
記事にタグを指定すると、記事ページの下にこのように表示されます。
タグの一覧ページも自動で作成されます。
さて、ようやく記事の作成方法です。
【投稿】内の「新規追加」ボタンをクリックして記事を作成します。サンプル投稿「Hello world!」は「ゴミ箱へ移動」をクリックして削除しておきましょう。
タイトルと本文を入力していきます。
画像を挿入する時は+ボタンをクリックし、「画像」をクリックします。
画像が挿入できました。
見出しにしたい文章を選択して赤枠のアイコンをクリックします。「見出し」を選択します。
見出しのスタイルは3種類を用意しています。ここでは「左ボーダー付き見出し」を選択し反映しました。
「投稿」タブ(右のサイドバーの上部にあります)に戻り、この記事のカテゴリーを設定します。ここでは「デザイン」と「コーディング」の2つにしました。「メインカテゴリーを選択」はYoastSEOプラグインの機能で、パンくずリストで表示するメインカテゴリ名を指定できます(パンくずリストには1つだけしかカテゴリー名を表示できないため)。
「アイキャッチ画像を設定」をクリックして、画像をアップロードします。
アイキャッチ画像は800✕600px(4:3の縦横比)以上を指定してください。それ以上の大きな画像がアップロードされると自動で800✕600pxにトリミングされます。
アイキャッチ画像が設定された状態です。
記事のURLは「パーマリンク」で設定します。事前に管理画面の【パーマリンク】で「投稿名」を指定している場合は、ページ名(記事のタイトル名)が自動で入っています。ここでは「様」を削除して「smoothista」としました。
コメント欄を非表示にするには「ディスカッション」内の「コメントを許可」のチェックを外します。
事前に管理画面の【設定】→【ディスカッション】内の「新しい投稿へのコメントを許可」のチェックを外しておくとコメント欄は表示されないようになります。
右上の「公開」をクリックして、投稿記事の公開は完了です。
トップページは2つの方法で編集可能です。
ウィジェット機能を利用して、トップページの投稿一覧の上部と下部を編集可能です。
編集が可能なエリアです。サービス内容や料金表などを表示できます。
管理画面の【外観】→【ウィジェット】内の「トップページ上部」「トップページ下部」で編集します。
試しに「トップページ上部」内をこのように編集しました。「SERVICE」の箇所の設置方法は下記の動画を参考にしてください。
WordPressのブロックエディタの機能を使って編集しています。
試しに「トップページ下部」内をこのように編集しました。設置方法は下記の動画を参考にしてください。
この緑パーツのように画像の上にテキストなどを置くパーツを「カバー」と呼ぶのですが、ウィジェットの中で使う場合は横幅100%で表示する「全幅」が使えないようです…。そのため全幅で表示したければ、この「カバー」パーツを選択した状態で、下記のように画面右側のサイドバーの「高度な設定」→「追加CSSクラス」に「alignfull」と記入してください。
これで横幅100%の全幅で表示されます。
これで完成です。トップページの編集が完了しました。
方法2は、メインビジュアルも投稿一覧も無いまっさらな状態からトップページを作る方法です。
この方法はブロックエディタをフルに駆使してページを作っていく方法で中上級者向けです。
【固定ページ】から新規ページを作ります。タイトルは何でもOKです。「テンプレート」で「トップページ用テンプレート」を指定してください。公開ボタンをクリックします。このページをトップページとして編集していきます。
次に、管理画面の【設定】→【表示設定】の「ホームページの表示」項目で「固定ページ」を選択します。そして、「ホームページ」プルダウンで、先ほど作成した固定ページを選択してください。ここでは先ほど作った「HOME」を選択しています。「変更を保存」をクリックします。
トップページを見ると、このようにまっさらな状態になっています。作成した固定ページに内容を入力することで、トップページを編集できます。
「CSSを追加・編集したい」「header.phpなどのテンプレートを改修したい」など、テーマをカスタマイズする方法です。
CSSを少しだけ編集したい場合は、管理画面の【外観】→【カスタマイズ】→「追加CSS」パネルからCSSを上書きします。
「追加CSS」のこちらにCSSを記入します。ここにCSSを書くと既存のCSSを上書きできます。
ここでは一例として、「PCの画面では作品一覧を3カラム表示、スマホでは1カラム表示」のCSSを書いています。通常はPCは4カラムでスマホは2カラムの表示ですが、それを上書きした状態です。
style.cssやheader.php、functions.phpなどを編集していきたい場合は、子テーマを編集していきます。
子テーマを使って編集をするメリットは、運営側による親テーマ(テーマファイル自体)のアップデートがあっても、子テーマの編集内容が保持される点です。親テーマを編集してしまうと運営側による親テーマのアップデートがあると、編集した内容が上書きされて消えてしまいます。
子テーマは自作できますが、こちらで用意しました。
→ 子テーマのダウンロードはこちら (zipファイル/16KB)
ダウンロードした子テーマ(zipファイル)を、【外観】→【テーマ】の「新規追加」からアップロードし有効化します。
空のstyle.cssとfunctions.phpが入っています。こちらを編集しFTPソフトなどでアップロードしてください。編集内容が反映されます。
header.phpやsingle.phpを編集したい場合は、親テーマのファイルから必要なファイルをコピーして、子テーマフォルダに移動して編集します。FTPソフトなどでアップロードして反映してください。
この方法は本テーマを「テンプレート」としてゴリゴリと自分で編集していける中上級者の方向けです。また、WordPressのテーマ作成の学習をしたい方にもこの方法はオススメです。
子テーマの解説でも書いたとおり、親テーマをそのまま編集してまうと、運営側による親テーマのアップデートに伴い、編集した内容は上書かれて消えてしまいます。
しかし、特にテーマをアップデートさせるつもりがなく、本テーマをテンプレートとしてご自身でどんどん編集していくつもりなのであれば、そのまま親テーマを編集していくことをオススメします。
以上、マニュアルをお読みいただきありがとうございました!
ご質問は正式にはサポートはしていませんが、下記のコメント欄にて可能な限り対応いたします。不明点などあれば具体的にご質問をお願いします。
おすすめのWebデザイン&プログラミングスクールを一部紹介!主要なスクール23校は『Webデザインスクールの一覧』でチェックしましょう。
スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
---|---|---|---|---|
![]() 求職者支援訓練 ハロートレーニング |
無料 (教材費のみ) |
通学 (約6ヶ月/週4〜5日) |
Webデザイン | ハローワークによるサポート |
![]() |
||||
一番おすすめのスクールは国の運営する求職者支援訓練(ハロートレーニング)です。授業料が無料!しかも約6ヶ月という期間がWebデザインの基礎スキルを習得するのに十分な長さです。僕自身も求職者支援訓練を経てWebデザイナーになりました。 失業保険が受給できる方は職業訓練がおすすめです。期間が約3ヶ月と短くやや理解が浅くなる点は不安ですが、復習や独学で補えれば問題ありません。最近は数は2校ほどで少ないですが6ヶ月コースも登場しました! 参考記事:【無料】職業訓練でWebデザインを学ぶ |
スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
---|---|---|---|---|
![]() LIG |
有料 (¥450,000 〜) |
通学 (6ヶ月) |
Webデザイン | 転職セミナーあり/LIGへの採用実績もあり |
![]() |
||||
金銭的に余裕があればLIGを検討しましょう。超有名Web制作会社LIGによるWebデザインスクールです。現役のプロデザイナーが講師で、Mac&デュアルディスプレイという最新設備で学べます!LIG運営のコワーキングスペースも無料で使い放題。生徒のレベルによってはLIGへの就職も可能です。 |
スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
---|---|---|---|---|
![]() デイトラ |
有料 (¥89,800〜) |
オンライン (90日間/質問期間は1年) |
Webデザイン | なし |
![]() |
||||
『デイトラ』はかなりコスパの高いオンライン完結型のWeb制作スクールです。格安ながらもデザインとコーディングのレビュー(添削)が受けられます。人気急上昇中でTwitterで受講生のツイートを見ない日はありません。「課題 + 課題のレビューあり + 質問し放題」というサービスを提供しています。 |
スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
---|---|---|---|---|
![]() Famm |
有料 (¥162,800) |
オンライン (1ヶ月) |
Webデザイン | なし(案件獲得サポートあり) |
![]() |
||||
ママさん専用Webデザインスクールです。現在はコロナでライブ配信授業が中心です。なんと授業中は自宅にシッターを手配してくれるのでしっかり集中できます。受講期間は1ヶ月で5日間という超短期間なので、忙しいママさんでも時間を確保しやすいです。生徒はママさんだけなので、ママさん同士の交流も楽しめます。 |
スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
---|---|---|---|---|
![]() CodeCamp デザインマスターコース |
有料 (¥148,000 〜) |
オンライン (2ヶ月〜) |
Webデザイン | キャリア支援あり (就職エージェントの紹介) |
![]() |
||||
CodeCampはオンラインのWebデザインスクールです。低価格ながら講師から直接指導とフィードバックを受けられるのが最大の特長です!おすすめのコースは「デザインマスターコース」。コスパ重視で講師と対話しながら学びたい人に最適なスクールです。 |
スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
---|---|---|---|---|
![]() プログラマカレッジ |
無料 | 通学 | プログラミング | あり |
![]() |
||||
『プログラマカレッジ』は20代限定の通学式で完全無料のプログラミングスクールです。無料なのでエンジニアになりたい方はぜひ挑戦してみてください。スクール側は就業先の企業からお金をもらうことで無料で運営をしています。とはいえ授業の質は高いと評判です。『プログラマカレッジ』の卒業生による体験談記事はこちらです。 |
スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
---|---|---|---|---|
![]() GEEK JOB |
無料 | 通学 | プログラミング | あり |
![]() |
||||
上で紹介した『プログラマカレッジ』と同様の20代限定の通学式で完全無料のプログラミングスクールです。プログラマカレッジは決まった時間に通学しますが、GEEK JOBは個別指導なので自分のペースで通学できます。エンジニアになりたい方は、自分の生活スタイルに合わせてどちらのスクールに行くか検討してみましょう。就職率97.8%は驚異的です! |
はじめまして。
「PORTFLIOベーシック」を購入させていただいた者です。
ご質問がありコメントさせていただきました。
「トップページ上部」の箇所につきまして
でもサイトと同じような
SERVICE
デザイン コーディング WordPress
という風に横並びに3つのSVGを並べて
その下にテキストを配置するには
どうすればよいのでしょうか。
スマホ対応の場合も併せてお教えいただけますと幸いです。
お手数をお掛けして恐縮ですが、ご教示のほどお願いいたします。
川口さま
この度はご購入していただきありがとうございました!
またコメントもありがとうございます。
「トップページ上部」の箇所はWordPressのブロックエディタで編集するのですが、
ちょっとわかりづらいですよね…。
↓ここの編集方法の動画を作成してみました。このようにブロックエディタで作っていきます。
https://webdesigner-go.com/portfolio-basic-wordpress/edit-service.mp4
3カラムを作って、その中に画像とテキストを入力していきます。
スマホの場合は、3カラムは自動で縦に1カラムずつ並ぶので、特に何かスマホ用に設定する必要はありません。
まだ分かりづらい点などございましたら、ご気軽にコメントをください。
よろしくお願いいたします。
お忙しい中、早々にご回答くださいましてありがとうございます!!
動画の解説の通りに実行し、できました!!
大変ご親切に対応してくださり感謝しております。
すばらしいテーマを作ってくださりありがとうございました!!
ご希望のレイアウトが作れたようで安心しました。
お褒めの言葉もありがとうございます!
また何か不明点がございましたらコメントをください^^
購入させていただきました。
カスタマイズで手の届かない部分を子テーマのCSSを書き換えているのですが
カスタマイズで設定したものは、アップデートされるとき変わってしまわないですよね?
semさま、この度はテーマのご購入をありがとうございました。
はい、その通りです。子テーマ内のCSSで編集した内容は、テーマのアップデート後もそのまま保持されます。
もう一つ質問なんですが、トップページの投稿の表示件数を変えたいのですが
「1ページに表示する最大投稿数」だと、アーカイブページの表示件数だけ変わって
トップページに反映されないんですけどどうすればいいですが?
semさま、ご質問をありがとうございます。
TOPページの投稿表示数は、管理画面の【外観】→【カスタマイズ】→【投稿】内に「TOPページに表示する最大投稿数」の項目がありますので、そちらに半角で整数値を入力して指定が可能です。
マニュアルにてその説明が不足しておりました。失礼いたしました。
※追記いたしました。
トップページ下部のカバーどうやってできますか?
semknbさま、ご質問をありがとうございます。
TOPページのカバー部分の設置方法を再現した動画を作成しました。こちらを参考にしてください。
https://webdesigner-go.com/portfolio-basic-wordpress/edit-cover.mp4
worksのところが何もクリックできない状態になってしまいました。
どこをいじればいいのでしょうか?
・カテゴリー選択できない
・投稿記事(画像)選択できない
という状態です。
さささま、はじめまして。
この度はWordPressテーマのご購入をありがとうございました!
ご指摘の点は、こちらの環境(MacBookとWindowsマシン)では再現しませんでした。
worksページのカテゴリ一覧のカテゴリ名と各ページへのリンクはクリック可能で遷移もできる状態です。
今もまだ発生していますでしょうか?
サイトを拝見しましたが、とても綺麗に活用していただいて感動しました。
このWordPressテーマはデザイナーや写真家の方の利用を想定していましたが、開発者の方の制作実績としてご活用していただけて、とても興味深く拝見しました。テーマ活用の幅が広がって嬉しいです。
このサイトでさささまのサイトを紹介してもよろしいでしょうか?
ねこポンさんはじめまして!転職活動に向けてベーシックタイプを購入させて頂きました。解説がとても分かりやすく、コーディングができない私でもポートフォリオサイトを作る事ができて嬉しいです!質問なのですが、例えばGナビのABOUTをクリックした時、ウィジェットで設定したトップページ上部のABOUTにスクロールダウンさせるにはどうすればよいでしょうか?よろしくお願い致します。(固定ページに飛ぶのではなく、TOPページの各コンテンツに移動させるイメージです)
つぶつぶさん、はじめまして!
WordPressテーマのご購入ありがとうございます!!
コーディングが苦手な方のお力になれて嬉しいです^^
ナビのリンクをクリックしたら該当の箇所にスクロールダウンですよね…。その機能は無いんですよね。。ただ、HTMLのアンカーリンクの機能で同様のことは実現できます。下記のデモを参考に解説します。
https://demo-portfolio-basic.webdesigner-go.com/
ナビに「SERVICE」という項目がありますよね。今回、解説用に一時的に追加してみました。それをクリックしたらトップページのSERVICEの箇所に移動しますよね。これは下記の流れで実現しています。
1. 管理画面の【外観】→【メニュー】の「メニュー項目を追加」内の「カスタムリンク」で、URLを「/#service」と入力する。ナビゲーションラベルは「SERVICE」と入力。「メニューを保存」をクリック。aboutの場合は「/#about」でOKです。
2. 管理画面の【外観】→【ウィジェット】で、SERVICEの箇所の上に配置した「スペーサー」パーツを選択して、右側パネルの「高度な設定」内の「HTMLアンカー」に「service」と入力する。これでスペーサーに#serviceというidが振られます。本当はSERVICEの見出しに#serviceをつけてもいいのですが、このテーマはヘッダーを固定しているためヘッダーのズレの分を考慮して見出しの上のパーツのスペーサーにidを振っています。aboutの場合は、aboutの箇所の上にスペーサーを配置してそこに「about」を設定してください。
一応これでどのページのナビからでもトップページのSERVICEに移動できるはずです。aboutでも同様に設定してみてください。どうしても固定ヘッダーがあるのでそのズレがちょっと気になるのでスペーサーの高さなど調整が必要ですね。。
もしこれでわからなかったらまたコメントをください。実際に設定している動画を作ってみます。
こんにちは!
デモサイトに機能をアップして頂き、誠にありがとうございます!おかげ様でスクロールダウンに成功しました^_^
最初スクロースした際、見出し文字がヘッダーにかぶってしまい、上のスペーサー2個使い(ピクセル数は2分割)という荒療治で何とか見出し丁度に落ちてくる感じに仕上がりました笑笑
転職成功させて、もっと勉強したいと思います、、!
ありがとうございました!
はじめまして。
転職活動用のポートフォリオ作成のためにテンプレートを購入させていただきました。
1点お聞きしたいことがあり、ご連絡させていただきました。
現在トップページに表示している制作実績のところにはwordpress内「投稿」からアップロードした記事がすべて表示されてしまうのでしょうか。
ブログの記事と作品の詳細ページを別々に管理したいのですが、可能でしょうか。
のんさん、はじめまして。
WordPressテーマのご購入をありがとうございます!
現状、作品ページとブログ記事を分けて表示する機能はないですね…。
作品一覧の中に「ブログ」というカテゴリを設けて投稿し、作品と一緒に表示するのが限界だと思います。
完全に分けて例えばトップページにそれぞれの一覧を表示するには、ある程度ソースを編集する必要があります。
ただ、ご意見は非常に参考になりました。
ポートフォリオに作品だけではなくブログも合わせて投稿したいニーズもあるかと思います。
時間ができたら改修を検討するかもしれません。
こんにちは。ポートレート用にテンプレートを購入しました。
プラグインのインストールや、コンタクト、プロフィールなどは設定出来たのですが、フロントページが全く反映されないのですが、考えられる原因と対処法はありますでしょうか?
プラグインは不要なものは無効化してみました。
廣上さま
この度はWordPressテーマをご購入いただきありがとうございます!
サイトを拝見しました。
おそらくですが、管理画面の【設定】→【表示設定】の【ホームページの表示】で「固定ページ」を選択した状態になっていませんでしょうか?そしてすでに作成済みの何か固定ページをご指定されている可能性がございます。こちらを「最新の投稿」に設定しておくと表示されるはずです。
もし、これでも直らなければまたお知らせください。他の原因を検討いたします。
ねこポンさん初めまして!
いつも、ブログを参考にさせていただいています。
ポートレート用にテンプレートを購入致しました。
MANPを使用し、ローカル環境でwardpressを使用しているのですが、
固定ページを設定した後に、サイト上部に
Warning: Undefined variable $post in /Applications/MAMP/htdocs/○○○/wp-content/themes/portfolio-basic/functions.php on line 138
Warning: Attempt to read property “ID” on null in /Applications/MAMP/htdocs/○○○/wp-content/themes/portfolio-basic/functions.php on line 138
Warning: Undefined variable $post in /Applications/MAMP/htdocs/○○○/wp-content/themes/portfolio-basic/functions.php on line 139
Warning: Attempt to read property “ID” on null in /Applications/MAMP/htdocs/○○○/wp-content/themes/portfolio-basic/functions.php on line 139
というPHPのエラー表記が出てしまい困っています。
自分なりに調べたのですが、解決できず質問させていただきました。
よろしくお願いいたします。
るーさん、はじめまして!
この度はWordPressテーマを購入していただきありがとうございます。
エラーの内容を確認しました。これは私の環境では再現しないのでちょっと検証が難しそうですね…可能性として考えられるのは、固定ページ機能で作品一覧ページを作った際に「投稿一覧テンプレート」を指定されていない可能性があるのですが、いかがでしょうか?
指定方法はこちらです。
https://webdesigner-go.com/template/portfolio-basic-wordpress-usage/#i-8
ただ、仮に「投稿一覧テンプレート」を指定しなくても本来はエラーは出ないはずです。もしかしたらMAMP特有の症状なのかもしれません。。
もし直らなければまたコメントをください。その際にMAMP上のWordPressのバージョンを教えていただけると助かります。
投稿一覧テンプレートは指定されていました。
WordPressのバージョンは5.9です。
wp-content/themes/portfolio-basic/functions.php
138行目:$articleList_link = get_permalink($post->ID);
139行目:$articleList_title = get_the_title($post->ID);
エラー内容としては、
上記のファイル内で使用されている$postが定義されていないことが原因かと思いますが、
$postはどこで定義されているものでしょうか?
functions.php内に$postは見当たりませんでした。
ご確認よろしくお願い致します。
るーさん、ご確認をありがとうございます。
私のMacにもMAMPをインストールし、PHPのバージョンが8系(8.0.8)で同じエラーログを表示することができました。
原因はPHP8の「未定義の変数はエラーになる」という仕様変更のようです。本来はWordPressではグローバル変数の$postに記事の内容が入っており、$postと明示していなくてもPHP7ではエラーにはならないのですが、PHP8ではいきなり$postという記述を使うことで、未定義の変数として扱われてエラーになってしまうということのようです。
PHP8ではテストしておらず、エラーが出てしまい困惑させてしまいました。申し訳ございません。。
解決方法は3つあります。PHP8にこだわりが無ければ1で対応するのがオススメです。
1. これが一番簡単です。MAMP上のPHPのバージョンを7系にします。管理画面のPHP versionから指定できます。7(7.4.21)ではないですよね…??
2. functions.phpの138行目と139行目の「$post->ID」を「get_the_ID()」に書き換える。
3. functions.phpの138行目辺りに、global $post;という一行を加える。
とはいえ、いつかはPHP8にする時が来るので、その時にまたエラーが出ては困りますよね。今週日曜中には上の2の内容で修正したテーマファイルをダウンロード可能な状態にいたします。その際はまたコメントにてお知らせの返信をいたします。
ご迷惑をおかけして申し訳ございませんでした。でも、おかげさまでバグを見つけることができました!本当にありがとうございます。
修正版のテーマファイル(ver.1.0.2)をアップロードいたしました。
ダウンロードページにてダウンロードしていただければ幸いです。
よろしくお願いいたします。
ねこポンさん、お返事が遅くなってしまい申し訳ありません。
早急に対応していただいて助かりました!
ねこぽんさんの記事を参考に、ポートフォリオの制作を頑張りたいと思います。
また何かあったら質問させてください。ありがとうございました!
初めまして、ねこポンさん。
転職のため、ポートフォリオ用テーマを購入させていただきました!
使いやすいテーマを作ってくださり、ありがとうございます。
質問よろしいでしょうか。
追加CSSにてねこポンさんが書いてくださっているコードを記入したのですが、スマホで1
カラムになりませんでした。申し訳ありませんが、何か間違っている点や原因がわかりましたら教えていただけると助かります。
.articleList-list {
grid-template-columns:repeat(3,1fr);
}
@media screen and(max-width:767px){
.articleList-list {
grid-gap: 15px;
grid-template-columns: 1fr;
}
}
えびさん、はじめまして。
WordPressテーマのご購入をありがとうございます!
気に入ってくださり嬉しいです^^
スマホで1カラムにならない件ですが、下記のようにandの後に半角スペースを入れて試していただけますでしょうか?おそらくこれで1カラムにできるはずだと思います。
誤:
@media screen and(max-width:767px){
正:
@media screen and (max-width:767px){
これでも直らなければまたコメントをください。
ねこポンさん、返信ありがとうございます!
修正したところ、1カラムになりました!
初歩的なミスでお手数をおかけし、申し訳ありませんでした。
大変助かりました、ありがとうございました!
ポートフォリオを買わせていただきました!!
http://www.marco-mosaici.jp/
質問なのですが、上記のサイトみたいにリンクをクリックした時ページ遷移すると思うのですが
ナブバーだけはロードさせずにそのままにするということはできますが??
semknbさん、WordPressテーマのご購入をありがとうございます。
「ナブバーだけはロードさせずにそのままにする」というのは、ページ遷移をした際にナビだけは再表示せずに遷移前の状態でそのまま表示し続けたままにするということでしょうか。それはこのテーマでは不可能になります。
返信ありがとうございます。
下記のサイトの方はできてるんですけど、同じテンプレートですよね??
https://sho-portfolio.com/
semknbさん、その私のポートフォリオサイトも同じWordPressテーマですが、「ページ遷移をした際にナビだけは再表示せずに遷移前の状態でそのまま表示し続けたままにする」ということはしていないです。遷移が速いのでナビが再表示されていないように見えるだけかもしれません。
ページ遷移後もナビ(ヘッダーですよね?)を遷移とは無関係にそのまま表示するにはこのWordPressテーマでは不可能です。例えばVue.jsやReactなどのJavaScriptフレームワークを使えば、ヘッダーはそのままにして、コンテンツ部分だけを非同期で取得することは可能です。しかし、このWordPressテーマにはそのような機能がないので、別ページに遷移したらヘッダーもコンテンツ部分もすべて再表示することになります。
もしご指摘の点が間違っていたら申し訳ございません。より詳細に閲覧環境(ブラウザや端末など)や理想の状態を教えていただけると助かります。
返信が来てないと思い忘れていましたすいません。
そうなんですね。わかりました。
wordpressとかじゃなく素朴な疑問なのですが共通パーツ(ヘッダーなど)を残して画面遷移する
にはどういった技術と知識が必要なのでしょうか??
以下のようなJavaScriptフレームワークなら可能です。
・Vue.js
・React
また、それぞれVue.jsベース、Reactベースの静的サイトジェネレータがあります。
・Nuxt.js(Vue.jsベース)
・Gatsby(Reactベース)
ここではこれ以上は解説しませんが、キーワードとしては上記のフレームワーク名や「Jamstack」「 静的サイトジェネレータ」で検索してみてください。いろいろ情報が出てきます。
購入させて頂きました。
いつからか、サイドバーとページトップのボタンが反応しなくなってしまったのですが
検証ツールでコンソールを見てみたらエラーが出ていたのですが、わかりますか??
https://beat-store.seinen-boy.com/
URLを貼っておきますので、コンソールを確認していただけないでしょうか?
返信お待ちしております。
フランクさま
この度はテーマのご購入をありがとうございます!
サイトを拝見しましたが、最高にかっこよくて感動しました…。
ぜひ活用事例に掲載させていただきたいのですが、いかがでしょうか?
エラーの内容について調べてみました。
script.jsの一行目に”use strict”を記載していることでエラーが出ており、「トップへ戻る」と「ハンバーガーメニュー」が機能していないようです。
具体的には変数宣言をちゃんと行っていないことによるエラーでした。
解決策は2つあります。いづれかの方法で直るはずです。
解決策1. “use strict”の一行を削除する
“use strict”を記載することで厳格なJavaScriptの書き方をしないとエラーが出るようになっています。明確に変数宣言をしていないことでエラーが出てしまっておりました。私の書き方で変数宣言をしていないために生じたエラーです。申し訳ございませんでした…。”use strict”の一行を削除することで、エラーは消えるはずです。
解決策2. 変数の宣言をちゃんとする。
以下のように修正をすると直るはずです。変数の前にvar(letでも可なはず)を付けます。こちらの方が根本的な解決策となります。
誤
$pageTop = $(‘#js-page-top’);
↓
正
var $pageTop = $(‘#js-page-top’);
誤
$btnMenu = $(‘.btnMenu’);
↓
正
var $btnMenu = $(‘.btnMenu’);
誤
$gnav = $(‘.gnav’);
↓
正
var $gnav = $(‘.gnav’);
以下に、解決策2の修正後のscript.jsの内容を書いておきます。こちらを使用してください。
※念のため、元のscript.jsをバックアップしておくことをおすすめいたします。
——————————
‘use strict’;
jQuery(function ($) {
//ページトップへ戻る
var $pageTop = $(‘#js-page-top’);
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$pageTop.addClass(‘is-show’);
} else {
$pageTop.removeClass(‘is-show’);
}
});
$pageTop.on(‘click’, function () {
$(‘body,html’).animate({
scrollTop: 0
}, 300);
return false;
});
//ハンバーガーメニュー
var $btnMenu = $(‘.btnMenu’);
var $gnav = $(‘.gnav’);
$btnMenu.on(‘click’, function () {
$btnMenu.toggleClass(‘active’);
$gnav.addClass(‘show’)
$gnav.animate({ width: ‘toggle’ }, 200);
});
$(document).on(‘click’, function (e) {
console.log(e.target);
if (!$(e.target).closest($gnav).length && !$(e.target).closest($btnMenu).length) {
if ($gnav.hasClass(‘show’)) {
$gnav.removeClass(‘show’)
$btnMenu.toggleClass(‘active’);
$gnav.animate({ width: ‘toggle’ }, 200);
}
}
});
});
——————————
返信遅れて申し訳ありません。
こんなサイトでよかったら是非お使いになって下さい…。
丁寧に説明頂き本当にありがとうございました。
無事解決いたいました。
立て続けに申し訳ないのですが、下記のサイトような写真のギャラリーみたいなものも
作りたいなと思っているのですがこれはどうやってやっているのでしょうか??
テンプレート階層的には、archive.php → single.phpという関係でしょうか??
http://www.marco-mosaici.jp/mosaici
何度も申し訳ないのですが、お時間がある時にでも返信お待ちしております。
https://webdesigner-go.com/template/portfolio-basic-wordpress/
↑のページの「活用事例」のコーナーに掲載させていただきました!ありがとうございます。
本当にセンスの塊だと思いました…。かっこいいです!
http://www.marco-mosaici.jp/
この写真ギャラリーのサイトはかなり昔に作ったものですね…笑
構造的には下記のようになっているはずです。
【ギャラリーページTOP】
固定ページ(page.php)
【各写真ページ】
カスタム投稿タイプ(single-mosaic.php)
かなりうろ覚えですが、、「投稿」はブログコーナーで使ってしまっているので、写真の個別投稿記事は別途カスタム投稿タイプを用意して使っているようです。
プラグインは調べてみると「carousel without jectpack」と「jQuery masonry image gallery」を使っています。どちらもおそらく現在ではメンテナンスされていない古いプラグインのようです。すみません、、もう5年ほど前で記憶がありません。。
フランク様のサイトでもすでに「投稿」は各商品の投稿用に使っているため、もし新たに別の投稿を用意したいのなら、カスタム投稿タイプを使うことになるはずです。
シンプルに固定ページなど一つのページにギャラリーを設置するだけなら、何かプラグインをインストールして簡単に設定できるかもしれません。
参考:
https://www.conoha.jp/lets-wp/wp-gallery/
また何かご質問や不具合などございましたら、いつでもお知らせください。
返信遅れてすいません…。
掲載の方ありがとございました…。
ギャラリーページTOPの国別で分かれているのはカテゴリーまたはタクソノミーごとに
出力している感じでしょうか?
http://www.marco-mosaici.jp/
あともう一つ質問なのですが、テーマファイルエディターでCSSなどを書き換えてスーパーリロード(⌘+shift+R)してもすぐに反映されないのですがなぜでしょうか??
フランクさま
素敵なサイトが活用事例に増えて嬉しいです!
>ギャラリーページTOPの国別で分かれているのはカテゴリーまたはタクソノミーごとに出力している感じでしょうか?
そうですね、各記事がタクソノミー(国別)に分かれていて、国(ターム)ごとに出し分けているはずです。たしかここは当時はまだWordPressの経験が浅くけっこう実装がしんどかった記憶があります。今だったらそんなに難しくなさそうですが。おそらく以下の記事でやっていることがほぼ同じです。
参考;tax_queryでターム毎に分類してカスタム投稿記事一覧を表示する
https://memo.cobanlab.net/2019/01/27/61/
get_termsでタクソノミーの一覧を取得したら、さらにforeachで一つ一つターム(スラッグ)を取得してget_postsの’tax_query’に入れて各タームのデータを取得し、さらにforeachでタームの各記事を出力してますね。foreachを2回使っているところが少しややこしいですね…。
>あともう一つ質問なのですが、テーマファイルエディターでCSSなどを書き換えてスーパーリロード(⌘+shift+R)してもすぐに反映されないのですがなぜでしょうか??
これは僕はテーマファイルエディターを使ったことがほとんどないのでわからないですね…。少しググってみましたが情報が得られずです。。
分かりました!
色々とご丁寧に説明して頂き、ほんとにありがとうございました!!
また分からないことがあったらお願いいたします!!
購入しました。
解説も丁寧でありがとうございます。
ブログ記事もポートフォリオに入れたいのですが可能でしょうか。
投稿が「works」に取られているのですが、
ブログ記事も表示したいです。
解説参考サイトなどありましたらお願いいたします。
おねさま、この度はWordPressテーマのご購入をありがとうございます。
おっしゃる通り「投稿」を「works」に割り当てているため、このテーマにブログを投稿する機能はありません。
ブログ機能を実装するには、ブログ投稿用に新たにカスタム投稿タイプを作成する必要があります。
下記の記事がわかりやすいです。
-【WordPress】カスタム投稿タイプの使い方を解説する【テーマ自作】
https://miya-system-works.com/blog/detail/147
カスタム投稿タイプの概要はこの記事がわかりやすいです。
-【WordPressカスタム投稿】記事一覧・詳細を実装してみよう(前編)
https://b-risk.jp/blog/2021/03/custom_post_type_1/
ブログ専用の記事ページと記事一覧ページの作成方法はこの記事がわかりやすいです。
このへんはWordPressの知識が必要になるので少し難しいかもですね。。
あとはもういっそのことnoteにアカウントを作って、そちらで記事を書いてリンクするのもアリかもですね。
https://note.com/
カスタム投稿タイプについては、紹介した記事をお読みになってわからない箇所などあればお知らせください。
ご親切にありがとうございます。
まずは、記事を見ながらWordPressで実装してみます。
お礼としましてTwitterでこちらのサイトを宣伝していきます。