CSSで記事先頭や記事末尾に定型文を挿入する

新旧スキン両対応
(旧スキンは制限が多いです)

アメブロカスタマイズのわざめーばです。

こんにちは。

前に、記事先頭や記事末尾に定型文(タグ)を挿入するという記事で、記事の前後に固定のメッセージや、タグを挿入するプラグインをご紹介したことがあります。

今回は、もう少し手軽に、『CSSでアメブロの記事先頭や記事末尾に定型文を挿入するカスタマイズ方法』をご紹介します。

ただし、手軽な代わりというか、結構制限がありますので、まずは、その制限を思いつくまま書いておきます。

・タグは記述できません。
・画像の表示は可能ですが、縮小表示・拡大表示はできません。
・今回紹介する方法では自動改行しませんので、自分で改行を入れる必要があります。
・自動改行できるようにすると、複数行書くことができません。
・CSSによる文字装飾などは、挿入した部分全体に対してのみ可能です。
・IEは新スキンの場合IE8以降で表示可能ですが、旧スキンでは7互換モードになるのでIEでは表示されません。
・旧スキンの場合、末尾への挿入は記事内広告や、共有ボタンより下になります。

等です。

制限が多いので、あいさつ文や、ちょっとしたお願いなどの定型文挿入に使える方法だと思ってください。

ちなみに、このブログにも、記事の前後にあいさつ文とお願いを入れてみました。

カスタマイズ方法

本カスタマイズは、CSSを使って実施します。

ユーザーCSSの末尾に、以下のようなコードを追加してください。

.articleText:before,
.entry .subContents:before{
  display:block;
  white-space: pre;
  content:"記事先頭に表示したい定型文";
}
.articleText:after,
.entry .subContents:after{
  display:block;
  white-space: pre;
  content:"記事末尾に表示したい定型文";
}

定型文を複数行で表示したい場合は、改行したい位置に『a』と書きます。

例えば、”一行目の内容a二行目の内容“と記述すると、

一行目の内容
二行目の内容

と表示されます。

また、画像を表示したい場合は、次のようにします。

.articleText:before,
.entry .subContents:before{
  display:block;
  white-space: pre;
  content:url(記事先頭に表示したい画像);
}
.articleText:after,
.entry .subContents:after{
  display:block;
  white-space: pre;
  content:url(記事末尾に表示したい画像);
}

また、contentに、『”文字文字文字” url(画像) “文字文字文字“』のように記述すると文字と画像が両方表示されるようです。

以上、アメブロの記事先頭や記事末尾に定型文を挿入するカスタマイズ方法でした。

季節の挨拶などにいかがですか?

もしよかったら試してみて下さい。

アメブロカスタマイズで人の集まるブログ作り