いろいろと納得がいかないところもある。
サイドバーに設置する「最近の記事」では、
サムネイル画像と、
記事タイトルの前半部分と
記事本文の冒頭部分が表示されるが、
これが非常に中途半端。
もうちょっと表示される文字数を増やさないと、
記事の内容が把握できない。
いろいろと分かったことをメモしていく。（随時加筆）
ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ
「最近の記事」に表示される文字数の変更
デザイン⇒デザイン設定⇒コンテンツHTML編集へ。
２４行目あたりの部分を編集する
赤い数字の部分が文字の範囲に該当する。
◆表示される記事のタイトル文字数
多分、(26)だと、半角36個分のスペース、という意味だと思う。
上の26は画像がある場合、下は画像が無い場合、だと思う。（未確認）
◆記事の本文冒頭
同様に(58)は、半角58個分の範囲、という意味だろう。
ここには自分で最適と思われる数値を入れていけばいい。
いろいろな数値を入れてみて、実際の表示を確認しながら決めるのがいいだろう。
<% /if -%>
<h4 class="recent-entry__title">
<% if:article.first_image -%>
<% article.subject | tag_strip | shorten( 26 ) -%>
<% else -%>
<% article.subject | tag_strip | shorten( 36 ) -%>
<% /if -%>
</h4>
<p class="recent-entry__body">
<% if:article.first_image -%>
<% article.body | tag_strip | shorten( 58 ) -%>
<% else -%>
<% article.body | tag_strip | shorten( 74 ) -%>
<% /if -%>
</p>
ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ
サムネイル画像の大きさなどを変更する
デザイン⇒デザイン設定⇒スタイルシート編集へ
582行目以降のあたりを編集する。
画像の幅 width: 70px;
画像の高さ height: 70px;
ちなみに、縮小されていない気がする。
ただ、小さく切り取られているだけ。
このへんも、後日変更方法を調べる予定。
.module--recent-entry .recent-entry__thumbnail {
margin-right: 10px;
float: left;
width: 70 px;
height: 70 px;
overflow: hidden;
position: relative;
}
.module--recent-entry .recent-entry__thumbnail img {
position: relative;
min-width: 70 px;
min-height: 70 px;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
補足 参照 http://www.htmq.com/csskihon/603.shtml
主要ブラウザのベンダープレフィックス
-moz- …… Firefox
-webkit- …… Google Chrome、Safari
-o- …… Opera
-ms- …… Internet Explorer
ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ
更に補足。603行目あたりの記述はどういう意味か？
CSSの以下の部分はIE８のバグ対策？らしい。
参照 http://www.onside.com/web_design/5891.html
http://ondrecords.com/web/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/
↓
.module--recent-entry .recent-entry__thumbnail img {
top: auto\9;
left: auto\9;
}
こんなの見たことなかった。
ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ
「最近の記事」の本文冒頭部分をカット。
タイトルだけを表示。
削除する部分。だいたい29行目あたりから。
<% article.body | tag_strip | shorten(58) -%>
<% else -%>
<% article.body | tag_strip | shorten(74) -%>
<% /if -%>
ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ
タグ： seesaa新デザイン
【このカテゴリーの最新記事】
- no image
- no image
- no image
- no image
