10分で完了! サイトに新規にブログを組み込む基本の手順

BiNDupのブログ機能「BiND Press」がアップデートされました。カテゴリやタグを使って記事をリスト表示できるなど、さまざまな機能や設定が追加され、カスタマイズ性が大幅に向上しています。今回は、まず基本操作をマスターしてください。

今回の目標

最初に、BiND Press 2を利用するための条件を確認しておきます。

BiNDupのバージョン11.0.3以降であれば、自動で新しいブログ機能「BiND Press2」に切り替わるようになっておりますので、まだそれより前のバージョンをお使いの方はアップデートを適用しましょう。

最新のBiNDupのテンプレートには最初からBiND Pressのブログが組み込まれているものが多くありますが、今回は最初からあるものでなく、新規にブログを組み込む方法を覚えていただきます。

新規にブログを組み込む

まずは、ブログを新規作成する手順から説明します。

サイトエディタでブログコーナーを追加する

ブログを新しく構築するには、まずサイトデータを開いたサイトエディタの左上にあるアイコンから「ブログコーナーを追加」をクリックします。

新しいブログの名前を設定

ここでは、新規にブログを作成するので「＋」ボタンをクリックします。「ブログの名前：」を入力して「作成」ボタンを押します。ここで入力したブログ名はコーナー名になり、この後のさまざまな設定で選択する際にも表示されます。作成したブログ名の項目が表示されたらクリックして「選択」ボタンを押します。

組み込まれたブログを確認

サイトエディタ左側のサイトマップに新しくコーナーが作られます。この中には、「index」「template.detail」「template.list」という３つのページが用意されます。

これらのページについては後で説明をしますが、ブログの編集に入る前に、サイトのトップページからこのブログのへのリンクを組み込んでおきましょう。リンクはどこからでもいいのですが、グローバルメニューの項目に設定しておいてもいいでしょう。リンク先は、作成したブログコーナーの「index」ページを選択します。

ブログ記事を作成する手順

次に、ブログに記事を投稿していきます。

記事エディタを開く

サイトエディタの左側にあるサイトマップで設定したコーナー名を選択すると鉛筆アイコンが表示されるので、それをクリック。すると、「BiND Press2：記事エディタ」画面が表示されます。ここで記事を投稿したり、管理したりします。新規にブログを作成した場合は、なにも項目がないはずです。「新規記事」ボタンをクリックしましょう。

投稿内容を入力する

投稿記事の編集画面が表示されたら、ファイル名や記事タイトル、リード、本文など各項目を入力します。この画面で、本記事の冒頭でも触れたカテゴリーやタグの設定も行います。もちろん後からも編集できますが、カテゴリーやタグはリストを作る際に必要なので積極的に活用しましょう。

この記事編集画面では、ほかにもSNS投稿の埋め込みができるなど、さまざまな機能に対応しています。新しい機能については、こちらの記事もチェックしてください。

新BiND Press、SNS連携やタグなどコンテンツを魅せる新機能が続々！

記事エディタで入力し終わったら「保存」を押します。書きかけの場合は、「下書きとして保存」をクリックします。

プレビューで確認する

記事を保存して記事一覧に戻ったら画面上部の「プレビュー」ボタンを押してみましょう。サイトの再構築が実行されたあと、ブラウザーでのプレビューでトップページが表示されます。

最初に設定した「index」ページのリンクからブログを開いて確認しましょう。

投稿ページとインデックスページを編集する

これでブログの構築自体は完了です。ただし、ブログを新規作成した初期状態だと、ブログのトップページと記事ページのレイアウトやメニューなどが、ダミーテキストが入ったままです。作成したブログコーナー内にある、「index」がブログのトップページ、「template.detail」が記事ページの雛形レイアウトとなりますので、これらを編集して整えましょう。

これらのページを変更するには、通常のBiNDの編集作業とほぼ同様の操作でできます。ただしブログの要素を配置させる設定に関しては、BiND Press専用のコード「BPタグ」を使用する必要があります。専用コードは、記述を間違えると表示が消えてしまったりすることがあるので注意が必要です。そこで、ブログのページを初めてカスタマイズをするという人におすすめなのは、ブロックテンプレートを使う方法です。以下の手順で試してみてください。

ブロックテンプレートの「ブロク」カテゴリーを確認

カスタマイズしたいページにブロックを追加してブロックエディタで開きます。ブロックテンプレートの選択画面が開いたら、左側のカテゴリー一覧から「ブログ」をクリックすると、ブロックテンプレートを表示されます。このカテゴリーのブロックは、大きく分けると「記事インデックス」「ブログ記事」「ブログ記事リスト」の3種類です。

「記事インデックス」は、投稿を新着順に表示するブロック。「ブログ記事」は、記事の要素や各要素のレイアウトやスタイルが設定されたブロック。「ブログ記事リスト」は、カテゴリーやタグごとに記事をリスト表示するためのブロックです。今回は、この内、「記事インデックス」と「ブログ記事」を使ってみます。「ブログ記事リスト」のブロックについては改めて別の記事で説明します。

新着記事の一覧をカスタマイズする

「index」ページにある記事インデックス（記事の見出しや画像が並ぶブロック）を変更して新着記事の見せ方を変更してみましょう。このブロックをブロックエディタで開いて、今回は、ブロックテンプレートから「記事インデックス:ニュース式１」を選びます。

ブロックが組み込まれたら、「インデックス開始」パーツの「ブログを設定」ボタンをクリックします。「ブログインデックス設定」画面の「＋」ボタンをクリックして、設定したブログの名前を選択したら「OK」ボタンをクリック。次にブロックエディタで適用します。

画像付きだったインデックスが、日付と文字だけのシンプルなものに変更されました。

記事ページのレイアウトを変更する

次は「template.detail」ページで、各記事のレイアウトを変更してみましょう。

「template.detail」ページの記事ブロックをブロックエディタで開きます。今回はブロックテンプレートから「ブログ記事５」に置き換えてみましょう。

サイトエディタで「サイト全体の再構築」を実行してから「プレビュー」をクリック。全ページのプレビューを表示して確認しましょう。レイアウトの変更が反映されているはずです。

ブロックテンプレートによる変更よりさらに細かくレイアウトをカスタマイズすることもできます。オリジナルのレイアウトにしたい場合は以下のページを参考にしましょう。

新BiND Pressの定形デザインをカスタマイズする2つの方法

以上で、サイトにブログを組み込む基本的な手順の完了です。実際にやってみたところ、この手順さえ覚えていれば10分たらずで簡単にブログを構築できます。なお１つのサイトの中に複数のブログを組み込むことも可能です。

上でも触れましたが、リストのページ（template.listを使います）を編集する方法はまた改めて別記事で紹介します。下の記事で、ブログのカテゴリーやタグの仕組みなどを解説していますので、まずはそちらで理解を深めておいていただければと思います。

新BiND Press：カテゴリの記事一覧ページの仕組みと使い方

BiNDupでブログ機能を使ってみよう