やり方が分かるまでに苦労したので、メモを残します。
目的
pcのindex(記事一覧画面)で記事の一部だけを見せるようにして、一覧画面の見通しを良くします。方法
ブログテンプレートに対して下記の修正を行います。記事表示部分の書き換え
bloggerが持つ変数のblog.pageTypeがitemでもstatic_pageでもない場合に一覧画面であると判別しますその判別はこのように記述できます。
<b:if cond='data:blog.pageType == "item" || data:blog.pageType == "static_page"'>
その条件を記事の表示部分に適用します。
書き換える部分
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'> </div></div> </b:if> <b:if cond='data:post.isDateStart'> <div class="date-outer"> </b:if> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><span><data:post.dateHeader/></span></h2> </b:if> <b:if cond='data:post.isDateStart'> <div class="date-posts"> </b:if> <div class='post-outer'> <b:include data='post' name='post'/> <b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/> </div>
<b:if cond='data:blog.pageType == "item" || data:blog.pageType == "static_page"'> <!-- article page --> <b:if cond='data:post.isDateStart and not data:post.isFirstPost'> </div></div> </b:if> <b:if cond='data:post.isDateStart'> <div class="date-outer"> </b:if> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><span><data:post.dateHeader/></span></h2> </b:if> <b:if cond='data:post.isDateStart'> <div class="date-posts"> </b:if> <div class='post-outer'> <b:include data='post' name='post'/> <b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/> </div> <b:else/> <!-- index page -->
<div class='post-outer post-outer-pc-index'> <a expr:href='data:post.url'> <h3 class='index-title entry-title' itemprop='name'> <data:post.title/> </h3> <div class='index-date'> <span> <data:post.date/> </span> </div> <div class='index-contents'> <b:if cond='data:post.thumbnailUrl'> <div class='index-thumbnail'> <div class='Image'> <img expr:src='data:post.thumbnailUrl'/> </div> </div> </b:if> <div class='post-body'> <b:if cond='data:post.snippet'> <data:post.snippet/> </b:if> </div> </div> <div style='clear: both;'/> </a> </div> </b:if>
cssの追加・修正
/* Posts ----------------------------------------------- */
上記コメントの下辺りに下記のstyleを記述してください。
.post-outer-pc-index > a { display: block; background: #f9f9fb; margin-bottom: 1em; padding: 1em; } .post-outer-pc-index > a:hover { background: #fbfbfe; text-decoration: none; } .post-outer-pc-index .index-date { color: black; margin-bottom: 10px; } .post-outer-pc-index .index-title { margin: 0 0 1em 0; } .post-outer-pc-index .date-header { margin-top: 0px; } .post-outer-pc-index .date-header span { background: transparent; } .post-outer-pc-index .index-contents { display: table; } .post-outer-pc-index .index-thumbnail { display: table-cell; vertical-align: middle; padding: 0 1em 0 0; } .post-outer-pc-index .post-body { display: table-cell; vertical-align: middle; color: black; }
あと、下記のmarginをキャンセルすると、余白が消えて見栄えが良くなります。
.main-inner .column-center-inner .section { margin: 0; // margin: 0 $(main.section.margin); }
以上です。
何かの参考になれば嬉しいです。
参考
How to Create Magazine Style with Post Summaries and Thumbnails on Blogger | Helplogger変更履歴
2016.06.16固定ページが表示されないバグがあったので、data.blog.pageTypeがstatic_pageのときも、ページの内容を全て表示するようにしました。
2020.01.25
記事を読み返した時に理解しにくく感じたので、コードの前の説明とコード内のコメントを追加しました。
0 件のコメント :
コメントを投稿