ブログのトップページに、見せたい記事を優先して表示する「おススメ記事一覧」があるといいなぁと思い作ってみたものがこれなんですが、
もっとこうしたいなぁと課題点が何個か。
- 3記事ぐらい用意したい。
- 投稿記事の設定によってピックアップ記事を指定したい。（現在は固定ページにURL直書き）
- デザインが他と違って浮いているようなので変更したい。
今回の記事でのゴールはこちらです！
Goal → 以下のようなピックアップ記事エリアを作成する。
- 記事は3つ
- 記事の「カテゴリ」設定でピックアップ記事を指定する。
- デザインを他の要素と雰囲気が合ったものにする。
１．カテゴリに「ピックアップ」を追加する。
記事を作成する前の準備です。メニューから「カテゴリ」を選択し、カテゴリ設定画面を開きます。
ここに、「ピックアップ」というカテゴリを新たに追加します。
２．記事を作成する（３つほど）
ピックアップ記事に指定したい記事を三つ作成します。これらの記事には、アイキャッチ画像も設定しておきます。このアイキャッチ画像が、ピックアップ記事のサムネイル画像になります。（記事タイトルの上に表示されている画像。）
また、これらの記事はカテゴリ「ピックアップ」に設定します。
３．ホーム画面の固定ページに、「最新の投稿」ブロックを追加する。
ホーム画面のヘッダー画像の下に、「ピックアップ記事」欄を追加することにしました。この位置に「最新の記事」ブロックを追加します。
４．「最新の投稿」ブロックの設定を変更する
「最新の投稿」ブロックを選択した状態で、右のサイドバーの「ブロック」タブを選択してください。
・スタイル：枠線
見た目はデフォルトで3種類ありますが、個人的にいいなと思ったブロック型を採用。3種類ありますが、アイキャッチ画像がある場合は「枠線」スタイルが一番見やすい気がします。
・アイキャッチ画像：下図の通り
「アイキャッチ画像を表示」にすれば、各記事に設定したアイキャッチ画像が表示されます。
・並べ替えと絞り込み：下図の通り
ここで、カテゴリーに「ピックアップ」を指定します。これで、この最新の投稿欄にはカテゴリー「ピックアップ」の記事だけが表示されるようになります。
そのほかの設定は、お好みで入れてみてください！
５．フォントを変更する。
ここは好みなのですが、私の場合は前回の記事でヘッダー部分のフォントを変更しました。が、なぜか「最新の記事」ブロックのフォントは変わってない模様。。。
body, input, textarea, button, .button, .faux-button, .wp-block-button__link, .wp-block-file__button, .has-drop-cap:not(:focus)::first-letter, .has-drop-cap:not(:focus)::first-letter, .entry-content .wp-block-archives, .entry-content .wp-block-categories, .entry-content .wp-block-cover-image, .entry-content .wp-block-latest-comments, .entry-content .wp-block-latest-posts, .entry-content .wp-block-pullquote, .entry-content .wp-block-quote.is-large, .entry-content .wp-block-quote.is-style-large, .entry-content .wp-block-archives *, .entry-content .wp-block-categories *, .entry-content .wp-block-latest-posts *, .entry-content .wp-block-latest-comments *, .entry-content p, .entry-content ol, .entry-content ul, .entry-content dl, .entry-content dt, .entry-content cite, .entry-content figcaption, .entry-content .wp-caption-text, .comment-content p, .comment-content ol, .comment-content ul, .comment-content dl, .comment-content dt, .comment-content cite, .comment-content figcaption, .comment-content .wp-caption-text, .widget_text p, .widget_text ol, .widget_text ul, .widget_text dl, .widget_text dt, .widget-content .rssSummary, .widget-content cite, .widget-content figcaption, .widget-content .wp-caption-text {
font-family: 'Montserrat', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif !important;
}
#1で変更したフォントに合わせてソースを追加してみました。（正直かなり強引なやり方なので、何かいい方法をご存じの方は教えてください。。。（笑））
まとめ
今回はおススメ記事一覧を作成してみました！フォント以外はデフォルト機能で設定して作成できました！作っていて思ったのですが、その記事一覧のデザインをもう少しよくできないかなと感じましたので、次回はそれについて書いていこうと思います！
