jQuery UI Extra-4 : Bloggerのコメント関連を「Accordion」で開閉してスタイリッシュにする

過去記事で書いた…

 Bloggerでコメントを折りたたんでクリックで開閉表示…コメントの文字色と文字サイズも変更

 Bloggerの埋め込みコメントフォームを折りたたんでクリックで開閉する記述


…の…「コメント」「コメントフォーム」を…

「jQuery UI」の「Accordion」を使ってスタイリッシュに開閉する方法です…

大前提として「jQuery UI」の部分を追記する形ですから…上記過去記事と…

上部か下部のページャーから…

第１回「導入」と第３回「Accordion」をお読みください…

導入すると…記事下のようになります…

コメントとコメントフォーム

更には…こんな感じで…

「コメントとコメントフォーム」各部分は…

「Number of Comments」は…ボタン化して「ui-state-hover」を指定し…

「comment bubble」画像……は…「CSS Sprites」で表示していますので…

必要に応じて…

第２回「Button」と…こちらの過去記事も併せてお読みください…

 Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】


さっそく…いってみましょう…

テンプレートをバックアップしてから行なって下さい…

「コメント」と「コメントフォーム」は…

「HTMLの編集」画面

「テンプレート」「HTMLの編集」から…

導入テンプレートにより違いますが…

「▶」で折りたたまれて…

こんな感じになっていると思われます…

①の「<b:includable id='comment-form' var='post'>…</b:includable>」が…

上記の…「コメントとコメントフォーム」画像の…

「コメントを投稿」部分で…

②の「<b:includable id='comments' var='post'>…</b:includable>」が…

同様に…「コメントとコメントフォーム」画像の…

「コメントを見る」と…その上の…

「comment bubble」「Number of Comments」「post.numComments」

部分です…

バックリンクなども含まれますが開閉していません…

先ずは…コメント関連の CSS です…

コメント関連の CSS

/* Comment */
.post-comment-link a:link{margin-left:1em;color:#9a9}
#comments{margin:10px 10px 15px 15px}
#comments h4{line-height:1.4;color:#9a9;text-align:left;font-size:10px;font-style:italic}
#comment-post-message h4{color:#4d4845;font-size:14px;font-style:italic}
.comment-author{margin:.5em 0}
.comment-body{margin:.25em 0 0}
.comment-footer{line-height:1.4;text-transform:none}
.deleted-comment{font-style:italic;color:#4d4845}
.feed-links{clear:both;line-height:1.2;padding-left:15px}
.feed-links{display: none}
#backlinks-container h4{color:#4169e1;font-size:10px;font-weight:bold;font-style:italic}

まぁ…これは…さして重要ではありませんので…お好きに弄って下さい…

続いて…

①の「コメントを投稿」部分のコードです…

赤文字部分が過去記事での検索ワードで…

黃文字部分が「Accordion」です…

①「コメントを投稿」部分のコード

<b:includable id='comment-form' var='post'>
  <div class='accordion'>
    <div>
      <h6>
        <a href='#'>
          Post a Comment :: Click!!
        </a>
      </h6>
      <div class='comment-form' style='height:250px;'>
        <a name='comment-form'/>
        <b:if cond='data:mobile'>
          <h4 id='comment-post-message'>
            <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'>
              <data:postCommentMsg/>
            </a>
          </h4>
          <p>
            <data:blogCommentMessage/>
          </p>
          <data:blogTeamBlogMessage/>
          <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
          <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display:   none' width='100%'/>
          <b:else/>
          <h4 id='comment-post-message'>
            <data:postCommentMsg/>
          </h4>
          <p>
            <data:blogCommentMessage/>
          </p>
          <data:blogTeamBlogMessage/>
          <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
          <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
        </b:if>
        <data:post.friendConnectJs/>
        <data:post.cmtfpIframe/>
        <script type='text/javascript'>
          BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, 
                  &#39;<data:post.communityId/>&#39;);
        </script>
      </div>
    </div>
  </div>
</b:includable>

最後は…

②の「コメントを見る」と「その上」の部分のコードです…

同様に…赤文字部分が過去記事での検索ワードで…

黃文字部分が「Accordion」です…

②「コメントを見る」と「その上」の部分のコード

<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4>
        <b:if cond='data:post.numComments == 1'>
          <span class='id238 flip' title='Comments'/>
          <button class='ui-button ui-state-hover ui-corner-all tips' style='cursor:text' title='コメント数'>
            <span style='font-size:8px;'>
              &#12288;
              <i>
                Number of Comments
              </i>
              &#12288;
            </span>
          </button>
          1 
          <data:commentLabel/>
          :
          <b:else/>
          <span class='id238 flip' title='Comments'/>
          <button class='ui-button ui-state-hover ui-corner-all' style='cursor:text' title='コメント数'>
            <span style='font-size:8px;'>
              &#12288;
              <i>
                Number of Comments
              </i>
              &#12288;
            </span>
          </button>
          <data:post.numComments/>
          <data:commentLabelPlural/>
          :
        </b:if>
      </h4>
      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          &#160;
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>
      <div class='accordion'>
        <div>
          <h6>
            <a href='#'>
              View Comments :: Click!!
            </a>
          </h6>
          <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
            <h4>
              <b:if cond='data:post.numComments == 1'>
                1 
                <data:commentLabel/>
                :
                <b:else/>
                <data:post.numComments/>
                <data:commentLabelPlural/>
                :
              </b:if>
            </h4>
            <ol>
              <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
                <b:loop values='data:post.comments' var='comment'>
                  <li>
                    <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='font-size: 12px;'>
                      <b:if cond='data:comment.favicon'>
                        <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
                      </b:if>
                      <a expr:name='data:comment.anchorName'/>
                      <b:if cond='data:blog.enabledCommentProfileImages'>
                        <data:comment.authorAvatarImage/>
                      </b:if>
                      <b:if cond='data:comment.authorUrl'>
                        <a expr:href='data:comment.authorUrl' rel='nofollow' style='font-size: 12px; color: #8AC75A;'>
                          <data:comment.author/>
                        </a>
                        <b:else/>
                        <data:comment.author/>
                      </b:if>
                      <data:commentPostedByMsg/>
                    </dt>
                  </li>
                  <dd class='comment-body' expr:id='data:widget.instanceId +   data:comment.cmtBodyIdPostfix' style='font-size: 12px;'>
                    <b:if cond='data:comment.isDeleted'>
                      <span class='deleted-comment'>
                        <data:comment.body/>
                      </span>
                      <b:else/>
                      <p>
                        <data:comment.body/>
                      </p>
                    </b:if>
                  </dd>
                  <dd class='comment-footer'>
                    <span class='comment-timestamp' style='font-size: 10px;'>
                      <a expr:href='data:comment.url' title='comment permalink'>
                        <data:comment.timestamp/>
                      </a>
                      <b:include data='comment' name='commentDeleteIcon'/>
                    </span>
                  </dd>
                </b:loop>
              </dl>
            </ol>
          </div>
        </div>
      </div>
      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>
      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
            <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
          <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
              <button class='color7 ui-corner-all tips' id='button' style='color:#F15B55;font-size:14px;font-weight:bold;' title='コメントを投稿'>
                <span class='id29'/>
                Post a Comment 
                <span class='id29'/>
              </button>
            </a>
          </b:if>
        </b:if>
      </p>
    </b:if>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-  actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>
    <div class='ui-corner-all' id='backlinks-container'>
      <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
        <b:if cond='data:post.showBacklinks'>
          <b:include data='post' name='backlinks'/>
        </b:if>
      </div>
    </div>
  </div>
</b:includable>

「5行目」から「35行目」までが…

「comment bubble」「Number of Comments」「post.numComments」

…の部分です…

「123行目」から「174行目」は下部のバックリンクなどの部分ですが…

「CSS Sprites」や第２回「Button」を使って過去記事とは変わっていますので…

 Bloggerでコメントフォームとバックリンクを変更する設定と記述…page3


一応…参考程度に…コードもそのまま置いてあります…

入れ替えが済んだら「プレビュー」で問題無ければ…

「テンプレートを保存」して完了です…お疲れ様でした…

Prev 1 2 3 4 5 6 7 8 9 Extra Next

Design jQuery JavaScript Current-Label : jQuery / Extra