2017年4月21日金曜日

Bloggerの記事一覧で、記事を省略表示するHTMLの解説

Bloggerの記事一覧で、記事を省略表示するHTMLの解説

前回記事で書いたHTMLの解説です。

https://oua-iea-programmer.blogspot.jp/2017/04/bloggerscript.html

記載したHTML

変更前

<!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

変更後

<!-- 記事側で個別に省略位置を指定しているなら -->
<b:if cond='data:post.hasJumpLink'>
  <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>

    <!-- 省略位置まで表示 -->
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>

  <!-- 続きを読むリンク表示 -->
  <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>

<!-- 記事ページを開いた時 もしくは 固定ページを開いた時 -->
<b:elseif cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'/>
  <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>
    <!-- 全文表示-->
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>

<!-- 省略表示ができるなら -->
<b:elseif cond='data:post.snippet'/>

  <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>
    <!-- 記事内に画像があればサムネイル表示 -->
    <b:if cond='data:post.firstImageUrl'>
      <div class='Image thumb'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.jumpText'>
          <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
        </a>
      </div>
    </b:if>

    <!-- 記事本文の省略表示 -->
    <data:post.snippet/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>

  <!-- 記事全文が140文字以上なら -->
  <b:if cond='data:post.body.length &gt;= 140'>
    <!-- 続きを読むリンク表示 -->
    <div class='jump-link'>
      <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
  </b:if>

<!-- 省略表示ができないなら -->
<b:else/>
  <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>

    <!-- 全文表示-->
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
</b:if>

変更内容の全体像

行数はそこそこありますが、改めて全体像を話すなら

  • 記事側で個別に省略箇所を指定しているか?
    • いままで通りの表示
  • 記事9選択時 or 固定ページを開いた時か?
    • 省略無しで全文表示
  • 省略表示ができるか?
    • 記事内に画像があれば
      • 記事内にある最初の画像を表示
    • 記事の冒頭だけ表示
  • 記事が140文字以上の記事なら
    • 続きを読むリンクを表示
  • それ以外
    • 今まで通りの表示

と、大きく分けて5パターンの動作をさせているだけです。

編集内容のポイント

data:post.bodyをdata:post.snippetに

<data:post.body/>を<data:post.snippet/>にすると、記事の冒頭140文字前後だけを表示できます。

この2つはBloggerのデータタグです。

  • <data:post.body/>
    • 記事全文を表示する
  • <data:post.snippet/>
    • 記事冒頭140文字を表示するもの

データタグにどんなものがあるかはこちらを御覧ください。

https://support.google.com/blogger/answer/47270?hl=ja

<b:if><b:else><b:elseif>タグ

単純に<data:post.body/>を<data:post.snippet/>に置き換えただけだと、「続きを読む」を選択した後ですら 省略表示になってしまいます。

そこで<b:if><b:else><b:elseif>タグを用いて条件分岐させます。

このタグで

  • 記事側で省略位置を指定している場合
    • 記事を指定した位置まで表示
  • 記事選択時 もしくは固定ページの時
    • 記事全文表示
  • 記事省略表示が可能なら
    • 記事省略表示
  • 上記以外
    • 全文表示

となるように制御しています。

<b:if><b:else>タグとは

Blogger用の制御タグです。

これで条件分岐を行い、表示する内容を決定しています。

具体的には

<b:if cond='data:post.hasJumpLink'>

この部分で、記事側で省略位置を指定しているかを判定しています。

b:ifタグのcond属性の真偽値が、制御の条件になります。

上記cond属性の指定だと

  • 記事側で省略位置を指定している時
    • <b:if>~<b:else/>までに記述されているのを表示
  • 指定していない時
    • <b:else/>~</b:if>までに記述されているのを表示

といったように、表示する内容を分岐しています。

elseを書かない場合

<b:else>を書かない場合、条件に該当しない時は何も表示しません。

(記述例)

<!-- 記事内に画像があればサムネイル表示 -->
<b:if cond='data:post.firstImageUrl'>

 <div class='Image thumb'>

  <img expr:src='data:post.firstImageUrl'/>
</b:if>

上記記述だと、

  • 記事内で使っている画像がある
    • 画像を表示
  • 画像がない
    • なにも表示しない

になります。

<b:if>タグのネスト(入れ子)

<b:if><b:else>タグは、<b:if>タグを入れ子にできます。

(記述例)

<b:if cond='条件A'>

  条件Aに該当した時の処理

<b:else/>

  <!-- elseの中に更にifタグを書いている -->

  <b:if cond='条件B'>
    条件Bに該当した時の処理

  <b:else/>
    条件A、Bに該当しない時の処理

  </b:if>

</b:if>

<b:elseif />タグ

if、elseの中に入れ子でifをかけますが、 <b:elseif />タグを使うことで、 階層を浅くできるかもしれません。

先程のelseの中にifがある構成の場合

<b:if cond="条件A">

  条件Aに該当した時の処理

<b:elseif cond="条件B">

  条件Bに該当した時の処理

<b:else/>

  条件AにもBにも該当しない時

</b:if>

<b:else><b:if>の入れ子階層が浅くなりました。使うことで読みやすくなるなら使っていきましょう。

condの書き方

下記のような書き方があります。

cond=''分岐用に見る値 == 処理対象の値"

== は「○○である」ことを検証します。

cond=''分岐用に見る値 != 処理対象外の値"

!=は「○○ではない」ことを検証します。

cond=''分岐用に見る値 in {処理対象の値1,処理対象の値2...}"

==の条件を複数書きたい時用です。値を区切る時はカンマで区切ります。

cond=''分岐用に見る値 not in {処理対象外の値1,処理対象外の値2...}"

!=の条件を複数書きたい時用です。値を区切る時はカンマで区切ります。

cond="分岐用に見る値"

分岐用に見る値が存在するかチェックします。

例えば、記事で使われている最初の画像を使いたい時です。記事内に画像がなければ取りようがありません。

そこで、<b:if cond="記事の最初の画像">とチェックしてやれば

  • 画像がある時は表示
  • ない時は何もしない

というように書けます。

cond="分岐用に見る値 &gt; 閾値"

cond="分岐用に見る値 &gt;= 閾値"

  • 上: 閾値より大きいか
  • 下: 閾値以上か

&gt;は「>」と同じです。&lt;にすると「<」になります。つまり

  • 値 > 閾値
  • 値 >= 閾値

となります。

  • gtは「greator than」
  • ltは「less than」

の略です。

なんでこんな面倒くさい文字を書いているかというと、cond内で<、>を書くとエラーになるためです。

HTMLでは<、>はタグを指定するための文字のため、タグ表記以外のところで使うと文法でエラーになります。

回避策として、&gt;&lt;といったエスケープ文字を使うことでエラーを回避しています。

condで判定する時に使う値

Bloggerのデータタグ名や、文字列値、数値を書いて条件を書きます。

冒頭のHTMLで使ったものを紹介していきます。

Blogger上で「追記の区切りを挿入します」で挿入したものがあれば、真偽値の真が入ります。

hasJumpLinkの挿入

指定していなければ偽が入ります。また、指定していても下記ケースの時は偽が入ります。

  • 記事選択時
  • 固定ページ表示時

つまり、冒頭のHTMLの1行目の下記記述は

<b:if cond='data:post.hasJumpLink'>

「省略位置が個別に設定されている かつ 記事の一覧表示時」かチェックしています。

data:post.jumpText

Bloggerで設定した「投稿ページのリンクテキスト」が入っています。

投稿ページのリンクテキストとは、「続きを読む」「ReadMore」といった省略時に表示したいリンクテキストのことです。

下記から設定できます。

管理メニュー>「レイアウト」>「ブログの投稿ガジェット」にある「編集」ボタン押下

ガジェットの編集ボタン

出てきたダイアログから設定できます。

投稿ページのリンクテキスト

data:blog.pageType

ページの種別が入っています。

  • ホームなのか
  • 固定ページなのか
  • 記事を選んだ時なのか

data:blog.pageTypeは、文字列値が入っています。一例を挙げます。

説明
index ホーム画面、ラベル選択時
archive アーカイブ選択時(YYYY年MM月)
item 記事単体を選択時
stataic_page 固定ページ

冒頭のHTMLの16行目の

<b:if cond='data:blog.pageType == &amp;quot;static_page&amp;quot;'>

「data:blog.pageTypeがitem もしくは static_pageなら」という記載は、「記事選択時 もしくは 固定ページなら」かチェックしています。

&quot;は「"」と同じです。

文字列値を条件に使う時は、&quot;か「"」で文字列値を括るようにしてください。

そういうルールです。

<b:if cond='data:blog.pageType == static_page'>

だと、エラーが出ます。

data:post.firstImageUrl

記事内で画像、動画を貼っている場合、最初に見つかった 画像 or 動画のサムネイル画像のURLが入っています。

画像がない時は何も入っていません。

似たようなやつとして、data:post.thumbnailUrlがあります。

こちらはモバイル向けの画像サイズで画像を取得できます。

デフォルトでは72x72の正方形です。

data:post.body、data:post.snippet

  • data:post.bodyは記事全文
  • data:post.snippetは記事の一部分

<b:if>タグでこれらを使うとしたら、 中身が入っているかの検証、文字数の検証くらいです。

(使用例)

<b:if cond='data:post.body.length &amp;gt;= 140'>
  <!-- 続きを読むリンク表示 -->
  <div class='jump-link'>
    <a expr:href='data:post.url + &amp;quot;#more&amp;quot;' expr:title='data:post.title'><data:post.jumpText/>
    </a>
  </div>
</b:if>
  • 記事全文で140文字以上なら
    • 続きを読むリンクを表示

snippetが140文字まで入っているので、閾値は140文字としています。

data:blog.url

現在開いているページのURLが入っています。

data:blog.homepageUrlと組み合わせることで、「ホーム画面だけ何かする」という条件を組めます。

data:blog.homepageUrl

ホーム画面のURLが入っています。

(使用例)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
ホーム画面の処理

</b:if>

data:blog.pageType == "index"だとラベル選択時も条件に該当してしまいます。

data:blog.url == data:blog.homepageUrlで、ホームページの時だけ使いたいものを書けます。

data:post.url

記事のURLです。

冒頭のHTMLだと、画像から記事に飛べるようにaタグのhref属性に使っています。

data:post.title

記事のタイトルです。

冒頭のHTMLだと、imgタグのalt属性に使っています。

expr:属性名に関して

<a expr:href='data:post.url' />

といったように、aタグのhrefの頭に「expr:」と書いた箇所があります。これは、Bloggerのプロパティを属性に使う時に必要な記述です。

expr:属性名='Bloggerのプロパティ'とすることで、指定した属性に、Bloggerのプロパティを設定できます。


以上で解説は終わりです。改めて冒頭のHTMLを確認してみてください。

0 件のコメント: