リスト表示で画像を大きくすると、ラベルがちょっと邪魔に感じてきたので画像に乗せてみました。
マウスオーバーした時だけラベルを表示するように。
【QooQ】トップページのラベルの表示を変えてみた | ふじろじっく
トップページのラベルをEmporio風にしてみた
fujilogic.blogspot.com
ふじろじっくさんの記事を参考にしました。
記事を参考にCSSを編集。
投稿日時を右下に移動させました。
移動しないとタイトルの表示位置がおかしかった。
投稿日時を移動
このコードを探して切り取る。
<p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p>
</div>
</article>の直上にコードを貼り付ける。
<div class='list-item-inner'>
<h3 class='list-item-title'><data:post.title/></h3>
<p class='list-item-category'>
<b:loop values='data:post.labels' var='label'>
<span class='list-item-category-item'><a expr:href='data:label.url'><data:label.name/></a></span>
</b:loop>
</p>
<!--投稿日時を下に表示-->
<p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p>
</div>
</article>リストを右に寄せる為にCSSを追加
list-item-dateを探し、text-align: right;を記述する。
.list-item-date{
color: $(font.light);
font-size: 80%;
text-align: right; /* 追記 */
}2列表示にしたら良いような気がする？
それか1つしか表示しないのが良いんだろうけど、ラベル整理してないからそれはそれで問題ありそうな
スニペットの表示
この作業をしたら今度は寂しくなってしまったのでスニペットを表示してみました。
下記のコードを探します。
<h3 class='list-item-title'><data:post.title/></h3><div class='snippet-body'>
<b:eval expr='snippet(data:post.snippet, { length: 60, links: false, linebreaks: false, ellipsis: true })'/>
</div>
ふじろじっくさんのの物を使わせて頂きました。
post.bodyだと<b>タグなど含んでしまい、それが途中で途切れると
不具合（リンクが押せない、それ以降のコンテンツが太字になる）が発生したのでpost.snippetに変更しています。
CSSを追加します。list-itemの近くに置くとやりやすい。
文字サイズのと位置の指定
.snippet-body {
font-size: 15px;
height : 60px;
}
タッチパネルで見た時にスニペットを非表示させます。
@media (max-width: 480px ) {
.snippet-body {
display: none;
}
}
0 件のコメント:
コメントを投稿