« script タグがそのまま表示されてしまう | トップページ | [続] script タグがそのまま表示されてしまう »

2005/07/22

本文の後に任意の文字列を表示させる

「ココログプロ 」にグレードアップすれば、テンプレートのカスタマイズができるので、エントリの本文後に任意の文字列を表示できるようにできます。 しかし、「ココログプラス」や「ココログベーシック」では、そのようなカスタマイズができません。

そこで、facet さんの blog の [f-] トラックバックの注意書きを明示する に書かれている内容を参考にして、何とか実現できるようになりました。 先に書いた T's Diary: script タグがそのまま表示されてしまう でうまく動作しなかったのは、表示させる内容を HTMLエンティティ化 で符号化していたためでした。(^-^;

<script type="text/javascript">
<!--
var notes = '<div id="notes-on-trackbacking">ここに任意の文字列をいれます。</dev>';
var findId='more';
var findClass='entry-more';
function AddEntryMoreText(html) {
//  *** Script START! ***
//  document.write('Starting script<BR>-----<BR>');
//  文字列を挿入する位置のタグを検索させる
    var ref = _getRefNode();
    if (!ref) {
//      *** For DEBUG ***
//      document.write('Not found... _getRefNode()<BR>');
        return;
    }
//  *** For DEBUG ***
//  else {
//      document.write('Found it! _getRefNode()<BR>');
//  }
    ref.innerHTML+=html;
    function _getRefNode() {    // for Typepad
        var n = document.getElementById( findId )
        if (!n) {
//          document.write("Not found!", findId, "<BR>");
            return null;
        }
//      *** For DEBUG ***
//      else {
//          document.write('Found it! getElementById<BR>');
//      }
//      検出させるクラス名によっては、更に以下の行を有効にしなければならない。
//      n = n.parentNode;   // h2
        while (n) {
            if (n.nodeType==1 && n.className && n.className== findClass ) {
//              *** For DEBUG ***
//              document.write("Found it! ", findClass, "<BR>");
                return n;
            }
//          *** For DEBUG ***
//          else {
//              document.write(n.nodeType, "| ", n.className, "<BR>");
//          }
//          どちら方向に目的のタグを検索するかを指定
//          n = n.previousSibling;              // 前方向に検索
            n = n.nextSibling;                  // 後方向に検索
        }
        return null;
    }
}
AddEntryMoreText(notes);
//-->
</script>
<style type="text/css">
<!--
#notes-on-trackbacking {
margin: 1em;
border: dotted 1px green;
padding: 0.5em;
line-height: 1.3em;
color: green;
font-size: x-small;
}
-->
</style>

このスクリプトについて、以下に列記しておきます。 カスタマイズや設置の参考にしてください。

  • このスクリプトがうまく設置できれば、ページが表示されてから一瞬遅れて、設定した任意の文字列がページ上に表示されます。 JavaScript で動的に表示させているものなので、HTML のソースを表示させても表示されている位置には当該文字列はありません。
  • 各自でカスタマイズして、ココログヘルプ: サイドバーにJavaスクリプトのアイテムを貼るには を参考にしながら、右側のサイドバーに配置したマイリストに登録してください。 試していませんが、左側のサイドバーではうまく動かないそうです。
  • 表示させたい任意の文字列は、スクリプト先頭にある notes という変数に代入されている部分です。 前述したように、表示させる内容を HTMLエンティティ化 で符号化するとうまく動作しません。表示させる内容に ' などが含まれている場合には、\ を使うなどしてください。
  • また、notes という変数の値を変更するときには、<div> と </div> のタグの間に文字列を入力してください。そうしないと、スクリプトの最後の方で設定しているスタイルが適用されません。
  • スクリプト中には、わざとデバッグ表示のための document.write() を残しておきました。 別の位置に任意の文字列を表示させたい場合には、スクリプト中の findId と findClass などを変更してやればいいと思います。
  • facet さんのコメントを元に、スクリプトを修正しました。そのおかげで、わたしの環境では FireFox でも表示できるようになりました。 追記 2005.07.23 03:12.
  • マイリストのメモの内容がサイドバーにあふれてしまうのは、<script> のタグが引用符の中に直接書かれていたことが原因だったようです。タグの途中で文字列を分割して、 + 演算子で結合してやることで解決できました。 追記 2005.07.23 03:12.
  • スクリプトを ダウンロード script002.txt (1.9K) できるようにしておきました。追記 2005.07.23 03:12.

最後になりますが、このスクリプトは facet さんのスクリプトをベースにカスタマイズしたものです。とても参考になり、感謝しております。

■リンク : ブログ:ココログ:プラス/プロ:@niftyHTMLエンティティ化ココログヘルプ: サイドバーにJavaスクリプトのアイテムを貼るには .

|

« script タグがそのまま表示されてしまう | トップページ | [続] script タグがそのまま表示されてしまう »

ウェブログ・ココログ関連」カテゴリの記事

コメント

トラックバック、ありがとうございました。やっぱり、こういう需要ってありますね~。

実は、この位置にも使えるような、汎用のスクリプトを作っておこうかなあとも考えたことがあって、実際、一度は作ったのですが、その後、何故か上手く動作しなくなっちゃって、それ以来すっかり忘れ去っていました(^^;

ところで、このスクリプトですが、insertAdjasentHTMLを使ってるので、IE専用になっちゃってますね。それに、Firefoxでは、スクリプトをおいたメモ欄のところが途中から見えちゃってます。これは、notesの引用符内の書き方の問題かと思います。

スクリプトの方は、たぶん、
findClass="entry-more";
として、
chi.innerHTML+=html;
とすればOKかと思います。

また、chiはrefと同じなので、refだけでいけそうな気がしますので、それも調整してみてはいかがでしょうか。

notesの引用符内の問題は、どこでしょうかね。%5C%22が不要なのかな。ハッキリとは分かりませんが。

ということで、これを機会にFirefoxとかOperaとかをダウンロードして動作確認することをお勧めします。で、どうしてもダメだったら、改めてご連絡ください。また参りますので。

しかし、こうやってカスタマイズしていただくと、本当に嬉しいですね。どうもありがとうございました(^^)

投稿: facet | 2005/07/23 01:51

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: 本文の後に任意の文字列を表示させる:

« script タグがそのまま表示されてしまう | トップページ | [続] script タグがそのまま表示されてしまう »