カテゴリー「スクリプト」の7件の記事

2007/03/04

ココログを便利にする「ユーザーさん作成スクリプト」特集

ココログには表示方法や各種設定などをココログの標準仕様よりも使い易くしてくれる便利な自作スクリプトを公開されているユーザーさんがたくさんいらっしゃいます。
そんな便利なスクリプトを用途別にまとめてみました。(過去に記事にしたものも含めてあります)
カスタマイズの際の参考にして下さい。

【お願い】
下記のスクリプトの設置ついて、(過去に記事にしたものを除き)ここでは説明はいたしません。
動作の詳細や設置方法については該当のユーザーさんのブログ記事にてご確認下さい。
(過去に記事にしたものについては、その記事へのリンクを貼っておきます)
設置方法が判らない、上手く動かないなどの質問についてもこちらではお答え出来ませんので、作者様に直接お問い合わせ頂けますようにお願いいたします。
※設置方法が「マイリストのメモ欄に貼り付け」→「サイドバーに設置」の場合は「基本2: マイリストの作成→サイドバーへの設置」が参考になると思います。

<’10/07/18 追記>
ココログの仕様変更や利用しているテンプレートの種類によりスクリプトが動作しなくなる場合があります。
特に「オリジナル・テーマ」のテンプレートは既存のリッチテンプレートやカスタム・テーマとは構造が大きく違うため動作にエラーが出る可能性が高いようです。
<参考:【お知らせ】このブログ提供のスクリプトの大半はココログオリジナルテーマに未対応です(風流亭様)>
このエラーに関しても当ブログでは対応出来ませんので悪しからずご了承下さい。


 

サイドバーの表示 / 記事欄の表示 / コメント、トラックバック欄の表示  / ページフッターの表示

サイドバーの表示

■サイドバーの折り畳み

■「最近のコメント」のツリー化

■ブログ内検索

■カレンダー

■サイドバーのリストにスクロールバーを付ける

■「最近の記事」のツリー化

■バックナンバーをプルダウン化

■「カテゴリー」に最近の記事をツリー化

■サイドバー標準項目に任意の文字列追加

■「最近のトラックバック」を別窓で開く

■サイドバーのリスト項目数を減らす

■リストタイトルをコメントアウト(ココログ・フリー)

記事欄の表示

■記事欄「続きを読む」の表示変更

■アーカイブページに目次を付加

■トップページに過去記事へのリンクを設置

■ページ内記事の目次作成

■折り畳みで「続きを読む」

■記事欄で絵文字を使う

コメント、トラックバック欄の表示

■トラックバックURLをコピーする

■コメント、トラックバックの注意書き

■コメント欄で絵文字を使う

ページフッターの表示

■全ページ共通フッターの設置

お世話になりました

■素材サイト 「PRISM」様<記事内のボタン素材>
facet-divers
暴想
風柳亭-別館:書庫のある庵
LONGER THAN FOREVER
あずスタ
KOROPPYの本棚


*この記事にコメントを書く*


| | コメント (7) | トラックバック (1)

2006/04/15

第26回:サイドバーに「アクセス解析ツール」を設置してみよう

サイドバーに貼り付けるブログパーツは多種多様にありますが、今回は 「自分のブログがどこからアクセスされたか/どの記事がよく読まれているか」などのアクセス状況が表示できるパーツを付けてみましょう。
私も現在「ACR WEB」さんの『ページランキング』を設置しているのですが、ちょっとこれは設定が面倒(ページをタイトル表示にするには手動で設定しなければならない)なので、今回はタイトルも自動で読みとってくれる「Sideber.jp (サイドバー.jp)」さんのランキングパーツをご紹介したいと思います。
【'07/04/14修正】
現在は「ACR WEB」さんのサービスでも自動で記事タイトルを読みとってくれます。

手順

事前準備1:ユーザー登録をする

「Sidebar.jp」のユーザー登録をします。

  1. トップページの「どうやるの?」の下にある空欄にメールアドレスを入力し、「新規登録/ログイン」ボタンを押す。
  2. 画面が切り替わり「新規ユーザー登録しますか?」と聞いてくるので、「新規登録」ボタンを押す。
    ※ボタンを押すと「確認メールを送信しました」画面に切り替わる
  3. しばらくすると登録したメールアドレスに確認用のメールが来るので、そこに記載されているURLをクリックする。

このあと、ブラウザに「基本設定」画面が表示されれば登録完了です。

事前準備2:基本設定

自分のブログの情報を設定します。

  1. 表示されたページの空欄に自分のブログのURLを正しく入力して「更新」ボタンを押す。
  2. 下に表示された「はじめかた」から『アクセス統計を使いたい』をクリックする。
  3. 「リンク元/アクセス統計に関する設定」に切り替わるので、それぞれの項目について任意で設定する。
    基本的に最初の3項目だけ設定すればOKです。
    ※後ろの2項目は内容が判らなければそのままブランクにしておいて下さい。
  4. 設定が完了したら「更新」ボタンを押す
  5. その下の「アクセス集計を行う HTML」に上記で設定した条件のスクリプトが表示されるので、これを全文コピーする。

サイドバーに設置する

マイリストを使って、スクリプトをサイドバーに設置します。
マイリストの作成からサイドバーの設置についての詳細は別ページ、
「基本2:マイリストの作成→サイドバーへの設置」
にて確認して下さい。

sidebarjp こんな感じに表示されればOKです。
解析結果がブログ上に反映するまでには、しばらく(約1時間程度)かかります
※一度表示されればあとは勝手にデータを拾ってくれますので、何もしなくて大丈夫です。
※( )内の数字がアクセス件数です。

以上です。
上手くできましたか?

 

ここがポイント

  • 上に掲載した画像は何も成形していない状態ですが、CSSでカスタマイズして表示することも可能です。
    詳細については下記のページを参照して下さい。
    リンク元/アクセスランキングだけを利用する方法
    「アクセスの多いページ」のタイトルを調整する
    このCSSカスタマイズについては、 当ブログではご質問をお受けできませんのでご了承下さい
  • このサービスは便利ですが、ときどきサーバーがかなり重くなりアクセスし難くなる場合があります
    そうした場合、ブログ全体の表示速度にも影響が出ますので、設置する場合は出来るだけ (表示順の遅い) 右サイドバーの下の方に置くことをお奨めします
    ※表示設定の手軽さよりもサーバーの軽快さを重視する場合は、 「ACR WEB」さんのほうがオススメです。
    ※「ACR WEB」さんのページランキングは右サイドバーの「人気ページTop10」に表示してありますので参考にして下さい。
  • 基本的にスクリプトを使ったブログパーツはどれも表示が重くなりがちです。
    ときどき自分でもブログ画面を表示して所要時間を確認し、時間が掛かるようなら設置場所を変更するなど工夫しましょう。

お世話になりました

「Sidebar.jp」さん
「ACR WEB」さん
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


| | コメント (0) | トラックバック (1)

2006/04/09

ブログ便利ツール:「Track Word」

便利ツールご紹介企画 第2弾。今回は「Track Word」をご紹介します。

「Track Word」は自分のブログ内のどのページがどんな言葉(キーワード)で検索されたかを通知、表示してくれるツール (サービス)です。
提供元はサイドフィード株式会社さんです。

「トラックワード」では、ブロガーの方が「どのようなキーワードで検索されるべきか」 について考え、また検索する方が「どのようなキーワードで検索したら最適な結果を得られるか」 について知ることができるようにしたいと考えています。
(中略)
どんなブログがどんなキーワードで検索されていて、このキーワードに続けるべきキーワードは何か、 という情報をまとめて表示することができれば、きっと「検索する人」の役にも立つと思うのです。
「Track Word」『サービス概要』ページより引用)

どんなことが出来るかは上記の『サービス概要』ページを読んでいただければ判るかと思いますが、簡単に言ってしまうと 「アクセス解析から<検索ワード><検索フレーズ>情報のみを抽出して分かり易く表示してくれるサービス」 といったところでしょうか。
自分のブログのどのページがどんなキーワードで検索されたのかが視覚的に分かり易く表示される仕組みになっているので、その結果を見ながら内容を書き換えたりキーワードを追加することによって更なるアクセスアップを図ることが出来るかと思います。

…なんて、偉そうに言ってますが、私の場合単に結果を眺めて楽しんでるだけですが^^;
ただ、「サービス概要」ページにも書いてあるように、この「Track Word」に参加しているブログのみを対象にして、キーワード (フレーズ)ごとに参照数のランキングが表示されていたりするので、そこからのアクセスもかなり期待できますし、検索機能もついていますので自分で検索する場合もどのブログが多く参照されているかすぐに判って目的の情報を見つけやすいシステムだと思います。

以下、簡単に登録、設置方法の説明を書いておきます。

手順

登録方法

  1. トップページから「新規登録する」をクリック。
  2. 「新規登録」画面が開くので、必要事項を入力し「以上の内容で新規登録する」ボタンを押す。
  3. 登録が承認されると「新規登録の完了」画面が表示される。
    ※同時に登録の連絡メールも送信されて来ます。

以上で登録は完了です。

ブログに表示する

情報収集には収集用のスクリプトの設置とともに、ブログへのバナーの貼り付けが必須となります。
また、このバナーの下に検索されたキーワードが表示されるようになります。

  1. 「新規登録の完了」画面にある「ログインする」リンクをクリックする。
  2. 登録の際に申請した「ログインID」「パスワード」でログインする。
  3. 「設置方法」に表示してある、「HTMLコード」(縦表示と横表示がありますのでどちらか)を全文コピーして、「マイリスト」 (メモリストのメモ欄など)に貼り付ける。
  4. ブログに表示されるように設定する。
    ※ココログでの表示設定については
    「基本2: マイリストの作成→サイドバーへの設置」
    を参照してください。

RSSリーダーに登録する

RSSリーダーにRSSを登録しておくと、検索サイトを通じてアクセスがある度にRSSリーダーに通知が来るようになります。

  1. 「ログイン」画面の「お知らせ」にある『RSS2.0』のバナーの上で右クリックし、「ショートカットのコピー」を選択する。
  2. コピーされたRSSを自分で使っている「RSSリーダー」に追加する。

track_word

RSSリーダーには左記のように通知されます。
(表示はRSSリーダーの種類によって異なります)


以上です。
全て無料で利用できますので、ブログのアクセスアップにデータを活用してみては如何でしょうか。


*この記事にコメントを書く*


| | コメント (5) | トラックバック (0)

2006/02/26

第13回:サイドバーをリストごとに折り畳んでみよう

ブログを続けているとサイドバーにいろいろな項目が増えてきてどんどん長くなってきます。
これをスクリプトを使って項目ごとに折り畳めるようにしてみましょう。
このカスタマイズは「facet-divers」 様の 『サイドバー折り畳み2:状態保持機能付き』 の記事を全面的に参考にさせて頂いています。
「facet-divers」様、ありがとうございます(^^) (いつもお世話になってます)

手順

事前準備:スクリプトを準備する

下記のウィンドウ内のスクリプトを全文コピーして「メモ帳」などに貼り付けて下さい。
※facetさんのご好意により転載させて頂きました。ありがとうございました。

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/myFunctions01a.js">
</script>
<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldSidebar02c.js">
</script>
<script type="text/javascript">
<!--
foldMark = "-";
foldTitle = "close";
unfoldMark = "+";
unfoldTitle = "open";
switchStyle = "float:right;margin:0;width:1.4em;padding:0;height:1.4em;line-height:1em;text-align:center;text-indent:0;";
labelStyle = "letter-spacing:0.1em;";
counterPrefix = "(";
counterPostfix = ")";
counterStyle = "margin-left:2px;letter-spacing:normal;color:silver;";
foldBroadly = true;
//
pattern = "最近の記事|最近のコメント|最近のトラックバック|バックナンバー|カテゴリ|更新|blog";
makeSwitchesBy(pattern);
//
pattern = "最近のコメント|最近のトラックバック|バックナンバー|カテゴリ|更新|blog";
foldContentsBy(pattern); 
//
pattern = "最近の記事|最近のコメント|最近のトラックバック|バックナンバー|カテゴリ|更新";
countItemsBy(pattern);
//-->
</script>

※スクリプトをメモ帳に貼り付ける際、メモ帳の設定が「右端で折り返す」 になっていると不要な改行が入ってしまいスクリプトが誤作動する場合があります
処理の前にメモ帳の「書式」をクリックしてこの中の「右端で折り返す」にチェックが入ってる場合は、これを外してから貼り付け作業を実施して下さい。

スクリプトを書き換える

上記で準備したスクリプト中の3箇所の「pattern="...";」を必要に応じて書き換えます。

  1. 「makeSwitchesBy(pattern);」の上にある 「pattern="...";」
    折り畳みボタンを付けたいリスト名を指定する。
    ※ここでタイトルを指定したリストだけが折り畳みボタンが付きます。
  2. 「foldContentsBy(pattern); 」の上にある 「pattern="...";」
    ページを読み込んだ時に折り畳んでおきたいリスト名を指定する。
    ※ここでタイトルを指定したリストはブログにアクセスした時に折り畳まれた状態で表示されます。
    ※例えば「最初は全て閉じた状態にしたい」ときはA.と同じリスト名を全て指定、
    「『最近の記事』だけは開いた状態で表示したい」ときはA.のリスト名から『最近の記事』を抜いて指定します。
    (デフォルトでは後者の状態になっています)
  3. 「countItemsBy(pattern); 」の上にある 「pattern-"..."; 」
    リスト内の項目数をカウントして表示したいリスト名を指定する。
    ※指定するとタイトル横に(10)のような感じで、内容の項目数が表示されます。

※基本的にこの3箇所を自分のブログに合わせて変更するだけでOKです。
※リスト名の書き換え、追加については元のスクリプトに書いてあるものを参考にして記述して下さい。
リスト名の間を半角の縦線( | )で区切るのを忘れずに
※更に詳しいカスタマイズについては、「facet-divers」様の元記事を参照して下さい。

サイドバーに設置する

マイリストを使って、スクリプトをサイドバーに設置します。
マイリストの作成からサイドバーの設置についての詳細は別ページ
「基本2:マイリストの作成→サイドバーへの設置」
にて確認して下さい。

※このスクリプトは、上記の書き換え時に指定した全てのリストよりも下になるように設置して下さい。

以上です。
うまく出来ましたか?

ここがポイント

  • このスクリプトは設置場所よりも上にあるリストにのみ有効です。
    設置場所(リストを置く場所)に注意しましょう。
    例えば右サイドバーの一番下の項目まで折り畳みたいのであれば、その項目の下にスクリプト入りのリストを設置する必要がある、 ということです。
  • 両サイドバータイプのスタイルの場合も、右サイドバーの一番下に入れれば左サイドバーの項目まで折り畳めます。
    ※読み込むまで多少タイムラグがありますので、気になるようなら左右別々に設置するという手もありますが、 その場合スクリプトの内容を更に若干書き換える必要があります。
    ※詳しくは 「facet-divers」様の 『サイドバー折り畳み2:動作遅延対策』を参照して下さい。
  • 設置するためのリストを作成する場合、既に何らかのスクリプトを一番下に置いているなら、 新しくリストを作成せずに既にあるリストに項目を追加する形で置いた方がサイドバーの表示がスッキリすると思います。
    ※使い勝手の問題もありますので、その辺はお好みで。
  • 折り畳みボタンのカスタマイズについては「KOROPPYの本棚」 様内の記事 『折りたたみボタンの色を開閉で変える』に詳しく書かれています。
    参考にして下さい。

このスクリプトは使用しているテンプレートによってはブラウザ毎に挙動が違ったり、デザインが崩れたりする場合があるそうです。
その場合はfacetさんが対応して下さるとのお言葉を頂いておりますので、上記の設定をしても上手く動かない場合はfacetさんまで直接ご連絡して下さい
『サイドバー折り畳み2:状態保持機能付き』の記事のコメント欄に状況を書き込んで下さい)
その際、facetさんがブログの設定内容を確認して下さいますので、設置したスクリプトはそのままの状態でご連絡下さい
宜しくお願いいたします。

お世話になりました

「facet-divers」
「KOROPPYの本棚」
■素材サイト 「PRISM」


*この記事にコメントを書く*


| | コメント (88) | トラックバック (13)

2006/02/20

第9回:アクセス解析を設置してみよう

自分のブログをどのくらいの人が読んでくれているのか、どの記事が人気があるのか気になりませんか?
そうしたデータを集計・解析してくれるのが「アクセス解析」です。

ココログフリーには標準でアクセス解析が付いていますが、時間ごとの件数は何とか把握できるもののページごとやリンク元のランキングはパーセント表示で詳しい件数が判りませんし、訪問者ごとの個別の情報も取得できません。
ネット上には無料で高機能なアクセス解析をレンタルして下さっているサービスサイトがたくさんありますので、そこからタグをお借りして設置してみましょう。

【'06/09/02:追記】
「ベーシック/プラス/プロ」の有料プランについては、8/2よりココログ標準の「アクセス解析」機能が大幅にバージョンアップされました。
下記で紹介した解析サービスとも遜色のない高機能解析が出来るようになっています。
機能や使い方の詳細については下記の記事を参照して下さい。
アクセス解析をバージョンアップしました (「お知らせココログ」より)
【'06/11/05追記】
「フリー」プランでも11月1日より有料プランと同等の解析機能にバージョンアップしました。
使い方の詳細についてはココログ内の下記の記事を参照して下さい。
■ココログ通信:新アクセス解析活用術

上の【追記】に書いたように現在ではココログのアクセス解析もかなり高機能になりましたので、他のサービスをわざわざレンタルする必要はなくなりました。
ただ、下記の方法を使えばココログ標準のアクセス解析と他社サービスを併用することも可能ですので、この記事はこのまま残しておくことにします。

手順

タグを入手する

アクセス解析のレンタルサイトに登録して、アクセス解析用のタグを入手します。
※登録方法はサイトによって異なりますので、サイトの説明に従って手続きして下さい。

タグの設置

アクセス解析用のタグは「サブタイトル」部分に入力します。

  1. ココログの管理画面にログインし、「ブログ」タブ→(便利メニューから)「設定の変更」 
  2. 「ブログの基本情報」が表示されるので、その中の 『ブログのサブタイトル (キャッチフレーズ)』が記入してある部分に、上記で入手したタグを全てコピー&ペーストする
    ※ご自分で入力したサブタイトルよりも前に貼り付けて下さい。 
  3. 画面下の「変更を保存」ボタンを押す。 
  4. 画面が切り替わった後に表示される「サイトに反映」ボタンを押す。

このまましばらく待ってアクセス解析サイトの管理画面を確認すれば解析が始まっているはずです。

以上です。

ここがポイント

私の現在のオススメは 「Access Analyzer.com(アクセスアナライザードットコム)」です。(現在使用中です)
サンプル画面はこちら。画面左側の項目をクリックすると画面が変わります。
オススメの理由は

  • ページごとのアクセス解析が可能 
  • 複数のサイト(ブログ)を同一アカウントでまとめて管理できる 
  • ログ保存期限が1年間である

などです。
特にページごとのアクセス解析はブログの場合には、タグを追加しなくても自動で更新されますし、 URLだけでなくタイトルも取得してくれるのでかなり便利だと思います。
※サンプル画面の「人気ページタイトル」をクリックしてみて下さい。
但し、(そんなに長時間ではないですが)「メンテナンス」で接続できない頻度がちょっと高いことと、アクセスの数値がリアルタイムではなく10分程度タイムラグがあるのが欠点と言えば欠点かも…。
私はあまり気になりませんが。

他にも「忍.jp」「FC2アクセス解析」など多くのサービスがありますので、自分の使い勝手に合わせて選んでみて下さい。
参考:「無料サイト集KOOSS」『無料アクセス解析』

お世話になりました

【今回お世話になったサイト様、ブログ様です。ありがとうございました。】

■記事中のボタン素材は素材サイト「PRISM」様から頂きました。


*この記事にコメントを書く*


| | コメント (13) | トラックバック (0)

2006/02/19

第8回:サイト内検索を設置してみよう

自分のサイト(ブログ)内を検索出来るツールを設置してみましょう。
いろいろな検索エンジンの検索ツールが利用できますが、ここでは「Google」を利用したものと、ココログのユーザーさんが作成したスクリプトを利用したものを紹介します。

■「Google」の検索エンジンを利用する方法はこちら
■ココログユーザーさん作成のスクリプトを利用する場合はこちら  (←オススメ!

手順

「Google」の検索エンジンを利用する

事前準備1:タグを入手する

「Google」検索用のタグを入手します。

本当はGoogleで配布されているタグをそのまま利用しようと思ったのですが、 Webサイト用の仕様であるためブログのサイドバーに貼り付けるためにはかなり面倒な書き換えが必要であることに気付きました。
ここでそれを説明する能力が私にはないので^^;、あっさり断念。
代わりに何かないかと検索した結果、 「いかんともしがたい」様でココログ用にちゃんと成形して下さっているタグを発見。
お借りすることにしました。
こちらのページで入手できます。
『Google 検索窓を設置する その 5 完成形』
「いかんともしがたい」様、ありがとうございました。
※こんな風に、ブログ内では自分が「困ったな~」と思っていることは検索してみれば誰かが解決策を書いて下さっていることが多いです。
※困ったことがあったらまず検索してみましょう!

タグを書き換える

  1. 「いかんともしがたい」 様の 『Google 検索窓を設置する その 5 完成形』ページ内にあるタグを全てコピーして、メモ帳に貼り付ける。
  2. 赤字で書いてある「yoursite.co.jp」 (小文字のほうです) を自分のブログのアドレスに書き換える
    ※例えばこのブログを例に取ると
    ※ブログurl:http: //tea-for-me.cocolog-nifty.com/
    ※のうちの、tea-for-me.cocolog-nifty.com の部分のみを入力します。
  3. 同じく「YOURSITE.CO.JP」 を自分のブログ名に書き換える
    ※ここはブログに表示される部分なのでどんな文字列でもOKです。
    ※例えばブログ名でなく「このブログ内を」とかにしても。
  4. 上記2箇所の修正が終わったら、改行をなくして一行の続いたタグにする

タグをブログに貼り付ける

  1. 管理画面→「マイリスト」タブ→「マイリストの新規作成」で『リストのタイプ』 が<メモ>のリストを作成する。
    ※名前の欄は入力した文字がサイドバーにタイトルとして表示されますので自分で相応しい文字列を入力してください(例:「サイト内検索」 など)
    ※文字列を出したくない時は、スペースを入れても大丈夫です。
  2. 「最近の項目」というページに切り替わるので、ここで「項目の追加」をクリックする。
  3. 「項目を追加する」ウィンドウが表示されるので、その中の広い方のスペースに上記のタグを全て入力する。
  4. 「追加」ボタンをクリックする。
  5. 「新しいノートを追加しました」というメッセージが表示されるので、そのページの下方にある「変更を保存」ボタンを押す。
  6. 「変更を保存しました」メッセージを確認したら「ウィンドウを閉じる」
  7. 「ブログ」タブ→(便利メニューから)「デザインの編集」→「表示項目を変更」をクリック。
  8. 「マイリスト」の一覧の中から、作成したサイト内検索用のリストを選択しチェックボックスにチェックを入れ「変更を保存」。
  9. 「デザインの編集」に戻って「並べ方を変更」をクリック。
  10. 「表示項目の並べ方」画面が表示されるので、作成したカウンターを好きな場所に移動して「変更を保存」。

以上です。
うまく出来ましたか?

ここがポイント

  • 「yoursite.co.jp」 の部分を自分のアドレスに書き換える場合、 その前に書いてある 「site:」 を消さないように注意しましょう。
  • この検索は「Google」の検索情報に該当記事が登録されていることが前提になります。
    公開した記事がGoogleに登録されるには少なくとも数日はかかるようです

ココログユーザーさん作成のスクリプトを利用する

上記にも書いたように、Googleの検索は記事を公開してから検索対象に登録されるまでに数日かかるため、公開直後にすべての記事を検索することは困難です。
そこで、公開間もないブログの記事でも検索出来る「サイト内」検索を付けてみます。
この検索は「暴想」 様の 「自分のココログを全文検索するJavaScript」内のスクリプトを使わせて頂きました。
「暴想」様、ありがとうございました。
以下に簡単に手順を書いておきます。

※実はこちらの検索のほうがお薦めです。
※但し、利用者のブラウザの設定が「JavaScriptを無効」になっている場合は動作しませんのでご注意下さい。

手順

  1. 「暴想」様の「自分のココログを全文検索するJavaScript」内のスクリプトを全文コピーして、「メモ帳」に貼り付ける。
  2. 「暴想」様の注意に従ってスクリプトの内容を書き換える。
    スクリプト中の2箇所の「/blog/archives.html」 部分の/***/の内容を自分のブログアドレスに合わせて書き換えます
    ※例えばここの場合urlが「http: //tea-for-me.cocolog-nifty.com/blog/」ですので、
    ※スクリプトに書いてある通り「/blog/archives.html」 のままでOKですが、
    ※もう一つのブログの場合urlが「http: //tacop.cocolog-nifty.com/second_message/」になりますので、
    ※書き換えると「/second_message/archives.html」 となります。

    【'06/11/10修正】
    「暴想」様のスクリプトバージョンアップにより、上記の書き換えは不要になりました。
    スクリプトをコピーしたらそのまま3.に進んで下さい。
    ※既に修正して設置してあるスクリプトもそのまま使用できるとのことです。
    ※詳しくは「暴想」様: 「cocolog_ajax_search.jsをバージョンアップした。」をご覧下さい。
  3. この後は、上記の【タグをブログに貼り付ける】と手順は同じです。

【'07/04/14】
上記のスクリプトの設置が更に簡単になりました!
作者なおゆきさんがスクリプトを「ココログ・ブログパーツ」に登録されたため、簡単な設定後、登録ボタンを押すだけで自分のココログに設置することが出来るようになりました。
設置方法の詳細は暴想様の該当記事
自分のココログを全文検索するブログパーツ
にて確認して下さい。ホントに簡単です。

お世話になりました

【今回お世話になったサイト様、ブログ様です。ありがとうございました。】

「いかんともしがたい」
「暴想」
■記事中のボタン素材は素材サイト「PRISM」様から頂きました。


*この記事にコメントを書く*


| | コメント (27) | トラックバック (4)

2006/02/18

第7回:コメントをツリー表示にしてみよう

デフォルトだと投稿された順にどんどん重なってくるコメントの表示を、対象のエントリーに最新のコメントがぶら下がるタイプのツリー表示にしてみましょう。

このカスタマイズは、 「のっぺログ」 様の 「ブログ人でコメントをツリー化」 の記事を全面的に参考にさせて頂いています。
ありがとうございます。
※ 「のっぺログ」様の記事はとても簡潔に判りやすくまとめられています。
※ココログでのアップロード方法や、サイドバーの設置についてはもう問題ないという方は「のっぺログ」様の記事を参照されたほうが却って判りやすいかもしれません。

手順

事前準備:スクリプトと画像を準備する

「のっぺログ」 様の 「ブログ人でコメントをツリー化」 の記事中にある 「comtree.js」、「simpleboxes1.gif」、「simpleboxes2.gif」の3つのファイルを自分のPCに保存する。
ファイルのリンク上で右クリック→「対象をファイルに保存」を選択→PC内の判りやすい場所に保存
ファイル名は既に付いていますので変更せずにそのまま保存して下さい。

ファイルをココログにアップロードする

  1. 管理画面にログインし、「コントロールパネル」タブ→「ファイル」タブを開く
  2. 「新規ファイルのアップロード」の「参照」ボタンを押す
  3. 「ファイルの選択」ウィンドウが表示されるので、上記で保存したファイル(画像)を選択し「開く」ボタンを押す
  4. 「アップロード」ボタンを押す
  5. 左側の「現在のフォルダ」の「ファイル名」に、 4.でアップロードしたファイル名がリンクとして表示されていることを確認する。
    上記で保存したファイルを3つとも同じようにアップロードして下さい
    ※ここまででファイルのアップロードは完了です。

タグを書き換える

  1. 「のっぺログ」様に記載されているタグ(<script type="text/javascript"~</style>まで)を全てコピーして、テキストエディター(「メモ帳」 など) に貼り付ける
  2. 上記の5.で表示されている2つの画像(「simpleboxes1.gif」、「simpleboxes2.gif」) の 「ファイル名」をクリックしてリンクを開く。
    ※クリックするのは「リンクボタンではなく、「ファイルの名前」の方です。
  3. ブラウザのアドレスバーにそのファイルの保存先のurl(http://~)が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
  4. 「のっぺログ」様で指定されている赤文字の部分(A、B、 Cの3箇所) を指示通りに自分でアップロードしたurlに変更する
    A:「comtree.js」については、 そのまま開くとエラーになってしまうのでリンク上で右クリック→ 「ショートカットのコピー」 でurlをコピーして該当部分に貼り付けて下さい。(貼り付けたurlの最後が 「comtree.js」 になっていればOKです)
    ※B:「simpleboxes1.gif」、C:「simpleboxes2.gif」 については上記で開いたページのurlに差し替えて下さい。
    BとCの画像urlを入力する順番を間違えないようにして下さい。
    【】で囲まれた部分は削除して下さい(【】も含めて)

サイドバーに設置する

  1. ココログの管理画面にログインし、「マイリスト」タブをクリック。
  2. 「マイリストの新規作成」で『リストのタイプ』 が<メモ>のリストを作成する。
    ※名前の欄は文字列が表示されないように、スペースで処理することも可能です。
    ※名前を付けてしまっても動作上問題はありません。
  3. 「最近の項目」というページに切り替わるので、ここで「項目の追加」をクリックする。
  4. 「項目を追加する」ウィンドウが表示されるので、その中の広い方のスペースに書き換えたスクリプトを全文コピー&ペーストする。
  5. 「追加」ボタンをクリックする。
  6. 「新しいノートを追加しました」というメッセージが表示されるので、そのページの下方にある「変更を保存」ボタンを押す。
  7. 「変更を保存しました」メッセージを確認したら「ウィンドウを閉じる」
  8. 「ブログ」タブ→(便利メニューから)「デザインの編集」→「表示項目を変更」をクリック。
  9. 「マイリスト」の一覧の中から、作成したスクリプトのリストを選択しチェックボックスにチェックを入れ「変更を保存」。
    ※2.で名前欄をスペースで処理した場合は、ここでも名前が表示されませんので注意してください。
    ※例えば「カウンター」と名前を付けたリストは[□カウンター(メモ)]と表示されますが、スペースだけのものは[□ (メモ)] となっているはずです。
  10. 「デザインの編集」に戻って「並べ方を変更」をクリック。
  11. 「表示項目の並べ方」画面が表示されるので、作成したメモリストを 「最近のコメント」よりも下に設置して「変更を保存」。

以上です。
うまく出来ましたか?

ここがポイント

  • 作成したリストは必ず「最近のコメント」 よりも下に置いて下さい。
    上に置いてあると作動しません。
  • 手順は多いですが、一つ一つ処理していけば必ず出来ますので頑張りましょう。
    注意点は「3箇所のurlの置き換え」 「不要部分の削除」です。
    もしうまく表示されない場合は、上記2箇所と 「タグが全文入っているかどうか」 をもう一度確認してみましょう。

お世話になりました

【今回お世話になったサイト様、ブログ様です。ありがとうございました。】

「のっぺログ」
■素材サイト 「PRISM」様(記事中のボタン素材を頂きました)


*この記事にコメントを書く*


| | コメント (58) | トラックバック (10)