投稿日時のデザイン①

★　投稿日時のデザイン

●　下記のようなデザインにしたいという質問の回答




●　条件（日付の表示方法を変える）

アメブロの基本設定 で、日付の表示方法を下記の方式に変えます。
（xxxx年xx月xx日(曜日))







●　やり方



①　フリープラグインに下記を追記する

<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">
articleTime_chg_001();//投稿日時の変更
articleTime_move_to_skinArticleHeader();//投稿日時を記事ヘッダー上に移動
articleTime_disp();//投稿日時を表示
</script>

◆　説明

　　・　下記はフリープラグインの最初に１つあればOKです。
　　　　またjQueryのライブラリが設定してある場合も下記は不要です。

<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>






②　下記をCSSへ追記する

/* ------------------------------------------------------- */
/* 投稿日時のデザイン①　　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.articleTime {/* 最初は 表示しない */
display:none !important;
}
.articleTime {/* 投稿日時 */
position:relative;
top:42px;/* 位置（上）*/
padding-bottom:5px;/* 記事タイトルとの隙間 */
width: 115px !important;/* 幅 */
height: 80px;/* 高さ */
color: #000000;/* 文字色 */
display:block;
}
.A_Time_Year_Month{/* 年月 */
display:block;
position: absolute;
top: 0px;/* 位置（上）*/
left: 0px;/* 位置（横）*/
text-align: right;
font-family: Century,serif !important;/* フォントの種類 */
font-size: 20px !important;
height: 20px;/* 高さ */
width: 80px;/* 幅 */
}
.A_Time_Day{/* 日 */
display:block;
position: absolute;
top: 0px;/* 位置（上）*/
left: 0px;/* 位置（横）*/
text-align: right;
font-family: Century,serif !important;/* フォントの種類 */
font-size: 70px !important;
width: 80px;/* 幅 */
height: 70px;/* 高さ */
z-index: 10;
font-weight:bold;/* フォントの太さ */
}
.A_Time_Week{/* 曜日 */
display:block;
position: absolute;
top: 50px;/* 位置（上）*/
left: 90px;/* 位置（横）*/
font-family: Century,serif !important;/* フォントの種類 */
font-size: 14px !important;/* フォントの大きさ */
border-right:1px solid #aaaaaa;/* 右の枠線 */
height:40px;/* 高さ */
padding-right:10px;/* 右余白 */
line-height:40px;/* 文字の高さ */
}
.articleTime .contentNew{/* New! */
position: absolute;
top: 10px;/* 位置（上）*/
left: 80px;/* 位置（横）*/
width:40px;/* 幅 */
}
.skinArticleHeader{/* 記事タイトル */
padding-left:110px;/* 左余白 */
width:470px;/* 幅 */
}

◆　処理説明


・　articleTime_chg_001();//投稿日時の変更
　　投稿日時の変更を下記の様に変更する

　　元の表示
　　2012年07月26日(木)
　　
　　2012/0726thu

　　ＨＴＭＬ上は、下記の様に変換されます。

<span class="articleTime"><time pubdate="pubdate" datetime="2012-07-26"><span class="A_Time_Year_Month"><span class="A_Time_Year">2012</span>/<span class="A_Time_Month">07</span></span><span class="A_Time_Day">26</span><span class="A_Time_Week"><span class="A_Time_week AT_Thu">Thu</span></span></time></span>


・　CSSで曜日毎に色の指定が可能です。

例（CSS）

/* 月火水木金 */
.AT_Mon,.AT_Tue,.AT_Wed,.AT_Thu,.AT_Fri{
color:#000000;
}
/* 土 */
.AT_Sat{
color:#00FFFF;
}
/* 日 */
.AT_Sun{
color:#ff0000;
}

・　articleTime_move_to_skinArticleHeader();//投稿日時を記事ヘッダー上に移動

　　投稿日時を記事ヘッダー上に移動します。
　　下記記事と同じ内容です。
http://ameblo.jp/new-blue-777/entry-10990544129.html



・　articleTime_disp();//投稿日時を表示

　　ＣＳＳで非表示にした(display:none !important;)を解除して表示させます。
　　これにより、ページ表示中に変な場所に表示されなくなります。


★　追記　2012.09.15

①　日付が縦になってしまう場合は下記を、この記事に書かれている
　　のCSSの後ろに下記を追加する

.articleTime {/* 投稿日時 */
width:120px !important;
height:100px;
top:45px;
}
.A_Time_Year_Month{/* 年月 */
width: 120px;/* 幅 */
height: 20px;/* 高さ */
text-align:left;
padding-left:5px;
}
.A_Time_Day{/* 日 */
width: 120px;/* 幅 */
height: 70px;/* 高さ */
text-align:left;
}
.A_Time_Week{/* 曜日 */
width: 45px;/* 幅 */
height:40px;/* 高さ */
padding-left:3px;
}
.skinArticleTitle {/* 記事タイトルの位置 */
padding-left:13px;/* 右へ 13px 調整してください */
}

●　http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css　の
　　ファイルにはこの記事で使われる下記の関数が入っています。

function articleTime_chg_001(){// 投稿日時を変える
$(document).ready(function(){
$(".articleTime time").each(function(){
var Art_Time1=$(this).html();
// 年・月・日・曜日を求める
var w_Year =$(this).html().substring(0,Art_Time1.indexOf("年"));
var w_Month=$(this).html().substring(5,Art_Time1.indexOf("月"));
var w_Day =$(this).html().substring(8,Art_Time1.indexOf("日"));
var w_Week =$(this).html().substring(11);
// 曜日の変更
var w_Week2=w_Week
.replace("(月)",'<span class="A_Time_week AT_Mon">Mon</span>')
.replace("(火)",'<span class="A_Time_week AT_Tue">Tue</span>')
.replace("(水)",'<span class="A_Time_week AT_Wed">Wed</span>')
.replace("(木)",'<span class="A_Time_week AT_Thu">Thu</span>')
.replace("(金)",'<span class="A_Time_week AT_Fri">Fri</span>')
.replace("(土)",'<span class="A_Time_week AT_Sat">Sat</span>')
.replace("(日)",'<span class="A_Time_week AT_Sun">Sun</span>');
var Art_Time2=
'<span class="A_Time_Year_Month"><span class="A_Time_Year">'+w_Year+'</span>'+"/"
+'<span class="A_Time_Month">'+w_Month+'</span></span>'
+'<span class="A_Time_Day">'+w_Day+'</span>'
+'<span class="A_Time_Week">'+w_Week2+'</span>';
$(this).html(Art_Time2);
});});}

function articleTime_disp(){// 投稿日時の表示
$(document).ready(function(){
$(".articleTime").css("cssText","display:block !important");
})}
function articleTime_move_to_skinArticleHeader(){// 投稿日時を記事ヘッダー前に移動
$(document).ready(function(){
var Art_cnt = $(".skinArticleHeader").length;
for(i = 0; i < Art_cnt; i++){
$(".articleTime:eq(" + i + ")").insertBefore(".skinArticleHeader:eq(" + i + ")");
}})}