このグダグダ感を直すきっかけになるエントリを見つけたので見直してみました。
参考にしたエントリはこれ。RSSフィードを読み込むのが本題のエントリなのですが、その中で文字列の省略表示について記述があったので応用してみました。
サイトに外部ブログのRSSを表示する方法と、記事タイトルが長すぎる場合に省略表示する方法メモ。 | ウェビメモ  指定した長さからはみ出した文字列を省略表示するCSS |
CSSなのでうまく表示されない環境もあるかもしれませんが、こんな感じになりました。
その時のスタイルシートはこれ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#feed { width: 500; margin:0 auto; } #feed_item { width:350px; overflow:hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis;-o-text-overflow: ellipsis; white-space: nowrap; display: inline-block; _display: inline; } #feed_img { display: inline-block; _display: inline; } |
このスタイルに合わせた形でエントリの一覧を書きます。
|
1 2 3 4 |
<span style="font-weight:bold"><div id="feed"> <div id="feed_item"></span><a href="/2012/06/check109.html" target="_blank">Check#109 そろそろモブログの準備をしたい</a></div><div id="feed_img"> <a href="http://tweetbuzz.jp/redirect?url=http://azur256.blogspot.com/2012/06/check109.html"><img src="http://tools.tweetbuzz.jp/imgcount?url=http://azur256.blogspot.com/2012/06/check109.html" /></a> <a href="http://b.hatena.ne.jp/entry/http://azur256.blogspot.com/2012/06/check109.html"><img src="http://b.hatena.ne.jp/entry/image/http://azur256.blogspot.com/2012/06/check109.html" /><span style="font-weight:bold"></a></div></span> <span style="font-weight:bold"><div id="feed_item"></span><a href="/2012/06/check108-ios6.html" target="_blank">Check#108 iOS6の作り込みが凄すぎる</a><span style="font-weight:bold"></div><div id="feed_img"></span> <a href="http://tweetbuzz.jp/redirect?url=http://azur256.blogspot.com/2012/06/check108-ios6.html"><img src="http://tools.tweetbuzz.jp/imgcount?url=http://azur256.blogspot.com/2012/06/check108-ios6.html" /></a> <a href="http://b.hatena.ne.jp/entry/http://azur256.blogspot.com/2012/06/check108-ios6.html"><img src="http://b.hatena.ne.jp/entry/image/http://azur256.blogspot.com/2012/06/check108-ios6.html" /></a><span style="font-weight:bold"></div> </div></span> |
ただし、これだけだと iPhone から見た時のサイズに合わないので、最終的にモバイルスタイルの場合は幅を変えるようにしました(Blogger でのテンプレートに依存しています)。
|
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 32 33 34 35 |
<b:if cond='data:blog.isMobile'> #feed { width: 320; margin:0 auto; } #feed_item { width:170px; overflow:hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis;-o-text-overflow: ellipsis; white-space: nowrap; display: inline-block; _display: inline; } <b:else/> #feed { width: 500; margin:0 auto; } #feed_item { width:350px; overflow:hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis;-o-text-overflow: ellipsis; white-space: nowrap; display: inline-block; _display: inline; } </b:if> #feed_img { display: inline-block; _display: inline; } |
iPhone から見た時はこんな感じ
すっきりして良かったです。合わせてコンテンツを作るためのスニペットも修正しました。
関連するエントリ
最後まで読んでいただきありがとうございます。
左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいですFacebook ページでも情報を発信していますのでよろしかったら「いいね！」をお願いします
RSSリーダへの登録は こちら からどうぞ。
コメントを残す