Bloggerテンプレート自作 #10：個別記事ページを作る
前回の「記事リスト用のページャを作る」に引き続き、今回は「個別記事ページを作る」を実践してみようと思う。
個別記事ページとは投稿記事が全文表示されるページを指し、Bloggerのページタイプでは item に該当するもの。このページには「記事タイトル」「公開日・タグ」「本文」「SNSボタン」「ページャ」「関連記事」「コメント」が設置される予定。
とりあえず、今回は「個別記事の読み込み」と「記事タイトル」「公開日・タグ」「本文」が表示されるまでの作業工程をまとめていくことにする。
作業工程
個別記事を読み込ませる
HTML
<!-- ページタイプの条件分岐 -->
<b:switch var='data:blog.pageType'>
<!-- 個別記事の時 -->
<b:case value="item" />
<b:loop var='post' values='data:posts'>
<b:include name='single-post' />
</b:loop>
<!-- 固定ページの時 -->
<b:case value="static_page" />
<div>固定ページ</div>
<!-- それ以外 -->
<b:default />
<b:loop var='post' values='data:posts'>
<b:include name='articles' />
</b:loop>
<b:include name='articles-pager' />
</b:switch>
</b:includable>
<b:switch var='data:blog.pageType'>
<!-- 個別記事の時 -->
<b:case value="item" />
<b:loop var='post' values='data:posts'>
<b:include name='single-post' />
</b:loop>
<!-- 固定ページの時 -->
<b:case value="static_page" />
<div>固定ページ</div>
<!-- それ以外 -->
<b:default />
<b:loop var='post' values='data:posts'>
<b:include name='articles' />
</b:loop>
<b:include name='articles-pager' />
</b:switch>
</b:includable>
メインのページタイプの条件分岐にて <b:case value="item" /> 以下に <b:loop var='post' values='data:posts'> <!-- 個別記事ページを呼び出す処理 --> </b:loop> を記述すると記事を個別に読み込むことができる。
ちなみに、ここの <b:loop> は投稿記事の有無を判別して取り出す処理になっているようで、このループ処理をかけないと何も表示してくれないので注意。
個別記事ページを作る
HTML
<!-- 個別記事ページ -->
<b:includable id='single-post'>
<div class="post-area">
<h1>
<data:post.title />
</h1>
<!-- 公開日・最終更新日・タグを表示するエリア -->
<div class="single-info-area">
<!-- 公開日 -->
<div class="single-release-date">
<i class="fa fa-edit fa-fw post-icon"></i><data:post.date />
</div>
<!-- 最終更新日 -->
<div class='updated single-modified-date' id="last-modified" itemprop='dateModified' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601'><data:post.lastupdatedISO8601/></div>
<!-- お借りした最終更新日取得用のスクリプトコードを記述 -->
<!-- タグ -->
<div class="single-post-tag">
<b:if cond='data:post.labels'>
<i class="fa fa-tag" aria-hidden="true"></i>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?&max-results=10"' property='v:title' rel='v:url'>
<data:label.name /></a>
</b:loop>
<b:else />
</b:if>
</div>
</div>
<!-- 記事の本文を表示するエリア -->
<div class="post-content">
<data:post.body />
</div>
</div>
</b:includable>
<b:includable id='single-post'>
<div class="post-area">
<h1>
<data:post.title />
</h1>
<!-- 公開日・最終更新日・タグを表示するエリア -->
<div class="single-info-area">
<!-- 公開日 -->
<div class="single-release-date">
<i class="fa fa-edit fa-fw post-icon"></i><data:post.date />
</div>
<!-- 最終更新日 -->
<div class='updated single-modified-date' id="last-modified" itemprop='dateModified' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601'><data:post.lastupdatedISO8601/></div>
<!-- お借りした最終更新日取得用のスクリプトコードを記述 -->
<!-- タグ -->
<div class="single-post-tag">
<b:if cond='data:post.labels'>
<i class="fa fa-tag" aria-hidden="true"></i>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?&max-results=10"' property='v:title' rel='v:url'>
<data:label.name /></a>
</b:loop>
<b:else />
</b:if>
</div>
</div>
<!-- 記事の本文を表示するエリア -->
<div class="post-content">
<data:post.body />
</div>
</div>
</b:includable>
上記が記事ページを構成するコードとなる。
構成は上から「記事タイトル」「公開日・最終更新日・タグ」「本文」といった形に並んでいる。最終更新日はversion2でなければ呼び出せるタグが使えないのでJavaScriptを使って取得する。この最終更新日を取得するJavaScriptコードは下記のサイトからお借りすることにした。
とりあえず、コード全文はこの記事には載せないので、お借りさせていただいたサイトから参照してほしい。このテンプレートでは、お借りしたコードの冒頭のコードを上記のように書き換えており、その下にサイトで紹介されている <script> 以下を貼り付ければ使えるようになっている。
また、このテンプレートでは<script>内のコードの
var updated_dd ="最終更新日："+ dd_Y+"年"+dd_M+"月"+dd_D+"日";
を
var updated_dd ='<div class="last-modified"><i aria-hidden="true" class="fas fa-sync-alt fa-fw post-icon"></i>'+dd_Y+"/"+dd_M+"/"+dd_D+'</div>';
というふうに書き換えて、CSSで内容を書き換えられるようにしている。
CSS
 |
| 個別記事イメージ（コード変更前） |
/* ----------------------------------------------------------------------------
コンテンツ共通部分
---------------------------------------------------------------------------- */
/* 記事全体 */
.post-area {
background: #fff;
padding-bottom: 20px;
max-width: 800px;
}
/* 画像 */
.post-area img {
border: solid 1px #ddd;
object-fit: cover;
}
/* 記事タイトル */
.post-area h1 {
background: #333;
color: #fff;
font-size: 24px;
letter-spacing: 2px;
padding: 15px 20px;
margin: 0;
}
/* 見出し */
.post-area h2 {
border-left: solid 4px #333;
background: #f5f5f5;
color: #333;
font-size: 20px;
padding: 10px;
margin: 0;
}
.post-area h3 {
border-left: solid 4px #333;
border-bottom: solid 1px #333;
font-size: 18px;
color: #333;
padding: 6px 10px;
margin: 0;
}
.post-area h4 {
border-left: solid 4px #333;
font-size: 16px;
color: #333;
padding: 3px 10px;
margin: 0;
}
.post-area h5 {
color: #333;
margin: 0;
}
.post-area h6 {
color: #333;
margin: 0;
}
/* コンテンツ */
.post-content {
font-size: 14px;
color: #333;
letter-spacing: 2px;
line-height: 1.8em;
padding: 10px 20px;
overflow: hidden;
}
/* 段落設定 */
.post-content p {
padding: 0 15px;
}
/* リンク設定 */
.post-content a {
text-decoration: none;
padding: 2px;
}
.post-content a:hover {
opacity: 0.6;
}
/* 引用文 */
blockquote {
position: relative;
background: #fafafa;
padding: 30px;
margin: 10px 15px;
}
blockquote::before {
position: absolute;
top: 5px;
left: 5px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f10d";
font-size: 18px;
color: #ddd;
}
blockquote::after {
position: absolute;
right: 5px;
bottom: 5px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f10e";
font-size: 18px;
color: #ddd;
}
blockquote p {
padding: 0;
margin: 0;
}
/* リスト */
.post-area ul li {
margin-left: 30px;
}
.post-area ul {
padding-left: 0;
margin-left: 1.5em;
}
/* 番号付きリスト */
.post-area ol li {
margin-left: 30px;
padding: 0;
}
.post-area ol {
padding-left: 0;
margin-left: 1.8em;
}
/* テーブル */
table {
margin: 0 auto;
}
table, th, td {
border: solid 1px #999;
}
th, td {
padding: 5px;
}
th {
background: #fafafa;
}
/* レスポンシブ（タブレット縦） */
@media screen and (max-width: 960px) {
.post-content {
padding: 30px 15px 0;
}
.post-area img {
height: auto;
max-width: 95%;
}
.separator {
height: auto;
max-width: 95%;
}
}
/* レスポンシブ（スマホ縦） */
@media screen and (max-width: 560px) {
.post-area h1 {
font-size: 18px;
padding: 10px 15px;
}
.post-area h2 {
font-size: 16px;
}
.post-area h3 {
font-size: 15px;
}
.post-area h4 {
font-size: 14px;
}
.post-content {
font-size: 13px;
}
.post-area ul li {
margin-left: 15px;
}
.post-area ol li {
margin-left: 15px;
}
blockquote {
padding: 15px 25px;
margin: 10px 0;
}
blockquote::before, blockquote::after {
font-size: 14px;
}
}
/* ----------------------------------------------------------------------------
個別記事ページ
---------------------------------------------------------------------------- */
/* 公開日・最終更新日・タグ */
.single-info-area {
display: flex;
flex-wrap: wrap;
background: #fbfbfb;
border-bottom: dashed 1px #eee;
color: #888;
font-size: 12px;
padding: 10px 20px 8px 20px;
margin-bottom: 15px;
}
/* 公開日 */
.single-release-date {
margin-right: 15px;
padding: 2px 0 4px 0;
}
/* 最終更新日 */
.single-modified-date {
padding: 2px 0 4px 0;
}
.last-modified {
margin-right: 15px;
}
/* タグ */
.single-post-tag {
padding: 2px 0 4px 0;
}
.single-post-tag a {
text-decoration: none;
color: #888;
padding: 2px;
}
.single-post-tag a:hover {
background: #dfdfdf;
opacity: 0.6;
}
/* アイコン */
.post-icon {
margin-right: 5px;
}
/* レスポンシブ（スマホ縦） */
@media screen and (max-width: 560px) {
.single-info-area {
padding: 10px 10px 8px 10px;
margin-bottom: 0;
}
}
コンテンツ共通部分
---------------------------------------------------------------------------- */
/* 記事全体 */
.post-area {
background: #fff;
padding-bottom: 20px;
max-width: 800px;
}
/* 画像 */
.post-area img {
border: solid 1px #ddd;
object-fit: cover;
}
/* 記事タイトル */
.post-area h1 {
background: #333;
color: #fff;
font-size: 24px;
letter-spacing: 2px;
padding: 15px 20px;
margin: 0;
}
/* 見出し */
.post-area h2 {
border-left: solid 4px #333;
background: #f5f5f5;
color: #333;
font-size: 20px;
padding: 10px;
margin: 0;
}
.post-area h3 {
border-left: solid 4px #333;
border-bottom: solid 1px #333;
font-size: 18px;
color: #333;
padding: 6px 10px;
margin: 0;
}
.post-area h4 {
border-left: solid 4px #333;
font-size: 16px;
color: #333;
padding: 3px 10px;
margin: 0;
}
.post-area h5 {
color: #333;
margin: 0;
}
.post-area h6 {
color: #333;
margin: 0;
}
/* コンテンツ */
.post-content {
font-size: 14px;
color: #333;
letter-spacing: 2px;
line-height: 1.8em;
padding: 10px 20px;
overflow: hidden;
}
/* 段落設定 */
.post-content p {
padding: 0 15px;
}
/* リンク設定 */
.post-content a {
text-decoration: none;
padding: 2px;
}
.post-content a:hover {
opacity: 0.6;
}
/* 引用文 */
blockquote {
position: relative;
background: #fafafa;
padding: 30px;
margin: 10px 15px;
}
blockquote::before {
position: absolute;
top: 5px;
left: 5px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f10d";
font-size: 18px;
color: #ddd;
}
blockquote::after {
position: absolute;
right: 5px;
bottom: 5px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f10e";
font-size: 18px;
color: #ddd;
}
blockquote p {
padding: 0;
margin: 0;
}
/* リスト */
.post-area ul li {
margin-left: 30px;
}
.post-area ul {
padding-left: 0;
margin-left: 1.5em;
}
/* 番号付きリスト */
.post-area ol li {
margin-left: 30px;
padding: 0;
}
.post-area ol {
padding-left: 0;
margin-left: 1.8em;
}
/* テーブル */
table {
margin: 0 auto;
}
table, th, td {
border: solid 1px #999;
}
th, td {
padding: 5px;
}
th {
background: #fafafa;
}
/* レスポンシブ（タブレット縦） */
@media screen and (max-width: 960px) {
.post-content {
padding: 30px 15px 0;
}
.post-area img {
height: auto;
max-width: 95%;
}
.separator {
height: auto;
max-width: 95%;
}
}
/* レスポンシブ（スマホ縦） */
@media screen and (max-width: 560px) {
.post-area h1 {
font-size: 18px;
padding: 10px 15px;
}
.post-area h2 {
font-size: 16px;
}
.post-area h3 {
font-size: 15px;
}
.post-area h4 {
font-size: 14px;
}
.post-content {
font-size: 13px;
}
.post-area ul li {
margin-left: 15px;
}
.post-area ol li {
margin-left: 15px;
}
blockquote {
padding: 15px 25px;
margin: 10px 0;
}
blockquote::before, blockquote::after {
font-size: 14px;
}
}
/* ----------------------------------------------------------------------------
個別記事ページ
---------------------------------------------------------------------------- */
/* 公開日・最終更新日・タグ */
.single-info-area {
display: flex;
flex-wrap: wrap;
background: #fbfbfb;
border-bottom: dashed 1px #eee;
color: #888;
font-size: 12px;
padding: 10px 20px 8px 20px;
margin-bottom: 15px;
}
/* 公開日 */
.single-release-date {
margin-right: 15px;
padding: 2px 0 4px 0;
}
/* 最終更新日 */
.single-modified-date {
padding: 2px 0 4px 0;
}
.last-modified {
margin-right: 15px;
}
/* タグ */
.single-post-tag {
padding: 2px 0 4px 0;
}
.single-post-tag a {
text-decoration: none;
color: #888;
padding: 2px;
}
.single-post-tag a:hover {
background: #dfdfdf;
opacity: 0.6;
}
/* アイコン */
.post-icon {
margin-right: 5px;
}
/* レスポンシブ（スマホ縦） */
@media screen and (max-width: 560px) {
.single-info-area {
padding: 10px 10px 8px 10px;
margin-bottom: 0;
}
}
CSSは上記のようになっており、これで画像のようなページを表示することができる。
共通部分は固定ページなどでも使うので、共通部分とした。
画像は記事作成当初のもので、その後にコードをやや変更したので上のコードは画像の見た目とは若干異なる。
スポンサーリンク
スポンサーリンク
コメント
0 件のコメント :
コメントを投稿