未熟者なりに発見したやり方は2通り。
- HTMLにそのまま更新
HTML編集画面で、ページを指定して追加したい語句を挿入。
→1行2行程度なら問題ないが、図や表を入れる場合はメンテナンスしにくいかと。 - ガジェットとして更新
ブログ本文の前にHTMLガジェットを追加し、特定のページのみ表示するように設定。
→メンテナンスもしやすいし地図まで追加可能なのでGOOD。
ホームのページでは、一言挨拶程度でいいので、①を使用しています。
クリームパンのラベル記事一覧では、クリームパンのまとめを表示したかったので、②のガジェット形式にしました。
どっちも意外と簡単(※)なので、どうぞ。
※無知な私が調べるのは、超大変でしたが、最終的には簡単だったということです(笑)
1.HTMLを編集して記事一覧の先頭に一言追加
前回の記事でも半分くらい書きましたが、グレードアップして紹介します。
<div class='column-center-inner'>の直後、
<b:section class='main' id='main' name='Main' showaddelement='no'>の前に下記を追加するだけ。
<div class='column-center-inner'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h4> ホームの記事一覧の上に表示したいこと。</h4>
</b:if>
<b:section class='main' id='main' name='Main' showaddelement='no'>
注意としては、テキストのみの場合でCSS等を使用しない場合、左端にピッタリくっついてしまうので、スペースを空けたいところですが、半角スペースだと上手くいきませんでした。
(常識なのかもしれませんが)文字の前に全角スペースで調整できます。
さらに、特定のページのみの場合はこちら。
<div class='column-center-inner'>
<b:if cond='data:blog.url == "表示したいURL";'>
<h4> 特定の記事一覧ページの上に表示したいこと。</h4>
</b:if>
<b:section class='main' id='main' name='Main' showaddelement='no'>
特定ラベルのページの場合、文字コード等の関係でブラウザからコピペするとURLが長くなりましたがそれでOK。
最初、わざわざ短く書き直していたので表示できず、これも原因究明に小1時間かかりました。
2.特定のページのみにHTMLガジェットを追加して、一覧の先頭に複雑な情報を追加
こちらも簡単です。
しかも、HTMLを直接編集する場合に比べて汎用性も、柔軟性も高いのでおススメ。
Step.1 レイアウト編集画面から、HTMLガジェットを追加
これも、最初はやり方が分からなくて苦労しました。
だって、「メイン」の枠の中に"ガジェットを追加"が無いんですもの。
Side-Bar(サイドバー)のガジェットを追加し、ドラッグして「メイン」の欄にぶち込めばOK。
タイトルは違いが分かるように、特定ページを示す文字列が良いでしょうj。
動作確認のため、HTMLソース部分は空にせず、何か入れておいた方が良いです。
とりあえずの表示確認なら、
<h4> 特定の記事一覧ページの上に表示したいこと。</h4>
を1行、HTMLソース部分に入れておきましょう。
Step.2 HTML編集で「特定ページのみ表示」の条件を入れる
ガジェットを追加した後で、HTML編集画面を開きます。
(すでに開いて編集中なら再読み込みでもOK)
ガジェットのタイトルをCtl+Fで検索、▼矢印で非表示になっている場合は、▼をクリックして隠されてるソースを表示します。
で、
<b:widget id=~title='ガジェットのタイトル'~>
から
</b:widget>
の間に下記の★印の2行を追加するだけ。
<b:widget id='HTML5' locked='false' title='ガジェットのタイトル' type='HTML' version='1' visible='true'>
<b:includable id='main'>
<!-- ★下記1行追加 -->
<b:if cond='data:blog.url == "特定ページのURL"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<!-- ★ 下記1行追加 -->
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
特定ページのURLは、ブログで表示したブラウザからコピペでOKです。
ホームの場合は、<b:if cond='data:blog.url == data:blog.homepageUrl'>でOK。
Step.3 ガジェットを好みの内容で編集する
後は、レイアウト編集画面のガジェット編集から、好きなようにHTMLを編集すればOK。
HTMLが分からない、または面倒な場合は、一時的な投稿を作成してページを作成、HTML編集モードに切り替えてソースをコピペすればOK。
画像も、表も、GoogleMapもちゃんと表示できました。
(^^)/
JavaScriptで記事一覧を取る方法が難しすぎたので、荒っぽいですがこの方法で簡単に作りました。
まぁ、JavaScriptの方が柔軟なのでしょうが、当面はこのレベルで十分かと。