コメント投稿者名に敬称(さん)を付ける方法

アメブロカスタマイズで自分らしい空間を作る技 コメント投稿者名に敬称(さん)を付ける方法

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

こんにちは。

今回は、新デザイン『CSS編集用デザイン』を適用したアメブロ向けの、『コメント投稿者名に敬称(さん)を付ける』カスタマイズ方法をご紹介します。

(旧デザイン向けはこちら⇒コメント投稿者名に敬称(さん)を付ける方法

多くのブラウザでは、CSSの編集のみで対応できますが、IE7等に対応させるためには、フリープラグインを使用する必要があります。

CSSを編集する

最近のブラウザ(IE9、IE8、Firefox、Google Chrome、Safari等)は、以下のコードをユーザーCSSの末尾に追加すればOKです。

a.commentAuthor:after,
span.commentAuthor:after{
  content:'さん';
}
a.commentAuthor[href=""]:after,
a.commentAuthor[href="http://ameblo.jp/アメーバID/"]:after{
  content:'';
}

赤文字部分は、カスタマイズするご自分のアメブロのアメーバIDに書き換えてください。

アメーバIDは、アメブロのトップページのURLからわかります。

例えば、本ブログのトップページのURLは、

http://ameblo.jp/wazameba

ですが、この『wazameba』の部分がアメーバIDになります。

IE7対応

上のCSSだけでも多くのブラウザに対応できますが、残念ながらCSSでは、IE7以前のブラウザで、投稿者名に敬称を表示することができません。

IE7以前にも対応させるには、フリープラグインにコードを追加します。

まず、事前準備として、フリープラグイン内でjQueryを使えるように設定しておいてください。

そして、フリープラグインに以下のコードを追加します。

<!--[if lt IE 8]>
<script>$(function(){
$('span.commentAuthor, a.commentAuthor[href!="'+location.href.replace(/^(http://ameblo.jp/[^/]+).*$/, '$1')+'/"][href!=""]').append('さん');
});</script>
<![endif]-->

これで、IE7にも対応しました。

なお、CSS、フリープラグインとも、緑文字部分を変更することで、表示する敬称を変えることもできますので、好みに応じて変えてみてくださいね。

これで、『コメント投稿者名に敬称(さん)を付ける』カスタマイズ方法の説明は終了です。

よろしければやってみてください。

アメブロカスタマイズで自分らしい空間を作る技