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