配布中のマイぷれす用テンプレート
マイぷれすでは各ブログの管理画面で配色や背景画像のカスタマイズが出来るため、下のサムネイルと実際のサンプルの雰囲気が違うかもしれませんがご了承ください。
マイぷれすってなぁに？という方はマイぷれすビギナーズガイドをどうぞ。
マイぷれすの記事投稿日付表示で遊ぶPermalink
マイぷれすのテンプレートで日付の表示をちょっと変わったふうにしたい！と以前から考えてて、ひとつ前のデザインから試験的にやってみてたんですがもういいかな、ということでやり方をメモ。
まずおさらい
投稿日付表示のテンプレート変数は<tmpl_var name='regist_date'>。これに管理画面「6.カスタマイズ」の「日付フォーマット変更」で設定した形式の年月日が代入されます。上記画像右側のような変わった表示にしたいなら年、月、日にそれぞれCSSでスタイルを指定すればいいのです。例えばこんな感じ↓
<span class="year">年</span><span class="month">月</span><span class="date">日</span>
がマイぷれすのテンプレート変数にはそれぞれをバラバラで出力するものがない！困った→そこで…
カスタマイズの日付フォーマット変更に直接タグを入れる
強引なようにも思いますが今のこのブログの「日付フォーマット変更」欄はこうなってます。なぜ<u>と<b>かというと…本当は<span class="〜">で括りたかったんですが「字数が多すぎ！」とエラーが出てしまったので一番短い一文字タグを使うことにしました。
テンプレートとCSSの書き方
テンプレート
今のテンプレートでは
<ul class="footer"> <li class="date"><tmpl_var name='regist_date'></li> 以下略
となっています。実際のブログに出力されるHTMLは
<ul class="footer"> <li class="date"><u>2011</u>06<b>12</b></li> 以下略
となるのでここにスタイルを指定してやります。
CSSの書き方（一例）
現在のこのブログの日付表示CSSを書いておきます
日付表示ボックスのCSS
li.date {
margin-left: 0;/* 左外側の余白を0にする */
padding: 3px;/* 内側の余白を3pxにする */
/*position: absolute;ここから3行は表示位置を
top: -20px;記事枠の上の方に持っていくための
left: -24px;指定です*/
width: 65px;/* 幅を65pxに */
height: 50px;/* 高さを50pxに */
line-height: .7;/* 行間を詰める */
color: #fff;/* 文字色を白に */
background: url(./img/date.png) no-repeat #7a0016;/* 背景色と背景画像（ほんのり光が当たっているような画像）指定 */
font-family: Georgia, 'Times New Roman', Times, serif;/* */
font-size: 12px;/* 基本のフォントサイズを12pxに */
text-align: center;/* 文字を中央寄せに */
-moz-border-radius: 5px 5px 0 0;/* 角丸（Firefox4未満向け） */
-webkit-border-radius: 5px 5px 0 0;/* 角丸（safari・Chrome向け） */
border-radius: 5px 5px 0 0;/* 角丸（それ以外のモダンブラウザ向け） */
text-shadow: 1px 1px 1px #590917;/* 文字に影をつける */
box-shadow: 1px 1px 2px rgba(0,0,0,.6);/* 日付表示のボックスに影をつける */
}
「年」のCSS
li.date u {
text-decoration: none;
}
「日」のCSS
li.date b {
display: block;
font-size: 48px;
font-weight: normal;
}
「区切り線（/）を表示する」CSS
li.date u:after {
content: "/";
}
こんな感じで。最近のブラウザだと:before、:after疑似要素でHTMLにはない文字列や画像を表示させることが出来て便利です。対応してないブラウザでもちゃんと見せたい場合は区切り線画像を作って背景画像として指定してあげるといいかも。
デメリット
「日付フォーマット変更」で設定した形式は、記事投稿日時だけでなくコメントやトラックバック受信日時、サイドバー等に表示される最新記事リストの日時、目次一覧の日時すべてに適用されるためそのあたりが意図しない表示になってしまうかもしれません（「20110612」のように）。うちの場合はぞれぞれの場合ごとにスタイルを当てています。ちょっと面倒かも。FCafe 日付表記変更script版を応用して使う方がスマートなのかもしれません（未検証・自分の覚書用にリンク）
マイぷれすをツイッターにする！Permalink
やったーマイぷれすでページ送りリンク出来たよー＼(＾o＾)／Permalink
マイぷれすには「ページ送りリンク」がありません。「ページ送りリンク」とは他のブログでよく見る個々のブログトップページの下部にある「前のページ」「次のページ」や「1,2,3,4…」みたいなリンクです（この説明で分かるかな・汗）。そのため、マイぷれす内のブログ閲覧時にはトップに表示されている記事を最後まで見たらその他の古い記事を見るには「最近の記事一覧リンク」から一つ一つ手繰っていかなければならないのでちょっと不便だなーと思っていました。そこで、Javascriptを使ってページ送りリンクをマイぷれすでも表示できるようにしてみました。
ページ送りリンクを表示させるための準備
管理画面「5.ブログ設定変更」の「・日記登録変更」ページ下から3番目の項目、「一括表示の最大記事数（必須）」を設定します。
ちなみに「10」より小さい数は指定できません。
テンプレートの編集
top.htmlの、ページ送りリンクを表示したい場所に
<script type="text/javascript">
<!--
var a = (<tmpl_var name='story_counter'>/10);
var n = Math.ceil(a);
n = Number(n);
document.write('<p class=\"page-nav\">');
for (i = 0; i < n; i++) {
navi = '<a href=\"./?all=yes&order=new&all_page_no=' + i + '\">' + (i+1) + '</a>';
document.write(navi);
}
document.write('</p>');
//-->
</script>
と記入します。3行目の10を「一括表示の最大記事数（必須）」で設定した数字に書き換えてください。これでブログトップページにページ送りリンクを表示することが出来ます。表示スタイルはCSSで指定します。コード見たらわかるようにものすごく単純なことをやっている（というか今のところ自分にできる精一杯な）ので「前のページ」「次のページ」なリンクを表示させたり、「現在のページ」の表示を変えたり、記事数が多くリンクの数が増えたら「1,2,3,4,5,…19,20」のような省略した表示とかはできませんがおおむね満足。もっとスマートなやり方がわかる方はぜひ教えてください！
