納骨壇・墓地の案内ページの作り方【お寺のHP作成講座14】- ワードプレスで作るお寺のホームページ作成講座

【お寺のHP作成講座14】へようこそ！

本記事では墓地や納骨壇の案内ページの作り方を解説します。

もうすでにいくつかページを作ってきたので、少し作業には慣れてきましたよね？

これまでの講座と同じような作業で作ることができます。

まずはサンプルとして出模寺の納骨壇ページをみてみましょう。

出模寺の納骨壇案内のページ

今回はこのようなページを作ってみます。

納骨壇・墓地の案内ページの作り方

納骨壇・墓地の案内ページも「固定ページ」で制作します。

「固定ページ」→「新規投稿」で新しいページを作りましょう。

納骨壇案内のページで使っているブロック

納骨壇案内ページは以下のようなブロックを使って作っています。

納骨壇案内のページで使っているブロック

見出し2
カラム(50/50)
見出し3
画像
テーブル(表)
ボックス(タイトル付き)
リスト(番号付きリスト)
ボタン

新しくでてきた「カラム」と「リスト(番号付きリスト)」を使ってみましょう。

カラムの作り方

カラムというのは編集範囲のエリアを分割してブロックを挿入する機能のことです。

出模寺の納骨壇案内のページをPCで見たときには「左半分に画像・右半分に文章」という形になっていますよね。

上の写真のような表現をしたい時にカラムを使います。

カラムはPCで表示されるときだけ有効になっていて、スマホ表示の場合は自動的に縦に並ぶようになっています。

カラムの作り方

見出し2で「納骨壇の案内」などを入れた下に「カラムブロック」をいれてみましょう。

新規ブロックを追加する「+」マークをクリックし、検索窓に「カラム」と入力しカラムブロックを選択します

挿入するとどのようにエリアを分割するかの選択肢が表示されます。

いろいろな分け方ができますが、今回はシンプルな「50/50」を選択しましょう。

「50/50」を選択すると2つのエリアが編集可能になります。

左側のカラムに写真を追加

まずは左側のカラムに画像を追加してみましょう。

左側の「+」を押すと新規ブロックを追加するパネルが表示されます。

「画像ブロック」を選んでください。

新しく画像をアップロードする場合は「アップロード」を選択。

すでにアップロードしている写真から選ぶ場合は「メディアライブラリ」を選択してください。

写真を選んで挿入します。

これで左側のブロックに画像を入れることができました。

右側のカラムに段落ブロックを追加

右側のカラムは説明文をいれたいので「段落ブロック」を追加してみましょう。

「+」マークを押して「段落ブロック」を追加します。

ここは左側の写真とあわせて必要な説明文を入力してください。

これでカラムの使い方もわかりましたね。

今回は画像とテキストだけですが、カラムにはいろいろなブロックを入れて使うことができるのでご自身の表現を探してみてください。

3カラムにした場合に他のブロックをいれたサンプル画像 — 3つに分けたり、中にいろいろなブロックが入れられます。

「納骨壇の詳細」欄の作成

続いてこの「納骨壇の詳細」部分を作ってみましょう。

まず見出し3で「納骨壇の詳細」という見出しを作ります。

その下に画像を追加します

表のコードをおいておくので、これを挿入したあと必要な項目に変更してご利用ください。

<figure class="wp-block-table"><table><tbody><tr><th>大きさ</th><td>大サイズ</td></tr><tr><th>サイズ</th><td>高さ35cm×横52cm×奥行き52cm</td></tr><tr><th>納骨数</th><td>○基</td></tr><tr><th>納骨懇志</th><td>00万円（管理費込）</td></tr></tbody></table></figure>

表の入れ方がわからなくなったら、【講座9】の年間行事の作り方ページを参照ください。