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

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


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

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

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

まずはインターネット上に公開せずに、ご自身のPCでのみWordPressテーマを利用したい場合は、「Local」等のツールを使って、PCにWordPressの環境を構築することで、ご自身のPC内でWordPressの編集作業ができます。詳しくは「Local WordPress  使い方」などでGoogle検索して調べてみてください。ここではLocalの使い方については公式にはサポートしておりませんが、可能な範囲でサポートはしますので、ご質問などございましたら本記事のコメント欄からお願いいたします。

目次

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画像がアップロード可能になります。

ヘッダーの設定


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


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

投稿の設定


各ページに表示する投稿一覧の最大投稿表示数を指定できます。TOPページと記事下に表示する投稿の表示数は数値で入力して指定ください。記事一覧とカテゴリーページの表示数は【外観】→【表示設定】→【1ページに表示する最大投稿数】から指定してください。

また、ブログのように使いたい場合は、各記事に投稿日時の表示が可能です(通常は非表示です)。

ボタン/リンクの設定


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

コンテンツ幅の設定

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

その他の設定


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の画像を指定してください。


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


「%抜粋」と入力すると「抜粋」が選択できます。

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


「タクソノミー」タブでは、カテゴリーページのタイトルとメタディスクリプションを設定できます。ここではメタディスクリプションの一例として、文章の始めに「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. 【ウィジェット】から編集する

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


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


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


試しに「トップページ上部」内をこのように編集しました。「SERVICE」の箇所の設置方法は下記の動画を参考にしてください。

WordPressのブロックエディタの機能を使って編集しています。


試しに「トップページ下部」内をこのように編集しました。設置方法は下記の動画を参考にしてください。

この緑パーツのように画像の上にテキストなどを置くパーツを「カバー」と呼ぶのですが、ウィジェットの中で使う場合は横幅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ベーシック』マニュアル” への60件のフィードバック

  1. 川口あけみ より:

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

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

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

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

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

    • ねこポン より:

      川口さま

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

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

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

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

      • 川口あけみ より:

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

        • ねこポン より:

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

  2. sem より:

    購入させていただきました。
    カスタマイズで手の届かない部分を子テーマのCSSを書き換えているのですが
    カスタマイズで設定したものは、アップデートされるとき変わってしまわないですよね?

    • ねこポン より:

      semさま、この度はテーマのご購入をありがとうございました。
      はい、その通りです。子テーマ内のCSSで編集した内容は、テーマのアップデート後もそのまま保持されます。

      • sem より:

        もう一つ質問なんですが、トップページの投稿の表示件数を変えたいのですが
        「1ページに表示する最大投稿数」だと、アーカイブページの表示件数だけ変わって
        トップページに反映されないんですけどどうすればいいですが?

        • ねこポン より:

          semさま、ご質問をありがとうございます。
          TOPページの投稿表示数は、管理画面の【外観】→【カスタマイズ】→【投稿】内に「TOPページに表示する最大投稿数」の項目がありますので、そちらに半角で整数値を入力して指定が可能です。

          マニュアルにてその説明が不足しておりました。失礼いたしました。
          ※追記いたしました。

  3. semknb より:

    トップページ下部のカバーどうやってできますか?

  4. ささ より:

    worksのところが何もクリックできない状態になってしまいました。
    どこをいじればいいのでしょうか?

    ・カテゴリー選択できない
    ・投稿記事(画像)選択できない
    という状態です。

    • ねこポン より:

      さささま、はじめまして。
      この度はWordPressテーマのご購入をありがとうございました!

      ご指摘の点は、こちらの環境(MacBookとWindowsマシン)では再現しませんでした。
      worksページのカテゴリ一覧のカテゴリ名と各ページへのリンクはクリック可能で遷移もできる状態です。
      今もまだ発生していますでしょうか?

      サイトを拝見しましたが、とても綺麗に活用していただいて感動しました。
      このWordPressテーマはデザイナーや写真家の方の利用を想定していましたが、開発者の方の制作実績としてご活用していただけて、とても興味深く拝見しました。テーマ活用の幅が広がって嬉しいです。
      このサイトでさささまのサイトを紹介してもよろしいでしょうか?

  5. つぶつぶ より:

    ねこポンさんはじめまして!転職活動に向けてベーシックタイプを購入させて頂きました。解説がとても分かりやすく、コーディングができない私でもポートフォリオサイトを作る事ができて嬉しいです!質問なのですが、例えば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分割)という荒療治で何とか見出し丁度に落ちてくる感じに仕上がりました笑笑

        転職成功させて、もっと勉強したいと思います、、!
        ありがとうございました!

  6. のん より:

    はじめまして。
    転職活動用のポートフォリオ作成のためにテンプレートを購入させていただきました。
    1点お聞きしたいことがあり、ご連絡させていただきました。

    現在トップページに表示している制作実績のところにはwordpress内「投稿」からアップロードした記事がすべて表示されてしまうのでしょうか。
    ブログの記事と作品の詳細ページを別々に管理したいのですが、可能でしょうか。

    • ねこポン より:

      のんさん、はじめまして。
      WordPressテーマのご購入をありがとうございます!

      現状、作品ページとブログ記事を分けて表示する機能はないですね…。
      作品一覧の中に「ブログ」というカテゴリを設けて投稿し、作品と一緒に表示するのが限界だと思います。
      完全に分けて例えばトップページにそれぞれの一覧を表示するには、ある程度ソースを編集する必要があります。

      ただ、ご意見は非常に参考になりました。
      ポートフォリオに作品だけではなくブログも合わせて投稿したいニーズもあるかと思います。
      時間ができたら改修を検討するかもしれません。

  7. 廣上愛莉 より:

    こんにちは。ポートレート用にテンプレートを購入しました。
    プラグインのインストールや、コンタクト、プロフィールなどは設定出来たのですが、フロントページが全く反映されないのですが、考えられる原因と対処法はありますでしょうか?
    プラグインは不要なものは無効化してみました。

    • ねこポン より:

      廣上さま
      この度はWordPressテーマをご購入いただきありがとうございます!

      サイトを拝見しました。
      おそらくですが、管理画面の【設定】→【表示設定】の【ホームページの表示】で「固定ページ」を選択した状態になっていませんでしょうか?そしてすでに作成済みの何か固定ページをご指定されている可能性がございます。こちらを「最新の投稿」に設定しておくと表示されるはずです。

      もし、これでも直らなければまたお知らせください。他の原因を検討いたします。

  8. るー より:

    ねこポンさん初めまして!
    いつも、ブログを参考にさせていただいています。
    ポートレート用にテンプレートを購入致しました。
    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)をアップロードいたしました。
          ダウンロードページにてダウンロードしていただければ幸いです。
          よろしくお願いいたします。

          • るー より:

            ねこポンさん、お返事が遅くなってしまい申し訳ありません。
            早急に対応していただいて助かりました!
            ねこぽんさんの記事を参考に、ポートフォリオの制作を頑張りたいと思います。
            また何かあったら質問させてください。ありがとうございました!

  9. えび より:

    初めまして、ねこポンさん。
    転職のため、ポートフォリオ用テーマを購入させていただきました!
    使いやすいテーマを作ってくださり、ありがとうございます。
    質問よろしいでしょうか。
    追加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カラムになりました!
        初歩的なミスでお手数をおかけし、申し訳ありませんでした。
        大変助かりました、ありがとうございました!

  10. semknb より:

    ポートフォリオを買わせていただきました!!

    http://www.marco-mosaici.jp/
    質問なのですが、上記のサイトみたいにリンクをクリックした時ページ遷移すると思うのですが
    ナブバーだけはロードさせずにそのままにするということはできますが??

    • ねこポン より:

      semknbさん、WordPressテーマのご購入をありがとうございます。
      「ナブバーだけはロードさせずにそのままにする」というのは、ページ遷移をした際にナビだけは再表示せずに遷移前の状態でそのまま表示し続けたままにするということでしょうか。それはこのテーマでは不可能になります。

      • semknb より:

        返信ありがとうございます。
        下記のサイトの方はできてるんですけど、同じテンプレートですよね??
        https://sho-portfolio.com/

        • ねこポン より:

          semknbさん、その私のポートフォリオサイトも同じWordPressテーマですが、「ページ遷移をした際にナビだけは再表示せずに遷移前の状態でそのまま表示し続けたままにする」ということはしていないです。遷移が速いのでナビが再表示されていないように見えるだけかもしれません。

          ページ遷移後もナビ(ヘッダーですよね?)を遷移とは無関係にそのまま表示するにはこのWordPressテーマでは不可能です。例えばVue.jsやReactなどのJavaScriptフレームワークを使えば、ヘッダーはそのままにして、コンテンツ部分だけを非同期で取得することは可能です。しかし、このWordPressテーマにはそのような機能がないので、別ページに遷移したらヘッダーもコンテンツ部分もすべて再表示することになります。

          もしご指摘の点が間違っていたら申し訳ございません。より詳細に閲覧環境(ブラウザや端末など)や理想の状態を教えていただけると助かります。

          • semknb より:

            返信が来てないと思い忘れていましたすいません。
            そうなんですね。わかりました。

            wordpressとかじゃなく素朴な疑問なのですが共通パーツ(ヘッダーなど)を残して画面遷移する
            にはどういった技術と知識が必要なのでしょうか??

            • ねこポン より:

              以下のようなJavaScriptフレームワークなら可能です。
              ・Vue.js
              ・React
              また、それぞれVue.jsベース、Reactベースの静的サイトジェネレータがあります。
              ・Nuxt.js(Vue.jsベース)
              ・Gatsby(Reactベース)
              ここではこれ以上は解説しませんが、キーワードとしては上記のフレームワーク名や「Jamstack」「 静的サイトジェネレータ」で検索してみてください。いろいろ情報が出てきます。

  11. フランク より:

    購入させて頂きました。

    いつからか、サイドバーとページトップのボタンが反応しなくなってしまったのですが
    検証ツールでコンソールを見てみたらエラーが出ていたのですが、わかりますか??
    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)してもすぐに反映されないのですがなぜでしょうか??
              これは僕はテーマファイルエディターを使ったことがほとんどないのでわからないですね…。少しググってみましたが情報が得られずです。。

              • フランク より:

                分かりました!

                色々とご丁寧に説明して頂き、ほんとにありがとうございました!!

                また分からないことがあったらお願いいたします!!

  12. おね より:

    購入しました。
    解説も丁寧でありがとうございます。

    ブログ記事もポートフォリオに入れたいのですが可能でしょうか。
    投稿が「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でこちらのサイトを宣伝していきます。

  13. ちびハナ より:

    こんばんはm(_ _)m
    お忙しいところ恐れ入りますが、2点質問させていただきます!

    ①pngのロゴ画像について
    スマホで実機確認した場合のみロゴ自体が表示されません。(Safari、Googleともに)
    ※ちなみに上記のロゴ画像のみ、Googleの検証画面で「混合コンテンツ」というエラーが出ている状態です。こちらが関係しているのか?と思っているところです。

    ②グローバルナビについて
    開いているページのメニュー名に常時下線を表示させたいor文字色を変えたい(現在どのページにいるか分かるように)のですが、なかなか上手くいかず…
    方法があれば教えていただけますと幸いですm(_ _)m

    • ねこポン より:

      ちびハナさん、かなりおひさしぶりです。
      この度はWordPressテーマのご購入をありがとうございます!

      ①pngのロゴ画像について
      「混合コンテンツ」はSSL化(https)したサイトにhttpのコンテンツが混じっている時に表示されるという認識です。サイトのURLがhttpsで、ロゴ画像のパスがhttpから始まっていないでしょうか?
      また、ロゴ画像のアップロード方法ですが、以下のどちらになりますでしょうか。

      1. 管理画面の【外観】→【カスタマイズ】内の【ロゴ画像】からアップロード
      2. ご自身でimgタグでロゴ画像を設置

      2の場合はロゴ画像がhttpsかhttpのどちらから始まっているかを確認してみてほしいです。1の場合ならちょっと謎ですね。。より詳しい調査が必要になります。解決しない場合は、可能でしたらURLをお送りください。

      ②グローバルナビについて
      現在のページを指すナビのリンクにはWordPressによって自動的に「current-menu-item」クラスが付与されています。そのため以下のようなCSSの指定でスタイルを適用できます。管理画面の【外観】→【カスタマイズ】内の【追加CSS】に記入をしてください。これは例として色を変えています。

      .current-menu-item a {
      color: #2bb2c1!important;
      }

      既存のスタイルを強制的に上書きするために、importantを付けています。

      デモの方にも反映しておきました。現在のページを指すナビのリンクの色が変わっているのがわかると思います。
      https://demo-portfolio-basic.webdesigner-go.com/

      ただ、この方法だけでは、カテゴリーページと作品(記事)ページを表示している時にはナビの「WORKS」にcurrent-menu-itemは付与されないのでCSSを適用できません。これを実現したい場合は、テンプレートの改修が必要になってきます。このテーマではそこまではサポートはしていません。もしご自身でいろいろお試しになって、わからない箇所があればこちらでご質問ください。可能な範囲で回答できればと思います。

  14. はるき より:

    ねこポンさん

    初めまして。ウェブデザイナー目指して転職活動しているものです。ものすごく有益な情報を発信されてて、ギャグセンスも高くて素晴らしいなと思いながらいつも拝見しております!ポートフォリオサイトの方も購入させていただいて、今作っているところです。ありがとうございます!

    質問なのです。ねこポンさんのマニュアルに沿ってあらかた見た目を整えてみた状況です。「ABOUT」という自分の自己紹介をウィジェット機能で作ってみたのですが、文章量が多くなるためさわりを書いて、残りを固定ページへ飛ばしたいです。「CONTACT」や「WORKS一覧」のように、ボタンをつけて、固定ページに飛ばすことってできるのでしょうか?

    よろしくお願いします!

    • はるき より:

      ネコポンさん
      すみません、手違いで顔写真も上がってしまいました💦
      可能でしたら消していただけますと幸いです。

      また問題解決しました^ ^
      お騒がせしました。

      • ねこポン より:

        はるきさん、はじめまして!

        この度はWordPressテーマのご購入をありがとうございます。
        ポートフォリオの件については、無事解決したようで良かったです!
        また、ギャグセンスを褒めていただき嬉しいです笑

        顔写真なのですが、Gravatarに登録している画像が自動で表示されちゃってるんですよね…。もし解除できないようでしたらコメントごと削除しますので、その旨お知らせください。

        参考:アバター ( プロフィールアイコン ) の設定
        https://blog.recruit.co.jp/rmp/docs/doc-13444/

        ポートフォリオを拝見しましたが、自然を感じる優しい配色で素敵ですね!!もしよかったらテーマの活用事例として紹介させていただけないでしょうか?

  15. 小松 より:

    はじめまして、小松といいます!
    1つ分からないことがあるので、質問させてもらいたいと思います。
    よろしくお願いします。

    メタディスクリプションに「%e」と入力すると「Excerpt」が表示される・・というところをやっているのですが、入力しても「Excerpt」が表示されてなくて困っています。コピペしてるので入力間違いとかではないと思うのですが、何か考えられる理由はありますでしょうか?

    お手数ですが、よろしくお願いします。

    • ねこポン より:

      小松さん、はじめまして!
      テーマのご利用をありがとうございます。

      どうやらYoastSEOがアップデートし、「%e」では反映されなくなったようですね…。困惑させてしまい申し訳ございませんでした。
      現在は「%抜粋」と入力することで、抜粋が反映できることを確認しました。この方法で入力と反映をしていただけますでしょうか。

      上のマニュアルの解説画像も差し替えておきました。そちらも合わせてご確認いただければ幸いです。
      https://webdesigner-go.com/template/portfolio-basic-wordpress-usage/#i-22

      またご質問などございましたら、いつでもコメントをください。

      • 小松 より:

        早速対応してくださりありがとうございます!
        確認したところ無事反映させることができました。
        また何かあったらよろしくお願いいたします(^^)

  16. フランク より:

    お世話になっております。
    wordpressテーマを購入させてもらったものなのですが、質問させてください。

    mvのタイトルをpngの画像にしようと思ってるのですが、中心に来ず少し左によって
    しまうのですが
    何か対策はあるでしょうか??

    テーマエディタで直接、
    h2のmv-titleの中にimgを入れている状態です。

    返信お待ちしております。

    • ねこポン より:

      フランクさま、お世話になっております。

      サイトを拝見して調べてみましたが、少し左によってしまう根本的な原因は正直わかりませんでした。。
      画像をCSSでブロック要素にして、margin: 0 auto;で中央寄せにする方法でいかがでしょうか。
      以下、CSSになります。

      .mv-title > img {
       display: block;
       margin: 0 auto;
      }

      ↑これで.mv-title直下のimgタグは中央寄せになります。

      .mv-title {
       font-size: 72px; ←これを消す
      }

      ↑また、.mv-titleのfont-sizeの指定は不要なので削除してください。

      これでも直らなければまたご連絡くださいませ。

  17. 川見 より:

    先ほども送ったのですが、メールにも確認などが届いていないため、確認していただけたか不安になり再送しております。
    固定ページの「ページ属性」の「テンプレート」の選択で、「デフォルトテンプレート」になっていると固定ページの中身がなにも表示されません。デフォルトでセットされているプライバシーポリシーも出てきません。
    しかし、他の「トップページ用テンプレート」と「投稿一覧テンプレート」にすると表示されます。
    wordpressのバージョンは6.0.1で、phpは8.1です。両方ともダウングレードを試みましたが状況が変わらなかった為(WordPress5.9、php8)もとに戻しました。
    レンタルサーバはロリポップです。
    どのように対処したらよいか教えて頂きたく何卒宜しくお願いいたします。

    • ねこポン より:

      川見様

      この度は『PORTFOLIOベーシック』をご購入いただきありがとうございました!
      サイトを拝見しましたが、とても素敵な配色とデザインで感動しました。

      サイトを拝見し、ABOUTページにはプロフィールやスキルが記載されていることを確認しました。管理画面の「固定ページの中身がなにも表示されません。」とのことですが、こちらのABOUTページは固定ページだと思われますが、このページ内容はどのように入力し反映をされましたでしょうか?

      >固定ページの「ページ属性」の「テンプレート」の選択
      固定ページの「テンプレート」の選択でよろしいですよね?「ページ属性」の項目はこのWordPressテーマでは編集はしない仕様になっております。

      また、「固定ページの中身が表示されない」意味の再確認ですが、「管理画面の固定ページの投稿画面でタイトル入力欄のみが表示されてその下の本文入力欄が表示されない」という意味でよろしいでしょうか?「タイトルを追加」の下に「ブロックを選択するには「/」を入力」が表示されていませんでしょうか。

      残念ながら私の環境(WordPress6.0.1/PHP8)では再現ができませんでした…。まだ直っていない状況でしたら、お手数ですが上記をご確認とご回答いただき、返信をいただけますでしょうか。

  18. 川見 より:

    現在、aboutページ、contactページは、「トップページ用テンプレート」を利用して作成しています。追加CSSで入力タグ内にある程度のデザインが入るように御社のページの固定ページのソースを確認して、クラスも一部マネして(col1というクラスが発生していることを確認して固定ページ内に自分でh2などをcol1クラスで囲んで)使用しています。
    何とか見た目は整っておりますが、これだと購入した甲斐がないので、ちゃんと機能として表示されるようにならないかと思っております・・
    https://mizuhokawami.com/privacy-policy/ をご覧ください。実際には中にたくさん文字が入力してあります。

    固定ページの「テンプレート」の選択でよろしいですよね?「ページ属性」の項目はこのWordPressテーマでは編集はしない仕様になっております。

    >また、「固定ページの中身が表示されない」意味の再確認ですが、「管理画面の固定ページの投稿画面でタイトル入力欄のみが表示されてその下の本文入力欄が表示されない」という意味でよろしいでしょうか?
    ※そうではありません。ちゃんと入力欄はあるのですが、いくら入力してもプレビュー画面には何もでてこないという意味です。
    >「タイトルを追加」の下に「ブロックを選択するには「/」を入力」が表示されていませんでしょうか。
    ※意味がわからないです・すみません・・「タイトル追加」とはどの画面のことですか?
    タイトル画面も本文入力画面も普通に入力できますが、右下の「デフォルトテンプレート」になっているとタイトル以外何も表示されません。
    https://mizuhokawami.com/privacy-policy/ をご覧いただけますでしょうか。

    「トップページ用テンプレート」にするとタイトルは出てこないのですが、見た目は下に投稿が表示されないで普通の固定ページのように利用できるので、自分で本文中にh2を入れたり追加CSSでタグ調整をして現在利用しています。

    >固定ページの「テンプレート」の選択でよろしいですよね?「ページ属性」の項目はこのWordPressテーマでは編集はしない仕様になっております。
    ※はい、PHPなどは何もわからないので、もちろんこの部分のカスタマイズ等は一切行っておりません。なお、プラグインもフォームを入れただけです。プラグインが影響しているかと思いましたが他に入れたPDFのプラグインを削除しても状況は同じでした。

    何卒宜しくお願いいたします。

    • ねこポン より:

      川見様

      詳しく教えていただきありがとうございます。
      プライバシーポリシーのページを確認し現象を理解できました。またABOUTページをどのように入力されたかについても理解できました。

      >「タイトル追加」とはどの画面のことですか?
      管理画面→固定ページ編集画面のタイトル入力欄のことでした。わかりづらくて申し訳ございませんでした。。

      私の方で可能な限り同じ状況を再現するために、ロリポップ+WordPress6.0.1+PHP8.1(CGI版)の環境を作ってみましたが、固定ページ(プライバシーポリシー)は以下のURLで問題なく表示されており、同様の現象が再現できない状態です。
      https://test-staging.com/privacy-policy/
      ※PHPはモジュール版ではなくCGI版でよろしかったでしょうか?

      デフォルトテンプレートであるpage.phpに一部不要な記述があったため削除しました。もしかしたらそれが原因かもしれませんので、お手数ですが、ご購入時のメールに記載されているダウンロードURLから再度テーマファイルをダウンロードし直してインストールしていただけますでしょうか?先ほど修正したテーマファイルをアップロードしております。

      上記でも直らない場合、以下を試していただけますでしょうか?
      ・管理画面→設定→パーマリンク内の「変更を保存」ボタンをクリック
      ・プライバシーポリシーページのエラー内容を確認したいため、ロリポップの管理画面の「サーバーの管理・設定」→「PHP設定」のドメイン(対象のドメイン)の「設定」をクリックし、「display_errors」をOffからOnに切り替えし、プライバシーポリシーページにエラーが表示された場合、その内容を教えていただけますでしょうか?
      ・上でエラーが表示されない場合、WordPressのエラー表示機能を使用したいので、WordPressのwp-contentフォルダ内のwp-config.phpに記載の、
      define(‘WP_DEBUG’, false);

      define(‘WP_DEBUG’, true);
      に変更して、プライバシーポリシーページでエラーが表示された場合、その内容を教えていただけますでしょうか?念のためwp-config.phpはバックアップをお願いいたします。
      参考:WordPressのデバッグモード
      https://gatespace.jp/2012/07/20/wordpress-debugging/

      テーマ側に問題があるのか、それともサーバー側の問題なのかなかなかわからない状況なのですが、、、上記の方法でエラーが表示されて原因を特定できればと思います。

      • 川見 より:

        ねこポン様

        詳しくご教示くださりありがとうございます。
        提示いただいた方法で再度やってみたいと思います。

るー へ返信する コメントをキャンセル

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

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

    週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制作会社を歩き回れるゲームを作ってみました!ぜひ探検してみてください。(注意:音が出ます!)

    一番上へ