旧コメントフォームを使用したデザインにコメント拡張機能を導入する手順を説明します。

【目次】

【解説】

説明で使用しているデザインは「デフォルト2008（スカイ,2カラム）」です。
他のデザインを使用している場合は少し違う所があるかもしれません。

設定前はこんな感じです。
CommentForm
旧コメントフォーム（第5世代テンプレート以前 <$CommentForm$>）を使用したデザインにコメント拡張機能を導入するにはまず新コメントフォーム（第6世代テンプレート以降 <$CommentForm2$>）へ切り替える必要があります。
個別記事のカスタマイズで新コメントフォームにするとこうなります。
CommentForm2_change
完全にデザインが崩れてます。

新コメントフォームで使用するCSSからコメントフォームに関する設定を抜き出して追加してみるとこうなります。
CommentForm2_css
若干の違和感がありますが、だいぶ形になってきました。
でも「評価」と「情報を記憶」が動作しません。
これは専用のスクリプトが必要になります。

「情報を記憶」は不要になるので置いといて「評価」用のスクリプトを追加してみるとこうなります。
CommentForm2_css+script
プルダウンの位置がずれてますが、一応動作するようになりました。
コメント投稿も問題なくできます。
「評価」が不要であればCSSで非表示にして無効化するとスッキリします。
ここまでくればコメント拡張機能を導入できます。

コメント拡張機能を導入してみます。
CommentForm2_cax1.0.1
CSSを少し追加修正して見た目を改善しています。

これで動作しますが他の箇所でいくつかデザインに問題があったのでCSSで修正します。
ポップアップの表示位置はCSSで修正できないのでコメント拡張機能のJavaScriptで修正します。
CommentForm2_cax1.0.1_popup
ポップアップや吹き出し（赤丸の部分）の表示位置を修正します。
※吹き出しが [返信] 等に重ならないように注意してください。

以上で完了です。

コメントフォームの変更作業は最初だけでいいのでアップデートの際は通常の作業だけで構いません。
※JavaScriptの修正部分は毎回必要です。



【セットアップ】

解説の内容を前提にセットアップの説明をします。
セットアップはCSSの設定をまとめて行うので解説の手順通りではありません。

先ずは設定に使うファイルをダウンロードします。
template_6thgen_custom.zip

ダウンロードしたZIPファイルを解凍して template_6thgen_custom.css をアップロードします。
このCSSファイルには解説で説明したCSSの内容が全て入っています。
評価を非表示にする場合はこのCSSファイルを編集して下さい。
トラックバックにも影響するのでトラックバックを使用している場合は template_6thgen.css からトラックバックに関する設定も追加して下さい。（トラックバックに関しては未検証です）
  • [画像/ファイル] ＞ [ファイル管理]
  • [フォルダを作る] で「cax」を作りそのフォルダへ移動します。
  • [cax] フォルダに template_6thgen_custom.css をアップロードします。
現在の設定を保存します。
  • [ブログ設定] ＞ [PC] ＞ [保存/共有]
  • 空いてる番号の [保存] をクリックして現在の設定を保存します。
    ※深刻な不具合が発生した場合は [プレビュー/適用] で元に戻せます。
個別記事ページをカスタマイズします。
  • [ブログ設定] ＞ [PC] ＞ [カスタマイズ] ＞ [個別記事ページ]
  • </head> の上に template_6thgen_custom.css の設定を追加します。

    <link rel="stylesheet" href="../cax/template_6thgen_custom.css" type="text/css" />

  • </head> の上に評価用スクリプトの設定を追加します。
    ※評価を非表示にする場合は不要です。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://parts.blog.livedoor.jp/js/design.js"></script>

    ※jQueryがすでに設定にある場合 jquery.min.js は不要です。
  • <$CommentForm$> を <$CommentForm2$> に変更します。
これでコメントフォームが新しくなっています。
もしデザインが変になっている場合は template_6thgen_custom.css を修正して再アップロードして下さい。

問題が無ければ変更後の設定を保存します。
  • [ブログ設定] ＞ [PC] ＞ [保存/共有]
  • 空いてる番号の [保存] をクリックして現在の設定を保存します。
  • （任意） [編集] でデザイン名を「template_6thgen_custom.css 導入」にします。
以上でコメント拡張機能の導入準備ができました。

コメント拡張機能 ver 1.0.1 以降を導入してください。
  • [ブログ設定] ＞ [PC] ＞ [カスタマイズ] ＞ [個別記事ページ]
    の設定で head.txt の内容を設定する時

    <$HeadSectionCommon$>
    ・・・
    <link rel="stylesheet" href="../cax/template_6thgen_custom.css" type="text/css" />
    （head.txt の内容）
    <script src="https://parts.blog.livedoor.jp/js/design.js"></script>
    </head>

    となるようにして下さい。順番が重要です。
コメント拡張機能の導入後ポップアップの表示位置を修正します。
  • cax.js の "popup" の初期値を修正します。
    ※これはデザイン「デフォルト2008（スカイ,2カラム）」の場合の数値です。 
    var popup = {
	top_adjust: 42, // ポップアップの上下の調整値
	p_bottom  : -28, // 吹き出しの上下
};
  • cax.js を再アップロードしてポップアップの表示位置を確認します。
    ※ずれる場合はデザインに合わせて数値を変更して下さい。
ポップアップ以外にもデザインが変になっている場合は template_6thgen_custom.css を修正して再アップロードして下さい。

以上でセットアップ完了です。