ソネブロにZenbackプラグインを導入(カスタムペイン編)

前回は Zenbackプラグインを記事の真下に設置する方法 を書いたんですが、記事ペインが複雑なので今回は簡単なカスタムペインを利用してブログパーツ化する方法をメモっておきます。

空のカスタムペインの設置

管理画面の"デザイン>レイアウト"からカスタムペインを設置したい場所にドラッグします。カスタムペインは複数設置できます("カスタムペイン"という名前は変更しておきましょう)。

カスタムペインの編集

移動したら"カスタムペイン"をクリックして編集画面に入ります。まず画面右上の"コンテンツHTML編集"をクリックします。

自由入力欄コードの削除

HTMLに関わらない人だとこれだけで拒絶反応が出るかもしれませんが、Zenbackプラグインは入れる場所がわかっていれば簡単に導入出来ます。まず選択範囲の部分(<% content.free.text | nl2br_filter %>)を削除してしまいます。ここは前の画面にある"自由入力欄"のデータが入る場所ですが今回は使わないので削除します。

Zenbackプラグインコードの貼り付け

消した場所にZenbackプラグインコードを貼り付けます。終わったら必ず画面下の"保存"を押します。保存したら画面右上の"カスタムペインの設定に戻る"で画面を戻します。

CSS用セレクタの追加(省略可)

Zenbackプラグインが入ったカスタムペインをCSSでカスタマイズしたい場合は必要に応じてセレクタを追加しておきます。

カスタムペインのタイトルが不要な場合は"<h3>〜</h3>"を削除することで非表示にすることが出来ます。

Zenbackプラグインパーツの保存

カスタムペインは未入力だと保存が出来ないので適当に何か書いておく必要があります。下の画面のように"<!-- Zenback -->"とでも書いておけばOKです(埋め込みコードを先程消したので実際には表示されません)。タイトルは任意で変更出来ます。終わったら必ず画面下の"設定を保存"を押します。

Zenbackのカスタムペイン化はこれでおしまいです。設置場所を移動したい場合はレイアウト画面でZenbackプラグインのパーツをドラッグすれば移動出来ます。サイドバーに設置すると幅が足りなくて窮屈な感じになってしまうので記事ペイン下などがおすすめです。

Zenback公式アカウントによるおすすめの設置場所
※ツイートリンクのため時間が経つと表示されなくなる可能性があります。

2012年03月05日:Zenbackブログでソネブロの記事ペインへの導入方法のページを登録していただきました

ブログサービスごとにZenback設置方法をまとめました - Zenbackブログ