スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランク - FC2 Blog Rankingブログ村
--.--.-- [--] - --:-- | スポンサー広告

PIYOログCSS

PIYOが出来て2ヶ月ぐらい経ったでしょうか。
既に「PIYOViewerβ」を設置してはいますが、やっと公式のプラグインも出来たようなので、ついでだから設置してみた。設置したのはいいけど、ブログのデザインがIE6で見たら思いっきり崩れてもーたー!!ナンテコッタ/(^o^)\
親切なことにCSSも触れるようにしてあったので、改良版を作ってみたよ。

とりあえず、気になった部分は2つ。
・URLを貼ると枠からはみ出してしまう。
・絵文字の位置が上すぎてなんか変。

上記2点を改善すべく手を入れた「公式のデフォルトCSS改良版」と、背景色と枠線と無駄な色を取っ払った極々シンプルな「明るい背景用」、「暗い背景用」を作ってみました。主に自分用に。

ちなみに、右側のメニュー3にPIYOログを設置してありますん。
今月いっぱいは、「明るい背景用」を使用。今日含めてあと3日ですがw
ログのリンクの色はブログによって変わりますです。

勝手に持って帰って使うのは自由ですが、自分が作ったんだぜーハッハーなんて配布したりするのは固くお断りします。変なことに巻きこまれたくないです。
不具合が出るようであればご一報を。出来る限り直します。多分。

追記 : スクロール版も作ったよ。
どう見ても長すぎるしね。無理矢理縮めてしまえ作戦です。
open/closeで開閉出来るんだから、ページ開いた時にログを1つだけ表示にして閉じた状態にしてくれればいいのにと思ってたり。いきなり全開って羞恥心はないのか!?(何
もしくはログ表示個数を選択出来るようにするとかさー。
閉じた状態で何も残ってないのも寂しすぎるって話です。

追記(2007/09/04) : 表示件数の変え方と吹き出しCSSを追加。
吹き出しはCSS Speech Bubblesを参考にしました。

追記(2007/09/28) : 「ポップアップ:on/off」が追加されて吹き出しの三角部分が離れてしまったので修正しました。

・ PIYOログ表示件数変更の方法

PIYOの設定で取得出来るタグを少しだけ変えるだけで簡単に出来ます。
タグの文字列の中に「limit」というのがあるのでそこを探します。
たとえば私のタグだとオレンジ部分↓
src='http://piyo.fc2.com/contents/bparts/?action=log&mode=mylog
&tagcode=4f02a11022ee1eb45fcc77f98213af90&piyoid=peach&limit=1'
見つけたらそこの数値を変えるだけ。
例)
1つにしたいなら limit=1
2つにしたいなら limit=2

ただそれだけです。めっちゃカンタン(・∀・)b

=====
公式CSS改良版の追加部分はオレンジ。
コメントを書いてますが、そのまま貼っても大丈夫です。
(コピーをする場合は、文字を反転して「Ctrl+C」)

公式のPIYOログCSSをちょっと工夫したCSS
・ 公式のデフォルトCSS改良版
・ 公式のデフォルトCSS改良&スクロール版

背景色を設定せずにどんなブログで浮かないシンプルなCSS
(文字の大きさをpx指定=ブラウザのテキストサイズに左右されません)
・ 明るい背景用
・ 明るい背景用スクロール版
・ 暗い背景用
・ 暗い背景用スクロール版

プロフの画像の上に吹き出し表示とかどうだろう。
・ 吹き出しCSS

メモ
・ 公式のデフォルトCSS

FC2PIYO 

/* 公式のデフォルトCSS改良版ここから */


a.nickname:link,a.nickname:visited { color:#339900;font-weight:bold;}

a.nickname:hover { color:#ffa500;}

div.tab{
float:left;
width:100%;
font-size:93%;
border-bottom:1px solid #f45551;
line-height:normal;
}

.b1{
background-image: none;
}

.b2{
background-image: none;
}

div.mylog {
width: 160px;
padding: 5px;
border: 1px solid #a5a5a5;
font-size: small;
text-align: left;
color: #666666;
background-color: #ffffff;
overflow: hidden;/* 枠からはみ出る部分の非表示設定 */
}

div.mylog img { vertical-align: middle;}/* 絵文字の位置を中央に設定 */

div.mylog p.title {
font-weight: bold;
color: #838383;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #a5a5a5;
margin: 0 0 10px;
padding: 0 0 3px;
}

div.mylog dl {
margin: 0;
padding: 0;
}

div.mylog dt.day {
width: 160px;
color: #339900;
font-size: x-small;
margin: 0;
padding: 0 0 5px;
background-color: #ffffff;
background-image: none;
text-align: left;
}

div.mylog dd.piyolog {
margin: 0 0 5px;
color: #333333;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #a5a5a5;
padding: 0 0 10px;
}

div.license {
font-size: x-small;
text-align: right;
}
/* 公式のデフォルトCSS改良版ここまで */ ↑上に戻る


※ スクロールバーの色はIE系のブラウザのみ綺麗に表示されます。FireFoxやOperaはブラウザの右側についている普通のスクロールバーと同じになる。と思う。


/* 公式のデフォルトCSS改良&スクロール版ここから */
a.nickname:link,a.nickname:visited { color:#339900;font-weight:bold;}

a.nickname:hover { color:#ffa500;}

div.tab{
float:left;
width:100%;
font-size:93%;
border-bottom:1px solid #f45551;
line-height:normal;
}

.b1{
background-image: none;
}

.b2{
background-image: none;
}

div.mylog {
width: 160px;
height: 180px;/* 表示する高さ */
padding: 5px;
border: 1px solid #a5a5a5;
font-size: small;
text-align: left;
color: #666666;
background-color: #ffffff;
overflow: auto;/* 枠からはみ出る部分の設定 */
overflow-x: hidden;/* 横方向スクロールバー非表示設定(IEのみ) */
scrollbar-3dlight-color: #a5a5a5;/* スクロールバーの配色 */
scrollbar-arrow-color: #a5a5a5;
scrollbar-darkshadow-color: #a5a5a5;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-track-color: #ffffff;

}

div.mylog img { vertical-align: middle;}/* 絵文字の位置を中央に設定 */

div.mylog p.title {
font-weight: bold;
color: #838383;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #a5a5a5;
margin: 0 0 10px;
padding: 0 0 3px;
}

div.mylog dl {
margin: 0;
padding: 0;
}

div.mylog dt.day {
width: 160px;
color: #339900;
font-size: x-small;
margin: 0;
padding: 0 0 5px;
background-color: #ffffff;
background-image: none;
text-align: left;
}

div.mylog dd.piyolog {
margin: 0 0 5px;
color: #333333;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #a5a5a5;
padding: 0 0 10px;
}

div.license {
font-size: x-small;
text-align: right;
}
/* 公式のデフォルトCSS改良&スクロール版ここまで */ ↑上に戻る

/* 明るい背景用ここから */


a.nickname:link , a.nickname:visited {
color: #4a4a4a;
font-weight: bold;
text-decoration: underline;
}

a.nickname:hover {
color: #848484;
text-decoration: underline;
}

div.tab{
float: left;
width: 100%;
font-size: 12px;
line-height: normal;
}

div.tab input {
width: 49%;
border-color: #a5a5a5;
background: #ffffff;
margin-bottom: 5px;
color: #a5a5a5;
}

.b1 {
background-image: none;
margin-right: 2px;
}

.b2 { background-image: none;}

div.mylog {
width: 95%;
padding: 5px;
font-size: 12px;
text-align: left;
color: #666666;
overflow: hidden;
}

div.mylog p.title {
font-weight: bold;
color: #4a4a4a;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #A5A5A5;
margin: 0 0 10px;
padding: 0 0 3px;
}

div.mylog img { vertical-align: middle;}

div.mylog dl {
margin: 0;
padding: 0;
}

div.mylog dt.day {
width: 160px;
color: #555555;
font-size: 12px;
margin: 0;
padding: 0 0 5px;
background-image: none;
text-align: left;
}

div.mylog dd.piyolog {
margin: 0 0 5px;
color: #444444;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #a5a5a5;
padding: 0 0 10px;
}

div.license {
font-size: 12px;
text-align: right;
}
/* 明るい背景用ここまで */ ↑上に戻る

/* 明るい背景用スクロール版ここから */


a.nickname:link , a.nickname:visited {
color: #4a4a4a;
font-weight: bold;
text-decoration: underline;
}

a.nickname:hover {
color: #848484;
text-decoration: underline;
}

div.tab{
float: left;
width: 100%;
font-size: 12px;
line-height: normal;
}

div.tab input {
width: 49%;
border-color: #a5a5a5;
background: #ffffff;
margin-bottom: 5px;
color: #a5a5a5;
}

.b1 {
background-image: none;
margin-right: 2px;
}

.b2 { background-image: none;}

div.mylog {
width: 95%;
padding: 5px;
font-size: 12px;
text-align: left;
color: #666666;
height: 180px;
overflow: auto;
overflow-x: hidden;/* 横方向スクロールバー非表示設定(IEのみ) */
scrollbar-3dlight-color: #a5a5a5;
scrollbar-arrow-color: #a5a5a5;
scrollbar-darkshadow-color: #a5a5a5;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-track-color: #ffffff;
}

div.mylog p.title {
font-weight: bold;
color: #4a4a4a;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #A5A5A5;
margin: 0 0 10px;
padding: 0 0 3px;
}

div.mylog img { vertical-align: middle;}

div.mylog dl {
margin: 0;
padding: 0;
}

div.mylog dt.day {
width: 160px;
color: #555555;
font-size: 12px;
margin: 0;
padding: 0 0 5px;
background-image: none;
text-align: left;
}

div.mylog dd.piyolog {
margin: 0 0 5px;
color: #444444;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #a5a5a5;
padding: 0 0 10px;
}

div.license {
font-size: 12px;
text-align: right;
}
/* 明るい背景用スクロール版ここまで */ ↑上に戻る


/* 暗い背景用ここから */


a.nickname:link , a.nickname:visited {
color: #848484;
font-weight: bold;
text-decoration: underline;
}

a.nickname:hover {
color: #d8d8d8;
text-decoration: underline;
}

div.tab {
float: left;
width: 100%;
font-size: 12px;
line-height: normal;
}

div.tab input {
width: 49%;
border-color: #848484;
background: #4a4a4a;
margin-bottom: 5px;
color: #848484;
}

.b1 {
background-image: none;
margin-right: 2px;
}

.b2 {
background-image: none;
}

div.mylog {
width: 95%;
padding: 5px;
font-size: 12px;
text-align: left;
color: #a9a9a9;
overflow: hidden;
}

div.mylog p.title {
font-weight: bold;
color: #848484;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #a5a5a5;
margin: 0 0 10px;
padding: 0 0 3px;
}

div.mylog img { vertical-align: middle;}

div.mylog dl {
margin: 0;
padding: 0;
}

div.mylog dt.day {
width: 160px;
color: #7d7d7d;
font-size: 12px;
margin: 0;
padding: 0 0 5px;
background-image: none;
text-align: left;
}

div.mylog dd.piyolog {
margin: 0 0 5px;
color: #a9a9a9;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #a5a5a5;
padding: 0 0 10px;
}

div.license {
font-size: 12px;
text-align: right;
}
/* 暗い背景用ここまで */ ↑上に戻る

/* 暗い背景用スクロール版ここから */


a.nickname:link , a.nickname:visited {
color: #848484;
font-weight: bold;
text-decoration: underline;
}

a.nickname:hover {
color: #d8d8d8;
text-decoration: underline;
}

div.tab {
float: left;
width: 100%;
font-size: 12px;
line-height: normal;
}

div.tab input {
width: 49%;
border-color: #848484;
background: #4a4a4a;
margin-bottom: 5px;
color: #848484;
}

.b1 {
background-image: none;
margin-right: 2px;
}

.b2 {
background-image: none;
}

div.mylog {
width: 95%;
padding: 5px;
font-size: 12px;
text-align: left;
color: #a9a9a9;
height: 180px;
overflow: auto;
overflow-x: hidden;/* 横方向スクロールバー非表示設定(IEのみ) */
scrollbar-3dlight-color: #4a4a4a;
scrollbar-arrow-color: #4a4a4a;
scrollbar-darkshadow-color: #4a4a4a;
scrollbar-face-color: #848484;
scrollbar-highlight-color: #848484;
scrollbar-shadow-color: #848484;
scrollbar-track-color: #848484;
}

div.mylog p.title {
font-weight: bold;
color: #848484;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #a5a5a5;
margin: 0 0 10px;
padding: 0 0 3px;
}

div.mylog img { vertical-align: middle;}

div.mylog dl {
margin: 0;
padding: 0;
}

div.mylog dt.day {
width: 160px;
color: #7d7d7d;
font-size: 12px;
margin: 0;
padding: 0 0 5px;
background-image: none;
text-align: left;
}

div.mylog dd.piyolog {
margin: 0 0 5px;
color: #a9a9a9;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #a5a5a5;
padding: 0 0 10px;
}

div.license {
font-size: 12px;
text-align: right;
}
/* 暗い背景用スクロール版ここまで */ ↑上に戻る


表示件数を1件にするときれいに仕上がります。
フォント(文字)の大きさは指定してあります。
気に入らなければ各自で調節してくだせぇ。
そのかわり表示がおかしくなったと言われても責任は取りません。取れません。


プロフ画像の上に表示する設定方法はコチラ
/* 吹き出しCSSここから */
a.nickname:link , a.nickname:visited {
color: #339900;
font-weight: bold;
}

a.nickname:hover {
color: #ffa500;
}

div.tab{
float: left;
width: 100%;
font-size: 12px;/* 文字サイズ12pxに指定 */
line-height: normal;
}

.b1 {
background-image: none;
margin-right: 2px;/* タブの右側を2px開く設定 */
}

.b2 { background-image: none;}

/* タブの装飾(いらなければ消す部分)ここから */
div.tab input {
width: 42%;/* タブを両方同じ大きさに */
border-color: #a5a5a5;/* タブを両方同じ大きさに */
background: #ffffff;/* タブの背景色 */
margin-bottom: 5px;/* 下のスペース */
color: #a5a5a5;/* タブの文字の色 */
}

/* タブの装飾(いらなければ消す部分)ここまで */

div.mylog {
width: 95%;/* PIYOログ全体の幅 */
padding: 5px;
font-size: 12px;/* 文字サイズ12pxに指定 */
text-align: left;
color: #666666;
}

div.mylog p.title { display:none;} /* 「最近のPIYO」非表示 */

div.mylog dl {
margin: 0;
padding: 0;
}

div.mylog dt.day {
clear: both;/* フロートのクリア */
width: 95%;/* 日付枠の幅(必ずdd.piyologの幅設定と同じである事) */
color: #339900;
font-size: 11px;/* 文字サイズ11pxに指定 */
margin: 0;
padding: 5px 5px 0;/* 枠と文字のスペース */
border-top: 1px solid #c9c2c1;/* 枠の上部分の線 */
border-left: 1px solid #c9c2c1;/* 枠の左部分の線 */
border-right: 1px solid #c9c2c1;/* 枠の右部分の線 */

background: #ffffff;
text-align: left;
}

div.mylog img { vertical-align: middle;} /* 絵文字の位置を中央に設定 */

div.mylog dd.piyolog {
width: 95%;/* ログ枠の幅(必ずdt.dayの幅設定と同じである事) */
margin: 0;
color: #333333;
background-color: #ffffff;
border-right: 1px solid #c9c2c1;/* 枠の右部分の線 */
border-left: 1px solid #c9c2c1;/* 枠の左部分の線 */
border-bottom: 1px solid #c9c2c1;/* 枠の下部分の線 */
padding: 0 5px 5px;/* 枠と文字のスペース */
overflow: hidden;/* 枠からはみ出る部分の非表示設定 */

}

/* ログのリンク色設定(入らない場合は消す部分)ここから */
div.mylog dd.piyolog a:hover,div.mylog dd.piyolog a:active {
color: #8a8a8a;
text-decoration: underline;
}

/* ログのリンク色設定ここまで */

div#block { display: none;} /* 9月28日追記部分「ポップアップ:on/off」の部分を表示しないようにします。(常にONの状態になります。 */

/* 噴出しの三角部分(分からない人はそのままコピーでおk) */
div.license {
font-size: 10px;/* 文字サイズ10pxに指定 */
text-align: right;
position: relative;
width: 93%;
margin: 0px;
padding: 7px 0 0 15px;
top: -1px;
background: transparent url(http://blog-imgs-23.fc2.com/c/a/s/castleofpeach/tip.gif) no-repeat 15px 0;/* ※1 */
font-style: normal;
}

/* 吹き出しCSSここまで */ ↑上に戻る
※1)三角部分は画像なので、この画像を(右クリック保存で)持って帰って、自分のブログにアップロードし、http://castleofpeach.blog57.fc2.com/file/tip.gifのオレンジ部分を自分のブログのアドレスに書き換えて使ってください。このまま使ってもイイケドーうちのブログ鯖に不具合が起きると三角部分だけ消えちゃうことがあるかも。

プロフ設定方法
プロフィールのプラグインのHTMLを見ると、おそらく

<!--myimage-->
<p class="plugin-myimage" &align>
<img src="<%image>" alt="<%author_name>" />
</p>
<!--/myimage-->
<p &align>
Author:<%author_name><br /><%introduction2>
</p>


このようになっていると思います。
画像の上部分に噴出しのPIYOログを持ってきたいので、画像の上にPIYOの設定で発行されるタグを突っ込みます。
例)
<!--myimage-->
<p class="plugin-myimage" &align>
<script type='text/javascript' src='http://piyo.fc2.com/
contents/bparts/?action=log&mode=mylog
&tagcode=4f02a11022ee1eb45fcc77f98213af90&piyoid=peach&limit=1' charset=utf-8></script>
<img src="<%image>" alt="<%author_name>" />
</p>
<!--/myimage-->
<p &align>
Author:<%author_name><br /><%introduction2>
</p>


簡単ですよね。ね?
これで噴出しの設定は終了。おつかれさんどす。 ↑上に戻る

===========
自分用メモ

/* 公式のデフォルトCSS */


a.nickname:link,a.nickname:visited {color:#339900;font-weight:bold;}
a.nickname:hover {color:#ffa500;}

div.tab{
float:left;
width:100%;
font-size:93%;
border-bottom:1px solid #F45551;
line-height:normal;
}

.b1{
background-image: none;
}

.b2{
background-image: none;
}

div.mylog {
width: 160px;
padding: 5px;
border: 1px solid #A5A5A5;
font-size: small;
text-align: left;
color: #666666;
background-color: #FFFFFF;
}
div.mylog p.title {
font-weight: bold;
color: #838383;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #A5A5A5;
margin: 0px 0px 10px;
padding: 0px 0px 3px;
}
div.mylog dl {
margin: 0px;
padding: 0px;
}
div.mylog dt.day {
width: 160px;
color: #339900;
font-size: x-small;
margin: 0px;
padding: 0px 0px 5px;
background-color: #FFFFFF;
background-image: none;
text-align: left;
}
div.mylog dd.piyolog {
margin: 0px 0px 5px;
color: #333333;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #A5A5A5;
padding: 0px 0px 10px;
}
div.license {
font-size: x-small;
text-align: right;
}
↑上に戻る
ブログランク - FC2 Blog Rankingブログ村
2007.08.29 [Wed] - 10:20 | FC2 | TB(0) | CO(2) - Open&Close
<< ブラウザがまた増えたHOME夏休が終る頃 >>

コメント

はじめまして!  --- posted-by, ひび吉

PIYOの「お知らせ」経由で参りました!
絵文字の位置、すごく気になってたので助かりました! ありがとうございます♪
これからもブログ運営&PIYO頑張ってください(≧∇≦)

ようこそ  --- posted-by, ピーチ

お役に立ててなによりです(・∀・)b
あの位置はさすがに気になりますよね~。
行間もカナリ開いてしまうみたいですし。
最近PIYOにはあまり出没しませんが見つけたら構ってやってください(´∀`*)ウフ

コメントの投稿

>> 禁止ワード <<
管理者のみ表示

トラックバック

http://castleofpeach.blog57.fc2.com/tb.php/831-5d226de2
この記事にトラックバックする(FC2ブログユーザー)

最近の更新記事

カレンダー

07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -

過去の記事

全ての記事を表示する

管理人@ピーチ

マビノギ樽鯖8ch在住 : 神出鬼没
ゲームキャラ * 中の人

このサイトについて

ピーチのお城へようこそです。
このサイトは管理人ピーチの自己満足なサイトです。宣伝や荒しなどのコメントやトラックバック、非人道的なコメントや他の閲覧者の気分を害するようなコメントなどは、管理人の自己判断で消すことがあります。ご了承ください。なお、当ブログはフィクションです。それではごゆっくりとどうぞ。

携帯から読む

QRコード

訪問ありがとう

ついったー

FC2Ad

  .

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。