ココログの『続きを読む』は、『続き』じゃないので・・・

記事を書く時、ほとんど本文に書いて、
『続き』部分に書かなくなってから、はや２年・・・。
気づきません・・・でした。
『続きを読む』を押すと・・・、
記事の先頭に行くなんて・・・意味無いじゃん。( ﾟдﾟ)ﾎﾟｶｰﾝ
いつからなんでしょうか・・・ココログフリーさん。
無料で利用させ頂いた当初は、
『続き』の文が表示されるまで、時間がかかるので、
『続きを読む』の直下に『続き』が表示出来るスクリプトを、
捜したものですが・・・。

９月９日のココログフリーのバージョンアップ後、
『カテゴリ』と『バックナンバー』のプルダウンメニューが、
表示されなくなってしまったので、
解決策を求めて、「風柳亭 - 別館：書庫のある庵 - 」に。
肝心要のプルダウンメニューの解決方法は不明ながら、
なんと、５月２３日に『続きを読む』対策記事が出てました。

【発見】風柳亭 - 別館：書庫のある庵 -: 【ココログ】『続きを読む』をクリックしても、記事の途中に飛ばない場合の対策

<style type="text/css">
#more {
display:block;
clear:both;
width:1px;
height:1px;
}
</style>

風柳さん、ありがとうございます・・・です。

ＣＳＳで「羞恥心飾り」

梅雨明け宣言したのに・・・、

しとしと、じとじと、じめじめ、しめしめ・・・。（＾◇＾）

・・・なので、
・・・なぜか、
・・・気分展開・・・（おっぴろげよう！）・・・です～。(^ｰ^)

桜も散り、お団子も去り（もうすぐぼだもづの季節）、
ブログの衣替え・・・です～。(^O^)／

我が家の住人のご紹介・・・どすぇ～。
冬至のかぼちゃの『pabo』か『羞恥心』・・・。┐(´ー｀)┌

左から、
ジャン、ＯＢＯＣＣＯ士・・・・・・・温泉漬けフニャ体型。
ジャン、ＯＢＯＣＣＯ・・・・・・・・・お腹にドーナツ体型。
シャン、ＹＯＲＯＫＯＢＡＳＨＩ・・・食わず嫌い大王イカ体型。

それでは、体型披露！！・・・。

(　￣▽)ﾉ彡☆ばんばん・・・自画自参。♪ d(⌒o⌒)b♪

しか～し、
鬱陶しさを解消するハズが・・・、

鬱陶し～～～～さが、増しました・・・、

・・・ような気がするのは、わたしだけ？・・・。

というわけで、ＣＳＳって楽しい！！！？。（＾◇＾）
詳しくは、『CSSで「X’ｍａｓデコレーション」をした』 を、見てね。

CSSで「お正月飾り」をした

『のあろぐ。の付録』ののあさんが、『お正月用に』と、
かわいらしいアイコンを作っていました・・・です～。(^^♪

早速お借りして、お飾り～・・・です～。（＾◇＾）

前回の「X’ｍａｓデコレーション」CSSを修正して、
画像の表示の仕方を、変えました。

前回と違う設定でアイコンを付けたのは、
以下の項目・・・です～。

【サイドバー】
１、左サイドバータイトルを対象

#left .sidebar h2
{
background-image:url(http://osanago-san.cocolog-nifty.com/blog/customize/image/NoaShogatu/yh-s4.gif);
background-repeat:no-repeat;
height:76px;
padding-left:50px;
padding-top:5px;
}

２、右サイドバータイトルを対象

#right .sidebar h2
{
background-image:url(http://osanago-san.cocolog-nifty.com/blog/customize/image/NoaShogatu/yh2-s4.gif);
background-repeat:no-repeat;
height:61px;
padding-left:50px;
padding-top:5px;
}

今回は、サイドバーの左右を、別々の画像にしてみました。
画像の大きさも、前より大きくしました。
記事欄の設定の仕方は同じで、下の画像に、変えました。
お餅大好きOBOCCO・・・です～。

「寿」を見ると、おめでた気分OBOCCO・・・です～。

のあさん、ありがとうございます。m(__)m
お陰様で、お正月が迎えられます～る～。♪ d(⌒o⌒)b♪

ーーーーーーーーーーーーーーーーーーーーーーー

のあさん、お詫び申し上げます～。m(__)m

『お正月用に』を見ると、とてもきれいに見えるのに、
縮小すると、あれ～・・・な、感じに。(T-T)
GIFを、きれいに縮小するソフトを捜して、
５本試しても、良くならなかった・・・です～。(T^T)ｸｩｰ
「X’ｍａｓデコレーション」では、きれいだった思ったのは、
勘違いで、きれいに縮小されていなかった・・・です。
やはり、縮小するものでは、無いんですね・・・。

それと、地色が濃い我がブログでは、
縁取りが付いたように、なってしまいました。(T-T)
白地なら縮小しても、気にならないのですが・・・。

のあさんの作品と、印象が違うように見えることが、
気がかりです。(；一_一)
・・・が、OBOCCOは、縁取りがあっても、
近目ですので、気になりません・・・です！。（＾◇＾）
このまんま、ひがし・・・
このまま、使わせて下さいませ～。m(__)m

【独り言】
のあさんが言う、
「サイズをちっちゃくして、ご利用いただいてもいいですよ。」
って、なんだろう
「background-image」で、サイズ指定やりたい、
とか言ってみる♪
でも、出来ない、かも・・・
あのまんま、ひがし・・・
あのまま、使いたいけど、おっきいとか思った？
あー、画才がほしいなー

*独り言は、ブログペットでない「OBOCCO」が書きましたよ。

ＣＳＳでイルミネーションＯＢＯＣＣＯ！

・・・いや、
ＣＳＳというよりも、「style="position: ～;"」を使って、
画像の表示位置を指定して、
大きい画像の上に、小さい画像を乗っけて、
一枚の画像に見せかける技を、使ってみました。（＾◇＾）

トップページの『お知らせ』で、試してみました。
元画像に、

イルミネーションＯＢＯＣＣＯを、乗せ、

それだけでは、あまりにもさみしい・・・。(T^T)ｸｩｰ
・・・ので、
のあさんからお借りした、

クリスマスアイテムをば、
乗せました。m(__)m

最初に、画像を表示する部分を、括ります。

<div align="center" style="position: relative">
画像ファイル名
</div>

画像ファイル名の所に、表示する画像を入れます。

【元画像】本来の位置
<img src="元画像ファイル" style="position: static;">

【イルミネーションＯＢＯＣＣＯ】上から100pix、左から120pixの位置
<img src="ＯＢＯＣＣＯファイル" style="position: absolute; top: 100px; left: 120px;">

【クリスマスアイテム】top、leftの値をそれぞれの位置
<img src="クリスマスアイテム" style="position: absolute; top: 100px; left: 250px;">

※「position: absolute」は、<div></div>で括った部分の始点にした、絶対位置

位置決めするのに、手間がかかるけど、
今回の様に、元画像にアニメーションgifを表示したい時は、
便利・・・なのだー・・・かも知れない～。（＾◇＾）

ＣＳＳで「entry-body-bottom」を、いじりたかったのに

『CSSで「X’ｍａｓデコレーション」をした』で、心残りが・・・。

ホントは、こんな風にしたかったのに・・・。(T^T)ｸｩｰ

ＣＳＳで、「entry-body-top」の背景画像に、

を設定し、
対であると思っていた、
「entry-body-bottom」の背景画像に、、

を設定した・・・のよね～。（＾◇＾）

ＩＥ６で、思ったとおりに表示出来たのに、
記事本文の上

記事本文の下

Ｆｉｒｅｆｏｘ2.0.0.10で表示すると、
記事本文の上

記事本文の下

(._. )( ･_･)(･_･ )( ･_･)アレ～・・・。(；一_一)

きつねに化かされた・・・です～。

「top」と「bottom」は、一対ではないのかな～。(?_?)
一記事を画像で囲むやり方では、
「entry-top」と「entry-bottom」各々に背景を設定すれば、
きちんと表示されるのに、

な～ぜ・・・ですの～。┐('～`；)┌

CSSで「X’ｍａｓデコレーション」をした

『のあろぐ。の付録』ののあさんが、『クリスマス用に』と、
かわいらしいアイコンを作っていました・・・です～。(^^♪

早速お借りして、華やかし～・・・です～。（＾◇＾）

【参考】初めてのココログ・カスタマイズ: 第10回：サイドバーのタイトルにワンポイント画像をつけてみよう
【参考】サイドバーの項目に別々の画像をつけたい

ＣＳＳでアイコンを付けたのは、以下の項目・・・です～。

【サイドバー】
１、全サイドバータイトルを対象

.sidebar h2 {
background-image:url(http://osanago-san.cocolog-nifty.com/blog/customize/image/NoaXmas/NOA_xt2_s.gif);
background-repeat:no-repeat;
height:32px;
padding-left:32px;
padding-top:12px;
}

２、『最近のコメント』を別アイコンに置き換え

#recent-comment h2 {
background-image: url(http://osanago-san.cocolog-nifty.com/blog/customize/image/NoaXmas/NOA_xb_s.gif);
background-repeat:no-repeat ;
height:32px;
padding-left:32px;
padding-top:12px;
}

３、『My Pet』を別アイコンに置き換え

マイリストの項目名を、
『My Pet』
　　　↓
『<div id="my-link-list">My Pet</div>』
と、divで囲み、idを付加する

#my-link-list {
background-image: url(http://osanago-san.cocolog-nifty.com/blog/customize/image/NoaXmas/NOA_xc_s.gif);
background-repeat:no-repeat ;
height:32px;
margin-left:-32px;
margin-top:-12px;
padding-left:32px;
padding-top:12px;
}

【記事】
１、日付欄

#center div.content h2 {
background-image:url(http://osanago-san.cocolog-nifty.com/blog/customize/image/NoaXmas/NOA_xs_s.gif);
background-repeat:no-repeat;
height:32px;
padding-left:32px;
padding-top:12px;
text-align: left;
}

２、エントリートップ

.entry-body-top {
background-image:url(http://osanago-san.cocolog-nifty.com/blog/customize/image/NoaXmas/NOA_xl_s.gif);
background-repeat:no-repeat;
background-position: center top;
height:48px;
}

こんなＣＳＳの設定で、一応デコレーション完了！。

ほんとは、記事本文の下にも、表示したかったけど、
なにをやっても、だめだった・・・。｡･ﾟﾟ･(>_<)･ﾟﾟ･｡
『entry-body-bottom』って、なんじゃい・・・。(；一_一)
ぐちの詳細は、別記事でするとして、

のあさん、ありがとう・・・です～。（●＾o＾●）

ついでに・・・、
次は、『アレ』ですか～。（＾◇＾）

CSSで「お知らせに背景画像」を付けてみた

「お知らせ」に枠をつけて表示していますが、
縁付きボード風な背景画像に、してみました。

【参考】初めてのココログ・カスタマイズ
第37回：記事欄を角丸の画像で囲んでみよう
【参考】CSSで角丸BOX

初めてのココログ・カスタマイズさんでは、
全記事を囲んでしまうので、
個別に囲む方法を捜して、「角丸BOX」を見つけました。

<style type="text/css">
<!--
/*画像上*/
.round-top {
background: #c0893b url(http://osanago-san.cocolog-nifty.com/blog/customize/image/oshirase-top.gif) no-repeat top left;
}
.round-top span {
height: 16px;
display: block;
}
/*画像下*/
.round-bottom {
background: #c0893b url(http://osanago-san.cocolog-nifty.com/blog/customize/image/oshirase-bottom.gif) no-repeat bottom left;
}
.round-bottom span {
height: 16px;
display: block;
}
/*画像中*/
.round-body {
background: #c0893b url(http://osanago-san.cocolog-nifty.com/blog/customize/image/oshirase-body.gif) repeat-y bottom left;
}
.round-body p { margin: 0px; }
-->
</style>

使い方は、「お知らせ」のテキストエリア内に、

<div class="round-top"><span></span></div>
<div class="round-body">
～（表示したいテキスト）
</div>
<div class="round-bottom"><span></span></div>

のように、表示したいテキストを挟み込みます。

「お知らせ」のカテゴリー説明のＳＷＦで門前の小僧で、
テストしてみました。

少しは、「お知らせ」らしくなりました。（●＾o＾●）

でも、この方法だと、
「お知らせ」スクリプトの設定内容が増えすぎ、
他に、方法が無いか思案中・・・です。（＾◇＾）

CSSで「画像をポラロイド風」にしてみた

画像をポラロイド風にしてみた。
ついでに、画像に枠を付けてみた。

【発見】KOROPPYの本棚
CSSでココログの画像をポラロイド風にアレンジ

【ポラロイド風と枠のみ】

<style type="text/css">
<!--
/* 画像をポラロイド風 */
.entry-body img {
background-color: #FFFFFF;
border-width: 2px;
margin: 5px 10px 5px 5px;
padding: 3px 3px 20px 3px;
border-style: solid;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
background-image: url(http://osanago-san.cocolog-nifty.com/blog/customize/image/comment-ashiato-2.gif);
background-repeat:no-repeat;
background-position:center bottom;
}
/* 画像を枠のみ class="waku"*/
.entry-body img.waku {
margin: 0px;
padding-bottom: 3px;
background-image:none;
}
-->
</style>

全ての画像がポラロイド風に表示されます。
のあさん作

ポラロイド風にしたくない時は、

<img src="画像URL">
を、
<img class="waku" src="画像URL">
にする

と、こうなります。

基本的な.entry-body img { }をCSSで設定せずに、
class="waku"のようなものをいろいろ設定して、
画像毎に表示の仕方を、変える事もできます。(^^♪

「コメント欄に区切り線とアイコン」付けた・・・けど

コメントが複数有ると見づらかったので、区切り線を付けた。
コメントと区切り線が、近すぎたので調整した。
投稿者の欄の左横に、アイコン風画像が付けられとの事で、
やってみた。

【発見】KOROPPYの本棚
コメントごとにアイコンと区切り線を表示する

<style type="text/css">
<!--
/*区切り線*/
.comment-content { border-bottom: 1px dotted #e6ce72; }

/*アイコン*/
.comment-content p.posted {
background-image:url(http://osanago-san.cocolog-nifty.com/blog/customize/image/comment-ashiato-2.gif);　
background-repeat:no-repeat;
background-position:left top;
padding: 1px 18px;
}

/*コメントと線が近すぎる為*/
.comment-body {
padding: 10px 0px; /*上下、左右*/
}

/*ナビと線が近すぎる為*/
.ccpv_navigator {
padding-top: 10px;
}-->
</style>

結果は、コメント欄を見てね。(^^♪

残念な事に、p.postedのpaddingをどんなにいじくっても、
アイコン風画像が「投稿」と重なってしまって、見えない。
その上、区切り線と離れすぎて、いや～んなかんじです。

現在、原因不明につき、模様眺めです～。(ToT)/
風柳さんから、

.comment-content p.posted {
となっているところを、
#center div.comment-content p.posted {
に変えてやれば、

と、アドバイスを頂きまして、解決しました。
風柳さん、ありがとうございました。m(__)m

CSSで「引用部分を装飾」した

引用文や強調文を判別し易い様に、blockquoteをCSSで、
いろんなところを参考にして、修飾してみた。

【発見】KOROPPYの本棚
引用をお洒落にする小技【基本】
【参考】初めてのココログ・カスタマイズ
第19回：引用部分の装飾を設定してみよう【付箋紙風】
【参考】果報は寝て待て(-_☆)
引用の表示を指定してみました【スクロールバー付き】
【参考】あんちもん2.Lab
要素で横スクロールバーを出す方法【スクリプト等コード】

【基本】（幅・高さ指定無し）

<style type="text/css">
<!--
/*基本*/
.content blockquote{
line-height: 100%; /*行の高さ*/
border:2px dashed #8b0000; /*枠線の太さ、種類、色*/
padding: 5px 10px 5px 10px; /*枠線の内側の余白*/
margin:3px 20px 3px 20px; /*枠線の外側の余白*/
background-color: #6ab64b; /*枠線の中の背景色*/
color: ; /*文字色*/
width: ; /*幅*/
height: ;/*高さ*/
}
-->
</style>

【付箋紙風】

/*付箋紙風囲み*/
.content blockquote.fusenDarkOrange{
border-top:1px solid #cccccc;
border-left:5px solid #ff8c00;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;
padding:5px 10px;
margin:5px 5px;
background-color:#dafdf7;
color:brown;
}

【スクロールバー付き】

.content blockquote.scroll {
line-height: 100%; /*行の高さ*/
border:1px solid #8b0000;
padding: 5px 10px;
margin: 3px 20px 3px 20px;
background-color:#6ab64b;
color: ; /*文字色*/
width: ; /*幅*/
height:200px; /*高さ*/
overflow:auto;/*幅をはみ出た処理*/
}

※「果報は寝て待て」さんでは、overflow-x:、overflow-y:、scrollbar-base-color:が設定されていましたが、IE独自の機能との事で、削除しました。
※上記のスクリプトだけでは、短いのでサンプルとして、これ以下の文章を付け加えました。

【スクリプト等コード】（行を折り返さない）

/*CSS、JavaScript等*/
.content blockquote.code {
border:1px solid #8b0000;
padding: 5px 10px;
margin: 3px 20px 3px 20px;
background-color:#6ab64b;
color: ; /*文字色*/
width: ; /*幅*/
height:200px; /*高さ*/
overflow: auto;
white-space: pre;
}
.content blockquote pre {    font-size: 12px;    overflow: auto;}

Firefoxでは、折り返されないで表示されますが、私のIE６では折り返されて表示されます。(；一_一)
なぜ？。

何か間違いが有れば、教えて下さいませ～。（●＾o＾●）