# 27種のポートフォリオレイアウト URL: https://canvaswp.com/ja/templates/portfolio/ Updated: 2026-11-05 テンプレート グリッドとメイソンリー。フィルターと読み込みのスタイル。さらに、これらを支える個別プロジェクトのレイアウトも含まれます。 [ライブショーケースを開く](https://demos.canvaswp.com/classic/) [デモサイトを閲覧](https://canvaswp.com/ja/demos/) 更新日：2026年11月5日 - グリッド - メイソンリー - スタイルの読み込み - シングルプロジェクト - レイアウト ## グリッド 5 ここのグリッドはすべて、「Layout」を「Portfolio」に設定した Canvas Posts ブロック 1 つで構成されています。「Columns」では 1 行に並べるプロジェクト数を決め、「Portfolio Gutter」では各プロジェクト間の間隔を設定できます（0 にすることもできます）。1 カラム版では「Alternating Split Cards」を有効にしているため、各プロジェクトは説明文の横に配置され、画像は 1 枚おきに左右が入れ替わります。 - [1カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-1/) - [2カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-2/) - [3カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-3/) - [5カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-5/) - [6カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-6/) ## メイソンリー 6 同じブロック、異なるグリッドエンジン。メイソンリーモードを選ぶと、カードはそれぞれの高さを保ったまま、行の区切りに縛られず列に詰めて配置されます。リズムを生むのはカードの形状です。すべての写真を同じ形にトリミングするか、各プロジェクトに独自の形を保たせるかを選べます。ミックス版では、タイトルもホバーオーバーレイ内に移動します。 - [ミックスカラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-mixed-masonry/) - [2カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-2-masonry/) - [3カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-3-masonry/) - [4カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-masonry/) - [5カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-5-masonry/) - [6カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-6-masonry/) ## 読み込むスタイル 5 これらは、訪問者があなたの作品にどうたどり着くかを決めます。「Pagination Style」では、選択肢の中にクライアント側のページネーションと無限スクロールがあります。「Open Projects In-Page」を使うと、ページを離れずにグリッドの上にプロジェクトを読み込めます。「Open Project In」では、ライトボックスのモーダルでプロジェクトを表示できます。「Filter Styles」は、Canvas Grid Filterブロック（カテゴリボタンの並び）のレイアウトを、各スタイルについて、Shuffleボタンの有無を含めて設定します。 - [jQuery Pagination （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-jpagination/) - [無限スクロール （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-infinity-scroll/) - [ページ内AJAX （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-ajax/) - [モーダル内のAJAX （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-ajax-in-modal/) - [スタイルフィルター （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-filter-styles/) ## シングルプロジェクト 5 プロジェクトページのレイアウトは、プロジェクトを編集中に「テンプレート」設定で選んだテンプレートから決まります。テンプレートは4種類のメディアに対応しています。大きな画像、ギャラリースライダー、サムネイルグリッド、動画です。各テンプレートには、左右どちらかまたは両側のサイドバー、全幅表示、フルブリードのヒーローの下に配置するレイアウトがあります。ここにリンクしているページは、その一部の例です。 - [Parallax Image （新しいタブで開きます）](https://demos.canvaswp.com/classic/projects/portfolio-single-fullwidth/) - [スライダーギャラリー （新しいタブで開きます）](https://demos.canvaswp.com/classic/projects/portfolio-single-gallery-full/) - [HTML5 動画 （新しいタブで開きます）](https://demos.canvaswp.com/classic/projects/portfolio-single-video-fullwidth-left-sidebar/) - [メイソンリー・サムネイル （新しいタブで開きます）](https://demos.canvaswp.com/classic/projects/portfolio-single-thumbs-right-sidebar/) - [動画の埋め込み （新しいタブで開きます）](https://demos.canvaswp.com/classic/projects/portfolio-single-video-both-sidebar/) ## レイアウト 6 グリッドをページ上のどこに配置するかを指定します。サイドバー版では、同じブロックをメインカラムに配置し、その横に最新の投稿やクイック問い合わせフォームなどのウィジェットを置くサイドバーを表示します。100%幅にすると、グリッドが余白なしで端から端まで広がります。Parallax Cardsでパララックスを有効にすると、各画像がページのスクロールに合わせて動く背景レイヤーに変わります。 - [デフォルト （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-nomargin/) - [右サイドバー （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-1-alt-right-sidebar/) - [左サイドバー （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-3-left-sidebar/) - [両側サイドバー （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-2-both-sidebar/) - [100% 幅 （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-fullwidth-notitle/) - [パララックス （新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-parallax/) 各リンクは、お客様がインストールするのと同じテーマとブロックで作られた、ライブショーケースの実際のページを開きます。 ご自身のサイトで ## これらのいずれも1つのブロックから構築できます ショーケースは見るためのものです。その背後にあるブロックとテンプレートは Canvas に同梱されているため、上記のレイアウトはすべてご自身のサイトで再現できます。 ### プロジェクトはレコードです 作品はポートフォリオのコンテンツタイプに、プロジェクトごとに1件のレコードとして保存されます。Grid Filter がボタンを生成するために読み取るカテゴリーも設定します。プロジェクトを追加すると、そのカテゴリーを表示しているサイト上のすべてのグリッドに自動的に反映されます。ページ自体を編集する必要はありません。 ### グリッドは設定で調整できます 「Canvas Posts」を挿入し、「Portfolio」レイアウトを選択してから、このページの名称を使って「Layout」と「Pagination」のパネルを上から順に設定します。プロジェクトページ自体には、Canvasがタイトルやメタリストから関連プロジェクトまで8個のポートフォリオブロックを追加します。 ### または完成済みのデモをインポート 全88件のデモサイトのうち、21件は、ポートフォリオのプロジェクトが配置された状態でインポートでき、エージェンシー、写真家、イラストレーター向けにレイアウトされています。そのいずれかから始めれば、レイアウトではなくプロジェクトを編集するだけで済みます。 - [ポートフォリオデモの比較](https://canvaswp.com/ja/wordpress-themes/portfolio/) ### すべてのプラン、すべてのレイアウト ポートフォリオ用のアドオンはありません。グリッド、フィルター、読み込みスタイル、単一プロジェクトのテンプレートは、すべてのプランにすべてのブロックが含まれているため、年間プランでも買い切りプランでも同様に利用できます。 - [プランを比較](https://canvaswp.com/ja/pricing/) 選び方 ## 作品に合うポートフォリオレイアウトの選び方 まず写真から始めましょう。レイアウトは写真を見せるためのものだからです。同じ向きで撮影された写真は、行がそろった均一グリッドにきれいに収まります。縦長と横長が混在する作品はメイソンリーが適しており、各カードが写真本来の形を保てます。 事例ページは、見せ方が異なります。各プロジェクトに説明文を一段落添えたい場合は、分割カードを1カラムに並べたグリッドが適しており、作品の横に連絡先を載せたいエージェンシーには、サイドバー版が向いています。 プロジェクト数も確認しておきましょう。作品が少ない場合は、フィルターを上に置けば1画面に収まります。数行を超える場合は、ページが素早く開くように読み込み方法を選びましょう。現在地を把握したい訪問者にはページネーション、閲覧を楽しみたい方には無限スクロールが向いています。単一のプロジェクトの場合は、まずメディアに合わせてテンプレートを選びます。撮影ならギャラリースライダー、映画なら動画です。サイドバーは最後に決めましょう。 その他のテンプレート ## ライブラリのその他すべて - [ページテンプレート 13](https://canvaswp.com/ja/templates/page-templates/) - [ショートコードと要素 57](https://canvaswp.com/ja/templates/shortcodes/) - [ブログレイアウト 35](https://canvaswp.com/ja/templates/blog/) - [ショップレイアウト 9](https://canvaswp.com/ja/templates/shop/)