HPYourselfでブログ一覧ページと記事ページのデザインを設定し、
WordPressに適用するまでの手順を解説します。
エディターの3つ目のタブです
HPYourselfのエディター画面上部に「ページ編集」「共通項目設定」「ブログデザイン」の3つのタブがあります。「ブログデザイン」タブをクリックしてください。
左パネルの「記事一覧ページ」セクション
左パネルの「記事一覧ページ」セクションで、ブログ一覧ページの見た目を設定できます。右側のプレビューに「記事一覧」タブでリアルタイムで反映されます。
左パネルの「個別記事ページ」セクション
「個別記事ページ」セクションで各記事の見た目を設定します。プレビューの「個別記事」タブに切り替えると、H1〜H4・箇条書き・引用・コードブロックなどのサンプルが表示されます。
設定を反映したテーマを書き出します
デザインが決まったら「WordPressテーマをダウンロード」ボタンを押してください。ブログデザインの設定が反映された hpyourself-theme.zip がダウンロードされます。
管理画面から操作します
https://ドメイン名/wp-admin/ にアクセスしてログインします。
左メニューの「外観」→「テーマ」→「新規追加」をクリックします。
「テーマのアップロード」→ ダウンロードした hpyourself-theme.zip を選択して「今すぐインストール」を押します。
「有効化」をクリックします。すでに有効化済みの場合は「上書きインストール」→「有効化」の順に押します。
WordPressの表示設定で指定します
WordPressはどのページに記事一覧を表示するかを「表示設定」で指定する必要があります。
管理画面の「固定ページ」→「新規追加」で新しいページを作ります。タイトルは「ブログ」、スラッグは「blog」にして「公開」を押します。内容は空で構いません。
左メニューの「設定」→「表示設定」をクリックします。
「ホームページの表示」を「固定ページ」にして、それぞれ設定します。
この設定をすると https://ドメイン名/blog/ で記事一覧が表示されます。
HPYourselfの共通項目設定から設定します
HPYourselfのナビにブログへのリンクを追加できます。「共通項目設定」タブ →「ナビゲーション」セクション →「カスタムリンク」から設定します。
WordPress管理画面から投稿します
管理画面の「投稿」→「新規追加」をクリックします。
記事のタイトルと本文を入力します。ブロックエディターでH2〜H4・箇条書き・画像なども追加できます。
右側パネルの「カテゴリー」から記事のカテゴリーを設定できます。一覧ページに色付きで表示されます。
右側パネルの「アイキャッチ画像」から記事のサムネイル画像を設定できます。一覧ページのカードに表示されます。
右上の「公開」ボタンを押して記事を公開します。