2025年6月15日日曜日

日曜日, 6月 15, 2025
no imagea

Google Bloggerのテンプレートには「続きを読む」がありません。

海外のブログを見ていると続きを読む(Read More, View More)は特に主流という感は無く、もしかするとあれは日本固有のものなのかなと思えなくもありません。

しかし、日本のブログサービスのテンプレートに慣れてしまうと、Bloggerでやるべきかやらざるべきかは別にして、何故か「続きを読む」で投稿記事を2つに分割してみたくなります。


続きを読むを追加するカスタマイズ

「続きを読む」の実装は考えるほど難しくありません。テンプレートのHTMLにコードを2箇所追加し、新しい記事を作成するときに spanタグで記事を2分割してあげるだけです。

<a name='more'></a>

ステップ1:スタイルシートの追加

ダッシュボードの「レイアウト」から「HTMLの編集」を開き、</head> の記述を探します。この直前(<head>と</head>の間であれば何処でも)に次のスタイルの定義を貼り付けます。

<style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

ステップ2:HTMLの投稿記事部分(post)に続きを読むで記事を分割するコードを貼り付けます。

「ウィジットのテンプレートを展開」をティックしてHTMLを展開しておきます。
投稿記事(post)部分に相当する次の記述を探します。

<p><data:post.body/></p> </b:if>

この </b:if> 直下にを次のコードを追加します。

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<p style='clear: both;'><a expr:href='data:post.url' rel='nofollow'>&#8230;続きを読む&amp;raquo;</a></p>
</b:if>

&#8230;続きを読む&amp;raquo; の記述は好みに合わせて変えてください。但し、この例のように記号を使う場合はHTMLエンティティ文字に変換しないとエラーになりますから注意します。

HTMLエンティティ文字については「BloggerにAddClipsボタンを貼り付ける」を参照して下さい。

ステップ3:投稿記事を書く

投稿記事を書くときに、記事中に次のコードを貼り付けます。

<span class="fullpost">
</span>

<span class="fullpost"> よりも前の行に書かれた文書が「続きを読む」の前に表示される部分、つまりトップページに表示される記事になります。

<span class="fullpost"> と </span> の間に書かれた文書が「続きを読む」で展開されて始めて表示される記事になります。

毎回これをコピペするのは大変ですし、私は<span style="fullpost"> と書いてしまい記事が分割できずにずいぶん悩みました。 spanタグには反射的に style と続けてしまうのです。

こういった間違えを回避するために「投稿テンプレート」にこの2行をコピペしておくようにします。

ダッシュボードの「設定」-「フォーマット」を選択し、「投稿テンプレート」上記の fullpostの2行をコピペします。これで新しい投稿記事を作成するときには常にこのfullpostの記述が予め入力されている状態で開くことになります。

この投稿記事内に書くspanタグですが、執筆段階では「プレビュー」をすると消えてなくなることが確認されています。

なるべくプレビューはしないようにしていますが、とりあえずプレビューで消えてしまったときには直ぐに追加できるように記述を覚えておくか、IMEの辞書登録をしておくなりしたほうがよさそうです。

0 comments:

コメントを投稿