■Seesaaブログのコメント記入ページ（「コメントを書く」をクリックして開くページ）を編集
■独自で作っていたclass「article_kobetu」を使用して、記事を点線で囲む
■「article__content--comments」の線を削除する
■独自で作っていたclass「article_kobetu」を使用して、記事を点線で囲む
■「article__content--comments」の線を削除する
Seesaaブログの記事ページには、記事部分の下に「関連記事」と「コメント欄」があります。
何もコメントをもらっていない時のコメント欄には「この記事へのコメント」というタイトルと、「コメントを書く」ボタンだけが表示されています。
デフォルトのテンプレートでは「コメントを書く」部分はただの文字リンクでしたが、私は以前の記事＜■【Seesaaブログ新デザインシステム】記事ページのコメント欄に上余白を設定し、「コメントを書く」ボタンを作る＞で、「コメントを書く」リンクをボタンに変更しました。
今回の記事では、「コメントを書く」ボタンをクリックしたら開くページを編集します。
この「コメントを書く」をクリックして開くページのことを何と呼べばいいのかわからないので、以降勝手に「コメント記入ページ」と呼ぶことにします。
とりあえず、現時点でのスタイルです。
現時点のテンプレート
記事ページと似ていますが、記事部分が点線で囲まれていません。
「コメントを書く」ボタンは記事ページにありますから、それまでは記事が線で囲まれている状態で記事を読んでいたのに、「コメントを書く」ボタンをクリックしてページを開いたら点線で囲まれていない、シンプルなページになってしまうのは、ちょっと違和感があると思います。
記事タイトル部分もシンプルです。
ということで、記事ページの記事部分も点線で囲んでしまいたいと思います。
あと、記事部分とコメント記入タイトル部分との間に線が入っていますので、それを消してしまいます。（点線で囲んでしまうので、邪魔です）
コメント記入ページの記事部分を線で囲む
点線で囲むという指示を出すclassは「article_kobetu」です。
私が記事ページ設定の時に作りました。
■【Seesaaブログ新デザインシステム】記事ページを線で囲む（1）線で囲むというclassを作る
私は、以前書いた記事で、Seesaaブログのトップページの記事コンテンツを線で囲みました。トップページに枠線を入れてしまったので、個別記事ページでも点線の枠線を入れようと思います。‥‥
私は、以前書いた記事で、Seesaaブログのトップページの記事コンテンツを線で囲みました。トップページに枠線を入れてしまったので、個別記事ページでも点線の枠線を入れようと思います。‥‥
「article_kobetu（個別）」という安易なネーミングなんですが、コレは使いまわしが可能です。というか、使いまわそうと思ってわざわざ作りました。
点線枠「article_kobetu」は既にCSSに記述していますので、編集するのがHTMLだけですみます。
【注意】
この記事では「article_kobetu」がCSSに記述されていることを前提に話を進めますので、「article_kobetu」を作っていない場合は、上記記事を参考にしてください。
この記事では「article_kobetu」がCSSに記述されていることを前提に話を進めますので、「article_kobetu」を作っていない場合は、上記記事を参考にしてください。
HTMLのコメント記入ページ部分に「article_kobetu」を追加
HTMLを編集します。
管理画面の「HTML編集」画面を開き、「<% if:page_name eq 'comment' -%>」タグで検索すると1ヶ所がヒットしますので、この部分を編集します。
この部分がHTML上でのコメント記入ページ部分になります。
CSSで既に「article_kobetu」を作りましたので、HTMLでも「<div class="article_kobetu">」というタグを使用して枠を入れ込みます。もちろん終了タグ「</div>」も追加します。
下記の赤色の文字のように追加してください。
（何に対する記述なのかすぐわかるように見出しもコメントアウトで追加していますが、必要ないならば記述しなくてもいいです）
ということで、HTMLの該当部分に「追加するコード」のコードをコピペしてください。
ただし、丸ごとコピペはしないでください。
（理由は下に書いています）
＜追加するコード（赤色部分）＞
<!-- ********** コメント記入ページ 開始 *********** -->
<% if:page_name eq 'comment' -%>
<article class="article">
<!-- 記事 囲い線 開始 -->
<div class="article_kobetu">
<header class="article__heading">
<h2 class="article__title"><% article.subject -%></h2>
<div class="meta">
<% if:with_date -%>
<div class="date">
<span class="icn icn--calendar"></span><time datetime="<% article.createstamp | date_format("%Y年%m月%d日（%a）%H:%M") -%>"><% article.createstamp | date_format("%Y年%m月%d日（%a）%H:%M") -%></time>
</div>
<% /if -%>
<% if:list_tag -%>
<div class="tag">
<% loop:list_tag -%>
<span class="icn icn--tag"></span><a href="<% blog.tag_url(tag) -%>"><% tag.word -%></a>
<% /loop -%>
</div>
<% /if -%>
</div>
</header>
<div class="article__content article__content--comments">
<% article.entire_body | bodyfilter(article_info,blog) | mark_raw -%>
</div>
</div>
<!-- /記事 囲い線 終わり -->
<% if:page_name eq 'comment' -%>
<article class="article">
<!-- 記事 囲い線 開始 -->
<div class="article_kobetu">
<header class="article__heading">
<h2 class="article__title"><% article.subject -%></h2>
<div class="meta">
<% if:with_date -%>
<div class="date">
<span class="icn icn--calendar"></span><time datetime="<% article.createstamp | date_format("%Y年%m月%d日（%a）%H:%M") -%>"><% article.createstamp | date_format("%Y年%m月%d日（%a）%H:%M") -%></time>
</div>
<% /if -%>
<% if:list_tag -%>
<div class="tag">
<% loop:list_tag -%>
<span class="icn icn--tag"></span><a href="<% blog.tag_url(tag) -%>"><% tag.word -%></a>
<% /loop -%>
</div>
<% /if -%>
</div>
</header>
<div class="article__content article__content--comments">
<% article.entire_body | bodyfilter(article_info,blog) | mark_raw -%>
</div>
</div>
<!-- /記事 囲い線 終わり -->
●日付の部分ですが、私は投稿時間まで表示したかったので、投稿時間入りのコードを記載しています。投稿時間が必要ない場合は、元コードのままの記述で大丈夫です。
●各ページの日付を投稿時間入りにする方法は、記事＜■各ページの日付表示を変更する＞で確認してください。
丸ごとコピペせずに赤色のコードを直打ちする理由
今回の編集ではコードのコピペは推奨しません。直接書き換えていただきたいと思います。
なぜなら、上記に掲載しているコードをそのまま全部コピペしたら、日付部分が消えてしまうからです。
なぜこんなことになるのか私もよくわかりません。他の部分はコピペでうまくいくのに、このコメント記入ページはダメでした。
少し調べてみると、元コードの「<% if:with_date -%>」と「<% /if -%>」（上記のコード画像で赤色の背景色を付けている箇所）は、頭の「%」の後ろにタブで空間が入れられているようで、この空間がないと日付は表示されないようです。
日付と同じようにタグも表示されませんが、タグの「<% if:list_tag -%>」には空間は入っていません。なぜタグも表示されないのか、これまた理由がわかりません。
そもそも、デフォルトのテンプレートでもタグだけは表示されませんでしたので、私には太刀打ちできません。というか、コメント記入のページですから、コメントしたい人しか見ませんのでもういいです、考えるのをやめます。
●ということですので、日付部分を表示させたい方は、元のコードに直打ちすることになります。
●コメントアウトしている部分（見出しとか）はとりえあず無視していただいてかまいませんので、HTML編集画面で該当部分に「<div class="article_kobetu">」と「</div>」を直接打ち込んでください。（直打ちしたらうまく稼働します）
●直打ちって言うか、「<div class="article_kobetu">」と「</div>」をコピペして該当部分に貼り付ければいいです。
（コード全部をコピペしたらうまくいかない、という話です。しかも問題は「<% if:with_date -%>」と「<% /if -%>」に入っている空間だと思われますので、この部分を避けてタグを個別にコピペするのは大丈夫です。実証済です）
コード追加後のコメント記入ページ
記事の下部に表示される点線を削除する
とりあえず完成かと思いきや、なんだかおかしな点線が表示されています。
囲み線の下部分です。
これは「article__content--comments」というclassで指示されていた処理です。
点線で記事を囲んでしまいましたので、この「article__content--comments」の点線は必要ありません。
削除します。
CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「article__content--comments」というclassを探します。
記述の中から「border-bottom: 1px dotted #ccc;」を削除してください。ついでに余白の数値も変更します。
最後に「保存」するのを忘れないでください。
＜元コード＞
.article__content--comments {
border-bottom: 1px dotted #ccc;
padding-bottom: 30px;
}
border-bottom: 1px dotted #ccc;
padding-bottom: 30px;
}
＜編集後＞
.article__content--comments {
padding-bottom: 10px;
}
padding-bottom: 10px;
}
●下線は削除して、内側の下余白を10pxにしました。（見た目的にも問題ないでしょう）
コード編集後のCSSと実際のページ
次の記事の紹介
次の記事では、コメント記入ページの「コメント欄」の表記（タイトル）を変更したいと思います。
■【Seesaaブログ新デザインシステム】コメント記入ページのコメント欄の表記を変更する
コメント記入欄のタイトル部分が『"○○"へのコメントを書く』と表記されています。別にこのままでも何の問題もありませんが、私は「" "」で囲むという表記方法が好きではないのです。‥‥
コメント記入欄のタイトル部分が『"○○"へのコメントを書く』と表記されています。別にこのままでも何の問題もありませんが、私は「" "」で囲むという表記方法が好きではないのです。‥‥
