So-net無料ブログ作成
【近状★2019/7/27:ヘッダー画像変更】
*当ブログにある画像や写真の「無断転載・無断配布・二次加工・二次配布」は禁止していますので、
  何かありましたらメールフォーム(別窓)の方にお願いします。
*各絵・各写真への苦情・中傷は受け付けておりません(企業や店舗等は除く)。
*ブログにUPしている一部の写真(原寸)は素材としてPhotoAC(別窓)にて取扱中。
*お知らせ等で記事内を一部修正・追記した場合、更新日時を近くに明記しています。ご確認ください。

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;」と記述するのだそうです。

細かいことが良く分からない場合はコピー&ペースト(貼り付け)で問題ないと思います。
これで見やすくなった…かな?ヾ(・ω・)ノ
nice!(0)  コメント(0) 
共通テーマ:パソコン・インターネット

nice! 0

コメント 0

PAGE TOP