ANA国内線【PR】
total・・・・・・・・・
yesterday・・
today・・・・・・・・
更新履歴&お知らせ

かたつむり


日記、おいしく作れた料理、ちょっとしたスキン編集、関ジャニ∞のことを載せているブログ。最近は子供のことも。
by ayamori メールはこちらへ

以前の記事
'11
1 2 3 4 5
'10
1 2 3 4 5 6 7 8 9 10 11 12
'09
1 2 3 4 5 6 7 8 9 10 11 12
'08
1 2 3 4 5 6 7 8 9 10 11 12
'07
1 2 3 4 5 6 7 8 9 10 11 12
'06
1 2 3 4 5 6 7 8 9 10 11 12
'05
1 2 3 4 5 6 7 8 9 10 11 12
'04
12

Click for Tokyo, Japan Forecast

【QR code】
おいしいたのしい毎日のQRコード
Excite Blog
        
チビアヤ成長記録
最新のコメント
★Tomokoさん---..
by ayamori-yako at 09:50
おおおおお!!!おひさし..
by Tomoko at 01:34
★NBちゃん------..
by ayamori-yako at 07:48
お誕生日おめでとうござい..
by NB at 23:26
★NBちゃん------..
by ayamori-yako at 16:30
え~~上履きまで洗ってく..
by NB at 09:34
★Haruさん-----..
by ayamori-yako at 11:58
ご無沙汰しております。 ..
by Haru at 12:10
いやー、ホントに私写って..
by NB at 15:25
★NBちゃん------..
by ayamori-yako at 14:50
あら、かわいいボーダーじ..
by NB at 12:42
★ankenさま----..
by ayamori-yako at 14:51
★NBちゃん------..
by ayamori-yako at 14:47
しなの、いいよね。 な..
by anken99 at 14:05
先日はどうもでした! ..
by NB at 18:51
★NBちゃん------..
by ayamori-yako at 20:37
おせち力作ですね!すごい..
by NB at 21:22
★NBちゃん------..
by ayamori-yako at 20:46
★NBちゃん------..
by ayamori-yako at 20:40
おはようです。 おせち..
by NB at 10:58
最新のトラックバック
逆子を治す体操
from 逆子を治す体操
フランス菓子 ボージュ
from To pass leisur..
彼氏できました
from 初心者日記~結婚生活~
エキサイトネームカード
from マイ カリフォルニア ライフ
GW 2006
from 初心者日記~結婚生活~

タグ
おすすめキーワード(PR)
ファン
リンク
tohaさんのHP trifles cafe

ホッツのHP alcoholiday



素材を使わせて頂いてます G.B.MATERIALS
ふわふわ。り
ORENGE BITTER CHOCOLATE
TINY BOUBBLES
Blues*y





カテゴリ:Skin
  • Tagの表示場所を変更
    [ 2006-06-15 00:01 ]
  • ネームカードのアクセス解析
    [ 2006-06-06 23:11 ]
  • ネームカードを付けました
    [ 2006-06-02 23:28 ]
  • 「次のページへ」を画像に置き換える&リンクの色を変える
    [ 2005-08-15 22:40 ]
  • 「以前の記事」の表示変更
    [ 2005-08-14 16:59 ]
  • スクロールバーの色変更、タイトルに画像、コメント欄の変更
    [ 2005-03-10 21:57 ]
  • 記事タイトルにコップをつけてみました
    [ 2004-12-14 17:21 ]
  • ネコ温度計
    [ 2004-12-13 15:02 ]
  • 線を入れてみました
    [ 2004-12-13 15:00 ]
  • カウンターつけました
    [ 2004-12-11 16:12 ]
by ayamori | | Top↑
Tagの表示場所を変更
Tagの機能が追加されましたね。
ワタクシ、Tagってどういうときに使うわけ?と、イマイチ理解していなかったんですが、
カテゴリを分類しづらい時とかに使うんですねー。みなさんのTagを見てやっと理解できました。なるほどなるほど。
過去記事にもTagをつけようと思っているんですが、これ、ちょっと面倒ですねぇ。
記事を再度読まないと、どんなタグにしたらいいのか分からないですもんね。
でもこれは地道にやらないとイカンのですよね?一気にやるとイヤになるので少しずつやろうと思います。

さて本題ですが、雀屋だらだらday'sの雀屋ちゅんのすけさんが紹介している記事

「Tags」部分をいじってみる。
「Tags」をいじってみる。 その2
「Tags」オマケ


すごく分かりやすく書いてあります。素敵な技、ありがとうございます!!
ちゅんのすけさんの記事を読んで、「私もタグをつけて、この技使ってみよ!」って思いました。
で、早速私もTagsをいじってみたわけです。

私はいたって簡単に、

『記事の本文から2行分くらい空けてタグを表示』←過去記事にタグをつけると記事本文に密着しすぎだから
『文字の間隔を空ける』←デフォルトは間隔狭すぎだから
『記事内に表示されるタグを右よりにする』←これは何となく右にしたかったから

/*tagの設定*/
.TAGS {margin-top:2em;text-align:right;}
.TAGS a{margin-left:6px;}


はい、これをCSS編集のどこでもよいので付け加えるだけです。

さらに私は上記に
『タグ文字を太線にする』
ようにしましたので、上記に追加して

/*tagの設定*/
.TAGS {font-weight:none;margin-top:2em;text-align:right;}
.TAGS a{font-weight:bold;margin-left:6px;}

↑赤字が追加した部分

いかがですか?

ちゅんのすけさんのおかげでまた技が磨けました。ありがとうございました。
by ayamori | by ayamori-yako | 2006-06-15 00:01 | Skin | Comments(4) | Top↑
ネームカードのアクセス解析
先日付けたネームカードはアクセス解析の機能が付いています。
どこから自分のブログに来てくれたのかが当月の累計で見れますが、
「検索ワードランキング」というのもありまして、検索した言葉がどんな言葉だったのかが見れるのですが・・・・・・

私の6月検索ワードランキングは

うぉーーーい!錦戸亮、関ジャニ∞ばっかりじゃんよぉーーー!!
地味に面白かったです。
by ayamori | by ayamori-yako | 2006-06-06 23:11 | Skin | Comments(4) | Top↑
ネームカードを付けました
最近エキサイトブログのトップに
「ネームカード開始」
って書いてあって何をするものなのかな?って思ったら、また最近
「 エキサイトネームカードを登録すると画像容量が最大1Gになります 」
って書いてあって、飛びつきました。

実は私、画像倉庫用のブログを1個作ってありまして、1記事に何個も画像を載せるときはそっちの画像倉庫用ブログにアップして、外部リンク(っていうのか?)にしてたんです。
だからこの「おいしいたのしい毎日」はまだ16MBしか使ってません。
マイイメージアカウントも使ってますしね。

でもこのネームカード、ちょっとデザインがイマイチですよねぇ。
妙に文字が大きいし。
そこで見つけたのがMovie & Cigarettesのpeach-jさんのスキン編集 ==ネームカードを好きな画像に。==
これはいい!!!速攻でやりました。
peach-jさんのネームカードはめちゃくちゃカッコいいです。
私はペイントで画像編集したので、ちょっとね・・・。画像編集ソフトでもインストールするかな。
英語の格言を入れてみたり・・・。

アクセス解析も出来るみたいですし、みなさんも試してみてくださいねー。
by ayamori | by ayamori-yako | 2006-06-02 23:28 | Skin | Comments(12) | Top↑
「次のページへ」を画像に置き換える&リンクの色を変える
2日くらい前から「次のページ」「前のページ」を画像にしています。

素材を使わせて頂いているサイトにカワイイはりねずみがあったので、それをお借りしました。
最近、スキンいじりが趣味になりつつありまして、勉強も兼ねてちょこちょこいじってます。
そしてこの方法は『ぽっとの陽だまり研究所』さんの「"次のページへ”のおしゃれ方法について」を参考にしました。

私も記事に方法を書こうかと思ったんですが・・ぽっとさんがすごく詳しく書いていらしているので、
そちらをご覧くださいませ。ぽっとさんはすごい!!私なんて足元にも及びません・・。

それからリンクされてる文字の色を変更しました。
通常は青なんですけど、ほんのり色を変えてます。

【変更前】     【変更後】


ホントに微妙なんですけどね・・。
これはCSS編集で簡単に変わります。

A:LINK   { COLOR: #4682B4; TEXT-DECORATION: NONE; }

このLINKと書いてある部分のCOLORの番号を変えると変わります。
COLOR番号は「カラーチャート」や「カラーネーム」と検索するとたくさん出てきます。
ちなみに
LINK:未訪問のリンク
VISITED:訪問済みのリンク
ACTIVE:選択中のリンク
です。私は選択中のリンクには全てアズキ色にしています。
ただし、未訪問と訪問済みのリンクは場所によって色を変えています。

リンクを選択中に下線を出したり点線を出したりも出来ます。

A:HOVER{
BORDER-WIDTH : 2PX 2PX 2PX 2PX;/*点の大きさ*/
BORDER-BOTTOM-STYLE:DOTTED; /*マウスが乗ったとき点線を出す*/
BORDER-COLOR : #993333;/*点線のカラー*/
COLOR:#993333 ; /*マウスが乗ったときのカラー*/
}

私は点線にしているのでDOTTEDですが、普通の一本線はSOLID、二本線はDOUBLEなど、色々あります。
by ayamori | by ayamori-yako | 2005-08-15 22:40 | Skin | Comments(10) | Top↑
「以前の記事」の表示変更
11日(木)から会社の夏休みでダラダラと過ごしてるayamoriです、こんにちは(ペコリ)。

思いっきりPC生活してます。(何のための休みだ?しかも引越し準備しなくちゃいけないのに)
こんなにずーっとネットにつなげてるのに固定料金でしかも速度が速いADSLサイコー!!
昔はこんな便利じゃなかったんですよねぇ・・ありがたや・・。

こんなに時間があるときじゃなくちゃ出来ないスキン編集をまとめてしてみました。
前から『以前の記事』の表示に、ん?と思っていたのです。
これって縦に表示されてて、しかも月ごとに『2005年』と年の表示もされてしまう。
スペースも取るし、月ごとに年の表示はいらんがね!(石川弁)
色んなブログを拝見して、こんなカンジにしてみました。
こうするとすっごくすっきりした!!しかも省スペース。でもちょーっと面倒。何故なら次月になって記事を投稿しても自動的に月は加えてくれません。自分で手作業になります。エキサイトさんは自動的に月を加えてくれますし、便利っちゃー便利。なんせ楽チン。でもやってみたい方、必見です。


Ⅰメモ帳を増設します。
 メモ帳というか、メニューを増やすというカンジでしょうか。
 私はby ayamori-yakoの下に増設してます。
 なので私のパターンでご紹介。

1.HTML編集で<$nick$>を探して、その下に以下の分を入れます。
<div class="MN">
 <div class="MNTTL">好きなタイトル←私は普通に「以前の記事」にしてます</div>
 </div>
 <div class="KIJIBODY">
 '05<br>
 <a href="http://ayamori.exblog.jp/m2005-01-01">1</a>
 <a href="http://ayamori.exblog.jp/m2005-02-01">2</a>
 <a href="http://ayamori.exblog.jp/m2005-03-01">3</a>
 <a href="http://ayamori.exblog.jp/m2005-04-01">4</a>
 <a href="http://ayamori.exblog.jp/m2005-05-01">5</a>
 <a href="http://ayamori.exblog.jp/m2005-06-01">6</a>
 <a href="http://ayamori.exblog.jp/m2005-07-01">7</a>
 <a href="http://ayamori.exblog.jp/m2005-08-01">8</a><br>
 '04<br>
 <a href="http://ayamori.exblog.jp/m2004-12-01">12</a></div></div>

この『"http://ayamori.exblog.jp/m2005-01-01"』なんですが、(『以前の記事』の月にポインタを合わせていただくと分かりやすい)、
1月全部の記事を見るときに使うリンクのようなんですよね。
/m年-月-01/と構成されていることが分かります。(月は1桁の場合は先頭に0が入る)
http://サイトURL/m年-月-01/
なのでこれを利用して、
<a href="http://ayamori.exblog.jp/m2005-01-01">1</a>
1の文字にリンクを貼っています。
それから<br>は改行を意味するタグです。

そしてCSS編集します。CSSの一番下にでも(どこでも良いが分かりやすく)入れてください。
/*以前の記事*/
DIV.KIJIBODY{ WIDTH : 160PX; FONT-SIZE : 12PX; FONT-FAMILY : Verdana,Osaka ; LINE-HEIGHT : 150%; COLOR : #777777;TEXT-ALIGN : LEFT;}

WIDTH:横幅
FONT-SIZE:文字の大きさ
FONT-FAMILY:文字の種類
LINE=HEIGHT:行の高さ
COLOR:文字の色
TEXT-ALIGN:文字の位置

横幅とかはご自分のブログに合った横幅にしてくださいね。文字の大きさや文字の種類、行の高さなども。
文字の位置は何も指定しないとCENTERになります。私は左寄せがいいなぁと思ったのでTEXT-ALIGNでLEFTにしています。
横幅がどのくらいか分からないよー!という場合。
CSS編集でDIV.MNかDIV.MNTTLを探すと、WIDTHって書いてあるはず。
これと同じにすれば大丈夫だと思います。
ちなみにHEIGHTを付け加えると、増設したメモ帳の高さも指定できます。

『KIJIBODY』は勝手につけました。何でもかまいません。ご自分で分かりやすい名前を付けてください。

以前にも書きましたが、/*~*/はコメントです。後で『これってどの部分を変化させてるんだっけ?』と分からなくなるので、メモを書いてるのです。なので書かなくてもOK。

最後にスキンを保存する前に必ずプレビューで確認してくださいね!!
※スキンによっては違う書き方かもしれません。ご了承ください。

ちなみに何故HTMLとCSSの両方を編集しなければいけないかと言うと・・・
HTMLで出来ることって限られちゃってるらしいんです。
それ以上のことをするにはCSSの編集が必要不可欠となります。
HTMLに<div class="KIJIBODY">と書き、そこから</div>の間は『CSSのDIV.KIJIBODYって書いてあるところで詳しく設定してるよーん』と言ってるんですね。

次回は『「次のページ」を画像に置き換える』です。
by ayamori | by ayamori-yako | 2005-08-14 16:59 | Skin | Comments(10) | Top↑
スクロールバーの色変更、タイトルに画像、コメント欄の変更
最近、仕事が落ち着いてきたのでCSS(スタイルシート)の勉強を少しずつ始めています。
自分のブログをいじっていくうちに、少しずつですが仕組みが分かってきました。

【スクロールバーの色変更】
まず手始めに→のスクロールバーの色変更をこちらを参考にやってみました。
CSS編集の画面で、/* excite blog default skin html */の下に
以下を加えました。
/* スクロールバーの色変更 */
HTML,BODY{scrollbar-base-color:色指定;}
『色指定』にはカラーコードかカラーネームを指定します。
(例 カラーコード=#000000  カラーネーム=black)こちらこちらを参考にしました。

もっと細かく色指定する場合は、こんなカンジにするそうです。
HTML,BODY{
scrollbar-arrow-color:#808080; /*▲の色*/
scrollbar-base-color:#efefef; /*基本色*/
scrollbar-darkshadow-color:#808080; /*深い影の色*/
scrollbar-highlight-color:#fcfcfc; /*明るい部分の色*/
scrollbar-shadow-color:#c0c0c0; /*影の色*/
scrollbar-track-color:#fcfcfc;} /*トラックの色*/

#808080はgray、#efefefはこんな色、#fcfcfcはこんな色、#c0c0c0はSilver。『こんな色』の文字色が微妙に違うの分かりますか?ちょっと分かりづらいですね・・・すみません。

IE5.5以降で表示されます。

ちなみに/*と*/は、/*から*/まではコメントなので無効にしてねという命令(?)です。
色々変更や訂正をすると、何が何だか分からなくなっちゃいますよね?
『これってどういう意味だっけ?』と後で思わないようにするためにコメントをつけて
分かりやすくしているというわけです。
なので*/から/*までは入れなくても良いということでもあります。


【タイトルに画像を付け加える】
色々方法があるとは思いますが、私がネットで調べて一番いいなぁと思ったやり方です。
以下をCSS編集画面で付け加えてください。
body{
background : #FFFFFF;
background-image : URL('画像のURL') ;
background-repeat:no-repeat;
background-position:left top;}
backgroundの#FFFFFFは、背景の色を白にという意味。
background-imageは画像のURLを入れます。
(ex.background-image : URL('http://pds1.exblog.jp/pds/1/200503/02/48/tea8.jpg'))
画像はスキン編集の「マイイメージアカウント」に登録すると便利かな?
background-repeatはno-repeatにし、1回だけ表示し繰り返さないようにしてあります。
その他には、
repeat :縦横に背景画像を繰り返して表示します。これが初期値。
repeat-x :横方向にのみ背景画像を繰り返して表示します。
repeat-y  :縦方向にのみ背景画像を繰り返して表示します。

background-positionはleft topにすることによって、左上に指定しました。
その他には、

位置を表すキーワードで指定
left,center,rightや、top,center,bottomといった位置を表すキーワードで指定。
この指定方法はそれぞれ、0%、50%、100%と指定しているのと同じです。

%値で指定
背景画像が表示される領域の左上からの距離を、横方向と縦方向の順で、%で指定します。
(ex.background-position: 20% 40%; と指定した場合、表示される領域の左端から20%、上端から40%の位置が背景画像の表示開始位置。)

数値で指定
背景画像が表示される領域の左上からの距離を横方向と縦方向の順で数値にpxなどの単位をつけて指定。
pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化。
数値にはマイナスの値も指定することができます。


【コメント欄を縦に広くする方法】
CSSの編集画面で、一番最後で良いので
TEXTAREA.TXTFLD {HEIGHT : 10em}
を付け加えるだけです。簡単だ-!!
10emの10を20や5など、色々変えてご自分の好みの高さにしてみてください。

【コメント欄を横に広くする方法】
TEXTAREA.TXTFLD {HEIGHT : 10em;
WIDTH :500px ! important;}
太文字の部分を付け加えてください。
500pxの500は好きな数値にしてみてください。
importantをつけることによって、最優先事項になるんですってー。すごーい。

【コメント欄に画像をつける】
コメントボックスにstrawberryの画像が加わったの、みなさん分かりましたか??
これも簡単です。
TEXTAREA.TXTFLD {
background-image:url('画像のURL');
background-position:100% 100%;
background-attachment: fixed;
background-repeat:no-repeat;

HEIGHT : 10em;
WIDTH :500px ! important;}
太文字の部分を付け加えてください。
background-attachmentをfixedにすることによって、スクロールしても固定されるようになっています。
ちなみにスクロールに伴って、背景画像も移動させる場合は、fixedをscrollにしてください。

ちなみにエキサイトブログ内で参考にさせていただいたブログは
ようまてブログ
はい こちらサポセン。
めざせマイスキン

みなさんすごーっく詳しいです。私もこうなる日が来るかしら…。
by ayamori | by ayamori-yako | 2005-03-10 21:57 | Skin | Comments(13) | Top↑
記事タイトルにコップをつけてみました
一昨日から色々スキンをいじってます。

1.topの右に自転車を置きました。
2.各記事の下にあるcommentsの横に『top↑』をつけました。
  これを押すと一番上に戻ります。
3.ねこ温度計を独立させて、新たに『リンク』のメモ帳を追加しました。
  メモ帳は何個でも追加できるようなんですよ。なのでもっと増やしてみようかな。
4.ブログのタイトル先頭に、キッチン用品をぶら下げました。

この設置に関してはSoleil*Gardenさんのを参考にしました。

本当はタイトルの右側に、おいしそうな画像を大きく載せたりしたいなぁと
思っていたのですが、これ以上いじるとゴチャゴチャしそうなので
飽きるまでこんな感じで行きたいと思います。

クリスマスなので、どこかにツリーを置くかも。探してみてね。

by ayamori | by ayamori-yako | 2004-12-14 17:21 | Skin | Comments(2) | Top↑
ネコ温度計
色々サイトを見ていたら、『ネコ温度計』というものがありました。
SHOCK WAVEをインストールしていないと見れないのですが、
船橋市の気温や天気を表示してくれます。
ネコの姿で、快適なのか寒いのかなどが分かるそうです。
ちなみに背景にある時計(右上)は実際の時間ですよー。

この設置に関してはSoleil*Gardenさんのを参考にしました。

どうやらブログでは『こうさぎ』や『黒猫』を飼う、ブログペットというものが
流行っているようです。
でもこれらはちょっと重いようなので今回は止めておきました。
ペットがいても楽しいかなー。
by ayamori | by ayamori-yako | 2004-12-13 15:02 | Skin | Comments(0) | Top↑
線を入れてみました
HTMLなんて全く分からなく、デザインを変えたいけどどうしたらいいのやら…
なーんて思っていたのですが、やっぱり今は情報社会。
ウェブ上に親切に解説してくれている方、結構いらっしゃるんですよ。

早速HTMLとは?スタイルシートとは?を読み、線を入れてみました。
今はBROWNなんですが、違う色でも試してみたいと思います。
これ、なかなか楽しいです。ハマりそう…。
でもごちゃごちゃしたブログにならないよう、シンプルでステキなものに
したいと思ってます。
by ayamori | by ayamori-yako | 2004-12-13 15:00 | Skin | Comments(10) | Top↑
カウンターつけました
さっそくブログのスキンをいじってみました。
最初にやりたかったのは『カウンター』をつけること。

色んなHPを見るとカウンターをつけていることが多く、
ブログとはいえ、私もつけてみたーい!
ついでにHTMLも覚えられて一石二鳥!と思い、
色んなサイトにアクセスしてみました。

広告付きの無料カウンターや、有料だけど広告表示なしのカウンターなど、
色々なカウンターがあるようです。
デザインも豊富に提供してくれているところもありました。

無料で広告表示なし、デザインも400種類あるのを見つけて
早速アドレスなどを登録。
すぐに返信メールが来て、『あなたのHPにこのタグを貼り付けてください』
と連絡が。
昨日ブログを始めたばかりの私には、さっぱり意味が分かりません。
どうやらこのブログの元になっているスキンにアドレスのような文章を
貼り付けるようなんですよね。
HTML言語(?)のどこかに貼り付ければいいんですが、どこに貼り付ければいいのよー!!

ものすごい試行錯誤の末、やっとタイトルの横に設置することが出来ました。
知らないと本当に難しいですね、これ。
もう少し勉強して、このブログにも少しデザインを凝らしたいと思います。

*この設置に関してはSoleil*Gardenさんのを参考にしました。
 ありがとうございます。
by ayamori | by ayamori-yako | 2004-12-11 16:12 | Skin | Comments(2) | Top↑