コメント拡張機能

ライブドアブログのコメント欄を拡張するツールを公開しています。 cax(Comment Area eXtensions)

カテゴリ: TIPS

スマホ表示で [PCモード] ボタンをタップしたい場合、ページの一番下までスクロールしないといけません。
記事の長さにもよりますが結構面倒です。
これに対処する方法を解説します。

まず初めに思いつくのは下記のようなページ内リンクをページの上部に置く事です。

<a href="#blog-change-pc">[PCモード] ボタンへ移動</a>

しかしスマホのブログ設定ではページ内リンクを禁止していて簡単に置く事ができません。

そこでトップページの場合と個別記事の場合の2パターンについて上のリンクを置く方法を解説します。



【トップページ】

トップページの場合はURLが固定ですので、「{トップページのURL}#blog-change-pc」というリンクを置きます。
  • [ブログ設定] > [スマートフォン] > [レイアウト]
  • [リンク集] をブログタイトルの下に追加します。
  • [設定] を開き下記のように設定します。
    ラベル「表示する」のチェックを外す。
    タイトルPCモードボタンへ移動
    URL{トップページのURL}#blog-change-pc


【個別記事】

個別記事はURLが固定ではありませんので工夫が必要です。
ページ内リンクを置ける場所は記事だけなので下記を記事の一番上に置きます。
※ [HTMLタグ編集] にしてから記入して下さい。記入後は通常に戻して記事作成を行って下さい。

<p class="cax-pc-mode-link"><a href="#blog-change-pc">[PCモード] ボタンへ移動</a></p>

このままではPC表示、PCモードでも表示されるのでCSSで非表示にします。

『 [ブログ設定] > [PC] > [カスタマイズ] > [CSS] 』を開き一番下に下記の設定を追加します。

/* PCモードへのリンクを非表示 */
.cax-pc-mode-link { display: none; }


全ての記事にこの設定を入れるのは面倒ですが現状この方法しか無さそうです。
他に良い方法がありましたらコメント下さい。

ここではコメントフォーム周りのボタンをカスタマイズする方法を解説します。
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

ここではコメントフォーム周りのボタンをカスタマイズする方法を解説します。
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

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

【目次】


【解説】

説明で使用しているデザインは「デフォルト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 を修正して再アップロードして下さい。

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

↑このページのトップヘ