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

複数箇所にスクリプトを埋め込むと動作しないので…
複数箇所でも開閉できるように…
以下…「JavaScript」と「HTML」を書き換えました…
１箇所だけで…既に導入した方も…
新しいスクリプトのほうが動作が安定しますので…
入れ替える事をお奨めします…(2012.02.11)

こちらの記事も…お奨めします…

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

 HTML要素を折りたたんでクリックで動的に開閉するJavaScript…複数設置可能

現在は「jQuery」の「Accordion」で開閉させています…

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

コメントでの質問に関して…あれこれ試行錯誤して…

結局…未だ…解決せず…ですが…副産物で…

コメントフォームの…他の…気になっていた点を…

改良したので記事にします…

「フルページ」だと…ページ移動しちゃうし…

「埋め込み」だと…デザイン的に微妙だし…

「ポップアップ」だと…なんだかショボイし…で…

コメントフォームは納得いってなかったのですが…

埋め込みのコメントフォームを折りたたんで…

ボタンクリックで開閉する事にしました…

カスタマイズすると…

ページを読み込んだ時点では…

「フルページ」「ポップアップ」と同じ状態…

コメント投稿ボタンをクリックすると…

折りたたまれていた…

「埋め込み」コメントフォームが出現し…

スクロールバーを下げると投稿ボタンが出ます…

先ずは…下準備です…

過去記事を参照して…コメント投稿用のボタンを作成します…

文字リンクにするなら必要ありません…

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


「設定」「コメント」で…

「プレースメントからのコメント」の…

「下記の投稿を埋め込みました」にチェックします…

下記コードを「メモ帳」にコピペして…

<!--
function OC(a){if(document.getElementById(a).style.display=="none"){document.getElementById(a).style.display="block"}else{document.getElementById(a).style.display="none"}};
// -->

文字コードを「UTF-8」拡張子を「js」で…

任意の名前(例 : collapse.js)で保存し…

任意の場所にホストします…

 Blogger用の外部ファイル保存場所として「GitHub」の「GitHub Pages」を活用しよう

 Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Google Drive」

 Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Dropbox」

 Google Blogger用のファイル保存場所としてのGoogle sites/Picasa


外部ファイル化したくない方は…

「HTML/JavaScript」ガジェットでも結構です…

その場合は…このように書き換えて下さい…

<script type='text/javascript'>
ここに上記コードを挿入
</script>

尚…「HTML/JavaScript」ガジェットは…

単独で使用すると…枠線を設定している場合は…

枠線しか表示されない間抜けなガジェットが表示されますので…

他で使用している「HTML/JavaScript」ガジェットの…

末尾に追記する形で問題ありません…

外部ファイル化した方は…

「デザイン」「HTMLの編集」「ウィジェットのテンプレートを展開」から…

「</body>」の直前に…

<script async='async' charset='utf-8' src='js ファイルの URL' type='text/javascript'/>

…と…ご自身の「js ファイルの URL」と差し替えてから記述します…

さて…本番です…同様に…

「デザイン」「HTMLの編集」「ウィジェットのテンプレートを展開」から…

「Ctrl + F」で…

<b:includable id='comment-form' var='post'> を検索すると該当部分は…

該当部分のコード

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <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('<data:post.appRpcRelayPath/>', 

'<data:post.communityId/>');
    </script>
  </div>       
</b:includable>

…ってな感じになっています…

注 : コメントフォームの高さのデフォルト値が違うかも？

…ですが…書き換えますので気にしない方向で…

これに…2列目・11列目・17列目・27列目の黄色字の部分を追加・書き換えます…

追加・書き換え後のコード

<b:includable id='comment-form' var='post'>
<a href='javascript:;' onclick='OC(&apos;collapse0&apos;)'>ここにボタンタグかリンク文字を挿入</a>
  <div id='collapse0' style='display:none'>
  <div class='comment-form'>
    <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='100%' 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='100%' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', 

'<data:post.communityId/>');
    </script>
  </div> 
  </div>      
</b:includable>

ボタンタグ…又は…リンク文字も…

ご自身仕様にするのを忘れずに…

「テンプレートを保存」して完了です…が…

JavaScript がオフのブラウザでの来訪者に配慮したい方は…

27列目と 28列目の間に以下のコードを挿入してください…

動作確認はしていませんが…

たぶん…そのまま…コメントフォームが表示されると思います…

JavaScript がオフ用の代替記述

<noscript>     
  <div id='collapse0' style='display:block'>     
   <div class='comment-form'>
    <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='100%' 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='100%' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', 

'<data:post.communityId/>');
    </script>
  </div>   
  </div>     
</noscript>

以上です…

お疲れ様でした…

Tips Universal Header Sidebar Footer Current-Label : Main