● 内容
① 下記記事の関連記事です。
記事フッターにテーマ名を設置する
② 記事フッター部を下記の様にします。
投稿日時|テーマ名|コメント(1)|ペタ
③ アメブロの基本設定でコメント・ペタを受け付けない様に
設定されていても問題なく投稿日時・テーマ名が表示される
様にしてあります。
④ テーマ名左右のセパレータ(|)は非表示にすることや余白を指定することが可能です。
また、画像の指定も可能です。
⑤ 記事ヘッダー部分の投稿日時・テーマ名の表示・非表示は、
ＣＳＳで指定可能です。
● 設置方法
① 下記をフリープラグインへ追加します。
<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">
$(document).ready(function() {
articleTime_theme_move();
});
</script>
■ 説明
・ 下記は既にフリープラグインに設置している場合は不要ですので
消して設置してください。
<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>
② 下記をＣＳＳの一番下に追加します。
/* 記事投稿日時・記事テーマ・投稿者名を消す */
.articleDetailArea {
display:none; /* 非表示 */
}
/* 記事タイトルと記事の隙間を設定 */
.skinArticleHeader{
margin-bottom:10px; /* 隙間 */
}
③ 各種調整Ａ（記事フッターのセパレータ）
/* 記事フッターのテーマ部分のセパレータ(|)を消す 右側 */
.articleTheme .separator_right{
display:none; /* 非表示 */
}
/* 記事フッターのテーマ部分のセパレータ(|)を消す 左側 */
.articleTheme .separator_left{
display:none; /* 非表示 */
}
④ 各種調整Ｂ（記事フッターのセパレータの画像化）
・ 使用画像例
・ ＣＳＳ
/* 記事フッターのテーマ部分のセパレータ(|)を画像に 右側 */
.articleTheme .separator_right{
color:transparent;
background-image:url(http://stat.ameba.jp/blog/ucs/img/char/char2/060.gif);
background-repeat:no-repeat;
background-position:left center;
padding:0px 5px;
}
/* 記事フッターのテーマ部分のセパレータ(|)を画像に 左側 */
.articleTheme .separator_left{
color:transparent;
background-image:url(http://stat.ameba.jp/blog/ucs/img/char/char2/061.gif);
background-repeat:no-repeat;
background-position:left center;
padding:0px 5px;
}
⑤ セパレータの余白の調整
/* 記事フッターのテーマ部分のセパレータの余白 右側 */
.articleTheme .separator_right{
padding-left:5px; /* 左余白 */
padding-right:5px;/* 右余白 */
}
/* 記事フッターのテーマ部分のセパレータの余白 左側 */
.articleTheme .separator_left{
padding-left:5px; /* 左余白 */
padding-right:5px;/* 右余白 */
}
⑥ 投稿日時の調整
/* 記事フッター投稿日付 */
.articleTime{
font-family:"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Arial,Helvetica;/* 文字の種類 */
color:#000000; /* 文字の色 */
font-size:12px;/* 文字の大きさ */
}
● JavaScript ソース内容
// テーマ名・投稿日時を記事フッターに移動(コピー)する(テーマ名を消す)
function articleTime_theme_move(){
$(".skinArticle").each(function(){
var articleLinkArea_html='<div class="articleLinkArea skinWeakColor"><span class="articleTime"><time pubdate="pubdate">'+$(".articleTime time",this).html()+'</span><span class="articleTheme"><span class="separator_left">|</span>'+$('.articleTheme',this).html().replace(/Theme ：/g, "").replace(/テーマ：/g, "")+'<span class="separator_right">|</span></span>'+$(".articleLinkArea",this).html()+'</div>';
$(".skinArticleFooter",this).html(articleLinkArea_html);
$(".articleLinkArea .articleTime,.articleLinkArea .articleTheme").css("display","inline");
});
}