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


【ボタンを移動する】

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

コメントフォーム周りのボタンをカスタマイズする #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.0/readme.html を開くボタンを作る場合
  • #cax2 のデータ属性を追加します。

    data-cax-user-url1="http://cax.blog.jp/cax-2.0/readme.html"

    この時URLはhttpからフルで指定して下さい。
    「data-cax-user-」の後ろは任意の文字列に変更できます。
  • 次に下記のボタンをコメントフォーム周りの任意の場所に追加します。

    <button type="button" class="cax-frame" data-cax-frame="caxUserUrl1" title="※readmeを開きます">readme</button>

    「caxUserUrl1」が「data-cax-user-url1」の事を指してます。(キャメルケースという名前の変換です)
これを参考にしてボタンを追加して下さい。


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

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