久しぶりの更新っ！

　更新しないと削除される！？
久しぶり（遅過ぎっ）にtakoさんの「初めてのココログ・カスタマイズ」を拝見してビックリした。
（なんで人のブログを観ないと気付かない?!）

　ココログフリーでは一年間更新しないと、ブログが削除される事になったらしい…。

　偶然発見しなかったら（失礼…）削除されていたかもしれない程、何ヶ月も放置していた。危ない、危ない！

　そもそも、テンプレートが崩れ（未だ改善されずに）ついでにディスプレーもいかれて、どこから手をつけていいやら分からずにどんどんモチベーションが下がっていったのが、放置の原因なのだが。
　最近になってやっとノートPCを購入して、さて再開と意気込んでみたら、驚愕！
　IEなのにテンプレートが（メニューバーの部分が）
崩れているではないかぁぁ！

　私のデスクトップPCはIE6、ノートPCはIE7。
　調べてみたらIE7では、それ以前のバージョンでのバグを修正していたからだった。
　やっと、修正してホッとした所でFirefoxをインストールしてみた。
　ああ…、また。
　Firefoxに至ってはメニューバーの画像はおろか、
文字も縦に並んでサイドバーに食い込んでいたのだ。

　要するにIEがそうとう大雑把に出来ているらしい。
だからアバウトなCSSの記述でも「大体こんなもんだろう」と表示してくれていた。

　しかし、Firefoxや他のブラウザでは几帳面に順序正しく記述しないと、受け付けてはくれないのである。

　例えば、floatプロパティを私は画像のアドレスより前に記述していた…。(今思えば、すごくテキトウ…)それを最後に持って来たら画像が表示されて、横並びにもなった。
　つまり ｛  と、 ｝ の間ならどこでも良いわけではなく、色の指定や、背景画像の指定や、positionプロパティの指定は順序良く並べないと受け付けてはくれない仕組みになっているのである。

　これが本来の姿であって「いいよ～、どこでも」なIEがチャランポランなのだ！

　WEBデザインの会社に勤務する友人に訊けば、FirefoxやOpera等のブラウザで動作確認するのが基本だそうだ。そうしておいて、IEで崩れないようにIE用の修正ソース（ハックというらしい）を記述するという。

　それでも、主要シェアはIEなのでIEでちゃんと観えないと困る。IE6とIE7でも違ってしまうので、記述を直す度にFirefoxで見てIE7で見てIE6でも確認する、という作業が面倒くさくてならない。

　とりあえず、最新バージョンのIE7ではIE6よりバグを修正しているらしいので、みんなが自動更新でIE7にバージョンアップしてくれたら、いずれIE6でチェックしなくてすむ日が来るだろう、と自分を慰めてみた。

　私としてはこういうサイドメニュー的な問題は早いこと解決して、このブログで「こんなことやりたい」「あんなこと書きたい」と思いついた事に、一日も早く着手出来るよう（…その前に削除されないように）コツコツと地味～に続けていきたい。出来るのかっ！？

ココログから返事が来た

長い事ほったらかしていた、本文の罫線の不具合についてココログサポートから次のようなメールが届いていた。

　平素はココログをご利用いただきありがとうございます。
　ココログサポート窓口　田村です。

　はじめに、対応までにお時間を要し、回答まで大変お待たせしたことをお詫び申し上げます。

　お問い合わせいただいた件について回答いたします。

　ご連絡いただいたココログのレイアウトが崩れる症状については、弊社で確認のうえ、 7月31日に実施したココログのメンテナンスにより修正を行なわせていただきました。

　はっさく様の環境からでは現在状況はいかがでしょうか。もし、現在も症状が発生している場合、症状の詳細についてご記入のうえ、お知らせくださいますようお願いします。

　現在私のパソコンが不調な為に、あまりパソコンの前に座る機会が無かったので、つい見逃していたのだが、前回のメンテナンスの際にちゃっかり修正していたらしい。

　この件で最初にココログにメールをしたのは…４月で、かれこれ４ヶ月 も経っているが、いつかは必ずや連絡がくるだろうと思っていたので、比較的のんびりと構えていた。

　ココログとのやりとりは以下に記述しておくが、かなりはっさく流に要約しているので、細かい言葉尻に引っかからないように。
　まぁ、大体こんな感じのやりとりがあったのである。

［はっさく］　本文の罫線が消えてしまう、と問い合わせ。
［サポート・五戸］　カスタマイズしているテンプレートのサポートは致しかねるとの回答。

［はっさく］　CSS編集画面ではなく、テーマの変更から設定したが、罫線が正常に表示されない、と問い合わせ。
［サポート・五戸］　当窓口で確認したが正常。カスタマイズされていないカスタム・テンプレートでご確認ください、との回答。

［はっさく］　指示に従いデフォルトのカスタム・テンプレートで試してみたが、やはり同じ不具合発生中。IE6とSｌｅｉｐｎｉｒで確認。
［サポート・川村］　ＦｉｒｅｆｏｘとOperaでは正常、IE６とＳｌｅｉｐｎｉｒで不具合を確認。ｃｓｓの記述が影響を及ぼしている可能性もあるので確認を、との回答。

［はっさく］　だからっ、デフォルトの（つまりｃｓｓの記述のないテンプレート）でもダメなんだってば！…例えば、マイリストは関係ある？という内容を丁寧な言葉に変換して、問い合わせ。（←この辺から切れ掛かっている）
［サポート・川村］　マイリストが原因である可能性も考えられるので、原因をつきとめる為にマイリストを１つずつ非表示にして確認を、との回答。

［はっさく］　やっぱりダメみたい…の報告。
［サポート・大金］　確認しますのでしばらく時間ください、との回答。

［はっさく］　どの記事だとテンプレートが崩れるか各カテゴリーごとに確認して、ココログに報告。
［サポート・佐々木］　引き続き確認作業中です。しばらくお待ちください。

［はっさく］　閲覧者の方から、カスタムｃｓｓ編集でコメント欄の横幅を狭めると改善されるとの情報をいただきココログへ報告。ただし当ブログでは、これはココログ側で初期設定を直すべきと考え現状のテンプレートを維持。
［サポート・岡］　情報有難うございます。参考の上継続して確認させていただきます。結果が出るまでお待ちください。

………と、この５月６日の回答を最後に連絡が途絶えた。

　そして８月６日に、やっと上記のようなメールが着たのである。
ココログの「しばらく」は、“数ヶ月”であると心得よう、という教訓記事になってしまったけど、　少なくとも私のパソコンが原因ではないと分かったし、サーバー側のミスも直った事だし、まぁ一件落着って事で手打ちにしよう。

　以前にも別件で約二ヶ月後に回答が着いた経験があり、遅くはなるけど必ず何かしらの回答をくれるだろうと、半ば強引な自信と信頼を寄せていたので、「あぁ、一見忘れているようで、やっぱり憶えていてくれたのね」と、最近音信不通になっていた友達から久々にメールが来たような感じ。

という訳で、私より先に気付いた人もいるだろうが、本文の横幅を500pxに設定していて、罫線で囲んで右側の線が消えていた人、もう直っている筈である。　かりに、CSS編集の記述で応急処置していたなら、その記述は削除して大丈夫。

めでたし、めでたし！

【２００．０８．１９　追記】

　「カスタマイズ」のカテゴリーだけ、
まだ不具合が残っているではないかっ!!
はぁ～。

本文右側がはみ出す不具合をカスタムCSS編集で直す

  以前から記事本文右側の罫線が消える不具合(つまりはみだしてしまうんだけど)を、ココログへ問い合わせていたものの、明確な回答の無いまま一ヶ月がたってしまった…。

  忘れているんだか、面倒くさいので避けてるんだか、直せないんだか知らないが、連絡がない。

  この不具合、ユーザー側がちょっとCSS編集に記述すれば解決出来るのは、わかっているのだけど、「本文を500pxにして罫線で囲む場合は、自分で直して下さい」って仕様は、どうなんだろう?!と思っている。

　ので、是非デフォルトで調整してもらいたく、未だ現状を維持しているのだが、いくら呑気な私でもそろそろ限界が近づいて来ている。

  私だけならともかく、他のユーザーの方でも同じ不具合が発生しているらしい。
　そういう方でサッサと直してしまいたいという場合は、CSS編集画面に以下の記述を追加すると改善されるので、参考にしてとっとと直してしまおう！

textarea#comment-text { width :450px; }

　（450pxはこの位なら大丈夫、という数値なので変更が可能）　

ちなみに、本文が400px（推奨）のテンプレートなら大丈夫なようだ。

カンタンな壁紙背景を作った

  調子に乗って、シンプルな壁紙を作ってみた。
  これなら絵心は無くても、誰にでも出来るじゃないか、と思ったので画像編集ソフトで(ペイントでも可能)作る時のコツを紹介！

  画像は小さければ小さい程、軽くなっていいのだが、作業中は拡大して作るので、あまり小さいのも見づらいので、今回は「32pxの大きさに、4pxの正方形のドット」という画像を作る。(作業中は拡大して)

1. 32pxの新規画面を作成したら、すきな色にペイントツールで塗り潰す。(大抵のソフトではバケツのアイコン)
2. 新規レイヤーを１の上に置き、四角い選択ツールで4pxの正方形を作り、選択範囲内を好きな色で塗り潰す。
   　このレイヤーの複製をもう一つ作っておく。
   
3. 4pxの２つのレイヤーを下の図の場所に置く。
   　※ 下図では分かり易くするために、4px単位で補助の線をいれているが、これは説明用。
   
   　4pxの正方形を動かしたりす刷るので、定規やメモリを表示出来た方が作業がスムーズである。
   　どんな大きさでも、1つのドットの倍数で画像の大きさを決めれば、うまくいく。　
4. 　３つのレイヤーを統合して(レイヤー機能のないソフトではそのまま)、拡張子をgifかjpegで保存する。
5. 作品が出来たら、サーバーにアップローでして、ココログなら
   「コントロールパネル」⇒「ファイル」⇒新規ファイルをアップロードする。
   　画像のURLアドレスを控えておく。（コピー&ペーストでよし）
6. カスタムCSS編集のボックス内に、次の記述をする。

   body {
   background-image:url(ココに画像のURLアドレス);
   background-position: top left;　}

7. 「変更を保存」して「反映」したら、ブログを表示して確認してみて！

　以下に調子に乗りついでに、いくつか壁紙を作ってみたので、
良かったら使ってくだされ。

注）ただし商用/直リンクは不可です。　　　見本はこちらから

　　　　　　 　　 　　 　　 　　 　　
　　　　　
　　　　　　 　　 　　 　　 　　
  　　　　　　（見づらいけど、二段目は丸い水玉の模様）

画像を縮小してアップロード・JTrim編

　以前から聞きかじっていた「JTrim(ジェイトリム)」をダウンロードして、これで画像サイズの縮小をしてみた。

　最近、「JTrim」をはじめ「Windows Live Writhr（β版）」や「Winshot」などフリーウェア（無料）のソフトを立て続けにインストールして、あれもこれもと欲張っているお陰で、どのソフトに関しても“かじった”程度にしかならず、とことん知り尽くす所までは至っていないんだが…。
　そんな触りだけしか分かってない私でも、「JTrim」でココログにアップロードする為に（他のサーバーでも可能）画像を縮小する作業はどうにか、出来る様になった（…つもり）。

  具体的にどうやってアップロードすればいいのか？
  おそらくどの画像編集ソフトも基本的には、する事は同じである。

　初めてチャレンジする人には、コピー(複製画像)で作業する事をオススメする。(万が一の為に…)

  で、大雑把に言えばする事は、次の３つ。

1. 起動して、元画像を開く。
2. ブログに合う(又は好みの大きさに)ピクセル数を変える。
3. 保存して、後はブログにアップロードする。

  これだけで、縮小して軽くなった画像を、余計な負荷なく載せられる。
  これはどの画像編集ソフトでも同じ。
  　開いて→数値を変えて→保存する。
  画像編集ソフトによって、「何処をクリックするか」が違うだけである。そんなに難しい事ではないので、是非覚えておこう！

　　　　　　　　　　　　◆　今回の表示サイズ　◆
　ココログの本文画面が、推奨の「400px」横幅であると仮定して、操作する。
　実際には左右に余白が15pxずつ、合計30pxを差し引いた370pxが最大の横幅になっている。
　つまり、これ以上だとNG！
(500pxでも同じく30pxを差し引いた470pxになる)
　という事で、ポップアップやサムネイルにしない「事前に縮小してアップロードした画像、そのままを表示する」事が今回の目的。

１．JTrimを起動して、必要な画像を開く。
　左上の「ファイル」をクリック　⇒　「開く」をクリック　⇒　開いた別窓から縮小したい画像を選ぶ。

　　　　　　　

２．ピクセル数を変える。
　「イメージ」をクリック　⇒　「リサイズ」をクリックする。
　　　　　　　
　別窓が開くので、まず【縦横の比率を保持する】にチェックが入っているか確認する。
　それから、「サイズで指定する」の下にある“横幅”の数値を変える。
「縦横の比率を保持する」にチェックが入っていれば、“横幅”を変える事で同時に“縦幅”の数値も変わるので、ワザワザ変える必要は無い。　
　　　　　　　 　
　変えたら「OK」ボタンをクリックする。

３．保存。
　「ファイル」をクリック　⇒　「名前をつけて保存」をクリックする。
（元の画像とWeb用の画像とを区別する為）
　必ず小文字の英数字で保存する事。
　　　　　　　

　以上で終了。
後はアップロードするだけである。
（ココログでのアップロードの仕方は使い方ガイドにある）

 

　「JTrim」はデジカメ派にはとっても便利な仕様になっていて、Windows office ツールにある常駐ソフト「Microsoft Office Picture Manager」よりシンプルで軽く、「ペイント」よりいろんな事が出来るソフトである。

　ただし、イラスト等のデザインをしようとすると「Photoshop」や「GINP」程の性能は求められないようだ。
　何しろ“レイヤー”が無い…。
　と言う事は、画像を直に加工する事になってしまうのだ。

　デザインに使うソフトには、たいがい「レイヤー」という機能が存在している。
　元画像の上に透明のフィルターのようなモノを乗せて、そこに文字を入れたり色を重ねたりする、アニメのセルに似たようなもの、これを「レイヤー」という。これだと、仮に失敗してもそのレイヤーだけをやり直したり削除するだけで、元画像は無傷である。
　「JTrim」にはそのような機能が見当たらない（まだ知らないだけかも）。
　あと、同時にいくつもの画像が編集できなくて困った…。
　ペンやブラシのツールが見当たらない。
　移動するアイコンは無く、移動する時の動作やキャンパスのサイズ変更が、何やらめんどうである。
　など、欠点はいろいろあるが、これ等は使い慣れてないせいかも知れず、取りあえずは写真を縮小するだけという人には、充分な機能を備えた優れもの！

「JTrim」のサイトはこちらから

解像度とピクセル（改正版）

  ココログを始めてまだ間もない人が、デジカメ写真をココログに載せようとして引っ掛かってしまうのが、 「画像が大きくなり過ぎて困る」 のようだ。

　以前に記事にしたのだけれど、自分で振り返るとなんだか稚拙な感じがして、痛い！

  今回ちょっと改正版を作ってみたので、デジカメ写真を載せたい人、私のように自前のイラストを載せたい人の、参考になればいいんだが。
　まぁ、あの頃よりは多分マシだと思うので、多分…。

　　　　　　　　　　　　　  【用語の説明】

◆　ピクセル（px）

  画像を作っている、一個の点。
「１px」「2px」と表示。

　ドットという場合もあるが、私は
丸い点がドット、四角くて隙間の無いのがピクセルと認識している。
　一般には「印刷物＝ドット」・「パソコン内＝ピクセル」としているようだ。

ココログ上ではピクセルで通る。

◆　解像度 （dpi）

  １インチ内に何個のピクセル（点）があるかを示す言葉。

「dpi」という単位は「Dot Per Inch」のやく。

　ココログに限らずネット上は全て共通で、 Windows→９６dpi　・　Macintosh （OS ９以下）→７２dpi

◆　画素数

  縦と横の解像度の合計。つまり面積の中の全ピクセル（点）の数。

  見た目じゃ無いのよ、画像は、ハッハ～♪　……ということで。

• 印刷用解像度
• WEB上の解像度
• ディスプレーの解像度

　それぞれ違うという事を知っておこう。

　印刷物とＰＣでは、１個の点（px）の大きさが違うから！

　　 【印刷用の解像度】

　これは面積が決っている所での話と考えると分かりやすい。

  日本全国どこへ行っても写真用紙のサイズは決まっている。
  年賀葉書も、B5のノートも規定がある。

　しかし、印刷するプリンターやデジカメの性能によって、１インチの中にある点(ピクセル)の大きさが変わってしまう。

  つまり、同じ面積の中にある点(px)の数や大きさで、「キメが荒い」 とか「キメが細かい」「高画質」等と言っているわけである。

　下図のように、同じ長さの中に点（px）がいくつあるかで、画質が変わってくる。
　　　　　　　　

　上の10dpiが低解像度で、下の20dpiが高解像度である。

　明らかに下の方が沢山の色を使っていて、細かくて綺麗。

【WEB上の解像度】

こちらは紙媒体と逆に点(px)の大きさに基準がある所での話。
WEB上では、1つの点（px）の大きさが決まっている。
自分の部屋のパソコンも、会社のも、ご近所さんのも、地球の裏側の人のも（Windows同士なら）どのブラウザで見ても同じである。 

  Windowsなら96dpi解像度というように、どのブラウザで見ても同じになるよう規定がある。

  ココログを始めると、カスタム・テーマ→本文画面で、幅400px(推奨)とある。
　　 (リッチテンプレートはない)

  これは400個の点（px）という事。

  つまり決まった大きさの点が、決まった数しか入らないのである。

　　　　

  そこへデジカメからパソコンへ取り込んだものの、縮小せずに数千ピクセルもある画像を載せようとするから 「入らない」現象が起きてしまう。

　これは一見便利なようだが、実はかなりアップロードするのに時間が掛かるはず。
　しかも、そんな高解像度のものを頻繁にアップロードしていたら、容量はあっという間にいっぱいになってしまう。

　やはり画像編集ソフトで縮小してから、アップロードする事を、お勧めするなぁ。

【ディスプレイの解像度】

　友達にメールで画像を送ったら「大き過ぎる」と言われた事ってあるだろうか？

　これはアナタのディスプレイが1280×1024pxで、相手のディスプレイが800×600pxだったから。

　同じ大きさのディスプレイでも、点の数が多ければ一個の点は小さい。

　相手は点の数がすくない分、一個の点が大きい。

　だから大きな画像になってしまったというハプニング。

　メールで画像を送る時は、本文内に貼り付けるのではなく、添付するのがマナー。
　沢山の点（px）を読み込んでいる間、受け取り手は何も作業が出来なくなるから！

　以上のように、それぞれ違いがある事を頭の隅にでもいれておけば、ブログを楽しむのも、もっとラクチンになるはずである。

デジカメ写真のデータのしくみとファイルの扱い
―ここがわからなかった!

高額画像編集ソフトはもういらない？

　ＧＩＭＰ(ギンプ)はフリーウェア（無料）の画像編集ソフトである。
　これがあったら、もうPhotoshopはいらないかも… と見つけた時は嬉しかった！

　まして家庭用として素人サンが、

• デジカメ写真をブログ用に縮小したり、
• 以前に記事にしたタイトルバナーや自作のバナーを作ったり、
• オリジナル年賀状を作ったり、
• 写真に文字を入れて格好よく加工したりするなら、

　ＧＩＭＰで十二分過ぎるくらいだ。

  今まで画像編集ソフトと言えばPhotoshop Elementsを薦めてきたけど、家庭用の安いのなら一万そこそこで買えるし、ネットショップ用写真を綺麗にしたいなら、必須アイテムであったからだ。

  でも、どうやら在庫が無いらしい…。
  アドビストアでは既に売ってないみたいだし。
　最新版のPhotoshop Elements 5.0だと4～5万してしまう。

　専門的なワザの必要な人や、勤め先・クライアントがPhotoshopなので、と言うのでなければGIMPで充分！

　GIMP独自の保存形式（ｘｃｆ）の他に、ｊｐｇやgifはもちろんPhotoshop画像での保存形式（PSD）にも対応しているので、 Photoshopを使っていてGIMPのツールも使ってみたいと
思った人も安心！

  画像編集ソフトと聞くと、拒絶反応を起こす素人サンが多いみたいだが、単なる食わず嫌いじゃないだろうか!?

  使い方を全部知る必要は、まったく無い！

  最初はＧＩＭＰを起動し、画像をブログ用の解像度に変更をして、アップロードする程度の用途でいいと思う。

  ペイントを使っても出来ないことはないが、こちらはパーセントでの縮小になるので、いちいち 「現在の画像だと横幅が1234…ピクセルだから、これを400ピクセルにするには何％だぁ？」と面倒臭いことになる。
  頭の鈍いはっさくには、こっちの方が難しいのだ。

  その内ＧＩＭＰに慣れてきたら、いろんなツールで遊んみるといい。

  たとえば、文字を遊んでみる。
「へぇ～、こんな事になるのか」「おっ、文字がメタリックになっちゃうよ」等というお遊びにふけり、飽きたら消しちゃえばいいである。保存してもいいが…。

  私もまだ余りいじってないので、上級ワザは紹介できないが、とりあえずこんな事なら出来てしまう。↓ 

　　　　

　これはブラシツールというワザで、断っておくがはっさくがピーマンの写真をワザワザ撮ってきたわけじゃない。

　なぜピーマンかは知らないが、ツールボックスの中にこの絵があったので、選択して作成画面上で１～２秒で左クリックボタンを離したら薄く、 ず～と押してたら濃く、なっただけ。

　他の画像もず～と押してるか、すぐ離すかの違いだけで、デザインはデフォルトで用意されているもの。
　簡単すぎ？

　他にもブログで活躍しそうなのが、「ロゴ」という効果。
例えば↓下の作例は、私の操作したものと 「Script-Fu」というツールにある「ロゴ」を使ったもの。
　「ロゴ」は文字を入力して、フォント種類を選んだら後はお任せ。




  フリーウェアの特集を組んでいる雑誌をいくつか読んでみたら、 どの紙面でもPhotoshopの7.0くらいのレベルとみていた。

  ８万はする。

  私がＧＩＭＰに掛けたのは1,500円弱だ。

  え、無料じゃないの？と来るだろうが、もちろんネット上でダウンロードすればタダ！ 
　こちらからどうぞ。 （ただし英語だからネ）

  しかし、ソフトのヘルプだけでは解りにくいので、ハウツウ本を購入してみた。

  これだとＣＤ－ＲＯＭに、最新版のＧＩＭＰ2.2と作例の手順が収録されているし、本には各ツールの使い方が細かく説明されているので便利！

  いくつかＧＩＭＰ本は出ているが、 「ＧＩＭＰの教科書」が、
お薦めかな。

  Photoshop張りの分厚い本もあったが、
最初はそんなにいらないでしょ。

  「ＧＩＭＰの教科書」はゆる～いイラストも、
妙に笑えて面白い。

　例えば「選択範囲を理解しよう」というページ。
イラストでは女の子が赤いビキニ（下着？）で、 Gパンを干している！
「センタク」って………。
「要らない部分を消したい」では、足の無駄毛をっ！
ふふふ、もう教えない～♪　

 

GIMPの教科書。
長谷川 アンナ

GIMPですぐデキる!フォトレタッチスーパーテクニック2007
Windows100

WEBセーフカラーは気にすべき？

　自分でテンプレートをカスタマイズしようとする際に、 216色のwebセーフカラーを選択すべきなのだろうか？

　直球で言うと、216色？そんなもん気にせんで、いいらしいぞ～！
　というのが私の結論である。

　Webセーフカラーって、一体…?!
　という人でも、記事を作成する画面のツールバーに 「Ａ」 の文字がある事、カラーパレットから色を選べる事、なら知っているだろうと思う。

　これがWebセーフカラーで、一応、どんなPC環境でも、同じ色が表示される、全216色。
　という事になっているが… 。

　つまり、この中から選べば、私のPCでもあなたのPCでも同じ色に見えるのよ～、のハズ！ の色だ。

　かねてから気になっていた事に…、他のモニターではどう映っているのだろうか？、という疑問があった。

　よくパソコン雑誌の新機種比較の記事を見ると、 Windowsだけでもメーカーによって明るいとか、ちょっと暗いとかの多少の差がある上に、 MacintoshはWindowsより明るいときている。 （私はWindowsなので、 Macintoshは白っぽく色がとんじゃっているように感じるが… )

　逆を返せば、 Macintoshでデザインしたもの(または画質調整した写真とか)を、 Windowsのモニターでみると暗い、ということになる。

　詳しく話すと「ガンマ値」とか、 Macintoshでは標準装備だが、 WindowsではPhotshopなどのグラフィックソフトを用いて補正するとか、 一般ユーザーは補正をいていない人がほとんど、など難しい用語が出てくるので、はぶく。

　そうかぁ、 WindowsとMacintoshでは、色が違うんだー、と覚えておけばよしとしよう。

　◆　ＲＧＢ値

　　まず、これから。 「効果的に伝えるWeb配色標準デザインガイド」 から抜粋。

コンピュータのディスプレイは光りの三原色と呼ばれる
R（赤）・G（緑）・B（青）の光りを混ぜ合わせ、その比率により色を決定していく事ができます。
　初期のコンピュータは白と黒や８色程度の表示しか出来ませんでしたが、 現在では殆どのコンピュータがRGBのそれぞれを２５６段階で変更できるようになっています。
　つまり、２５６の3乗、 16,777,216色を表示する事が可能です。それぞれ２５５が最も明るく、 0だと光りが点灯していない状態となります。

というわけで、合計16,777,216色の表示が可能。
　でも、これ。あくまで“可能”。

　ユーザーのPC環境によるからだそうだ。

　人によって、 256色(8bit)・ 65,536色(16bit)・ 16,777,216色(24bit)とモニターのカラーモードが違うらしい。
　ちなみに私のPCは、32bitになっている。

　≪自分のは？≫
　Windows XPでの操作しかわからないが、モニターの何も無いところで、 「右クリック」→ 「画面のプロパティ」のウインドウが現れる。
　「設定」タブをクリック→ 「画面の色」の箇所で確認できる。 　（他のOSでも、画面の設定や確認をする操作があるはず）

　で、なぜ“可能” の域をでないのか？

　どんなに沢山の色を駆使して、かっこよくデザインしても、 見る側の環境が「256色しかない」のであれば、代わりの色に置き換えられてしまう、からである。

　特に、グラデーションを使ってあると、徐々にぼかした筈の箇所が、階段状に色分けされたりする。

　◆　16進数

　CSS編集を出来る人ならみたことのある、＃ ○○○○○○　という色の指定をする英数字。

　　ココログだけどCSS編集を知らな～い、って人でも、 文字の色を変えたい時に、数色のカラーパレットが並ぶ右横に、得体の知れない英数字が並んでいるのを見たはず。

　ＨＴＭＬでの色の指定は、この16進数で表される。
０～２５５の色を00～FFの英数字で、赤を2桁・緑を2桁・ 青を2桁、の6桁で表示する。

　ということで、この英数字を指定する事で、本文のフォントや枠線の色を決めるのである。

　だから、あのカラーパレットに無い色でも、 この英数字を直接変えれば、好みの色に変えられる！

　ココログを始める時、一番引っかかりやすいのがここかも知れない。
　私などカラーパレットの中に選びたい色がなくて、自分の思い描くテンプレートに出来ないと、ずいぶん頭を悩ませていた。
　今となっては笑い話。

　色見本は、大概のHTMLやCSSの本に載っている。
　以前紹介した 「HTMLタグ辞典」 や 「スタイルシートデザインレシピ」 にも載っている。

　＃○○　○○　○○
　　↑　　　↑　　　↑ 　　
　　　 Ｒ　　　Ｇ　　　Ｂ　
　　 （赤）　（緑）　 （青）

　HTMLはこの６桁の数値で表記する事になっている。

　だから、あの横並びのパレットに無い色でも、この数字を当てはめれば、好みの色は表示される。

これ以外にも色の名前で指定する事が出来る方法もある。

　　font-color：Blue;　←　のように。
　ブラウザによりけりなのでお勧めできないけど。

　◆　Webセーフカラー

　どのメーカーのモニターでも、 OSでもブラウザでも、「赤」なら同じ「赤」が表示されるはずの、この216色。

　8bitのカラーモードが256色なのは、 このセーフカラー216色＋OSのシステムカラー40色。

　だが、 16bitのカラーモードでは、違うらしい。

　つまり、８bit以外のカラーモードでの閲覧者には、 こちらが意図した色では伝わらない可能性があるという事。

　問題は、じゃあ８bitのカラーモードで閲覧している人がどれだけいるのか？ 　である。

　各々、自分のブログのアクセス解析で確認できるが、私の場合は、ほぼ居ない…。

　見てない人に合わせていたなんてっ…、なんて事！

そしてもっと“なんて事！”　なのは、この216色すら、実は正確ではないという点！
　改善はされてきているらしいが、「絶対」と断言は出来ないようだ。

　ここまでくると、RGB値とか、 16進数とかが理解できていなくても、 「WEBセーフカラーって、どこがセーフ？」という気になってこないだろうか!?

　という訳で、私個人としてはＷＥＢセーフカラーは、

＊） WindowsとMacintoshでは色が違う事。

＊）一般にはカラー補正を知らない人が殆ど。

＊）３２bit・２４bitのカラーモードで作った画像は、それ以下の低bitのモニターでは他の色に変換されてしまう。

＊）よって、ユーザー側のモニター環境によって、違ってしまう可能性。

　これはオーバーかもしれないが↓↓
色が違うとはこういう事。

　　　　　　　

　この辺の事を頭の隅に入れておいて、
知った上で色の選択をする事にした。

　もし、他のモニターで見た時自分のPCと違って見えても、
違ってしまう色を分かった上で選択するなら、自己責任ってことであきらめもつく。

　このブログの画像も、「補正されてないカラー」で確認しているので、 Windowsの補正したカラーの人には、私より多少赤みがかった画像となっているかもしれないし、 Macintoshの人は、 Windowsの人以上にピンクっぽいかもしれない。

（注）　色が違うといっても、赤が青に変わってしまうわけではないから、ご心配なく。
　「色が違う」というのは、例えば 「黄色よりのオレンジ色にしようとしたら、かなり濃いオレンジになってしまった」というような違いの事。
　

　ただし、WEBデザインの仕事をする場合は、クライアントの環境など、配慮する必要がでてくるだろうが。

効果的に伝えるWeb配色標準デザインガイド
― ユーザビリティ/アクセシビリティ/マーケティングを考慮した
サイトの色彩設計からの配色の実際まで

坂本 邦夫


by G-Tools

HTMLタグ辞典

スタイルシートデザインレシピ

CGIを使ってアクセスカウンターを設置する・第３話（リンク編）

　前回まではブログを開く事はなかったが、
今回でやっと、ログインしてサイドバーに貼り付ける。

　砂漠で蜃気楼に翻弄されながら、彷徨っているような脳みそになっている時に、気休めにしか聞こえないかも知れないが、あと一息である。

　【タグを作成する】

　前回にサーバに転送した状況は、
↓こんな感じ。
　
　　　　《図６》
　CGIの解説をあちこちで見ると、 プロバイダによってCGIの置き場所がかなり異なっているようだ。

　というより@homepageが他とは違っているらしい。
　
　@homepageの説明と、他の説明を読めば読むほど、混乱する。もう止めようかなぁ、という気になったのもこの辺りだ。

　それは置いといて…。

　つまり、他のプロバイダでは全て「homepage」フォルダの中にあるという事らしい。
　「cgi-bin」の置き場所も「homepage」の中だ。

　ところが@homepageの場合は、「cgi-bin」用のフォルダがある。画像もCGIに関連するものは、こちらに置ける。
（ただし、カウンターの左右に画像がある場合、それらは動作がないので、ただの画像として 「homepage」のフォルダに置く）
HPに貼り付ける人は、その辺を踏まえて記述しないといけないので、気をつけて！

１．「ログファイル名｣を決めておく　

　index.datの替わりに自動生成されるログ名を、
次の作業でタグに記述する為。
　複数のブログにカウンターを付ける時、などの目印になるので、自分が見分けられるような名前にしておく。

　例えば、私の場合｢はっさくノート｣だから｢hassaku｣。
もう１つは｢recipe｣としている。

２．TeraPad(メモ帳)を開いてHTMLタグを書き込む

<a href="http://hpcgi■.nifty.com/★★★/dream/dream.cgi">
<img src="http://hpcgi■.nifty.com/★★★/dream/dream.cgi?id=◆◆◆&gif=●&fig=▲"></a>

(改行せずに１行で書き込む事)

■←数字が入る。
★★★←登録時に取得した名前。
●←画像フォルダの番号（今回は２）
▲←カウンタの桁数（12以下で、私はとりあえず７）
◆◆◆←ログファイル名
　書き終わったら、右クリックして
　　　　　　　｢すべて選択｣→｢コピー｣。

　テキストエディタでの作業は終わり。

※　HPのTOPに取り付ける場合は

<img src="http://hpcgi■.nifty.com/★★★/
dream/dream.cgi?id=◆◆◆&gif=●&fig=▲">↑HPのindex.htmlに、このタグを貼り付けるだけ。

３．書けたら、一応念の為「名前をつけて保存」。

　【マイリストに貼り付ける】

　ここからは、ココログのマイリストに何かを記述するのと同様である。ので、多少大雑把な説明になりがちかも…。
　分かりにくいという人は「使い方ガイド」 や、「みんなで解決！ 広場」の過去ログに載っているので、活用すると良い。

１．ココログにログインする　(笑)当たり前過ぎ？
　　　あんまり長いから飽きちゃうかと思って。
　　
「マイリスト」→リストのタイプは「メモ」→
リストの名前は自由　｢counter｣で、どぉ？

　｢リストの新規作成｣をクリック→｢このリストをブログまたはプロフィールページで表示する｣→
ブログのほうにチェック→｢変更を保存｣→
｢ウィンドウを閉じる｣

｢項目の追加｣→広いスペースの方に、TeraPad(メモ帳)に記述したタグを貼り付ける(ペースト)。
　｢右クリック｣→｢貼り付け｣→｢追加｣→｢ウィンドウを閉じる｣

　ブログを表示して、確認してみる。
サイドバーでの場所は任意で。

２．カウント数を合わせる

　最後に、今までアクセスされたカウントから
始める方法。

　｢コントロールパネル｣→｢アクセス解析｣から
｢累計アクセス数｣を確認しておく。

　ブラウザのURLアドレス欄に↓

http://hpcgi■.nifty.com/★★★/dream/drmgr.cgi

と、記入して移動(アクセス)する。

　準備・修正編の、「６.プログラムの修正｣で指定したパスワードを入力→認証。

　管理画面に変わるので(ログファイル名、あるかな？)、2.のログメンテでログファイル名を選択。

　次の画面で、カウント数を現在の数字に合わせ、
｢修正｣をクリックで終了。

３．ブログを表示して確認

　こんな感じに→　

カウント数が修正されていたら、完成～♪
　ここまで辿り着けた人、おめでとう！

【左右に画像がある場合】 

　　　　　

　このように動かない画像が付いている場合は、
「left」と「right」の画像を、「homepage」内に「img」フォルダを作り、転送する。

　カウンターのタグの前後にリンク先を記述するので、ソースは以下のようになる。（改行なしで書ききる）

<a href="http://hpcgi■.nifty.com/★★★/dream/dream.cgi">
<img src="http://homepage■.nifty.com/★★★/img/left.gif">
<img src="http://hpcgi■.nifty.com/★★★/dream/dream.cgi?id=◆◆◆&gif=●&fig=▲">
<img src="http://homepage■.nifty.com/★★★/img/right.gif">
</a>

《CGIの場所》《左の画像》《カウンタの場所》《右の画像》
　こんな風になっている。

　よく左右の画像がリンクできずに、×印になってしまうことがあるが、これは大抵URLアドレスのちょこっとしたミスが殆んどである。私など今回の記事を書いている最中、何度しでかした事か…。くれぐれも「確認」を忘れずに！

　これで、ほぼ書き尽くしたように思う。
なお、これ等は私が試行錯誤して、初心者のおぼつかない足取りで辿り着いた路である。
　もしかしたら、もっとシンプルな方法があるかも知れないが、今のところカウンターの動作も快調なので、このままの様な気がする。　

　私の分かる範囲で、そして時間がある時には
助けてコールにも回答するが、基本的には自己責任です。

700kmさん（記事内のアクセスカウンター）

CGIを使ってアクセスカウンターを設置する・第２話（転送編）

　アクセスカウンター設置の第二弾！

　くれぐれも@homepageを利用しての設置になっているので、他のレンタルサーバを使う場合は、特にURLアドレスの～nifty.com なんて所の記述に気をつけて！

　では、自分のPCからHP上に画像やらデータやらを
引っ越させよう！
パーミッションの設定も、ここで説明する。

　【FFFTPを使って転送する】

《図２》


　←こういうものが、dreamフォルダ内にあると思うので、

　・dream.cgi
　・drmgr.cgi
　・drinit.cgi
　・gifcat.pl
　・dataフォルダ(空)
　・lockフォルダ(空)
　・gif2フォルダ(0～9)
　
　以上のものを転送する。
gif1は今回転送しないが、使いたい方はどうぞ。

　ここでは、分かり易くする為、余分なモノは転送しないようにしてみた。

あれ？と思うかもしれないが、もちろん「gifcat.pl」は「libフォルダ」ごとでも構わない。
　私は「libフォルダ」は転送していないが、ちゃんと機能しているよ。

「index.dat」は転送しなくても、ちゃんと“ログファイルを自動生成”にしているので、後々ログファイル名を決める時「hassaku」等としておけば、自動的に「hassaku.dat」が生成されるのである。
　う～ん、便利！　

１．FFFTP転送ツールでの設定

起動すると、こんな画面が↓

《図３》

1. 　
   
   
   
   
   
   
   
   （１）ホストの設定名
   　　　HPのタイトル等、分かりやすくつける。
   
   （２）ホスト名
   　　　　@homepageで取得したサーバ名
   　　　　ftp★.nifty.com
          ★は数字
   
   （３）ユーザ名
   　　　　FTPアカウントを記入
   
   （４）パスワード
   　　　　FTPパスワードを記入
         @niftyのパスワードではないので
   　　　気をつけて！
   
   （５）ローカルの初期フォルダ
   　　　　PC側のフォルダの指定。
   　　　マイドキュメント辺りを指定しておけば
   　　　良い。「dream」フォルダでも可。
   
   「OK」をクリックすると、「ホスト一覧」画面へと変わる。 自分の付けた名前のアイコンが出来ているので、 それをクリック→ 「接続」。
   （ 注* 市販のセキュリティソフトでファイアウォール使用時に、 Windowsファイアウォールを“無効” にしておかなかったのでFFFTPで転送する時に「接続できません」 と表示されてしまった。もし、接続できなかったら、市販の方の設定を確認後、 Windowsファイアウォールを “無効”にしてみよう）>

２．転送する

　接続できると↓こんな画面になる。
　CGIを使う時必ず操作するので、今後の為にも使い勝手は覚えておこう。

左がローカル(PC側)　右がリモート(サーバ側)
《図４》

◆フォルダはダブルクリックで開くか、それが出来ない時は、「右クリック」→「開く」で開く。

◆画像は「Ｂ」のバイナリモードにしてから、
　他は「Ａ」のアスキーモードにしてから転送。
FFFTPではＡ・ Ｂの右にある「オート」にしておくと自動で切り替わる。 これにより、 余分な物が入っていなければ、フォルダごと転送も可能。

◆転送は、ドラッグ＆ドロップ

では、左側に「dream」の中身、
dream.cgi
drmgr.cgi
drinit.cgi
gifcat.pl
dataフォルダ(空）
lockフォルダ(空)
gif2フォルダ(0～9)
　を表示させる。

　右側には「cgi-bin」を開くが、まだ何もない。
アスキーモードのアイコンの左に、新規フォルダ作成のアイコンがあるので、「dream」フォルダを作り、 そのフォルダを開く。　

それぞれドラッグ＆ドロップして転送。

　

３．アクセス権（パーミッション）の設定

転送が出来たら、以下の数字を設定する。
dream.cgi　[755]
drmgr.cgi  [755]
drinit.cgi  [644]
gifcat.pl  [644]
dataフォルダ  [777]
lockフォルダ  [777]

　方法は、各々のファイルを選択して「右クリック」→「属性変更」 「現在の属性」の数字を変えて「OK」ボタンをクリックする。

　転送ツールを使っての操作は、ここまで！
サーバには下図のような状態で、それぞれ収納されている。
　( @homepageではhomepageとcgi-binの置き場所が、 べつ)

　
　　　　　　　　　　　《図５》

　
　設定が出来たことを確認。
ブラウザを起動して、URLアドレス欄に@homepageなら

　http://hpcgi□.nifty.com/★★★/dream/dream.cgi?mode=check

と記述して、移動してみる。
□は数字、★★★は取得した名前を入れる。
@homepage以外なら↓

　http://********/dream/dream.cgi?mode=check

******** は、取得したURLアドレスを記述。

　設定内容が表示され、エラーがあれば分かるようになっている。
アクセスカウンターの画像も並んでいるはず♪
　


ふふふっ、楽しくなってきた？

　次回は、HTMLソースを貼り付けるまで。

　

ニフティでのホームページ　
@homepage

Windowsでの転送ソフト（無料）
FFFTP

CGIを使ってアクセスカウンターを設置する・第１話（準備・修正編）

　CGIを使ってのアクセスカウンターの設置方法を、どうにかまとめる事に成功した………ようである。

　HTMLソースを貼り付けるだけのアクセスカウンターではなく、素材サイトさんから借りたアクセスカウンターを取り付けようと、気軽に思いついたらCGIの設置を余儀なくされてしまった。
　　
　今更ながらなんだけど、どうもアクセス数を表示する必然性を感じなくて…。自分が分かっていればイイかぁ、とゆる～く考えていた。

  しかし、“アクセスカウンター”というキーワードからのアクセスがあるのに、その情報が無いのでは、せっかく立ち寄って下さった方々に申し訳ない。
  申し訳ないついでに、マイリストに貼り付けるだけの手順は、「初めてのココログ・カスタマイズ」さんの「第１回　カウンターをつけてみよう」 を参考にしてほしい。
  （takoさん、お世話になります。まる投げです）

　それにしても難しかった…。

　今となっては何でもない事なのだが、七転八倒しながら完成した時には、あまりに嬉しかったので、いくつものフリー素材をDLして、HPスペースに並べて悦に入ってみた。
　気が付けば自分のカウントだけで、
数字が増えていく有様。
　いっそ自分でカウンター素材を作ってしまおうかと思った程だ。（当分先までやらないけど）

　誰かに教えられるくらいには記憶しておかないと、安心して忘れそうなので、今の内にここでお披露目。
　
　ココログではない、普通のホームページでも要領は同じである。ココログではマイリストに記述するタグを、ホームページのHTMLのどこかに記述する、という違いだけ。

　

　まず、準備する物と全体像の把握から。

　今回使ったもの

• Windows XP
• Internet Explorer 6
• ココログ・フリー
• @homepage等、 ホームページ(ＨＰ)のスペース
• 転送ツール　FFFTP 等
• TeraPad (メモ帳等のテキストエディタでOK）
• 画像０～９
• スクリプト(KENT WEBさんの"夢カウンタ"を拝借）

　大体どんな事をするの？というと

◆　画像・スクリプト・ＨＰのスペース確保
　　転送ツール・などの必要なものを揃える。

◆　CGIプログラムの修正

◆　FFFTP等のFTPソフトでＨＰへ転送する

◆　パーミッションの設定

◆　ココログのマイリストに貼り付け

　と、こんな感じ。大雑把過ぎるかも…。

【デスクトップでしておく事】

１．フォルダを作って準備しておく。

　２・３・４と順序は前後しても問題ないが、まずデスクトップで入手した物を保存する場所を確保しておく。

マイドキュメントの分かりやすい場所に、
「dream」という新規フォルダを作り、さらに、その中に「lock」「data」「gif2」 を作る。
　　《図１》　

(注・「gif1」は黒のシンプルなカウンター（時計と日付つき） をKENT WEBさんが添付してくださっている分。これを使っても良い、その場合は随時数字を置き換える）
 

２．レンタルサーバーでURLアドレスを取得

　つまり自分用HPのスペースを借りるという事。
　ほとんどのプロバイダがWebサーバーのサービスを行なっているので、自分のプロバイダで確認し、 URLアドレスを取得する。

　私は@niftyの@homepage （nifty会員は無料）でホームページのURLを取得した。
　
　取得手続き中に表示される
ホームページのURL
CGIのURL（@homepageはCGI用のURLがある）
サーバ名
FTPアカウント
FTPパスワード
　などはメモっておくと良い。

　【インストールして準備】

１．FTP転送ソフトをインストールしておく。

　自分のパソコン（ローカルエリア）にある素材を、ホームページのあるサーバに転送する為。
　WindowsならFFFTPが定番(無料)である。
　Macにはfetch(有料）がある。
また、@homepageには「サクサクかきあげ君」という転送ツールがあるので代用もできる。

　この時↑のURLなどが必要になる。
ここ迄のながれは@homepage にも詳しく記載されているので、 参考にしながら進めてみよう。
　

２．気に入ったカウンターをダウンロードする。

　「DL」や画像の上など、所定の場所で右クリック→名前を付けて保存→「gif2」のフォルダの中に、 ０から９まで全て保存する。
★圧縮してあるものは解凍しておく！
（商用等では使えない事もあるので、利用規定はよく読む事）
　

３．「夢カウンタ」 のスクリプトをダウンロード。

　（サイトTOPへは、コチラから）

★解凍しておく！
　（今回はカウンターだけの設置をするが、
このスクリプトは、日付や時間も設定できる。
その場合は、「gif2」内に各々の画像を追加）
　解凍すると中には以下のデータが入っている。
dream.cgi
drmgr.cgi
drinit.cgi
libのフォルダ内に gifcat.pl
dataフォルダ内に index.dat
gif1フォルダ内に 0～9/a/c/d/p
　

　【プログラムの修正】

　drinit.cgiをTeraPad(メモ帳)で開いて、次の箇所を修正する。

→　$pass = '0123';

（エラーの確認や総カウント数変更などの編集画面用のパスワード。覚え易い英数字で指定する）

→　$ip_chk = 0;

　（連続する二重カウントを防止する機能。使用する方は「1」 にする。私は１）

→　$id_creat = 0;

（ログファイルの自動生成の許可を設定する。今回は自動生成する手順で説明するので 「１」にする。
　自動生成しない場合は、「data」ファイル内にログファイルを作成し転送する。面倒臭いでしょ?! だから「１」 が無難）

　以上が修正箇所。
KENT WEBさんの 「夢カウンタの設置法」 でなされている修正箇所の内、 @homepageを使った今回の方法では必要ない部分をはぶいてある。

　他のプロバイダの場合は、CGIの利用言語が「perl」か確認。
「dream.cgi」と「drmgr.cgi」をTeraPad(メモ帳)で開いて
一番上を　↓
#!/usr/local/bin/perl に変更。
　（プロバイダ指定のパスにする。
　　　　　　　　このままの所が多い）

　

◆次回は、FTP転送ツールを使っての操作と、
　　アクセス権の設定。

• 初めてのココログ・ カスタマイズ
• KENT WEB
• @homepage

メモ帳からTeraPadに変えてHTML編集も楽に。

  アクセスカウンターやCGIの使い方を調べている過程で発見した「TeraPad」 。使い勝手が良くて、かなりのお気に入り！

  「TeraPad」 とは、シンプルなテキストエディタの事である。

  シンプルなテキストエディタといえば、メモ帳がすぐ思い浮かぶ。というより、それしか知らない…。

  あるいは、文書ならWardだろ、という程度の知識しかなかった。

  しかし、私にはWrodは使いこなせないのが現状。(;^_^A

  何だかやたらに多機能過ぎるのだ。
　HTMLソースを書き込む為だけに使うには大袈裟なツールバーや、すごくもったりと起動するのも気になっていた。

  だから大概はメモ帳が主役。

  が、「TeraPad」 の登場で、メモ帳はサブキャラクターへと降格された。

  最大の長所はタグの色分け♪

  もちろん全文黒一色の文章もＯＫだが、ツールバー上の表示→編集→からHTMLを選べば、リンク先のURLはブルーになったり、改行タグはグリーンになったり、ソース内の文章はグレーになったりと、勝手に色分けしてくれるので、とっても見やすい。

　改行する桁数も自由に設定できるし、これはソースには反映されないので、全部一行で記述しなけりゃいけない編集作業には打って付け。（あ、これはメモ帳の“右折り返し”に当たるかも）

　メモ帳だとビッチリくっついていて見づらい行間も、「TeraPad」 なら広げられるから作業もしやすい。
  しかも、フリーウェア（無料）。

  文句無しにメモ帳より優秀な一品である。

はじめてのTeraPad

リンク用のバナーを貼り付ける

　「みんなで解決！広場」にリンク用バナーの貼り方が分からないという質問があったので、ネタとしていただく事にした。

　で、ついでに『はっさくのカスタマイズ・メモ』のリンク用バナーも作ってみたりして。
　こんな感じに↓↓↓あまりセンスないが、即席って事で。
　　　　　　　

  リンク用のバナーとは、バナー画像を自分のブログに張り付け、画像をクリックすると、そのサイトに飛べるバナーの事である。

  ココログフリーなら、ココログのマークをクリックすると、ココログのトップ画面にいける。そういう仕組みだ。

  『はっさくのカスタマイズ・メモ』なら、ランキングのバナーや素材サイトのバナーが、それ。

１．  バナーの入手。

　Windowsなら、サイトが指定しているリンク用バナーを右クリックして、画像を保存→好きな場所に保存しておく。
　そのサイトのトップページのURLアドレス、または指定されている URLアドレスをメモ帳などのテキストエディタにコピーするのを忘れずに！
 

２．　  アップロードする。

　ブログにログインして、「コントロールパネル」→「ファイル」→ここで私は“image”というファイル内に、 バナーをまとめて保存しているけど、ここで新規に「banner」というファイルを作って一括して保存しても良し、。 無くてもＯＫ。

　→「新規アップロード」、「参照」から使用するバナーを選択する。

　 アップロードした画像の文字をクリックすると、画像が表示される。（今回はオリジナルの画像を保存する時、 「hassaku-ba」としたので、その文字をクリック）

  ブラウザのURLアドレスを、 サイトのURLアドレスをコピーしたのと同じメモ帳などのテキストエディタにコピーしておく。
  （あるいは、文字の右側にあるリンクアイコンをクリックして、 開いた別窓からhttp://～gifまたはjpegまでをコピーしておく）
 

３．HTMLのソースを作る。

　 ここで、コピーしたメモ帳などのテキストエディタを開いて、 次のHTMLソースを作ろう。

<a href="□□□"><imｇ src="□□□" alt="□□□"border="0"></a>

• 　リンクしたいアドレスURL
• 　画像のある場所のURL
• 　画像に対する説明（ツールチップとしても有効）

　以上の順番で　□□□の部分にコピー＆ペースト（あるいは記述）する。

　alt="◆"のタグは無くてもＯＫだが、サイトのタイトルを書き込んでおくとツールチップで表示されるので、 訪問者に親切だ。

　私は、使用している画像の場所や、「読んでみた本」の書籍タイトルで使用している。
 

４．　マイリスト画面へ。

　作ったHTMLソースをコピーしてから、マイリスト画面を開く。

　マイリストの新規作成で、 メモリストを新規作成→リストの名前は自由。
　書きたくない場合は空白（スペース）を入れておく。

　「便利メニュー」→「項目の追加」→別窓が開くので、広いフレームの中に、 さっきコピーしたHTMLソースを貼りつける。

  「追加」→「変更を保存」→ウインドウを閉じる、で完了♪

　「ブログを表示」で確認。

  もし表示されていなかったら、「ブログ」→「デザイン」→「表示項目の変更」でチェックを入れ、 変更を保存→確認して反映。もう一度見てみよう。

５．本文中に貼り付ける場合。

　＜３＞までは同じ。
次に、作ったHTMLソースをコピーしたら、記事作成画面へ！

　「HTML編集」をクリック。

　好きな位置にカーソルを合わせてペースト（貼り付け）する。

　　　　　　　　　　　　　　　　　　　以上　

  『はっさくのカスタマイズ・メモ』でサイドバー上にリンク用バナーを作ってみたら、このように。

  文章はメモリストの小さい方のスペースに書き込んだもの。改行したい時は<br/>を入れる。

背景画像を透かしてみた

　背景用の画像をphotshopで作成し、本文・右サイドバー・左サイドバーのbackground-colorを透かしてみた♪

　方法は毎度お世話になっている｢初めてのココログ・カスタマイズ」さんの『第22回：本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉』を参考にさせて頂いた。有難うございます(^_-)-☆。

1. まず、画像の用意。
   　私はオリジナルの画像を、横1200px・縦1000pxで作成した。
   ↓こんな感じに出来上がったモノを
   
   ココログフリーなら、コントロールパネル→ファイルで
   アップロードする。
   　（後にアップロード先のURLが必要になる）
   
2. 今回、どこに背景画像を置いて、 どこを透明にしたのか分かりやすくする為に下図を作ってみた。
   　画像を置いたのは、bodyの部分。
   透明にしたのは、#banner / #container / .content /
   #right / #left　の部分。
   （図は2カラム。3カラムは左側に#leftがある）
   
3. カスタムCSS編集画面の記述欄内に、以下の記述をする。
   　body{
   　　background-image:url(ここに画像のURLを書き込む"http://～jpeg"またはgif"まで);
   　　background-repeat:no-repeat;
   　　background-attachment:fixed;
   　　background-position:top center;
   　　　}
   　#banner,#container,.content,#right,#left
   　　　{
   　　background-color:transparent;
   　　　}
   
   ★　赤い記述は背景画像の指定。
   　　　background-image　は画像の保存先URLを
   　　　background-repeatは繰り返し無しを指定
   　　　background-attachmentは固定を指定
   　　　background-position:は画像を中央に指定
   　　　}
   　
   　　茶の記述は、#banner / #container / .content /
   　　#right / #left　の透明化処理。

　（他のサーバでは再構築とも言うって最近知ったょ）

★　しいて注意する事を挙げるなら、 引用のbackgroundが無くなってしまう事だろうか!?
    この場合は、文字の色を本文と変えて、区別するしかない。

初めてのココログ・カスタマイズさん

【2006.10.10 追記】
　引用が、反映されていた↑みたいですね。

ペイントを使ってタイトルバナーをオリジナルに！

　私は日頃、フォトショップで（仕事上持ってるだけだが…）このブログの画像を編集している。
　しかし「そんなの持ってないモ～ン」とか「くそぉーっ！でも、自分だけのタイトルバナーにしたいんだよなぁ」というチャレンジ精神旺盛な方々の為に（偉そう？）今回はWindowsに添付されている『ペイント』を使って
タイトルバナーを作成してみたいと、実際にあれこれと試行錯誤してみた。

　いゃあ～、正直な話『ペイント』は私も初心者なのだ。
　フォトショップがあるのに、何もわざわざ、そんなローカルなものを…と思っていたのである。

　だが意外にも、写真を載せるならコレで充分じゃないか?! という気がした。
　フォト素人だから、そう思うのかもしれないが。

　確かに、本格的に絵を描こうとしたら、『ペイント』はお話にならない。
が、タイトルやサブタイトルの文字を、オリジナルのに置き換えたり、写真をバナーにしたりと、シンプルな作業ならいける！

　　ただし、blogで『ペイントを』有効利用しようとするなら、デザインフォントと画像編集ソフトは、やはり外せない。

　
◆デザインフォント

　ココログでは通常、日本語の選択肢が少ない。

　もっとおしゃれな字・カッコイイ字、と思ったら、やはりインターネット上で公開されているフリーフォント集から、好みの物をダウンロードする方がいい。「はっさくノート」のタイトル・サブタイトルも拝借しているものだ。参考にフリーフォント最前線辺りで探してみると気に入ったのがあるかも。

　ちなみに現在の「はっさくノート」のタイトルバナーはchipheadさんの“しねきゃぷしょん”である。


◆画像編集ソフト

　パソコンやデジカメに付属しているソフトで構わない。
実は『ペイント』で画像を縮小してみたら、、とんでもなく荒れてしまった。
　だから、縮小したり、切り取り（トリミング）をしたりは、
はっきり言って無理！

　私は今回 Microsoft Offce Picture Managerを使用。
　　　（PCに付いてたから…。）
　言ってしまえば、ペイント・フォント挿入・編集の全てが フォトショップ１つで済むという事である。

　
では、実際に加工してみよう～。


　　　１．画像の用意。

　上記のような編集のできるソフトで幅600px 高さ170pxの画像を用意する。

　＊）今回はサイドバーが１つ・本文が400px（推奨）の、デフォルト・テンプレートを使用。
　　　両サイドバー/本文400pxなら、幅は800px。高さは任意で。


　　　２．好きなフォントを入手しておく。

　XPの場合だと、ダウンロードして解凍。
解凍したファイルを開いたまま→「コントロールパネル」→「フォント」→解凍したフォントのアイコンをドラッグ＆ドロップで移動するだけ。


　　　３．ペイントを起動させる。

　「全てのプログラム」→「アクセサリ」→「ペイント」
ツールバーにある「変形」→「キャンパスの色とサイズ」で、
幅600px / 高さ170px にする。単位はピクセルで。


　　　４．画像を貼り付ける。

　「編集」→「ファイルから貼り付け」→画像を選択。

　

　＊）画像のサイズが大きいと、画像に合わせた高さで表示されるが、
　　　ここで慌てて高さを直そうと「キャンパスの色とサイズ」で編集すると、下の方がバッサリ切れてしまうので注意！

　事前に作りたいタイトルバナーのサイズにしておく方が無難。

　位置をずらしたい場合は、左縦のツールボックスにある
四角い点線のアイコンで範囲を選択して、ドラッグする。


　　　５．フォントの記入。

　ツールボックスにある「Ａ」ボタンをクリックすると画像の背景を透明にするアイコンが出現、下の方を選択。詳しくはペイントのヘルプ、「画像を作成する」→「文字を入力し、書式を整える」参照。

　これで、文字が写真の上にのる。→ 文字を置きたい場所の左上に、アイコンを置いてクリックすると、選択範囲が表示される。矢印を点線の右下角に置いてドラッグ。
　範囲を決める。

　『ペイント』の枠の外に、フォントの種類・大きさ等が表示される。

　文字を書き込んで、「Enter」を押す前に、カラーボックスから色を選択。

　＊)　書き込んでいる時には黒でも「Enter｣を押すと、色が変換されるので、あわてずに。

成功すると、写真の上にちゃんと文字がのる。

　失敗すると……こんな事にッ！
　

　　　６．出来上がったら保存。

　｢ファイル」→｢名前をつけて保存」
　＊)名前は、英数文字で)


　　　７．ココログでの手順。

　◆ココログ・フリー
　　「デザイン｣ → ｢テーマ｣ →「カスタム編集｣ →
　　「タイトルバナー｣ →「画像を使用する｣にチェック→「参照」から選択してアップロード。

　◆ベーッシック・プラス・プロ
　　私が使用していないので、本を参考にしながらだけど…。
　　　｢デザイン｣ →「スタイル｣ →「タイトルバナー」→「画像を使用する｣にチェック →「参照」から選択してアップロード。

　＜余談＞
　　黒い背景で作りたい時は、「３」でサイズを決めた後に、
　　塗りつぶしツール（左のツールボックス上から二番目）
　　で黒くしておく。

　　　　で、こんなの出来ました～↓

フォト
アトリエ夏夢色さん
　今回はほとんどがコチラのサイトでお世話になりました
　（アトリエ夏夢色さんの名誉の為に言っておくけど
　　　　　　黄色いバラは私の手描き…）

文字
chiphesdさん
すずとこんぺいとうさん
idfontさん
あくび印さん

記事は「メモ帳」に書く

　　　　　　　　　　
　何かとアクシデントの多いココログだが、せっかく書いた記事を作成画面上で修正しようとしても、反映しないという不具合が最近発生していた。

　実はこの記事を保存しようとした時にも、下書きの状態でクリックしたら、「ページが見つかりません」エラーが発生！
　「みつからない？　もっとよく捜せよッ！」と大人げなく叫んでみた。

　サーバの不具合はともかく、私は、引用や画像の添付などの細かい追加はしかたがないのだが、それ以外の文章の直しはWindowsの「メモ帳」でするようにしている。（MacontoshではSimpleText）
　
　ブログの特性の一つが、記事を作成したその場ですぐ更新できる事なのだが…。ベーシック・プラス・プロのバージョンアップに伴うすったもんだに、フリーなのに巻き込まれ、とんでもない目にあった事や、しょっちゅう行なわれるメンテナンスの為に、記事を書きたい時にログイン出来ない等、ココログに振り回されない為にも、ココログ画面上には長居しないことにしている。

　だから、記事は「メモ帳」で作っている。

  なにかと問題の多いココフラッシュへの反映も考慮すると、最初に「保存」をクリックしてから余り時間を置かない方が良いらしので、記事作成画面でもたつきたくないのも一因であるが。（そういえば、最近ココフラッシュに載らない。何が原因かは知らないが、以前サポートセンターに問い合わせた時は、更新設定をしていないと載りませんなどと、ずれまくった答えが返ってきた。そんな事はやってますってば）

  ココログには書き出し機能も備わっているが（これは完成した記事をエクスポートするわけで、意味が少し違う）前もってPCでテキストエディタを使えば、記事はそのつど残るので便利ではないだろうか?!
　直したければいくらでも出来る。

　方法は至って簡単。
　１．Windowsにある「メモ帳」で記事を作成する。　すべてのプログラム→アクセサリ→メモ帳を起動。記事を書く。何時間でも、何度書き直しても大丈夫！
（ワードパットでも、テキストモードにすると出来るらしい、やったこと無いけど。リッチテキストだとココログでは使えないタグがあるので、文字化けする可能性アリ）

　２．記事が完成したら（またブログ上で直せる）ファイル→名前を付けて保存→英数字でタイトルをつけ、分かりやすい所へ保存。

　３．ブログへログインして、コントロールパネル→ファイル→新規ファイルを作っていて、アップロード先を決めておくと良い。

　４．アップロードした記事のタイトルをクリック。
　文字化けのような状態にビックリしつつ、右クリックして、「ソースを表示」。または、一度閉じて再度タイトルをクリックする。どちらの場合も書いた文章が表示されている筈…である。そして、どちらの場合も「ソースを表示」で、コピー＆ペーストする。
　
　注）「一度閉じて～」の場合は、表示されたものを直にコピーしても良いのだが、この時は貼りつける画面を「HTML編集」に変えておく必要がある。

　５．右クリックして、全て選択→コピーして、新記事作成画面に貼りつける。

　◆短文ならブログ上で書いても良いのだが（むしろそれがブログの長所）、私の場合は長かったり、何度も書き直したりするので、この方法が一番手軽だと思っている。

  しかも、記事の内容を思いついた時、常にPCのそばにいるとは限らない。実はこの記事も携帯のメールに書き込んで送ったものだ。

  モブログだと「今すぐ公開」でなきゃいけないらしいし、カテゴリも選択出来ない、など面倒で使い勝手が悪い気がする。

  テキストエディタを使うこの方法なら、出先でも草稿が書け、帰宅してOEで受け取ったメールを、メモ帳にコピー＆ペーストしておく。しばらく（数日）放置って事もあるし、手直しするにも、何ら問題はない。
 
　あとは、持ち歩けるようなノートPCがあれば、いう事無しなんだけど…。

　
　　テキストエディタについては「とほほのＷＷＷ入門」さんへ。
　

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

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

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

  １．素材サイトから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さん。
　

本文中の画像をココログ・アフィリエイトからアマゾン・アソシエイトへ

　　　　　　　　　　
  本の紹介に使っていたココログ・アフィリエイトの画像を、アマゾン・アソシエイトの商品リンク画像に変更してみた。

ココログ・アフィリエイトの画像は、見やすくていいんだけど著者名と書名を入れると、やたらと場所をとって困っていた。

  一方のアマゾン・アソシエイトの画像は小さいし、アマゾンのバナーだけが独立して見えて、そのままおくとデザイン的に浮いている感じ。

  しかし、このところHTMLタグにちょこっと慣れてきたので、またもや調子付いてみた♪

  １．アマゾンのアフィリエイトに登録して、商品リンク画像のソースを入手する。

  はっさくノートは本文の背景が白なので、区別を付けるために、入手する段階で背景色をカスタマイズしておいた。（リンク色・文字色もカスタマイズできる仕様になっている）

　２．記事作成画面で「HTML編集」に本文の画面を変えて、貼り付けるこの時にalign="left"を加えて、文章を回り込みさせ、段落タグ<p>で囲んだ。
  ↓こんな感じに。

   　<p><iframe align="left" marginwidth="0" marginheight="0" src="ここには画像のリンク先のurlが記述されている" frameborder="0" scrolling="no" style="WIDTH: 120px; HEIGHT: 240px"> </iframe></p>

　終了したら「記事の作成」に戻れば、アマゾン・アソシエイトの画像が記事の一部になったレイアウトが出来上がっているのである♪
↓こんな感じに。

  ◆最近のココログアフィリエイトの画像に、気になるスペースが入っているんだけど、あれは何だろう？

  百鬼夜行抄の記事で、最後に画像を並べていた時に気付いたんだけど…。画像の右下に、半角分くらいの線が入ってしまうのだ。

  HTMLソースをよぉ～く調べると、最後の</a>の前に半角分のスペースが入っている。
　かなりの頻度で入っているようだが、意図的なのかは不明。
 
  線を消したい場合は削除を、隣の画像と間隔を取りたい場合は最後の</a>の後ろにスペースを入れる事が可能だ。

サイドバーの文章にリンクタグ

　　　　　　　　　

　最近ちょとリンクタグを使えるようになってきたので、右サイドバーの「紹介した本」に応用してみた。

　これらの画像はココログアフィリエイトの画像なので、画像をクリックするとアマゾンへ飛んでしまう。

　ふっと、感想記事に飛べるようにしちゃ、どぉよ？と思いついた。
　今まで気が付かなかったのも、どうかと思うが…。

　とりあえず本のタイトルをクリックすると、感想記事へ移動できるようにして、アイコンを乗せると「感想記事」と、ツールチップが出るように。

　その時愛用した本が『HTMLタグ辞典』。
  リンクタグに限らず、私の好きな“こんな事をしたいんだけど”方式の本である。
  画像の位置を指定したい。
　クリックする事で、他のページに移動させたい。
  送信ボタンを画像にしたい。
  テーブルを作りたい。
  等など、事細かに載っていて、「このわけの解らん英語（この辺が既にダメかも）は何？」という時に重宝する。

　今回の作業は、本リストの書名の欄に↓以下のような記述をしてみた。（一か八かで。ダメなら戻せばいいや、ってくらいの気持ちだった…）

    <a href="感想記事の固定リンクurl" title="感想記事はコチラから">書籍のタイトル</a>

　本当は、タイトルの前に画像で「記事はコチラです」のような仕様にしたいのだけど、それには先ず、画像を作らないといけない。 
　…時間があったら、いつかやろう。

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

　　　　　　

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

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

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

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

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

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

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


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

タイトルバナーをオリジナルの画像でカスタマイズ・２方法

  タイトルバナーに画像を貼りつける際の不思議に、
確認画面にバナーが表示されない、というものがある。

  私のように飽きっぽく、時々バナーを替えたい人間には、いちいち「反映」→「ブログを表示」をしないと、きちんと納まっているか分からないというのは不便である。
  縦幅調節のコメントも頂いたので、その辺も含め図解してみた。

　あっ、その前に、自分のCSSファイルを調べて、保存しておくと、失敗した時などに照らし合わせる事が出来るので、メモ帳などにコピペしておくといいと思う。
　（私は、そっくりカスタムcss編集のボックスにコピペして、要らない部分・重複している分だけを削除していった。例えばカレンダーは使わないので削除した）

自分のCSSファイルを調べる。
　「自分のブログのURL」のお尻に、「styes.css」 をくっつけて
ブラウザのアドレス欄に入力する。すると、わけの分からん英数字がズラッと並んでいるので、画面上で、右クリック→すべて選択→
コピーする。
　Windowsなら→すべてのプログラム→アクセサリ→メモ帳
で、貼り付けて、保存しておく。
　私のようにカスタムCSS編集ボックスに貼り付けても可。

　「はっさくのカスタマイズ・メモ」は横幅が900pxだが、今回は800px（片側サイドバーなら600px）で説明していく。縦幅は200px。（自分の作品に合わせて任意で。標準は150～170pxぐらい）
　まず下図のようなバナーを用意した。

この際、アップロードの方法には、２通りある。
　１ 文字も含めて画像を作り、貼りつける場合。
　     （確認画面にバナーは無い）

　２ 画像を背景として、タイトル文字は生かす場合。
　     （確認画面にバナー有り）

　１　の場合。
　テーマを変更→タイトルバナー→“タイトルバナーに画像を使用する”
にチェックを入れてアップロード。
　　ウェブログ・デザインによると、ココログの新規作成時に、生成されるスタイルシートのタイトル部分には、縦横15pxの余白が設定されている、ということなので、下図のように、余白部分は「テーマの設定」で指定した色になる。

　フリー・ベーッシク・プラスでは、カスタムCSS編集画面での作業になるので、ボックスの中に

#banner-img {background -image: url(アップロードした画像のurl）no-repeat ;
                    height : ▲▲px; }

と追加します。▲▲はアップロードした画像の縦幅を。
　このバナーなら200pxを入れる。　
　下図のようになったかな？

　ココログプロなら、「テンプレートの内容」のボックスに表示されているスタイルシートで「#banner-img」の記述を変えるだけである。（いいなぁ、さすが有料）赤文字の所のpaddingを削除して、heightを好きな高さに指定する。このように↓

#banner-img {background -image: url(アップロードした画像のurl）no-repeat 15px 15px ; padding : 15px;
                 height : ▲▲px;}

　２ の場合。
　“タイトルバナーに画像を使用する”にチェックを入れた後、“アップロードした画像はタイトルの背景として使用する”にもチェックを入れて、アップロードする。
　
　この場合は「#banner」の背景として設定されるので、
「#banner-img」には「display:none」の指定がされている。
　自分のCSSを確認してみると、アップロードした画像のurlは、「#banner」内に追加されているはず。

このアップの仕方をすると時々、タイトル文字が上で切れる事があるらしい。
　（実は「はっさくのカスタマイズ・メモ」も、このアップの仕方を応用している。でも、タイトルは自前である。やり方は後ほど）

　らしいというのは、そういう事態に遭遇した事が無いからで、takoさんの初めてのココログフリー・カスタマイズの「第４回：タイトルにオリジナルの画像を設定してみよう」にある、タイトル文字が切れるとの記述を参考に（ほとんどパクリ？）して、
タイトル文字を生かす場合は下図のように padding-top を追記する。

#banner { padding-top : ●●px; }

　背景画像の下が切れた場合は、

#banner { height : ▲▲px; }

　▲▲pxで背景画像の高さを調節する。

　画像ではなく、下に隙間が欲しい時は、こっちの記述を↓

#banner {padding-bottom : ●●px; }

　さて、「はっさくのカスタマイズ・メモ」のタイトルバナーは、２の方法でアップロードしている。でも、タイトル文字もサブタイトル（キャッチフレーズ）も全～部画像と一緒にフォトショップで作って、アップしただけである。

　だからタイトルもちゃんと映っている。
　何処に？
　バナーの左上に、ちっちゃ～く、こっそりとあります。ハハハ。

　「テーマの設定」→「タイトルバナー」→「文字の配色」を背景と同じかなじむ色に→「文字の配置」を左揃えにする→「フォントとサイズ」を極小　にすると、こんな感じに！
　はっさくノートでは出来ないけど、単色なら消える。もとい見えなくなるという仕掛け。
　こちらの方法なら、確認画面で表示されるオマケ付きである！

他にも、タイトルの背景は単色で、タイトルとサブタイトルだけ自前でフォントを作り、アップロードする、なんて事も可能だ。

画像を縮小してからアップする話

　　　　　　　 

　「みんなで解決！広場」への質問で「画像を記事のサイズそのままに載せたい」「大きい画像を、縮小させたい。でも、ポップアップにはしたくない」というのが良くある。

　私はイラストしか載せたことが無いが、写真だとさぞかし大容量になるのだろうなぁ。

  それが作成画面からはみ出すって、どんなだろう?! 想像できない。
解答によくあるのが、画像編集ソフトを使うというもの。 皆これを聞くと、腰が引けるようだ。

　が、使い方が分かれば、記事作成画面で大改造するより、ずっと楽な気がするのだが…、どうだろう。

　私が使用しているフォトショップは有料（シェアウェア）だが無料（フリーウェア）でも、原理は一緒なので試す価値はあると思う。（フォトショップで、安いやつなら一万円前後のがあると聞いた事もあるが…）

　 他の用途でも、例えば写真の画質調整やピンぼけを直したり、家族写真でカレンダーを作ったりして楽しめるんじゃないだろうか？

　まず、知っておく必要があるのは、『ピクセル数』である。

　ピクセルって？
　というと、野球場の電光掲示板を思い浮べると分かりやすいか…。

　０とか１とか２などの数字がいくつもの丸い点で形作られている。あの丸い点を『ドット』と言うが、四角い点を『ピクセル』と言うのである。
　絵も写真も、この点、ピクセル（以下ｐｘとする）で形作られている。

　 ココログフリーで、デザイン→テーマの画面→記事編集と進むと、本文の横幅の窓には、４００ピクセル（推奨）の他、５００ピクセルが選択できるようになっている。

　 ここでは一応、推奨の４００ピクセルで説明を進めていくが、５００でも基本は一緒だから、ご心配なく。

　私のブログも５００だし。（リッチテンプレートでは固定されているかも）

　本文の横幅が４００pxで、左右に余白が１５pxづつあるとして、４００−３０で、３７０ｐｘ が 写真の横幅ということだ。

　つまり、画像編集ソフトでする作業は、画像をこの３７０ｐｘに合わせる事。　仕組みは、こんな感じ ↓

　作業工程は各ソフトによって違うので、どこに何のボタンがあるなどの言及はできないが、フォトショプなら「web用に保存」すれば、pxの変更と「gif」　「jpeg」　「png］ のどれで保存するかも選択できる。写真向きは「jpeg」

　このページの図解は、実際には横１５センチの原稿を、画像編集ソフトでピクセル数をあわせて、あとはアップロードしただけ。
　例えば上記のような４コマ漫画を入れて、文字を回り込ませたい場合は、横幅を半分の１８５ｐｘ（ビミョ〜にずれるかも）くらいにソフトで作成しておくと便利である。

　この基本を掴んでいれば、どんなサイズでもすぐ記事に載せられると思う。
ただし、小さいサイズを拡大すると画面が荒くなってしまうので注意が必要だ。

　あくまで縮小させる為。

　 この調子でタイトルバナーを作る時も、サイドバーとメインバーの横幅ｐｘ数の合計を出せば、横幅ピッタリでアップロード出来る。 （タイトルバナーの縦の幅についてはベーシックではかえられないので注意が必要！範囲内に収めないと下の方が切れてしまう）

　ココログフリーのタイトルバナーのカスタマイズについてはｔａｋｏサンが 「第４回タイトルにオリジナルの画像を設定してみよう」で丁寧に解説なさっているので、ご参考まで！

コメント欄の文字化けを改善

　コメント欄に書き込みが出来ないと、友人Ｎからの苦言を受けて、さっそく調べ回してみた。

　『詩織』さんの「コメント文字化けＭＡＣ＆ＩＥ」をやっとこさ見つけ出し、穴の開くほど見つめ、眉間のしわが元に戻らなくなるまで格闘して、ＣＳＳを追加する事が出来た。

　しかし…自分がＭＡＣじゃないので、改善されたのかどうかチェックしようがないよなぁ。ここは一つＭＣＡユーザーに他力本願するしか手はない、というのはなんとも歯がゆい。　

　そもそも、自分のブログを他のＰＣで見た事もないっていうのは、ちょっと「いかがなものか」の部類に入っちゃうのかもしれない。
　あともうちょっと変えてから…と思いながらＣＳＳ編集の本と格闘していると、時間はあっという間に過ぎていくし、気が付けば編集のことばかりで、記事の更新を忘れているし…。

　調べていると、他のブロガーの皆さんがとっくの昔に歩いた道を、今ごろホフク前進中だ。　一体いつ頃追いつけるやら……。