Blog

関連エントリのレイアウトを見直してみた

前々から関連するエントリの表示がいまいちだな、と思っていました。

120617 0001
このグダグダ感を直すきっかけになるエントリを見つけたので見直してみました。



参考にしたエントリはこれ。RSSフィードを読み込むのが本題のエントリなのですが、その中で文字列の省略表示について記述があったので応用してみました。



サイトに外部ブログのRSSを表示する方法と、記事タイトルが長すぎる場合に省略表示する方法メモ。 | ウェビメモ
指定した長さからはみ出した文字列を省略表示するCSS



CSSなのでうまく表示されない環境もあるかもしれませんが、こんな感じになりました。

120617 0002


その時のスタイルシートはこれ。



このスタイルに合わせた形でエントリの一覧を書きます。





ただし、これだけだと iPhone から見た時のサイズに合わないので、最終的にモバイルスタイルの場合は幅を変えるようにしました(Blogger でのテンプレートに依存しています)。

iPhone から見た時はこんな感じ

IMG 3381

すっきりして良かったです。合わせてコンテンツを作るためのスニペットも修正しました。



関連するエントリ






最後まで読んでいただきありがとうございます。

follow us in feedly 左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいです


Facebook ページでも情報を発信していますのでよろしかったら「いいね!」をお願いします

RSSリーダへの登録は こちら からどうぞ。

URL
TBURL

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

フェイスブックでのコメント

Return Top