記事フッターにテーマ名を設置 | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery

★ 記事フッターにテーマ名を設置する。


● 内容

① 記事フッター部分などの記事内にのその記事のテーマ名を設置する。
  下記の様になります。ヘッダーはテーマ名です。

   |ヘッダー|コメント(1) | ペタ

② 指定した場所の前にテーマ名を追加するか、後ろにテーマ名を追加するかを
  指定できます。
③ セパレータ(区切り)としてテーマ名の前と後ろに文字や画像などを
  指定できます。画像の場合はHTMLで記述します。


● やり方

① フリープラグインへ追記する。
  (記事フッターのコメントの前にテーマ名を追加する例)


<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript">
theme_set('.commentLink','0','|','|');
</script>



◆ 説明

 ・ 下記はフリープラグインの最初に1つあればOKです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

 ・ 下記が既に設定されていれば、不要です。

<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>


 ・ theme_set('.commentLink','0','|','|');

'.commentLink'・・・記事フッターのコメントのセレクター名(例)
'0'・・・前か後ろかを指定する。'0'・・・前にテーマ名を追加 '1'・・・後ろにテーマ名を追加
'|'・・・テーマ名の前のセパレータ(区切り) HTMLで記述可能
'|'・・・テーマ名の前のセパレータ(区切り) HTMLで記述可能



● この記事では記事フッターの場所にテーマ名を入れる
  例を説明しています。
  記事内であれば他の場所でも、使えます。
  また、セパレータ(区切り)はHTMLであれば、画像なども入れられます。


◆ スクリプトの内容


function theme_set(set_selector,ab_sw,sp1,sp2){// テーマ名を指定場所に追加する
// ex:theme_set('.commentLink','0','|','|');
$(".skinArticle").each(function(){
var theme_html='<span class="thema_set">'+sp1+'<a href="'+$(".articleTheme a",this).attr("href")+
'" rel="tag">'+$(".articleTheme a",this).html()+'</a>'+sp2+'</span>';
if(ab_sw=="0"){$(set_selector,this).before(theme_html);}
if(ab_sw=="1"){$(set_selector,this).after(theme_html);}
});
}