ここではコメントフォーム周りのボタンをカスタマイズする方法を解説します。
CAX ver 2.1 対応です。
  • ボタンを移動する。
  • 特定のページを別ウィンドウで開くボタンを追加する。
  • 特定のページをコメントフォームの下に表示するボタンを追加する。
以上の内容について解説します。


【ボタンを移動する】

cax2.txt で [投稿する] 以外のボタンは自由に配置を変更できます。
例えば、[評価アイコン] と 絵文字アイコン入力ボタンを cax.css で非表示にして [リセット] を [評価アイコン] があった場所に移動した場合下のようになります。

コメントフォーム周りのボタンをカスタマイズする ver 2.1 対応版 #1

移動は単純に<button>~</button>を移動させればいいだけです。
但し、[速報] のように連結したボタンはその上位の<span class="cax-button-join">~</span>ごと移動する必要があります。


【特定のページを別ウィンドウで開くボタンを追加する】

例えば、当ブログのトップページを開くボタンは下記のようになります。

<a href="http://cax.blog.jp/" title="※コメント拡張機能の開発者ブログを開きます(別ウィンドウ)" target="_blank"><button type="button">開発者ブログ</button></a>

以上を参考にしてボタンを追加して下さい。


【特定のページをコメントフォームの下に表示するボタンを追加する】

http://cax.blog.jp/cax-2.1/readme.html を開くボタンは下記のようになります。

<button data-cax-frame="http://cax.blog.jp/cax-2.1/readme.html" title="※readmeを開きます" type="button">readme</button>

同ブログ内の場合は下記のように相対パスでも構いません。

<button data-cax-frame="../cax-2.1/readme.html" title="※readmeを開きます" type="button">readme</button>

共通パッケージ用のフォルダ(cax)にあるファイル(readme.html)は下記のようにも指定できます。

<button data-cax-frame="@readme.html" title="※readmeを開きます" type="button">readme</button>

※この指定方法の場合、クエリに「?_={タイムスタンプ}」が付きます。

以上を参考にしてボタンを追加して下さい。


上の3つを全て使用するとこんな感じになります。

コメントフォーム周りのボタンをカスタマイズする ver 2.1 対応版 #2