お気に入りにアイコンを表示（favicon)

今回は、お気に入りに追加した時、アドレスバー…などなどの所で、アイコンを変える方法です♪
これはfaviconと言われるものですねー。

ページをお気に入りに追加した時、名前の最初にかわいいアイコンが表示されてる事ってありませんか？
それがfaviconです。
これは、.icoという拡張子で出来ています。画像を作成して、ico形式に変換して、アップロードしてスタイルシートの時の様にタグを埋め込むだけです！
わたしも初心者なので不確かな点もあると思います。
アドバイス、出来たよ！などなど言って下さると嬉しいです<(_ _)>

えーと、まずアイコンを作成します。
これは16×16サイズかもしくは32×32くらいが良いんじゃないかな、と思います。
ペイントで作成しても良いし、photshopなんかでも良いですね（^^
作成する例としては「タイトルの頭文字」（例：「るるが株式会社」→「る」）、「イメージ」（例：犬関連のサイトだったら犬の絵）などが分かりやすいんじゃないかな、と思います（^^
お気に入りに追加した時に「こんなサイト」って分かりやすいのが一番だと思いますよ〜。

アイコンは作成出来ましたか？形式はgifでもjpgでも大丈夫、だと思います。この辺は自信無し………。
そしたら、今度はそれをico形式に変換します。
FavIcon from Picsで、変換します。
普通にアップロードしたら、ico形式にしてくれるので、それをダウンロードして下さいね♪
プレビューが表示されるので、こんな感じーというイメージをもてると思います。

終わりまで後少しです♪
それをココログにアップロード!!!!
そしてこの記述をマイリストのテキスト欄、もしくはサブタイトル欄に貼付けて下さい。

<Link rel="SHORTCUT ICON" href="アップロードしたアイコンのアドレス">

これで終わり〜!!!!
すぐに出来ちゃうと思いますよ♪
もし出てこなくても、少し待ってみて下さいね。しばらくしたら出る筈です。時間差が色々生じると思うのですが、しばらくして出て来たら無事成功です〜

フッター部が上手く表示されない？

フッター部がこんなんなってました。
わたしは画像も入れてるのですけど、それも表示されてないし…しかも文字化けしてます（汗）
バージョンアップのせいなのでしょうか？それとも無関係？
日付も表示されていません。

どうやったら直るのでしょう（T^T)
しばらく様子を見てみます。

【追記】
その後、無事に表示されていました。一安心♪

引用部分をちょっとオシャレに！

わたしが使用している引用文はふわふわ。り（素材）様から素材をお借りして、猫のバックにしています。
こんな感じ。

引用です。バックの猫は左下に表示しています。 あまりスペースが小さいと猫の首から上が切れてしまいます（汗） アクセントとして結構可愛いです♪

バックが透過してある画像の場合は背景色を変えて目立つ様に出来ますよねー
カスタマイズ自由！

方法はスタイルシート、もしくはサブタイトル、またはマイリストのテキスト入力欄に以下のソースを貼付けて下さい。

色などは変えてみて下さい♪

そして、わたしが使用している背景画像を使用する方法。

background-position: left bottom;は背景画像を配置する場所です。
わたしの所では左（left）下(bottom）になっています。

上：top 下：bottom 左：left 右：right
になっています。

参考にさせて頂いた記事は[ぴ] ぴっくあっぷ。: 引用のテスト、埼玉住人: 引用をわかりやすくしようです。
ありがとうございました。

「トップへ戻る」を付ける.2

今度は、プロフィールページからトップに戻るリンクを付ける方法です。

これは簡単、確か(遊) あそびや（asobiya）〜★様が原案を公開したのだと思います。
プロフィールページ設定の欄に

<A HREF="http://ruruga.cocolog-nifty.com/rurugainc/">るるが株式会社に戻る。</A>
を追加します♪

「トップへ戻る」を付ける.1

1はページ最下部からトップに戻る方法です。

わたしの所では画像を使用しています。画像は1キロバイトの素材屋さん様からお借りしています。

まず、画像をアップロード。それからテキスト表示設定になっているマイリストのテキスト入力欄に以下を追加します。

<A href="#container"><IMG src="http://ruruga.cocolog-nifty.com/rurugainc/images/botan81.gif" border="0" alt="トップ"></A>

これでページのトップにリンクが張られました。　テキストリンクで付ける場合はリンクの所に#container、リンク先タイトルの所に［トップに戻る］などを付ければ良いと思います♪

ココログでオリジナルのデザインを使用する方法

今まで別記事に入れていたのですが、こっちに一つの記事として移動します。
わたしが使用した方法ですので、不十分な所があるかもしれません。

1、まず自分のブログのソースを開きます。
Mac Xでは【表示→ソースを表示】です。Winは分からないのですが【ソース(C)】なのでしょうか？（分かる方教えてくれると嬉しいです）
すると、こんな文字列を見つける事が出来ると思います。
結構上の方にあります。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="http://www.typepad.com/" />

<title>るるが株式会社</title>

<link rel="stylesheet" href="http://ruruga.cocolog-nifty.com/rurugainc/styles.css" type="text/css" />

それぞれ違うとは思いますが、下線の付いているURLをコピーし、ウィンドウで開いて下さい。
ずらずらっと文字列が表示されましたか？
人によってメモ帳が立ち上がったりそのままだったりと色々だったと思います。

2、次にその文字列を書き換えます
そのままだった人はエディタかなんかにその文字列をコピーペーストして下さい。一応此処では名前は【mystyle.css】にしておきます。
それぞれ名前を変えて下さい。では、少し書き換えてみましょう。
こんな記述を探して下さい。

#container {
line-height: 140%;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 700px;

background-color: #FFFFFF;

}

#banner {
font-family: Georgia, Times, serif;
color: #333333;
background-color: #FFFFFF;
text-align: left;
padding: 15px;

height: 40px;
}

a#banner-img {
display: none;
}

見つかりましたか？では、サンプルとして

この画像を使います。

#banner {
font-family: Georgia, Times, serif;
color: #333333;
background-color: #FFFFFF;
text-align: left;
background-image: url("http://ruruga.cocolog-nifty.com/rurugainc/images/sample.png");

padding: 15px;

height: 40px;
}

下線が付いた所の記述を追加して下さい。
画像はあくまでもサンプルなので後で書き換えて下さい♪では、書き換えたらファイル名を変えて保存して下さい。これでタイトル部分の背景を変える事が出来ました。

3、アップロードをします
その画像をアップロードします。ファイルをアップロードする所からアップロードして下さい。
すると、こんな文が現れると思います。

<a href="http://ruruga.cocolog-nifty.com/rurugainc/files/mystyle.css">mystyle.cssをダウンロードする</a>
此処からURL部分だけ（httrp://ruruga.cocolog-nifty.com/rurugainc/files/mystyles.css）を取り出し、こんな文を書きます。

<link rel="stylesheet" href="http://ruruga.cocolog-nifty.com/rurugainc/mystyles.css" type="text/css" />

これをサブタイトル欄かマイリストの中に入れて下さい。
マイリストの中に入れる場合は設定をテキスト表示にして下さい。
そして反映をして終わり！です。どうでしょうか？上手く行きましたか？タイトル部分の画像など色々用意してみて下さいね♪

<<自作スタイルシート適用方法>>関連。
此処よりもっと詳しく分かりやすく紹介して下さっているサイト様が居ます。

詞織様：詞織: 自作スタイルシートの適用
「わたしもかなり参考にさせて頂きました。とても詳しいです」

おとぼけ.com様：おとぼけ.com:タイトル部分にスタイルシートを使い画像を表示させる方法
「別ページで分かりやすく初心者向けに纏められています」

ぞうさんちv3様：ぞうさんちv3 » ココログのスタイルシート変更
「スタイルシートの書き換える所などが載っています」

海外鉄道旅行愛好者様：海外鉄道旅行愛好者: タイトル画像の張り方（ココログ超初心者用）
「超初心者用というだけあってすぐに分かります」

此処録ANNEX：ココログTIPS様：此処録ANNEX：ココログTIPS: スタイルシート関連 アーカイブ、此処録ANNEX：ココログTIPS: デフォルトスタイル アーカイブ
「色々な所へのリンクが張られているので分かりやすいです」

自分じゃ書き換え方とか分からない、という人に。
<<ココログテンプレート配布所>>
36ph engine: ココログテンプレート様でテンプレートを配布しています。ココログのテンプレートは少ないので貴重かもです。
すっきりとしたテンプレートを配布されています。

見出し一覧を付けてみました。

facet-divers様のスクリプト見出し一覧！
発見したので早速利用してみました。軽く色などは変えましたが、形は気に入っていたのでほとんど変えないまま利用しました。

マイリスト（テキスト表示）の【トップ】に以下を追加しました。

<script type="text/javascript" src="http://ruruga.cocolog-nifty.com/rurugainc/files/extractHeadings01a.js">
</script>
<script type="text/javascript">
<!--
extractHeadings("content");
//-->
</script>
<style type="text/css">
<!--
#content-headings {
margin: 0px 0px 0px 0px;
border: solid #0066cc thin;
padding: 0px;
background-color: #E5FFFC;
}
#content-headings.folded {
margin: 0px 0px 15px 0px;
}
#content-headings .title {
padding: 0px;
}
#content-headings .title a {
display: block;
margin: 1px;
border: solid #0066cc thin;
padding: 2px;
font-size: small;
font-weight: bold;
color: #000099;
text-decoration: none;
text-align: center;
background-color: white;
}
#content-headings .title a:hover {
color: white;
background-color: #000066;
}
#content-headings .title .counter {
margin-left: 0.5em;
color: silver;
}
#content-headings .list {
margin: 0px;
max-height: 360px;
overflow: auto;
padding:0px;
font-size: x-small;
}
#content-headings .list .item {
margin-bottom: 0.5em;
line-height:110%;
}
#content-headings .list a {
text-decoration: none;
display: block;
padding: 2px;
}
#content-headings .list a:hover {
color: white;
background-color: #000066;
}
#content-headings .level-1 {
margin-top: 1em;
text-aling: center;
}
#con
37d4
tent-headings .level-2 {
margin-top: 1em;
margin-left: 0px;
border-bottom: solid 1px gray;
padding-left: 10px;
}
#content-headings .level-3 {
margin-left: 0px;
border-left: solid 10px #0066cc;
padding-left: 10px;
}
#content-headings .level-4 {
margin-left: 5px;
border-left: solid 5px gray;
padding-left: 10px;
}
#content-headings .level-5 {
margin-left: 10px;
border-left: solid 5px gray;
padding-left: 10px;
}
#content-headings .level-6 {
margin-left: 15px;
border-left: solid 5px gray;
padding-left: 10px;
}
-->

ボーダーは2色揃え、見出しの横に付いているボーダーの幅を少し広げてみました♪
ありがとうございました。

マウスをのっけた時に説明文を出すタグ

その名の通りマウスをのっけた時に説明文を出すタグです。
これはマイリスト設定で言うツールチップとして表示という奴です。
あれのタグの事ですね。マウスをリンクの上にのせ、しばらくすると説明文が出てきます。

ここにサイト名

↑こんな感じになるわけでっす。
タグは

＜a href="http://ruruga.cocolog-nifty.com/rurugainc/" title="るるが株式会社に飛びますよ〜"＞ここにサイト名＜/a＞

になります。【るるが株式会社に飛びますよ〜】が説明文になります。

タイトルを記事上部に持って来る方法

今回は、タイトルをタイトル部分ではなく記事部分（center）の上部に持って来る方法です。
結構簡単に出来ちゃったりします♪あ、でもリンクは張れないのでご注意。

まず、「解説はわかるので良いです」という人向けにタグをご紹介。

.content {
margin-top: 0px;
padding: 357px 10px 0px 0px;
background-color: #FFFFFF;
border-left: 0px solid #CCCCCC;
color: #000000;（修正しました）
font-family: Georgia, Times, serif;
font-size: small;
background-image: url("http://ruruga.cocolog-nifty.com/rurugainc/images/content2.jpg");
background-repeat: no-repeat;
}

書き換える所は書き換えて下さい。
では、解説です。

1.まずは画像を用意します。
幅は記事部分と同じが良いと思います。多分、ですが。高さはあまり大きすぎない方が良いと思います。
それをアップロードしておいて下さい。

2.それを上のタグの様に書き換えます。

.content {
margin-top: 0px;
padding: 357px（ここは画像の縦サイズより少し大きめ） 10px 0px 0px;
background-color: #FFFFFF;
border-left: 0px solid #CCCCCC;
color: #FFFFFF;
font-family: Georgia, Times, serif;
font-size: small;
background-image: url("http://ruruga.cocolog-nifty.com/rurugainc/images/content2.jpg");画像のURL
background-repeat: no-repeat;
}

こんな感じです♪後はアップロードです。

【追記】
color:#FFFFFFの所を修正しました。文字が一部白くなってしまいます。
遅くなって申し訳ありませんでした<(_ _)>

タイトルを全て画像に差し替える

ぱっと見有料コースに見える（はず）、タイトルを全て画像に差し替える方法です。
タイトル画像のリンクは無いですが…。
かなり前にイマイチな方法を紹介しましたが（タイトル色を白にする）、今回は一応【ちゃんとした】方法なのかも、です。
わたしは、タイトルを全て差し替えてみました。背景画像はゆんフリー写真素材集様からお借りしました（Photo by (c)Tomo.Yun）軽く加工をさせて頂きました、ありがとうございましたっ<(_ _)>
では、方法です。

1,トップ画像を用意する
サブタイトルをテキスト表示させるのならサブタイトルは書かずに、タイトルはテキスト表示させてサブタイトルは画像表示する場合はサブタイトルを文字入れした画像を作成して下さい。
横幅は記事とサイドバーの合計に合わせて下さい♪

トップ画像が出来たらアップロードして下さい。

2,CSSを書き換える
スタイルシートを書き換えます。
まず最初にタイトルに背景画像を入れる方法を参照し、#bannerの所に画像を入れて下さい。haightは画像の縦サイズで合わせて下さい。
そして次にタイトルを表示させなくします。

＃banner h1 ｛
display: none;


｝

＃banner h2 ｛
display: none;
｝

と、書き換えて下さい。これで【ディスプレイノー】になりました。タイトルが表示されなくなる筈です。

3,アップロード
ココログでfilesにアップロードをします。スタイルシートのリンクのタグの中に埋め込めば出来上がり、です。
不具合などありましたら宜しくお願いします。

コメントテキストエリア幅を変える

コメントのエキストエリアの幅を変える方法です。
名前やメールアドレスの入力欄の幅と揃えれば、少し使い勝手は悪くなるかもしれませんが、統一感は出る、と思います。
長くしたら書きやすいですよね♪

textarea［id="comment-text"］ ｛
width: 85％;
｝

下線の付いている所がコメントテキストエリアの幅です。数字の部分を変えてみて下さい。
100%で記事横幅と同じサイズになります。

個別ページのメールフォーム

久々にカスタマイズネタです。やっぱりこれは尽きません♪

メールフォーム。JUGEPI!（ちなみに不具合で只今…と言っても一ヶ月；休止中です）でサイドバーに設置可能なメールフォームがあります。
こっちは、調節すればサイドバーにも入れられます。
一応、個別ページでのメールフォームの入れ方です。
結構役に立つ、筈、です。………。
飾りを入れてみたり、文字の大きさ、色、フォントを変えてみたり色々やってみて下さいませ♪

お名前
メールアドレス
ホームページ
本文

ちなみに、javascript使用、相手側がSENDMAILを許可していることが条件となっておりますー（汗）
タグはこちら。

＜SCRIPT language="JavaScript"＞ ＜!-- function check（fm） { if （fm.txt.value == ""） { alert（"お名前が未入力です"）; return false; }

if （fm.mail.value == ""） {
alert（"メールアドレスが未入力です"）;
return false;
}

var check = false;
for （i=0; i if（fm.howhp[i].checked） {
check = true;
break;
}

if （fm.comment.value == ""） {
alert（"本文が未入力です"）;
return false;
}

return true;
}
// --＞
＜/SCRIPT＞
＜FORM ACTION="mailto:自分のメールアドレス" METHOD="post" name="checkfm" onsubmit="return check(this)"＞

お名前＜/td＞＜td＞＜INPUT TYPE="text" NAME="txt" SIZE="35"＞
＜/td＞＜tr＞＜td＞
メールアドレス＜/td＞＜td＞＜INPUT TYPE="text" NAME="mail" SIZE="35"＞
＜/td＞＜tr＞＜td＞
ホームページ＜/td＞＜td＞＜INPUT TYPE="text" NAME="hp" SIZE="35" VALUE="http://"＞
＜/td＞＜tr＞＜td＞
本文＜/td＞＜td＞
＜TEXTAREA name="comment" cols="35" rows="5"＞＜/TEXTAREA＞
＜/td＞＜tr＞＜td colspan="2"＞
＜INPUT TYPE="submit" VALUE="送信"＞ ＜INPUT TYPE="reset" VALUE="リセット"＞

（）と＜＞は仮名になっています。英数に直してご使用下さい。
背景画像付きのテーブルに入れたりしても良いかも、です♪

サイドバーの文字色の変更

長い間青に変えてしまっていて、苦戦していたサイドバーの文字色。
気になる所を見つけて、変えてみたらあっさり変わってしまって、今までの苦労はなんだったんだろう、と思いました。サイドバーのリンクを除く文字色を変えるには、ここを変えるだけです。

.sidebar li {
color: #000000;
font-family: Georgia, Times, serif;
font-size: x-small;
text-align: left;
line-height: 150%;

下線が引いてある所を変えるだけです。その後の、font-familyやsize、などで調節してみて下さいー。
ふぅ、気になっていた所が1つすっきり♪

リンク色を変えるには

これって、リンク色の簡単なカスタマイズ、になるのかどうかは分かりませんが；

a:link ｛
color: #0033FF; text-decoration: none;未訪問リンク色 この場合、未訪問リンク色を#0033FF、テキストデコレーションを無しにしています（ようは下線を付けるか付けないかが大体です）あまり本文と似すぎた色などにすると見分けをするのが大変になりますので、注意した方がいいです。
｝

a:visited ｛
color: #3300cc; text-decoration: none;訪問済みリンク色 この場合、訪問済みのリンク色を#3300CC、テキストデコレーションを無しにしています。ちなみに、ここはあまり未訪問リンク色と似すぎる色にしない方が良いです。
｝

a:active ｛
color: #66FFFF; text-decoration: none;クリック時リンク色 これは、クリック時リンク色を#66FFFF、テキストデコレーションを無しにしています。
｝

a:hover ｛
color: #000099; text-decoration: underline;選択中リンク色 選択中リンク色を#000099、アンダーラインを付けています。これは、マウスを乗せた時にどうなるか？という事になります。
｝

この記述を探して、色々カスタマイズしてみて下さい♪未訪問リンク色の所にアンダーラインを付ければ、普通にアンダーラインがついている状態になります。
sidebarと書いた所にある同じ様な記述の所も変えると、サイドバーのリンクも変えられます。

検索窓の設置方法♪

今回は、色々（と、言っても3種類）の検索窓の設置の方法です。それぞれ、マイリストはテキスト表示に設定して下さい。【http://を除いた自分のブログのURL】という所は変更して下さい。幅など、任意で分かる人は変えてみて下さい。
…………そういえば、久しぶりのカスタマイズネタ！！

まずは、お馴染みココログル検索窓の設置です。
<FONT color="#9c9a9c">ココログル検索</FONT></TD></TR><TR><TD style="BORDER-RIGHT: #ffd9d9 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ffd9d9 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffd9d9 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #ffd9d9 1px solid"><FONT size="-1"><!-- cocologuru search --><div><form name="cocologuru" action="http://202.222.30.11/coco/scgi/ksearch.cgi"><input type="text" size="20" name="k" value="" /><input type="hidden" name="en" value="2" /><br/><input type="radio" name="site" value="" checked>ココログ全体から検索<br /><input type="radio" name="site" value="http://を除いた自分のココログのURL（わたしは【ruruga.cocolog-nifty.com】" />このブログ内を検索<br /><hr color="#CCCCCC"><input type="radio" name="mode" value="0" checked>全文検索<br /><input type="radio" name="mode" value="1">コメントのみ検索<br /><input type="radio" name="mode" value="2">タイトルのみ<br /><input type="radio" name="mode" value="3">ココログ名のみ <input type="submit" value="検索" style="border-style:solid; border-width:1px; border-color:#697497; background:#ecf1fa; font-size:10pt; color:#697497" /></form></div><!-- cocologuru search --></FONT>

次は、Google検索窓。これもお馴染み。
<!-- sitesearch google --><form action="http://www.google.co.jp/search" target="_blank"><div style="font-size: small;"><input type="text" name="q" size="15" maxlength="255" value="" /><input type="hidden" name="hl" value="ja" /><input type="hidden" name="ie" value="utf-8" /><input type="submit" name="btnG" value="検索" /><br /><input type="radio" name="q" value="" checked="checked" />ウェブ全体から検索<br /><input type="radio" name="q" value='"cocolog-nifty.com"' />ココログ全体から検索<br /><input type="radio" name="q" value="site:http://を除いた自分のブログのURL />このブログ内を検索<br /></div></form><!-- sitesearch google -->

最後は、yahoo!検索窓。yahooページから拾って来たので、こんなんです。ちなみに、他にもパターンがあるみたいです。
<!-- Begin Yahoo Search Form --><form method="get" action="http://search.yahoo.co.jp/bin/search" target="_blank" style="border:0px solid #999; padding:5px;/*/*/width:160px;/**/"><center><a href="http://www.yahoo.co.jp/"><img src="http://i.yimg.jp/images/search/sb_y_logo.gif" alt="Yahoo! JAPAN" border="0"></a><br><small><input type="text" name="p" size="20" style="margin-top: 5px"></small><br /> <input type="hidden" name="fr" value="yson"><input type="hidden" name="ei" value="utf-8"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><img height="8" width="1" alt="" src="http://img.yahoo.co.jp/images/clear.gif"></td></tr><tr><td><input name="vst" type="radio" value="" checked ><small>インターネットを検索</small></td></tr><tr><td><img height="3" width="1" alt="" src="http://img.yahoo.co.jp/images/clear.gif"></td></tr><tr><td><input name="vst" type="radio" value="http://を除いた自分のブログのURL"><small>このブログ内を検索</small></td></tr></table><small><input type="submit" value="検索" style="margin-top: 5px"></small></center></form><!-- End Yahoo! Search Form --><br><img alt="saboten2-9" src="http://ruruga.cocolog-nifty.com/rurugainc/images/saboten2-9.gif" width="259" height="30" border="0" />

最上部にロゴを付けたり、画像で区切ってみたり、と色々出来ると思います。
工夫してみても面白いかも♪

色々スクロールバーを付ける

<div class="book"><strong>ここにタグ</strong></div><style TYPE="text/css"><!--リストの名前 { overflow: auto; height: ○○px（折り畳みたいリストの縦サイズ）; } --></style>

と、入れたい所のマイリストに記述するだけで出来ます♪pxの所は各自で調節してみて下さいー！
これは、マイブログリストやブログピープルなどにでも使えます。
例えば、一番下に空のマイリストを作成し、其処に

<style type="text/css"> <!-- .link-note{font-size: x-small;（フォントサイズ） text-align: center;（テキスト位置） border-left: ボーダーサイズpx solid ボーダー色; border-right: ボーダーサイズpx solid ボーダー色; } .module-body{ overflow: auto; height: ○○px;（何pxを過ぎたら折り畳むか） --> </style>

と、書けばそれより上のリストが指定したpxをこえて長くなると、自動的に折り畳まれる様になります。

アンカータグ応用

きのうの出来事様（初めまして）のこの記事を参考にさせて頂きました、ありがとうございます。

アドレスを書く時に、「http://アドレス/#○○○」というのがあります。
これは、アンカータグを指定した所に飛ぶ様になっています。
ココログでは、（わたしは個別記事に別で纏めましたが）例えばプロフィールページに更新情報を入れたり、インフォメーションを入れたりした時は、アンカータグで設定して、トップページから飛ぶのがアリです。
アンカータグは
<A Name="マイリストの名前（#は付けない）"></A>
これです。

このタグを移動させたい所に（例えば「インフォメーション」と書かれた文字の横とか）入れてみて下さい。
そして、「http://アドレス/アンカータグで入れた名前」で行ける筈です♪
きのうの出来事様の様に、サイドバーガイドにすると、便利だと思います。
ちなみに、バナー（画像）などでリンクする場合。
<A href="#マイリストの名前（#は消さない）"><IMG src="画像URL" border="0" alt="画像に付ける名前"></A>
こんなんで良いと思うのですが、どうでしょう。

同じ様に、ボタンで移動も出来ます。これは、きのうの出来事様と同じなので、…。

<Form><Input type="button" style="width:170px" value="ボタンに表示する文字" onClick="location.href='#○○○'"></Form>

width:170pxの所（横幅）は色々変えてみると綺麗に仕上がると思います。

記事タイトル,マイリストタイトルにアイコン

今回は、マイリストのタイトルにアイコンを表示させる方法と、記事タイトルにアイコンを表示させる方法です♪
参考にさせて頂いたのは、KOROPPYの本棚様と詞織様です、ありがとうございました。
では、方法です♪タイトルに背景画像を入れる方法を参考にし、スタイルシートの書き換えが出来る状態にしておいて下さい。

記事タイトルにアイコンを入れる場合

.content h3 {
color: #333333;
font-family: Verdana, Arial, sans-serif;
font-size: large;

text-indent: 使用する画像より少し大きめのサイズ。此処がタイトルとアイコンとの余白になります。多ければ多い程余白が広がります。px;←下線がついている元の所は消してこのタグに書き換えて下さい。
font-weight: bold;


margin-bottom: 10px;

background-image:url(使用したい画像のURL);
background-repeat:no-repeat;
background-position:left top;
padding: 3px 3px 3px 25px;
line-height:24px
}

配置や余白、などなど色々好みに合わせて変えてみて下さい。

サイドバータイトルにアイコンを入れる場合

.sidebar h2 {
color: #333333;
font-family: Georgia, Times, serif;
font-size: small;
border-bottom: 1px dashed #999999;
text-indent: 18px;
font-weight: bold;

text-transform: uppercase;
padding: 3px;
letter-spacing: .3em;

background-image:url(画像URL);
background-repeat:no-repeat;
background-position:left;
}

書き換える所は一緒です。

これで後はアップロードして完成です。参考にさせて頂いたブログ様、ありがとうございました。

サブタイトルに簡易メニュー！

文字書きわーるど♪様のこの記事を参考にサブタイトル欄に簡易メニューを付けてみました♪
サイドバーにもあるのですけど、もっと分かりやすく！とサブタイトルです。
分かりやすくて、いい感じに仕上がったと思うのですが、どうでしょう？わたしが、サブタイトルに入れたタグはこれです。

<a href="http://ruruga.cocolog-nifty.com/rurugainc/"><img src="http://ruruga.cocolog-nifty.com/rurugainc/images/bt07-1-h.gif"border="0"></a><a href="http://ruruga.cocolog-nifty.com/about.html"><img src="http://ruruga.cocolog-nifty.com/rurugainc/images/bt07-1-p.gif"border="0"></a><a href="http://rurugachat.kouga.shinobi.jp/"><img src="http://ruruga.cocolog-nifty.com/rurugainc/images/bt07-1-c.gif"border="0"></a><a href="http://www3.azaq.net/bbs/820/1ab2/index.html"><img src="http://ruruga.cocolog-nifty.com/rurugainc/images/bt07-1-bb.gif"border="0"></a><a href="mailto:ruruga.inc@bigfoot.com"><img src="http://ruruga.cocolog-nifty.com/rurugainc/images/bt07-1-m.gif"border="0"></a>

メールの所だけは、リンク設定にせず、＜a href="mailto:メールアドレス"＞＜img src="画像URL"border="0"＞ そして詰まった感じがしない様に、サブタイトルから＜br＞＜br＞（一回目の＜br＞で改行二回目の＜br＞で一行開ける）で一行離しました。
素材は、IMAGE様にお借りしました。毎度毎度お世話になってます。後は、

余談ですが、メールアドレスを公開したくない（というかセキュリティを考慮するならばしないほうがいいかな、と個人的には思います）場合、ヒロのようにメールフォームにリンクすると良いかも。
シンプルなデザインの好きな方や、ページが重くなる、サーバの容量を節約したいという方は、画像を使わず、テキストリンクですっきりと作っても良いかもしれないですね＾＾

引用です♪全くその通りですー…って、わたし少しでも容量節約しようとしてるのに、画像使ってどすんじゃい（汗）
使用させて頂いている素材屋様は、プロフィールの所に載せてあります♪
最近、プロフィールの方も更新しているので、一読お願いしますー。
バナーも作りました…（できが悪いです。さっさと作ってしまったので…）るるが株式会社について、という事で書きました。では、更新頑張るぞー

ボタンの付け方

<FORM> <INPUT type="button" value="クリック" onClick="alert('あんまり意味ないかも、、')"> </form>

どうも、今回はボタン、の付け方です♪これはクリックするとアラートが表示されます。拍手ボタンにも、使える！？
…で、本題です。
これはあっちこっち（⌒○⌒）／さんのリクエストによりタグを表示させて頂きます。
上のをコピーペーストして下さい。
('あんまり意味ないかも、、')の所のあんまり意味ないかも、の所の部分を好きな文字に変えて下さい。
するとクリックした時に出てくる文字が変えられます。

"クリック"の所を変えると表示される文字が変えられます。

こんな感じで良いのでしょうか？ではでは、また何かリクエストなどありましたら、どうぞ〜♪
出来るか分かりませんけど…；
最後に、応用拍手ボタンの例です。

などなど………

イラストの入れ方

イラストの入れ方です。ちょっとうまくいってハイテンションなのでお知らせ致します。
まず、右の一番上、わたしのイラストです。
これはABI STASIONという所で作らせて頂きました。

１、まず手順にそって似顔絵を作ります
これは簡単♪本当にすぐ出来ちゃいます。
２、それを保存する
アイコンの上で右クリック(MacはCtrl+クリック)します。「名前を付けて画像を保存」を選び、ご自分のパソコンに保存。
３、今度はココログに入れます
記事に入れる際はアップロード、で出来ます。トップページやプロフィールの所に入れるのも
ファイルを選択→選択→アップロード　で、完成です。
簡単……………

このサイトは、他にもバナーなども作れちゃうので、おすすめです。
簡単なので、是非やってみて下さいー