nice欄をちょっと修正 [覚書]
以前、最近のnice欄をコンパクトにという記事を書きました。
その時に、名前が長い人がどう表示されるか分からなかったので放置していましたが
長い名前の方がいらしたので見てみました。
見事に重なっちゃってますね。
これだと双方共に申し訳ないので、少し手を加えてあげると
こうなります。領域以上の文字列は「…」表示に変更。
以下、やり方です。
難しいことはありません。CSSのみで出来ます。
#favoredMember li {
float:left;
width:95px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
青文字の部分を追加するだけです。
赤文字の部分はユーザーによって違うので変更してください。
テンプレートによりますが、恐らく初期設定は180pxくらいだと思います。
また、「#favoredMember li { ~ }」がCSS上にない場合もご自身で追加してください。
私は「/* nice! */」の中に入れています。
※So-netブログでの記述なので、他のブログでは「#favoredMember」ではない場合があります
必要な記述は
・width
・white-spce: nowrap;
・overflow:hidden;
の3つです。
その他にある
「text-overflow: ellipsis;」はInternet Explorer6以上とSafari、Operaに対応していますが
Safariでは「-webkit-text-overflow: ellipsis;」と記述し、
Operaでは「-o-text-overflow: ellipsis;」と記述するのだそうです。
細かいことが良く分からない場合はコピー&ペースト(貼り付け)で問題ないと思います。
これで見やすくなった…かな?ヾ(・ω・)ノ
その時に、名前が長い人がどう表示されるか分からなかったので放置していましたが
長い名前の方がいらしたので見てみました。
見事に重なっちゃってますね。
これだと双方共に申し訳ないので、少し手を加えてあげると
こうなります。領域以上の文字列は「…」表示に変更。
以下、やり方です。
難しいことはありません。CSSのみで出来ます。
#favoredMember li {
float:left;
width:95px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
青文字の部分を追加するだけです。
赤文字の部分はユーザーによって違うので変更してください。
テンプレートによりますが、恐らく初期設定は180pxくらいだと思います。
また、「#favoredMember li { ~ }」がCSS上にない場合もご自身で追加してください。
私は「/* nice! */」の中に入れています。
※So-netブログでの記述なので、他のブログでは「#favoredMember」ではない場合があります
必要な記述は
・width
・white-spce: nowrap;
・overflow:hidden;
の3つです。
その他にある
「text-overflow: ellipsis;」はInternet Explorer6以上とSafari、Operaに対応していますが
Safariでは「-webkit-text-overflow: ellipsis;」と記述し、
Operaでは「-o-text-overflow: ellipsis;」と記述するのだそうです。
細かいことが良く分からない場合はコピー&ペースト(貼り付け)で問題ないと思います。
これで見やすくなった…かな?ヾ(・ω・)ノ
分かり辛い! [覚書]
期限が近づいてるAmazonギフト券(登録済)を使ってしまおうかと思って
MP3の購入に至ったわけですが、
MP3の購入→▼ギフト券を使用するをクリック→(別窓で)アカウントサービス→
残高・利用履歴を確認する→見ても下4桁しか分からないので入力を断念。
あれ?ギフト券ってどうやって使うんだ?
となったので、ヘルプを確認。
デジタルコンテンツの購入にAmazonギフト券を使うの項目には
「前もってアカウントにギフト券を登録された場合、
ギフト券残高は注文確定時に自動的に適用されます。(Amazonより引用)」
と書かれていますが、なんかちょっと良く分からないので、
特に何も考えずに再度、MP3の購入→注文を確定をクリックした、ら…!
エラーメッセージが出た。
メッセージに従うならば、
クレジットカードの登録をして、1-ClickをONにしてください、らしいです。
※場合によっては住所の入力も有。
既に登録されている方は「この住所を使う」をクリックすればOK
指示通り、入力してONにして、完了。
MP3カートに戻って→注文を確定→購入出来た!
で、肝心のギフト券の残高ですが…
確認したらちゃんとギフト券の方から引かれてました。
私はAmazonポイントも持っていたので、そちらからも引かれていました。
優先順位的には有効期限関係なく、
1.Amazonポイント
2.Amazonギフト券
3.通常のお支払い
みたいですね。
クレジットカードの登録画面外にはコンビニ支払い、代引きなどもあったので、
もしかしたらカードを登録しなくても大丈夫かm…いや、分かりませんが^^;
まぁ、買えて良かったです。
MP3の購入に至ったわけですが、
MP3の購入→▼ギフト券を使用するをクリック→(別窓で)アカウントサービス→
残高・利用履歴を確認する→見ても下4桁しか分からないので入力を断念。
あれ?ギフト券ってどうやって使うんだ?
となったので、ヘルプを確認。
デジタルコンテンツの購入にAmazonギフト券を使うの項目には
「前もってアカウントにギフト券を登録された場合、
ギフト券残高は注文確定時に自動的に適用されます。(Amazonより引用)」
と書かれていますが、なんかちょっと良く分からないので、
特に何も考えずに再度、MP3の購入→注文を確定をクリックした、ら…!
エラーメッセージが出た。
メッセージに従うならば、
クレジットカードの登録をして、1-ClickをONにしてください、らしいです。
※場合によっては住所の入力も有。
既に登録されている方は「この住所を使う」をクリックすればOK
指示通り、入力してONにして、完了。
MP3カートに戻って→注文を確定→購入出来た!
で、肝心のギフト券の残高ですが…
確認したらちゃんとギフト券の方から引かれてました。
私はAmazonポイントも持っていたので、そちらからも引かれていました。
優先順位的には有効期限関係なく、
1.Amazonポイント
2.Amazonギフト券
3.通常のお支払い
みたいですね。
クレジットカードの登録画面外にはコンビニ支払い、代引きなどもあったので、
もしかしたらカードを登録しなくても大丈夫かm…いや、分かりませんが^^;
まぁ、買えて良かったです。
Stylishでサムネイルのサイズ変更 [覚書]
TwitterのクライアントであるCrowyのサムネイル画像が大きいので
Stylish(アドオン)で小さくしてみました。
※一行目の「@namespace~」の行は省いています。
@-moz-document domain("www.crowy.net") {
a img[src*="pbs.twimg.com/media/"]
{max-height:70px !important;max-width:70px !important;}
}
これだけです。
因みにmixiのマイページホーム画面は
@-moz-document domain("mixi.jp") {
.feedContent div.photos p.item img
{max-height:180px !important;max-width:180px !important;}
}
▲こちら
数値は適当にいじって下さい。
これで画像連投するフォロワーさん、マイミクさん等が居ても大丈夫!
(連投されてちょっと見辛かったので…^^;)
忘れるからメモをするというより、
メモをするから忘れる、のような気がしないでもない今日この頃
Stylish(アドオン)で小さくしてみました。
※一行目の「@namespace~」の行は省いています。
これだけです。
因みにmixiのマイページホーム画面は
▲こちら
数値は適当にいじって下さい。
これで画像連投するフォロワーさん、マイミクさん等が居ても大丈夫!
(連投されてちょっと見辛かったので…^^;)
忘れるからメモをするというより、
メモをするから忘れる、のような気がしないでもない今日この頃
スペースがもったいないので [覚書]
最近のnice欄をコンパクトにしてみました。
ビフォー
▼
アフター
CSSに追加するのは以下の記述のみ。
#favoredMember li {
float:left;
width:95px;
}
※当ブログのサイドバーは190pxあるので、その半分の95pxにしています。
他には特に指定していないので半分を超えたら次の行になります。
長い名前のユーザーさんは恐らくぶった切れると思います(未確認)
その時はまたいじるかなぁ…
忘れるからメモー。
ビフォー
▼
アフター
CSSに追加するのは以下の記述のみ。
※当ブログのサイドバーは190pxあるので、その半分の95pxにしています。
他には特に指定していないので半分を超えたら次の行になります。
長い名前のユーザーさんは恐らくぶった切れると思います(未確認)
その時はまたいじるかなぁ…
忘れるからメモー。