Photo by
brandkojo
[Blogger #010] ホーム画面の記事一覧にスニペット表示、配置調整
前回の続きで、ホーム画面の記事一覧をいじくります。
前回までで、こんな感じ。ピクチャが小さいし、記事本文の書き出しとかがない。タイトルは上にしたい。などなど。まずは、記事の書き出し部分をとってきて表示するスニペットを導入。参考サイトは、ここ。
CSS部分
snippet を追加。 category-item とか date あたりを修正。Hover は斜め左上に動き、青っぽい影にした。
/****************************************
記事一覧
*****************************************/
#list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
#list a{
color: inherit;
}
.list-item{
width:100%;
margin: 8px 0 10px;
background: var(--background-color);
color: #000;
position: relative;
z-index: 1;
}
.snippet-body {
font-size: 15px;
}
.list-item:hover {
box-shadow: 5px 5px 4px #00d0dd;
transform: translate(-0.1em,-0.1em);
transition: all 0.3s ease 0s;
}
.list-item >a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent:-999px;
z-index: 2;
}
.list-item-inner{
padding: .2em .5em .2em;
border-top: none;
display: flex;
flex-direction: column;
justify-content: space-around;
flex-grow: 1;
}
.list-item-date{
color: #AAA;
font-size: 80%;
text-align:right;
}
.list-item-category{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
margin-top: .2em;
margin-bottom: .4em;
font-size: 80%;
font-weight: bold;
}
.list-item-category-item{
display: block;
margin-top: .1em;
margin-left: .1em;
/*padding: .3em 1em;*/
border-radius: 2px;
background: var(--accent-color);
color: #FFF;
position: relative;
z-index:3;
}
.list-item-category-item >a{
display: block;
padding: .3em 1em;
}
.list-item-category-item:hover {
opacity: 0.6;
}
.list-item-img{
display: block;
width: 100%;
padding: .3em;
align-self: auto;
}
.list-item-title{
margin: .5em .5em 0 .5em;
font-weight: bold;
font-size:18px;
padding: 0.2em;
height: fit-content;
overflow: hidden;
display: flex;
align-items: center;
}
.list-item article{
display: flex;
}HTML の list-item 部分
list-item-title を一番上に持ってきて、タイトルが上にくるようにした。
スニペットを追加した。投稿日と最終更新日のスクリプトを埋め込んだ。投稿日、更新日のSVGアイコンを使うため、SVGセクションを追加した。結果はこんな感じ。
<div class='list-item'>
<h3 class='list-item-title'><data:post.title/></h3>
<article>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'>
<img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, "2:1")'/>
</a>
</b:if>
<div class='list-item-inner'>
<!--スニペット追加-->
<div class='snippet-body'>
<b:eval expr='snippet(data:post.body, { length: 60 })'/>
</div>
<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'>
// 投稿日と最終更新日
var published=new Date("<data:post.timestampISO8601/>");
var updated =new Date("<data:post.lastUpdatedISO8601/>");
var pp_Y = ""+published.getFullYear();
var pp_M = ("0"+(published.getMonth()+1)).slice(-2);
var pp_D = ("0"+published.getDate()).slice(-2);
var dd_Y = ""+updated.getFullYear();
var dd_M = ("0"+(updated.getMonth()+1)).slice(-2);
var dd_D = ("0"+updated.getDate()).slice(-2);
var jsdate = "<svg class='svg'><use xlink:href='#svg-pen'/></svg> " + pp_Y+"/"+pp_M+"/"+pp_D+" ";
var jsdate2= "";
if(dd_D == pp_D && dd_M == pp_M && dd_Y == pp_Y){
}else{
jsdate2= "<svg class='svg'><use xlink:href='#svg-sync'/></svg> " +dd_Y+"/"+dd_M+"/"+dd_D+"";
}
document.write(jsdate + jsdate2)
</script>
</p>
</div>
</article>
<a expr:href='data:post.url'/>
</div>各カスタマイズの参考にしたサイト
まずは、最終更新日。投稿日、更新日が一緒の場合は更新日を表示しないようにして、更新マークアイコンも消えるようにスクリプト内に埋め込んだ。
投稿日のほうには、先頭に鉛筆アイコンが欲しいので、ここを参考に追加。
まあ、最終的には、SVGで埋め込んだので、こことは違うかも。
SVGでのアイコン埋め込み方法は、ここ。英語だけど、一番シンプルな説明で分かりやすかった。ちなみに、参考にしている、”ふじろじっく”さんところも、SVG埋め込んであるみたい。まとまっているので、一旦、SVGセクション丸ごと貰っちゃいました。iタグ、<i class="fab fa-twitter"></i>みたい になっているところを順次入れ替えたり、自分が使っているアイコン追加して整備する予定。
(2021/03/02追記)ホバーアニメーションの対応もこの時してたのを忘れてました。参考記事のリンク探してて、ここに入れてないの気づきました。
とりあえず、今日は、ここまで。
完成形はこんな感じ。だいぶ、よくなってきた。形だけで、記事は全く増えず。これでいいのか、このブログ？？
