# 35種類のブログレイアウト URL: https://canvaswp.com/ja/templates/blog/ Updated: 2026-11-05 テンプレート クラシックなサイドバー付きリストからマガジン風グリッドまで、アーカイブのレイアウトを用意し、単一投稿のレイアウトも合わせて提供します。 [ライブショーケースを開く](https://demos.canvaswp.com/classic/) [デモサイトを閲覧](https://canvaswp.com/ja/demos/) 更新日：2026年11月5日 - デフォルト - タイムライン - メイソンリー - グリッド - 小さいサムネイル - アイテム分割 - エディトリアル - 単一投稿 ## デフォルト 4 クラシックなアーカイブ形式です。投稿が縦に並び、それぞれタイトルの上に画像が配置されます。Blog LoopブロックでレイアウトをStandardに設定したものです。サイドバーがある場合、バージョン間の違いはサイドバーの位置だけです。 - [右サイドバー （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/) - [左サイドバー （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-left-sidebar/) - [両側サイドバー （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-both-sidebar/) - [全幅 （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-full-width/) ## タイムライン 3 投稿は、日付をマークした縦のラインに沿って配置されます。Blog Loopにはタイムラインのレイアウトが2種類あります。タイムライン（グリッド）は、全幅のページでラインの両側に投稿を配置します。タイムライン（リスト）は単一のカラムに配置し、サイドバー付きのバージョンで使われるものです。 - [右サイドバー （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-timeline-right-sidebar/) - [左サイドバー （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-timeline-left-sidebar/) - [全幅 （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-timeline/) ## メイソンリー 4 カードは本来の高さを保ったまま列に詰めて配置されるため、短い投稿の隣に長い投稿があっても空白ができません。これはBlog LoopのMasonryレイアウトで、2列から画面全幅までに対応します。 - [4カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-masonry/) - [3カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-masonry-3/) - [2カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-masonry-2/) - [100% 幅 （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-masonry-full/) ## グリッド 3 「Grid」レイアウトでは、カードが同じ大きさで整然と並びます。すべての投稿に目立つアイキャッチ画像がある場合に選んでください。画像によって各行が揃うためです。 - [4カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-grid/) - [3カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-grid-3/) - [2カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-grid-2/) ## スモールサムネイル 5 タイトルと抜粋の横に小さな画像を表示するので、1画面により多くの投稿が収まります。Blog Loopのスモールレイアウトでは、これらすべてが表示されます。バージョンによってサイドバーの位置が変わるか、サイドバーがなくなります。もう一つのバージョンでは、一覧のリズムが変わります。 - [左サイドバー （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-small-left-sidebar/) - [右サイドバー （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-small/) - [両側サイドバー （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-small-both-sidebar/) - [全幅 （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-small-full-width/) - [交互レイアウト （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-small-alt/) ## アイテム分割 2 長いアーカイブを分割する方法は2つあり、どちらも Blog Loop の Pagination パネルで選択します。番号付きのページ送り、または読者が末尾に達すると次のページを読み込む無限スクロールです。同じパネルでは、「古い記事」と「新しい記事」のページャー、「もっと見る」ボタン、分割読み込みも選べます。 - [ページネーション （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-grid/) - [無限スクロール （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-masonry/) ## エディトリアル 6 出版物向けのフロントページです。それぞれのページは複数のBlog Loopブロックを組み合わせ、その中にPost Image、Post Terms、Post Titleを配置しています。これにより、主要記事、カード形式の記事一覧、見出しのリストを1つのページにまとめられます。「Load More」は一度に数件ずつ投稿を表示し、表示できる投稿がなくなったときだけサーバーに追加の投稿を取得します。 - [マガジン （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-magazine/) - [ミックスフィード （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-mixed-feed/) - [オーバーレイカード （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-cards-overlay/) - [スプリットスクリーン （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-list-split/) - [さらに読み込む （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-load-more/) - [フィルター付き （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-with-filter/) ## 個別投稿 8 投稿のレイアウトは、編集中に「テンプレート」設定で選ぶテンプレートから決まります。サイドバー付きの標準投稿に加えて、このテーマには小さな画像版と分割メディア版、全幅の投稿、そして3種類のエディトリアルレイアウトが含まれます。3種類とは、読書進捗バー付きのもの、没入型ヒーローで始まるもの、ページタイトルの下に表示されるものです。 - [デフォルトレイアウト （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2021/02/10/blog-single/) - [左サイドバー （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2021/02/24/blog-single-left-sidebar/) - [全幅 （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2021/02/16/blog-single-full/) - [小さい画像 （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2021/03/08/blog-single-small/) - [分割レイアウト （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2021/04/05/blog-single-split-right-sidebar/) - [エディトリアル （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2026/03/12/the-slow-web/) - [Editorial Immersive （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2026/02/24/night-train-to-trieste/) - [タイトル付きエディトリアル （新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2026/02/11/jane-doe-on-building-type/) 各リンクは、お客様がインストールするのと同じテーマとブロックで作られた、ライブショーケースの実際のページを開きます。 ご自身のサイトで ## アーカイブはすべて、設定できる1つのブロックで構成されています このページのどれも、そのまま受け入れなければならない固定のデザインではありません。各アーカイブはレイアウトを持つブロックであり、各カードは並べ替えられる小さなブロックの積み重ねです。 ### レイアウトを選択 Blog Loop ブロックを挿入し、Standard、Grid、Small、Small Alt、3種類のリストスタイル、Masonry、2種類のタイムラインから選択できます。ページネーションのスタイルは別のパネルで個別に選択するため、どのレイアウトでも、ページ送り、スクロール、分割読み込みのいずれも利用できます。 ### カードを組み立てる ループ内には、各カードを構成する投稿ブロックがあります。標準レイアウトでは Post Media、Post Title、Post Meta、Post Excerpt です。見出しだけの一覧にする場合は Post Excerpt を削除し、カテゴリーラベルが必要な場合は Post Terms を追加してください。Canvasには投稿ブロックが全部で31個あります。 ### または、パターンを挿入 パターンインサーターには、すぐ編集できるブログセクションが含まれており、グリッド、リスト、メイソンリー、タイムラインなどがあります。パターンは通常のブロックとして追加されます。このページで説明しているものと同じブロックです。 ### ブログ全体をインポート 88件のデモウェブサイトのうち57件では、ブログ記事とそのカテゴリーがそのままの状態でインポートされ、BlogとModern Blogのデモは公開を前提に作られています。 - [デモカタログを見る](https://canvaswp.com/ja/demos/) 選び方 ## 投稿頻度に合うブログレイアウトの選び方 選ぶ前に、投稿の頻度を考えておきましょう。月に1回しか公開しない企業ではアーカイブが短くなりますが、サイドバー付きの標準レイアウトなら、内容が少なく薄く見えることなく、そのアーカイブを見せられます。 毎日記事を投稿するメディアには、情報の密度が必要です。小さなサムネイル、グリッド、編集ページ風のトップページは、いずれもより多くの記事を一度に表示でき、エディトリアルレイアウトのページでは、編集部と同じように注目記事に十分なスペースを割けます。無限スクロールは、サイトをぶらぶら閲覧する読者に適しています。ページ番号付きの表示は、以前見た記事を探しに戻ってくる読者に適しています。 メイソンリーは、写真の形がさまざまな投稿に向いています。タイムラインは、変更履歴、プロジェクト日誌、クラブのシーズンなど、日付順に読むものに向いています。その後、単一投稿テンプレートを合わせて選んでください。長い記事には読書進捗バーが、写真ストーリーには没入型ヒーローが適しています。 その他のテンプレート ## ライブラリのその他すべて - [ページテンプレート 13](https://canvaswp.com/ja/templates/page-templates/) - [ショートコードと要素 57](https://canvaswp.com/ja/templates/shortcodes/) - [ポートフォリオレイアウト 27](https://canvaswp.com/ja/templates/portfolio/) - [ショップレイアウト 9](https://canvaswp.com/ja/templates/shop/)