コピー2019.07.04この記事はクラシックエディタでのやり方を説明していますが、Gutenbergでも「カスタムHTML」ブロックまたは「コードエディター」で利用可能です。「節約リッチ生活」のトップページは「固定トップページ」を利用して「おすすめ記事」を表示させていました。「同じようにやりたい」という声を複数頂いたので、カスタマイズ方法を記事にしました(全く同じではありません)。▽スマホ表示スマホ表示はおすすめ記事が2列に、カテゴリごとのおすすめ記事が1列になります。WordPressテーマ「SANGO」用ですが、「おすすめ記事」の部分だけなら他のテーマでも流用可能です。固定トップページを作成するおすすめ記事を入れるカテゴリごとのおすすめ記事を入れるスタイルシートで見た目を整える記事一覧用のページを作成する固定トップページと記事一覧ページを設定するさいごに固定トップページを作成する「ダッシュボード>固定ページ>新規追加」から新しい固定ページを作成する。タイトルは何でも良いですが、仮に「固定トップページ」としておきます。パーマリンクは指定しなくてOK。右側の「固定ページの属性」内のテンプレートを「トップページ用1カラム(タイトルなど出力なし)」に変更する。おすすめ記事を入れるまずはページ上部の「おすすめ記事」の部分を入れます。入力画面をテキストエディタに切り替えます。下記コードをコピー&ペーストする。aria-hidden="true"></i>最新記事をチェック[/btn][/center]【カッコ】で囲われている記事URL、アイキャッチ画像URL、記事タイトルは表示させたい記事のものに変更する。最後の【★記事一覧のURL★】は後ほど設定するのでそのままでOK。アイキャッチ画像は、トップページ用に別のものを用意するのもアリです。カテゴリごとのおすすめ記事を入れる続いて、ページ下部の「カテゴリごとのおすすめ記事」を入れます。カテゴリごとのおすすめ記事は、ほぼビジュアルエディタから挿入できるものとSANGOのショートコードで作成しています。一応、コピペ用のコードを用意しました。テキストエディタを開いて、先程コピペしたコードの下にコピー&ペーストしてください。aria-hidden="true"></i>このカテゴリをもっと読む[/btn][/center][/box][/cell][/yoko2]【カッコ】で囲われた部分を任意のものに置き換えてください。ビジュアルエディタからでも編集できます。上記のコードは、カテゴリ2つ分のコードになります。表示させたい場合は、同じコードを下に追加していくことで、4つ・6つと増やしていくことができます。記事一覧を囲っているボックスは好きなものに変更してもOK。「class=”box11′′」の数字を好きなものに変更するだけでデザインが変えられます。ボックス・枠を挿入する方法と種類一覧|SANGOカスタマイズガイドビジュアルエディタで見るとこんな感じです。画像は入れても入れなくてもどちらでも構いませんが、入れるなら横長がおすすめです。カテゴリ名の前にアイコンを入れるカテゴリ名の前にアイコンを表示させたい場合は、アイコンフォントを使います。アイコンフォントを入れる場合は、テキストエディタで開いて【カテゴリ名】の前に専用のコードを挿入します。アイコンフォントは、FontAwesomeのサイトから好きなアイコンを探して、クリックします。アイコンの下に表示されているコードをコピペすれば、好きなアイコンを表示させることが出来ます。こんな感じで挿入します。収入を増やす</span></h2>スタイルシートで見た目を整える今作った固定ページの表示を確認しても、見た目がぐちゃぐちゃですよね?見本と同じような見た目にするために、CSSで整えます。子テーマを利用していない場合は、子テーマをインストールすることを推奨します。WordPressで子テーマを活用して安全にカスタマイズを行う方法|SANGOカスタマイズガイド「外観>テーマの編集」からstyle.cssを開き、下記コードをコピー&ペーストする。}}「ファイルを更新」ボタンを押したあとに、プレビュー画面で「Ctrl+F5(Macはcommand(⌘)+⇧+R)」を押すと、見本と同じ見た目になるはずです。記事一覧用のページを作成する先程作った固定ページとは別に、記事一覧を表示させるための固定ページを作成します。「ダッシュボード>固定ページ>新規追加」から新しい固定ページを作成する。タイトルは「記事一覧」、パーマリンクは何でも良いですが仮に「blog」とします。本文は何も打ち込まず、そのまま「公開」します。先程作成した「固定トップページ」を開き、【★記事一覧のURL★】を今作った記事一覧のURL(あなたのサイトURL/blog/)に変更、公開します。▽こんな形になります。最新記事をチェック[/btn][/center]固定トップページと記事一覧ページを設定する先ほど作成したページをトップページに表示させるように設定します。ダッシュボードの「設定>表示設定」を開きます。「ホームページの表示」の設定を「固定ページ」に変更します。「投稿ページ」は「記事一覧」に変更し、「変更を保存」します。以上で設定は完了です!きちんと設定できたかどうか、トップページにアクセスして確認してみましょう。さいごになるべくわかりやすいように書いたつもりですが、わからない点などありましたらお気軽にお問い合わせください。(お問い合わせの際は、何がどうわからないのか具体的な質問をお願いします。