2016年11月27日日曜日

Bloggerの記事一覧の頭に文字を入れたい!のでガジェット利用しました。

前の記事に引き続き、記事一覧の先頭に何らかの情報を持ちたい欲求の解消法です。

未熟者なりに発見したやり方は2通り。


  1. HTMLにそのまま更新
    HTML編集画面で、ページを指定して追加したい語句を挿入。
    →1行2行程度なら問題ないが、図や表を入れる場合はメンテナンスしにくいかと。
  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 != &quot;&quot;'>
    <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の方が柔軟なのでしょうが、当面はこのレベルで十分かと。