【QooQ】トップ画面にコメント件数を表示する方法【カスタマイズ】

QooQカスタマイズ
この記事は約4分で読めます。

エディタ作成よりもブログのカスタマイズ方法を調べていました。知りたかったのは記事のコメント件数をトップ画面に表示する方法です。私のブログは多分コメントが書き込まれることは無いと思うんですけど(コメントして頂けました。ありがとうございます)、とりあえず表示はさせたいよね!QooQ というか Bloggerはとにかく情報が少ないですね…。ようやくやり方がわかりましたので手順を紹介します。

変更する前のお願い!

この記事はブログを Blogger でブログを運営していた時のものです。QooQ のバージョンは 1.28 を利用していました。現在の Blogger とは仕様が異なる可能性がございますのでカスタマイズされる際はご注意ください。また、QooQのテンプレートを直接変更しますので、実施前に必ずテンプレートのバックアップ作成をお願いいたします。

トップ画面にコメント件数を表示する手順

1.コメントのアイコンを表示するため Blogger のテンプレート編集画面にて <head>~ </head>の間に以下の HTML コードを追加して下さい。

<head>
:
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"></link>
:
</head>

何を追加しているのか?

Font Awesome(Webアイコンフォント)を表示できるようにしています。Webアイコンフォントとはフォントとして使用できるアイコンのことです。

2.次に以下の HTML コードを検索して下さい。

<p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p>

3.検索したコードを以下のコードで書き換えます。赤字が修正内容です。

<p class='list-item-date'>
    <!-- 公開日のアイコン -->
    <i class="far fa-edit fa-fw"/>
    <!-- 公開日 -->
    <script type='text/javascript'>document.write(jsdate)</script>
    <!-- コメント件数(コメント投稿を許可している場合のみ表示) -->
    <b:if cond='data:post.allowComments'>
        <b:if cond='data:post.numComments == 0'>
            <!-- 公開日のアイコン -->
            <i class="far fa-comment fa-fw"/>
            <data:post.numComments/>
        </b:if>
        <b:if cond='data:post.numComments > 0'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <i class="far fa-comment fa-fw"/>
                <data:post.numComments/>
            </a>
        </b:if>
    </b:if>
</p>

※記事の公開日のアイコンが不要な場合は、<i class=”far fa-edit fa-fw”/>は消してください。

4.テンプレートを保存します。

変更後のイメージ

コメントのアイコンと件数が表示されていれば変更完了です!コメント件数をクリックするとコメント欄まで遷移します。

おわりに

コメント件数が0件の場合はクリックできないようにしています。また、コメント投稿を許可している場合のみコメント件数を表示するようにしました。参考になればと思います。

コメント

  1. ふじやん より:

    こんばんは。
    こちらの記事を参考に当方のブログでカスタマイズしてみたところ、問題なく表示させることが出来ました。ちなみにウチではコメントがある記事にのみ表示させてます。
    Bloggerの(特に日本語での)情報ってまだまだ少ないですよねえ。こういう有用な情報、ほんとありがたいです。

  2. コメントありがとうございます。お役に立てたようで何よりです。運営されているブログにBloggerの連絡フォームは昨年10月ごろから機能していないとの記事がありました。私だけかとずっと悩んでいました。こちらこそ貴重な情報ありがとうございます!

タイトルとURLをコピーしました