■Seesaaブログの記事ページのコンテンツを点線で囲む（3）
■新しく作ったclass「article_kobetu」をHTMLに記述する
■開始タグ「<div class="article_kobetu">」と終了タグ「</div>」を追加
■新しく作ったclass「article_kobetu」をHTMLに記述する
■開始タグ「<div class="article_kobetu">」と終了タグ「</div>」を追加
前々回の記事から、Seesaaブログの記事ページを線で囲む作業をしています。
この記事で「記事ページを線で囲む」作業は終わりです。
まずは、関連記事を紹介しておきます。
当記事の関連記事■記事ページを線で囲む（1）線で囲むというclassを作る
■記事ページを線で囲む（2）どこまで囲むのか構成を考えて「footer」を移動する
■記事ページを線で囲む（3）HTMLを編集して囲み線を表示させる
■記事ページを線で囲む（2）どこまで囲むのか構成を考えて「footer」を移動する
■記事ページを線で囲む（3）HTMLを編集して囲み線を表示させる
最初の作業（1）で、「article_kobetu」という点線枠を指定するclassをCSSに追加しました。
CSSにclassを記述しても、それだけでは何も変化はありません。HTMLに『新しく作ったclass「article_kobetu」を、記事ページで使用する』と記述しなければいけません。
「<div class="article_kobetu">」と「</div>」で該当部分を挟むことで、指示を出します。
HTMLの記事ページ部分に「article_kobetu」（開始タグ）を追加
HTMLを編集します。
管理画面の「HTML編集」画面で「<% if:page_name eq 'article' -%>」を探します。
おそらく64行目あたりにあると思います。（茶色の文字でごちゃごちゃ書いてある部分の下にあります）
この部分がHTML上でのいわゆる個別記事の設定部分になります。
ここに「<div class="article_kobetu">」というタグを使用して枠を入れ込みます。
下記「追加するコード」の赤色の文字のように追加してください。
（何に対する記述なのかすぐわかるように見出しもコメントアウトで追加していますが、必要ないならば記述しなくてもいいです）
ということで、HTMLの該当部分に下記「追加するコード」のコードをコピペしてください。
まだ「保存」しなくていいです。
次の作業（終了タグの追加）をしてから「保存」します。
＜追加するコード（赤色）＞
<% if:page_name eq 'article' -%>
<!-- ********** 記事本文（個別記事） 開始 *********** -->
<article class="article">
<!-- 個別記事 囲い線 開始 -->
<div class="article_kobetu">
<header class="article__heading">
<h2 class="article__title"><% article.subject -%></h2>
<!-- ********** 記事本文（個別記事） 開始 *********** -->
<article class="article">
<!-- 個別記事 囲い線 開始 -->
<div class="article_kobetu">
<header class="article__heading">
<h2 class="article__title"><% article.subject -%></h2>
●「<div class="article_kobetu">」というタグを追加しました。見出し文も追加しています。（見出し文はコメントアウトしていますので、実際のページでは見えません）
●HTMLの記述上、「<div>」という開始タグで始めた記述は、「</div>」という終了タグで挟まなければいけません。
今の状態は、まだ開始タグ「<div class="article_kobetu">」を入れただけですので、この後に「</div>」という終了タグを入れて記述（命令）を挟まなければいけませんが、「</div>」を入れる場所に注意してください。
HTMLの記事ページ部分に「article_kobetu」（終了タグ）を追加
個別記事を点線で囲むために「<div class="article_kobetu">」タグをHTMLに追加したので、対応する終了タグ「</div>」を追加して、きちんと機能するように設定したいと思います。
前回の記事＜■記事ページを線で囲む（2）どこまで囲むのか構成を考えて「footer」を移動する＞でフッターの終了タグ「</footer>」を移動させましたが、終了タグ「</div>」は、移動させた「</footer>」のすぐ下に追加します。
う〜んとですね、点線枠はTwitterマークの下で終わりたいわけですよ。
「前ページ・次ページ案内リンク（クラス名：permalink）」は、点線枠の外側に置きたいのです。
そのために前回の記事で「</footer>」を「前ページ・次ページ案内リンク」タグの上に移動しました。
ということは、囲み線の終了タグ「</div>」も「前ページ・次ページ案内リンク」タグの上に追加しなければいけません。（だってこの位置で点線枠を終了させたいのだから）
では、HTMLを編集します。
管理画面の「HTML編集」画面で100行目あたりに移動させた「</footer>」を探します。
「</footer>」の下に囲み線の終了タグ「</div>」を追加します。
最後に「保存」するのを忘れないでください。
＜編集後のHTML＞
<% if:blog.bookmark_service -%>
<div class="bookmark" data-url="<% article.page_url -%>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip -%>"></div>
<% /if -%>
</footer>
</div>
<!-- /個別記事 囲い線 終わり -->
<div class="permalink">
<div class="bookmark" data-url="<% article.page_url -%>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip -%>"></div>
<% /if -%>
</footer>
</div>
<!-- /個別記事 囲い線 終わり -->
<div class="permalink">
●コメントアウトで見出し「<!-- /個別記事 囲い線 終わり -->」を追加しました。
●前の記事で「</footer>」を移動させなかった場合も同じ位置に「</div>」を置いてください。（上記「編集後のHTML」コードの「</footer>」タグがないだけで、「</div>」は同じ位置に入ります）
コード追加後の記事ページ
ちょっとわかりにくいかもしれませんが、Twitterマークの下（つまり「前ページ・次ページ案内リンク」や「関連する記事」の上）まで点線の囲み線が入っています。
記事ページをちゃんと点線で囲むことができました。
次の記事では、記事ページの日付部分やタイトル部分の調整をしたいと思います。
ちなみに、Twitterなどのマークの下と、今回入れた点線との距離（余白）が広すぎて気になる場合は、こちらの記事をお読みください。
■【Seesaaブログ新デザインシステム】記事ページの「posted by」「Twitterマーク」の余白を調整
記事ページを点線で囲むことはできたんですが、現時点の記事ページは、記事コンテンツの下部がこんな感じになっています。このままでもいいんですが、やっぱりTwitter等マークの下の余白が気になります。‥‥
記事ページを点線で囲むことはできたんですが、現時点の記事ページは、記事コンテンツの下部がこんな感じになっています。このままでもいいんですが、やっぱりTwitter等マークの下の余白が気になります。‥‥
次の記事の紹介
次の記事では、Seesaaブログの記事ページの日付部分に「曜日」と「投稿時間」を表示する方法を説明します。
■【Seesaaブログ新デザインシステム】記事ページの日付部分に曜日と投稿時間を表示する
Seesaaブログの記事ページ（個別記事ページ）の日付部分には、投稿時間が入っていません。デフォルトのテンプレートでは、記事の投稿時間は、文章の下の「posted by（投稿者の名前と時間、コメント数、カテゴリ名）」の‥‥
Seesaaブログの記事ページ（個別記事ページ）の日付部分には、投稿時間が入っていません。デフォルトのテンプレートでは、記事の投稿時間は、文章の下の「posted by（投稿者の名前と時間、コメント数、カテゴリ名）」の‥‥
