サイドバーの項目タイトルに画像アイコン

　　　　　　　　　　
  何らひねりのないタイトルだが、ココログフリーのサイドバーに、このページのような感じで、項目タイトルの先頭にアイコンを貼る。

　注）デフォルトテンプレートのみ。リッチデザインテンプレートでは出来ない。

  １．素材サイトからgif画像をダウンロードする。
  この際気を付けることは、あまり大き過ぎないものを選ぶこと。

　自分のブログのサイドバー背景色が、白でない場合は透過処理してある画像を選ぶこと。

  PCの判りやすいところに保存すること。
  判りにくいタイトルになっていたら、あとで見た時に判別出来るようタイトルを変えておいてもよい。
　ただし英数字で！

　画像のアップロードに関しては『画像を縮小してからアップする話』で説明しているので、そちらを参考に。

　たとえば私は今回、700㎞さんからお借りした画像にicon-enpituとした。ベタなローマ字読みだが、判りやすいから。

  ２．画像をアップロード。
  コントロールパネル→ファイル→新規にアップロード先のファイルを作っておくと、以後に画像をアップロードする場所が一つにまとまるので、便利！。
　例えば、「image」というように。ここも英数字のみ。
　
  ファイルが出来たら、その文字をクリック。新規に画像をアップロードする。

３．アップロードした、今回の例ならaicon-enpitu.txt の文字の右並びにあるリンクのボタンをクリック。
  別窓にあるソースの中から、“http: から gif”までをコピーして、閉じる。

  ４．ブログ→デザイン→  カスタムテンプレート→カスタムCSS編集の順にクリック。

  ５．カスタムCSS編集のボックスの中に、以下の記述をする。

.sidebar h2 {
background: url("●●●") left no-repeat;
padding: 10px 0px 10px 28px;}

　上記のpaddingは、このページでの任意な数字。
　自分のブログでは画像に合わせる。
  ●●●の所に、先程コピーした画像のアドレスを貼りつける。
  確認画面で、どんなもんだか見てみよう。

  ６．画像がきちんと表示されていなかったら、左図のような原因があげられる。
  paddingを追加して調節し、もう一度確認画面でみてみる。（カスタムCSS編集画面は全て、半角英数字）

  ７．出来ていたら、保存→反映して終了♪
 
  ◆項目タイトル文字の縦幅より画像が小さ過ぎると、左上によってしまう場合がある。
　素材サイトから入手する画像には余白がないからだ。
  OSがWindowsならペイントソフトを使って、画像の上に少し余白を作ってから、アップロードする。

  ◆ペイントでの編集（Windows）

　スタート→すべてのプログラム→アクセサリ→ペイントで起動させる。

　　名前を付けて保存→終了。
　後は、２．の画像をアップロードへ進む。

　素材サイト・700kmさん。blue-greenさん。
　

サイドバーでココログアフィリエイト

　　　　　　

　ココログアフィリエイトの画像は、私にとって商売の要素はあまり無い。それより“こんな感じの物だよ～”という、一目瞭然的な意味合いが強い。

  そりゃあ、購入されるに越したことはないが…。（特にブログ関連の本は、一冊もっておけば「みんなで解決！広場」あたりでウロウロする事が、格段に減ると思う）

  それは置いといて…多少ココログアフィリエイト本来の使用目的からは逸脱するが、その気はなくてもやり方は覚えておくと、後々マイリストの応用に使えるので、私としては、まだアクセス数の少ない初心者には、アクセスカウンターを設置するより前に、こちらの方法を覚えることをお薦めする！（コピペだけで貼り付けられるカウンターに好みの素材があるならいいんだけど）
 
  まず、これから先の事も考えて、
覚えたほうがいいタグがいくつある。
  「タグって何ですか～？」という人には、ブログを作る上で必要な“暗号”みたいなモノ、とだけ要約しておく（かなり大雑把だけど）
 

  <a href="●●●"></a>

  ↑これがリンクタグ。
  ●●●の所に、リンク先のurlアドレスを書き込む。

  <img src="▲▲▲" boder="0" alt="◆◆◆">

  ↑画像関係のタグ。
  ▲▲▲は、画像の場所を示すURLアドレスを書き込む所。
  boder="0"　は画像の周りに枠線を表示したくない時に書き込む。
  alt="◆◆◆"　  これは閲覧者のブラウザが画像を表示出来ない環境の時に◆◆◆の所に入れた文字が代わりに表示されるタグ。

  あるいは画像の上にアイコンを置くと表れる文字。（ココログアフィリエイトには殆ど、boder="0"と　alt="◆◆◆"が含まれている。） 
　これらの文字列はブログを作っていると、頻繁に出てくる。
他にも width="幅" や height="高さ"　等があるので覚えておこう！

  例えば、こんな時！
　素材サイトさんやランキングサイト等で、バナーを貼ってくださいと指示があった場合。

　どのサイトもコピー＆ペーストだけで済むようにしてくれているとは限らない。「リンク用のURLは、コチラ」と明記してあるだけの場合には、自分で記述しなくてはならないのだ。
　その時に必要になってくるのが、これらのタグである。
　（バナーについては、初めてのココログフリー・カスタマイズさんの「第２回：バナーを張ってみよう」を参照）

  では、本題！
 
　１.記事作成画面にある“アフィリエイト”のアイコンをクリック。

  ２.別窓が左上に表示される。その中から自分のアフィリエイト商品を検索する。 （今回は本を選択）

  ３.縦にいくつもの表示パターンが並んでいるのでスクロールして選択する。
　テキスト（文字の）表示のないパターン（大小二種類ある）を選び、「リンク挿入」ボタンをクリックする。
  テキスト表示のあるものは、本文中なら問題ないがサイドバーではＮＧ！

　サイドバーでは、テキスト（文章）の途中に改行タグを挟まないと、文字が切れてしまうので、初心者は画像だけを選択するのが最初の一歩！

  ４.本文の中にアフィリエイト画像が表示されているのを確認。アフィリエイトボタンよりも右側に「HTML編集」の文字がある。
クリックしてHTML表示にする。

  ５.そこには、何やら得体の知れない文字が並んでる。
その中には先程書いたタグもあるのが分かるだろうか？
全部をコピーする。
  この記事は、ここで終了。保存しなくてよい。（不安な場合はメモ帳などに貼り付けておくと安心）

　６.マイリスト画面へ。
   リストの種類を選んで新規作成する。今回は本以外の場合を踏まえて、メモリストで説明。
  本リストには、書名・著者名・評価、等も記述するスペースがある。書名・著者名は、それ以外の文章でも問題ないので、「はっさくのカスタマイズ･メモ」では本の内容を説明している。左サイドバーの「blog作りで参考にした本」が、その例。

  ７.　“リストの名前”は「最近の記事」や「バックナンバー」「カテゴリー」と同じ項目タイトルにあたるので、タイトルに文字を入れたくない場合は、スペースを入れておく。ただし、タイトル分の隙間が出来るけど。

  ８.リストの新規作成をクリック

　９.新しく出来たリスト（ここでは紹介した本）のタイトルをクリック→“このリストをウェブログまたはプロフィールページで表示する”をクリック→チェックを入れて、変更を保存をクリック→閉じる。

  10.項目の追加をクリック。
  ラベルには文章を書き込めるので、著者名や説明文を入れる。入れたくない場合は、スペースを！

  11.その下にある広いスペースに、記事作成画面でコピーした暗号の様なもの（HTML）を張り付ける！

　１２.追加をクリック。  変更を保存して、設定画面に切り替える。

  13.設定タブをクリックし、リストの説明（オプション）に、このリストが何であるかを明記する。
　特に、リスト名やラベルをスペースにした場合は、ここだけが内容の確認できる唯一の場所になるので、必ず書き込もう！

  ブログには反映されないので、何を書いても大丈夫。
  変更を保存する。 
  これでココログアフィリエイトが完成である♪

  マイリストの表示／非表示は
デザイン→テーマの変更→表示項目の変更→マイリストの中にチェックを入れる（この時、タイトルをスペースにした場合は、“メモ”としか表示されていないので一度チェックを入れて確認画面で調べる事になる。

　長かったけど、これを覚えておけば貼り付ける要領は
皆同じ事が、回数を重ねる毎に分かるようになると思うので、
頑張れ～！
　しかし、文章にすると長いな…。


  ◇ 初めてのココログフリー・カスタマイズ　さん。

サイドバーの整理整頓にドップリ！

　サイドバーのレイアウトやカラーコーディネートが今一つしっくり来なくて、チマチマいじっているうちに、肝心の記事作成が疎かになってしまっていた。

　どこがと言ってハッキリしないが、どうも落ち着かない。
　一つ編集できると、う～む、こっちもどうにかならないのかと、他の所に手を付けるという悪循環に陥っているようだ。
どこにも出口がないんじゃないのか？という気もしてきた…。
飽きっぽいんだから、どうせ直ぐ変えたくなるに決まっている。
　
　でも、人から見ればどうでもイイ、このサイドバーが気になって、本文に集中できない日々が続いていた。　すがる思いで、
｢ＫＯＲＯＰＰＹの本棚」さんにアドバイスをいただいた。(…半分以上は迷惑をかけ）

　気になっていたのは、サイドバー項目タイトルにつけたアイコンで、マイリストに貼り付けたリンクのバナーにまでくっついて来た。マイリストにいろんな物をはりつけようと、もくろんでいたのに、全部に付いてくると画面がうっとうしくなる。邪魔くさいのだ！

　素人とは恐いもんで、「マイリストのアイコンは個別には無くならないかなぁ～」と、あくまで見た目重視の横車を、へ～きで押そうとするのだ。　

　ＫＯＲＯＰＰＹさんの分かりやすい説明に、なるほどなるほどと、すっかり分かった気になって、ＣＳＳの編集画面を開いてみた。

　が…、私は今迄にHTMLの方をいじった事がなかったっ！（CSSだけで）　　ふたを開けてみれば、一番最初に書いた記事の分だけで、アイコンどころかメモリストのラベルさえ見つからない…。
　フリーだからなのか、私だけなのか、確認画面でソースを開いて追加するものなのか、書き込む内容は教えてもらって分かっているのに、書く場所が無い！　だからいつも、編集するたびに一番最初の記事が確認画面に載っているのだろうか。

　アレコレいじった挙句に、メモリストを見直してみた。
　みれば、バナーのタグをメモ欄ではなくラベルに貼り付けていた。　コレでも今迄ちゃんと表示されていたのは、一体…。　それでも問題ないかもしれないが、ここは一旦きちんとメモ欄に貼りなおして仕切り直しをする事に！　ラベルにはスペースだけを入れた。

　ありゃ～？

　反映して、確認してみるとアイコンが下半分消えていたっ！　
　　　　　　　ということはぁ、ここには確かラベルに入れたスペースの部分が………つまりぃ？？？、試しに　Sidebar h2　の padding の上を 0px にしてみた。

　見事に消えた！

　不幸中の幸いか、怪我の功名か、棚からボタ餅…？
　とにかく消えた事に違いはない。　恐る恐るクリックしていたくせに、そんな事はスッカリ忘れてご満悦である！
　ひとえに「ＫＯＲＯＰＰＹの本棚」のおかげです、ありがとう！

　しかしコレで本質的な問題解決とはいえない気がする。　本来は、ちゃんとHTML中の消したいタイトルを div タグで囲む方がいいわけだから、出来るならそのやり方をマスターしたい。

　でも、こんなに手間取っていると、コメント欄のレイアウトをカスタマイズするなんて…それこそ生きている内に出来たら儲けモンかもしれない。

　今日の成果、メモリストの余計なアイコンをやっつける。　それと、ペッタンコになりそうな尻っ！　（ここは減らなくていいんだけどなぁ）　

　　　【追記　２００６．６．１１】
　正しいアイコンの貼り付け方を記事にしました。
『サイドバーの項目タイトルに画像アイコン』
　注）　残念ながら、個別には消せません。