第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：マイリストの作成→サイドバーへの設置」
にて確認して下さい。

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

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

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

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

---

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

---

ブログ便利ツール：「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リーダー」に追加する。

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

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

---

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

---

第23回：サイドバーに掲示板を設置してみよう

ブログは記事ごとにコメント出来るのでWebサイトの掲示板よりも反応が早いし、書き込む側（閲覧者）も気楽だ、というのがブログのいいところだと（私は）思っているのですが、逆に記事に関係ない話題についてはどこに書き込めばいいのか困ることもあります。
そこで、記事に関係のない話題でも気軽に書き込めるミニ掲示板をサイドバーに付けてみました。

今回はこの設置方法についてご説明します。

※掲示板は実際に利用可能ですので、お気軽に書き込みして下さい。
※但し記入内容によっては管理人判断で削除させていただくこともありますのでご了承下さい。
※また、「テスト書き込み」もご遠慮下さい。

※申し訳ありませんが現在はこのブログでは利用していません。

ブログに設置する掲示板にはいろいろ種類があるようですが、私は今回「chobi（ちょび）」を使ってみました。
サイドバーにはこんな↑感じに表示されます。

書き込んだり、過去ログを読んだりする場合は「よむ/かく」ボタンを押すと、コメント入力画面（別ページ）が表示されます。

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

「chobi（ちょび）」のサイトにて、掲示板設置用のタグを入手します。
※画面を下にスクロールすると作成ボタンが出てきます。

1. ダウンリストから好きなデザインを選択し「掲示板を作る」ボタンを押す。
   ※ダウンリストの下の画像をクリックすると、そのデザインを使ったサンプル画面に飛びます。
2. 別ページが表示されるので、このページの下方に記載してあるタグ（「下記のコードを、 掲示板を表示させたい場所に貼ってください。 」の下に書いてある2行）をコピーする。
   ※このページには「利用規約」もありますので、必ず読みましょう。
   ※また、同じページに「管理者パスワード」が赤字で記載されていますが、 これは後でデザインの変更や書き込みの削除などをするために 「管理画面」 に入る場合のキーになりますので必ず控えておいて下さい。

サイドバーに設置する

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

基本項目を設定する

タイトルや表示件数など基本的な設定をします。

1. サイドバーに表示された掲示板の「よむ/かく」ボタンをクリックする。
2. 最初に選んだデザインの書き込み画面（別画面）が表示されるので、その画面の一番下にある「管理画面」のリンクをクリックする。
3. 「管理画面ログイン」画面が表示されるので、タグの入手の際に発行された4桁の管理番号を入力してログインする。
4. 「タイトル」を入力し、「トップページでの表示件数」を設定する。
   ※「タイトル」は全角で10文字まで入力可能です。
   ※「スタイル」を変更する場合も、ここでダウンリストから別なタイプを選択することが出来ます。
5. 設定が終了したら「変更」ボタンをクリックする。
6. 「■掲示板に戻る」で管理画面から退出する。
7. サイドバーを確認して「タイトル」などが設定した通りに表示されているかどうか確認する。

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

応用：CSSでカスタマイズする

「chobi（ちょび）」の既存のデザインのまま利用するなら上記の作業までで終わりですが、別画面で開くコメントの入力画面をCSSを使って自分の好きなようにデザインすることも出来ます。
但し、このシステムのデザイン変更（CSS編集）は難解で、私には手に負えないというのが正直なところです。
実際、自分ではまともな記述が出来なかったため 「ブログパーツをさがせ」様のsatokotoさんが公開して下さっているCSSファイルをダウンロードして、その中を修正しながら使っているというのが現状です。
なので今回、satokotoさんのCSSを参考にさせていただいて私が理解できた範囲のCSSの該当箇所を書いていきますが、 この内容についてのお問い合わせにはお答えできないことをあらかじめご了承下さい。
（自分でも一箇所ずつ直しながら「ここがこれに対応するのか」と確認している状態ですので^^;）
また、「ブログパーツをさがせ」様でも「 （ダウンロードしたCSSの内容については）サポート外」と明記されていますので、その点も充分理解した上でご利用下さい。
※「chobi（ちょび）」のマニュアルページは下記になりますので、詳細の確認やお問い合わせはこちらにお願いします。
■chobiマニュアル

1. CSSファイルを準備する。
   ※「ブログパーツをさがせ」様のCSSファイルはこのページでダウンロード出来ます。
2. CSSファイルの内容を書き換える。
   ※そのまま利用してもOKです。
3. CSSファイルをココログにアップロードする。
   ※アップロードの方法は別ページ、
   ■ 『基本1：ファイルのアップロード』
   を参照して下さい。
4. 【基本設定】で書いた手順で管理画面にログインする。
5. 「スタイル」で『CSSを指定』を選択する。
6. 「スタイル」の下にある空欄に、 上記でアップロードしたCSSファイルの保存先urlを入力する。
7. 「変更」ボタンを押す。

CSSが正しく記述されていればこれで反映するはずです。
思った通りの結果にならない場合は、上記の2.以降を繰り返して下さい。

■各セレクタに対応している部分は次の通りです
※私がはっきり判る部分のみ書いてあります。
※これ以外は各自でご確認下さい。

• html ： スクロールバー
• body ： 全体の背景
• a ： リンク部分
• h1,h2,h3 ： 見出し
• #advertise ： 広告
• #form ： コメント記入欄の背景
• .commentBody ： 投稿されたコメント欄

■ヒント

• このブログの入力画面では3箇所画像を設定していますが、それぞれ「body」、「#form」、「.commentBody 」 の部分です。
• カラーコードが入力されている部分は何らかの形で色の指定がされているので（当たり前ですね（笑））、 そこを少しずつ変えていくと 「どこがどこに対応しているか」判ってくると思います。

• 「ブログパーツをさがせ」 様ではその他にもいろいろな掲示板が紹介されていますので、お好みに合わせて選んでみて下さい。
  ※カテゴリで「掲示板・チャット」に分類されています。
  ※設定方法は確認していませんが、タグが提供されるタイプのものならマイリストへの入力で大抵はOKだと思います。
• 特に内容をサイドバーへ表示することにこだわらないのであれば、通常のレンタル掲示板を借りてそのアドレスへのリンクのみサイドバーに表示しておく、 という方法もあります。
• また、自分のブログの中に掲示板用の記事を一つ作って、 そのコメント欄を利用して書き込んでもらうという方法も手軽ですね。
  ※この方法だとココログの「コメント通知」が使えますので管理しやすいと思います。

■素材サイト 「PRISM」様＜記事内のボタン素材＞
■「chobi（ちょび）」様
■「ブログパーツをさがせ」様

---

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

---

第14回：カレンダーの投稿した日付に色を付けてみよう

記事を投稿した日付のカレンダーにはリンクが張られますが、CSSでもう一工夫してその日付に色が付くようにしてみましょう。

1. 「管理トップページ」→「ブログ」タブ→（便利メニューから）「デザインの編集」→「カスタムCSSを編集」
   ※「カスタムCSSを編集」は、リッチテンプレート適用時には利用できません。
   ※CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください。
   ※カスタムテンプレートの作り方は下記の記事を参照して下さい。
   ■第3回： カスタムテンプレートを作ってみよう
2. 「編集」画面のCSS記述欄に
   
   #calendar a {
     background-color:#●●●●●●;
   width: 20px; line-height: 20px;
     display: block; margin: 0 auto;
   }
   
   を全て半角英数で記述する。
   ※●●●●●●にはその色を指定する6桁のカラーコードを代入します。
   ※カラーコードについては こちらを参照して下さい。
3. 「変更を保存」ボタンを押す。
   ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
7. イメージ通りに出来ているかどうか確認する。

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

←こんな感じになればOKです。

• カレンダーの数字が見えるように、指定する色は「薄すぎるかな？」くらいに薄い色を選択したほうがキレイに出来ると思います。

■素材サイト 「PRISM」様

---

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

---

第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」様の 『サイドバー折り畳み２：動作遅延対策』を参照して下さい。
• 設置するためのリストを作成する場合、既に何らかのスクリプトを一番下に置いているなら、 新しくリストを作成せずに既にあるリストに項目を追加する形で置いた方がサイドバーの表示がスッキリすると思います。
  ※使い勝手の問題もありますので、その辺はお好みで。
• 折り畳みボタンのカスタマイズについては「KOROPPYの本棚」 様内の記事 『折りたたみボタンの色を開閉で変える』に詳しく書かれています。
  参考にして下さい。

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

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

---

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

---

第10回：サイドバーのタイトルにワンポイント画像をつけてみよう

サイドバータイトルの行頭にワンポイントになる画像を設置してみましょう。

←こんな感じになります。

【'07/01/28】
【応用編】として「記事のタイトルへワンポイントを付けてみよう」を追記しました。

画像を入手する

ワンポイント用の画像を準備します。
ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
但し、素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。

大きさは縦横とも20px以内くらいのものがちょうどいいと思います。

私は「Simple Life」 さんでお借りした素材（18px * 18px）を使いました。

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

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

CSSを編集する

1. 上記の5.で表示されている画像のリンクを開く。
2. ブラウザのアドレスバーにそのファイルの保存先のurl（http://～）が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
   ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
3. 「管理トップページ」→「ブログ」タブ→（便利メニューから）「デザインの編集」→「カスタムCSSを編集」
   ※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。
   ※CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください。
   ※カスタムテンプレートの作り方はこちらを参照して下さい。
4. 「編集」画面のCSS記述欄に
   
   .sidebar h2
   {
   background-image:url(●●●);
   background-repeat:no-repeat;
   height:■px;
   padding-left:▲px;
   }
   
   を全て半角英数で記述する。
   ※●●●には上記で保存した画像のURL、■、 ▲には画像の大きさに合わせて数値を入力して下さい。（■は高さ、▲は幅）
5. 「変更を保存」ボタンを押す。
   ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
9. イメージ通りに出来ているかどうか確認する。

と、ここまででもいいのですが、カレンダーを表示している人はもうひと手間頑張ってみましょう。
上記で指定した「.sidebar h2」は「サイドバーのタイトル」を指定する要素なのですが、カレンダーのタイトルはこれとは別の要素を持っているためこれだけではカレンダーだけワンポイントが付きません。
そこでカレンダーのタイトルを指定する「#calendar caption」 にも上記と同じプロパティと値を記述します。

#calendar caption
{
background-image:url(●●●);
background-repeat:no-repeat;
height:■px;
padding-left:▲px;
}

これを「CSS記述欄」に同じように入力して、保存すればカレンダータイトルにも同じワンポイントが表示されます。
※保存については上記の5.以降と同様に処理してください。

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

【'06/10/01追記】
ココログのユーザー助け合い掲示板『みんなで解決！広場』にて、サイドバーのタイトルに別々の画像を表示する方法が回答として投稿されました。
更にカズタマイズしたい！という場合は下記を参考にチャレンジしてみて下さい。
■1789． サイドバーの項目に別々の画像をつけたい
私もそのうちやってみるかも。（未定ですが^^;）
【'07/02/19追記】
フリープランの場合、「マイリスト」タイトルにHTMLタグを入力してもタグとして認識されないため上記のカスタマイズは出来ないようです。
確認もせずに掲載してしまい申し訳ありませんでした。
（ベーシック以上の有料プランなら設定可能です）

応用編：記事のタイトルにワンポイントを付けてみよう

記事のタイトル欄にワンポイントを付けたい場合は、上記の【CSSを編集する】の4.で記述したCSSのセレクタを変更して

.content h3
{
background-image:url(●●●);
background-repeat:no-repeat;
height:■px;
padding-left:▲px;
}

としてみて下さい。

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

■ワンポイント画像は素材サイト「Simple Life」 様からいただきました。
■記事中のボタン素材は素材サイト 「PRISM」様 から頂きました。

---

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

---

第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」様（記事中のボタン素材を頂きました）

---

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

---