【選べる】トップページの新着表示 17パターン

このページに WordPress サイト開設スターターパックでお選びいただけるトップページの新着表示デザインを掲載しています。

今後も随時追加していく予定です。

細かいデザインの調整が可能ですので、ご要望がございましたらお気軽にご相談ください。

① カルーセルスタイル

前後の矢印ボタンを外側に配置できます。詳しくは以下のページをご覧ください。

カルーセルスタイル新着情報の前後の矢印ボタンを外側に配置できます

矢印ボタンの色と形もご希望に合わせて変更可能です。

WordPress サイト開設スターターパック

② リストスタイル 背景画像付き

背景画像をお好みのものに差し替えできます。
背景画像なしのシンプルなデザインにもできます。

③ リストスタイル 囲み枠付き

お知らせの枠のデザインパターンは こちらのページ に載っている中からお選びいただけます。

④ アイキャッチ画像付き パソコンで1列表示

⑤ アイキャッチ画像付き パソコンで2列表示

⑥ リストスタイル カテゴリー表示

⑦ アイキャッチ画像付き 背景色あり

⑧ アイキャッチ画像付き ワンポイントイラスト

イラストを右に配置することもできます

新着情報の前後のコンテンツとのバランスを考えて、以下のようにイラストの位置を右にしたい場合もあると思いますが、この配置も可能です。
この配置の場合でも、スマホではイラストが新着情報の前に表示されます。

⑨ アイキャッチ画像付き タイトル縦書き

⑧ との大きな違いは左側のタイトルです。タイトルを縦書きにして横幅が小さくなっている分、お知らせの表示件数を 6件 → 8件 に増やしてあります。
スマホではタイトルが新着情報の前に表示されます。

タイトルを右に配置することもできます

新着情報の前後のコンテンツとのバランスを考えて、以下のようにタイトルの位置を右にしたい場合もあると思いますが、この配置も可能です。
この配置の場合でも、スマホではタイトルが新着情報の前に表示されます。

⑩ コンパクトな角丸デザイン・アイキャッチ画像

コンパクトな角丸デザインで、次の記事のアイキャッチ画像を見せるスライダーです。

コンパクトな角丸・ピン角デザインの新着表示のカスタマイズ例

次のスライドのアイキャッチ画像を透過させて、「NEXT」の文字を追加するカスタマイズ手順を説明します。

WordPress サイト開設スターターパック

⑪ コンパクトなピン角デザイン・アイキャッチ画像

コンパクトなピン角デザインで、次の記事のアイキャッチ画像を見せるスライダーです。

⑫ 重なったカードが切り替わる

重なったカードが次々に切り替わるデザインです。
幅がコンパクトなので、以下の例のように他のコンテンツと並べてお使いいただくとよいです。

⑬ キューブ（立方体）が回転する

新着投稿をキューブ（立方体）の面に表示して、そのキューブが回転するデザインです。
目立つ動きをするので注意を惹くことができます。
幅がコンパクトなので、以下の例のように他のコンテンツと並べてお使いいただくとよいです。

⑭ コンパクト フェード

「新着情報の動きを控えめにしたい」というご要望に対応するために、⑬ キューブ（立方体）が回転する をフェード動作で小さめにしたパターンです。

⑮ 円形アイキャッチ画像

トップページとアーカイブページでデザインを統一したい、というご要望に応えるため、アーカイブページの ⑥ 円形アイキャッチ画像 と同じスタイルをトップページでも使えるようにしました。

⑯ 日付白抜き カード型

日付の部分が白抜きのカード型デザインです。

• 日付部分の背景は キーカラー です。（編集画面でかんたんに変更できます）
• カード全体がリンクエリアになっています。
• アイキャッチ画像にマウスホバー効果を設定してあります。
• スマホでは2カラムレイアウトで表示されます。
• カードを大きめに表示したい場合、投稿テンプレートの最小列幅を 240px から 280px に変更すれば、PC で3カラムのレイアウトになります。
• カテゴリーの背景は 半透過の黒 です。（編集画面でかんたんに変更できます）
• カテゴリーの表示が不要な場合はカテゴリーブロックを非表示に設定してください。

⑰ カード型（線なし）

スタンダードなカード型のデザインです。

• カテゴリー部分の背景は カスタムカラー 1 です。（編集画面でかんたんに変更できます）
• アイキャッチ画像と「続きを読む」リンクにマウスホバー効果を設定してあります。
• 「続きを読む」の表示が不要な場合は続きを読むブロックを非表示に設定してください。
• スマホでは2カラムレイアウトで表示されます。
• カードを大きめに表示したい場合、投稿テンプレートの最小列幅を 240px から 280px に変更すれば、PC で3カラムのレイアウトになります。