WordPressとBiND Pressの違いとは?カスタマイズ方法と共に解説。

少しずつバージョンアップをしているホームページ作成サービス「BiNDup」のブログ機能「BiND Press」ですが、改めてWordPressなどの他のブログサービスとの違いを見ながらカスタマイズ方法について解説したいと思います。

BiND Pressの特徴

簡単にBiND Pressのメリットを上げると以下の様な点があるかと思います。

  1. サーバーやシステムなど新しくブログ環境を用意する必要がない
  2. 記事一覧やページをカスタマイズできる

もう少し詳しく見ていきましょう。

1:新しく環境を用意する必要がない

基本的にWordPressなどのブログシステムは、普通のサイトとは違い記事を溜めたり編集したりするためのシステムとサーバー環境が必要になります。
本来はそれらを各自で用意するのが理想的ですが、高い技術とコストが必要になるため、一般的には無料のブログサービスを併用して運用することが多いかと思います。
ただその場合、導入が簡単・コストが安いメリットはありつつも自分たちでシステム・環境を管理できないため、運用面での制約が多い場合があります。
例えば、外部サービスを利用しなければならない場合、以下の様に運用面での弊害が出る可能性があります。

  • メインページと記事ページで別URLになる
  • プログラミングの知識が必要
  • カスタマイズがサービスの仕様に依存する
ブログ導入イメージ

ブログ導入のイメージ。赤点線は新しく用意するもの

しかしBiND PressはBiNDの中のいち機能なので、ブログ用に環境を新しく用意する必要もなく、またページ内の好きな場所で、ブログと連携することができます。

2:記事一覧やページをカスタマイズできる

1の特徴と関連しますが、自由にカスタマイズするためには他サービスに頼らない(≒技術・コストの増加)事が一般的的です。
自由にカスタマイズでき、かつ無料であるWordPressもありますが、こちらはカスタマイズにPHPの技術が必須になります。
その点、BiND Pressの方はブログ用に、記事ページ、アーカイブページやページに貼り付ける記事一覧パーツなどが編集できるテンプレートとして用意されているので、レイアウトの変更が簡単になっています。
またBiNDでお馴染みの段落スタイルも利用できるので、デザインの変更もいつも通り行えます。

WordPressとの違い

BiND Press(左)とWordPress(右)のカスタマイズ時の編集の違い

カスタマイズ方法

カスタマイズ方法は、以前ご紹介したものから大きく変わっていません。

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

基本的には、それぞれ対応したコードを組み合わせてレイアウトを作っていきます。

[%title%] タイトルを表示
[%article%] 記事内容を表示
[%article_short_999%] 文字数を指定した記事内容。「999」で指定された文字数分表示
[%lead%] リードを表示
[%list_start%][%list_end%] 記事画像の一覧
[%link%][%article_link%] 記事ページへのリンク
[%cmt%] 記事画像のコメント
[%article_date%] 記事の日付。スラッシュ区切り(2018/10/26 17:30)
[%article_date_notime_dot%] 記事の日付。時刻なし。ドット区切り(2018.10.26)
[%article_date_notime_wa%] 記事の日付。時刻なし。和暦。(2018年10月26日)
[%new:AAA%] Newマークを表示。「AAA」の部分が表示される。(例:[%new:新着%]→新着)
[%category%] カテゴリー一覧を表示
[%tags%] タグ一覧を表示
[%imagesize:M%] 使用画像サイズ指定。画像パーツの直前に記述。Mには「thumbnail」「medium」「large」のいずれかを指定可能
[%article_list_start%][%article_list_end%] 記事一覧を表示。template.listページ専用。

必要に応じて表示したいコードを追加したり、入れ替える事でオリジナルのブログにカスタマイズできます。
ただ、編集の際は「エディタモード」にしてから行ってください。

編集画面

要素を入れ替えて、記事ページのレイアウトを変更

記事ページの場合(template.detail)

記事ページを編集したい場合は、「template.detail」を編集します。
ブログコーナーを作成すると自動で用意されます。

記事ページの編集画面

記事ページ(template.detail)の編集画面

アーカイブページの場合(template.list)

タグやカテゴリーなどの記事一覧ページをカスタマイズする時は、「template.list」を編集します。
template.detailと同様ブログコーナーに自動で用意されています。

template.detailとの大きな違いは[%article_list_start%]〜[%article_list_end%]というコードに囲まれている点です。
記事の数分繰り返す処理になりますので、ここは外さないようにしましょう。

アーカイブページ(template.list)の編集画面

カテゴリーのアーカイブページ例

記事一覧の場合

トップページで表示するニュース一覧などは、「記事インデックス」パーツを利用します。
template.listと同様、「インデックス開始」〜「インデックス終了」というパーツ囲むことで、囲まれた部分が表示する記事の文だけ繰り返されるようになります。

記事インデックスの編集画面

記事インデックスの編集画面

記事インデックスの利用例

記事インデックスの利用例

こちらはブロックテンプレートも用意されているので、イメージに近いレイアウトからカスタマイズするとより簡単かもしれません。

記事インデックスのブロックテンプレート

記事インデックスのブロックテンプレート

新機能:アーカイブと投稿者情報の追加が可能に

また次のアップデートで以下の2機能が追加されます。

記事アーカイブ

今までタグやカテゴリーのアーカイブは自動で用意されていましたが、今回新しく投稿日のアーカイブが利用できるようになります。
ブロックテンプレートから設置してください。

新機能のブロックテンプレート

新機能のブロックテンプレート

アーカイブ:年月リスト

文字通り、投稿された日付のアーカイブを用意してくれます。

アーカイブしたいブログを選択

アーカイブしたいブログを選択

アーカイブ:カレンダー

同じく投稿された日付のアーカイブを作成しますが、こちらはカレンダータイプです。
投稿された日付に記事へのリンクが設定されます。

カレンダーのアーカイブを設置

カレンダーのアーカイブを設置

投稿者情報

記事毎に投稿者が設定できるようになり、記事中にその情報が出せるようになりました。
ただこちらは「template.detail」のみで利用になります。(他のエリアでは使用できません)

また事前に「https://ja.gravatar.com/」でアカウントを作成しておく必要があります。

アカウント作成方法
Gravatarにアクセス

Gravatarにアクセス。「ログイン」をクリックし、「Create an Account.」から新規作成画面へ。

アカウント情報を設定

アカウント情報を設定。赤枠の情報が反映される。

投稿者情報を設定
記事の編集画面で投稿者を選択

記事の編集画面で投稿者を選択

投稿者情報の表示例

投稿者情報の表示例

よりブログらしくBiND Pressが進化していますので、ぜひ利用してみてください。

WordPressを使っているけどカスタマイズが難しいなど運用で困っている方は、WordPressの記事をBiND Pressへインポートできる機能もあります。移行を検討したい方は以下の記事もチェックしてください。

WordPressの記事をBiND Pressに簡単に移行する方法

BiND Pressの機能を詳しく見る

【業種別】オウンドメディアの作るべきコンテンツとKPIの設け方

オウンドメディアは何を指標に運用すべき?個人事業主、toB向け、EC、採用など業種ごとに目標の立て方と作るコツをまとめました。

新規登録をして資料をダウンロード
  • POINT

  • ブログを導入する際は、自らの技術とコストで運用スタイルを検討
  • BiND Pressなら何かを準備する必要がなくブログの導入が簡単
  • 月日アーカイブと投稿者情報の追加機能で、よりブログらしくアップグレード

RECOMMEND ARTICLE