O F F I C E  t o  D E S I G N

 Why can man understand only by looking back upon the past?

サイドバータイトルの背景を画像で表示
サイドバーのタイトル部分の背景を、画像で表示させます。スタイルシートから.side_titleを探し、そこに以下のソースを加えて下さい。太字のところは各自で変更して下さいね。
BACKGROUND-IMAGE: url(背景画像のurl);

17:27 | comments (0) | trackback (0) | 編集
ブログタイトル部分を画像で表示
まいまいの生存暦さんのように、ブログのタイトル部分を画像で表示している人が多いみたいで。なのでその方法をば。メイン・アーカイブ・1記事テンプレートから、以下のソースを探します。上の方にあると思います。
<div class="blog_title"><a href="{$BlogUrl$}">{$BlogName$}</a></div>
そのソースを以下のように変更して下さい。太字のところは各自で変更して下さいね。
<div class="blog_title"><a href="{$BlogUrl$}"><img src="画像のurl" border=0></a></div>
スタイルシートから.blog_titleを探します。上の方にあると思います。それを以下のように変更して下さい。
.blog_title {
  width: 100%; padding-right: 0px; margin: 0px; }

17:23 | comments (0) | trackback (0) | 編集
日付表記
日付表記を紹介。ちなみにこのブログの日付表記は、{$BlogEntryDate format="%Y.%m.%d %a" language="us"$}dayになってます。
%x  年月日曜日 (200○年○月○日(○曜日))
%y  西暦の下二桁 (2005年→05)
%Y  西暦の四桁 (2005年→2005)
%b  月 (1桁でも0は付かない:1月→1)
%m  月 (1桁だと0が付く:1月→01)
%B  月 (○月、と語尾に月が付く:1桁でも0は付かない)
%d  日付 (1桁だと0が付く)
%e  日付 (1桁でも0は付かない)
%a  曜日 (曜日を省略:土曜日→土)
%A  曜日 (○曜日、と語尾に曜日が付く)
%p  午前/午後
%H  時 (24時間表記:一桁だと0が付く)
%k  時 (24時間表記:一桁でも0が付かない)
%I  時 (24時間表記ではない:一桁だと0が付く)
%l  時 (24時間表記ではない:一桁でも0が付かない)
%M  分
%S  秒
%X  時 分 秒 +JST
%j  1月1日からの数字 (1/1は001、2/1は032、12/31は365)

language="us"とすると、英語表記になります。

15:00 | comments (0) | trackback (0) | 編集
記事編集画面へのリンク表示
記事編集画面へのリンクを表示しますが、正直別にいらないと思います('A`)メイン・アーカイブ・1記事テンプレートの<BlogEntries>内に、以下のソースをコピペして下さい。
<a href="http://www.yaplog.jp/sec/EntryEdit.blog?entryId={$BlogEntryID$}" target="_blank">編集</a>

14:22 | comments (0) | trackback (0) | 編集
サイドバーを短く表示
縦に長くなりすぎたサイドバーを短くするので、そういったサイドバーをスッキリさせたい人にオススメ。以下のソースを、機能追加・編集を使って新規追加したサイドバーにコピペして下さい。太字のところは各自で変更して下さいね。
<div width="100%">
<div class="side_title">サイドバー題名</div>
<div class="side_text">
<div style="overflow: auto; height: px;">
 サイドバー内容<br>
</div></div></div>
サイドバーの内容を、最新記事・アーカイブ・最新コメント・最新トラックバックにしたい人は、この記事を参考にドウゾ。

17:52 | comments (0) | trackback (0) | 編集
元からあるサイドバーの中身変更
最初からあるサイドバー機能(最新記事・アーカイブ等)の中身を、自分で変更して表示させたい人にオススメ。以下のソースを、機能追加・編集を使って新規追加したサイドバーにコピペして下さい。

 ★最新記事
<div width="100%">
<div class="side_title">最新記事</div>
<div class="side_text">
<BlogEntries latest="10">
<a href="{$BlogEntryPermalinkUrl$}">{$BlogEntryTitle$}
</BlogEntries></div></div>


 ★月別アーカイブ
<div width="100%">
<div class="side_title">月別アーカイブ</div>
<div class="side_text">
<BlogArchiveList archive_type="monthly">
<a href="{$BlogArchiveLink$}">{$BlogArchiveTitle$}</a> ({$BlogArchiveCount$})
</BlogArchiveList></div></div>


 ★日別アーカイブ
<div width="100%">
<div class="side_title">日別アーカイブ</div>
<div class="side_text">
<BlogArchiveList archive_type="daily">
<a href="{$BlogArchiveLink$}">{$BlogArchiveTitle$}</a> ({$BlogArchiveCount$})
</BlogArchiveList></div></div>

続きを読む…
17:14 | comments (0) | trackback (0) | 編集
サイドバーにアイコンを表示
サイドバーのタイトル以外の全文章の頭にアイコンを表示させます。表示させられるアイコンは1種類のみです。メインテンプレート・アーカイブテンプレート・1記事テンプレートの<head>内に以下のスクリプトをコピペして下さい。太字のところは各自で変更して下さいね。
<script language="javascript" type="text/javascript">
<!--

var DefaultImg = "/blog/template//img/icon.gif";
var NewImg = "画像のurl";

function changeIcon() {
var TagD = document.getElementsByTagName('div');
for (var i = 0; i < TagD.length; i++) {
if(TagD[i].getAttribute("class") == "side_text" || TagD[i].getAttribute("className")
== "side_text"){
TagD[i].innerHTML = TagD[i].innerHTML.replace(DefaultImg, NewImg);
}
}
}

function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}

addEvent(window, 'load', changeIcon);
//-->
</script>
のところは、青色のhtml/css変更可能テンプレートの場合15。緑色のhtml/css変更可能テンプレートの場合16。ピンク色のhtml/css変更可能テンプレートの場合17と変更して下さい。

17:09 | comments (0) | trackback (0) | 編集
アーカイブをプルダウン表示
アーカイブが多くて邪魔な人にオススメ。JavaScriptオフな人は使えません。以下のスクリプトをメインテンプレート・アーカイブテンプレート・1記事テンプレートの<head>内にコピペして下さい。
<script type="text/Javascript">
<!--
function popJump(selOBJ)
{
n = selOBJ.selectedIndex;
location.href = selOBJ.options[n].value;
}
// -->
</script>
以下のソースを、表示させたいところにコピペして下さい。
<form>
<div class="side">
<div class="side_title">アーカイブ</div>
<div>
<select onChange="popJump(this)">
<option value="#">□ カテゴリー
<BlogArchiveList archive_type="category">
<option value="{$BlogArchiveLink$}">・{$BlogArchiveTitle$} ({$BlogArchiveCount$})
</BlogArchiveList>
</select>
</div>

<div>
<select onChange="popJump(this)">
<option value="#">□ 月別
<BlogArchiveList archive_type="monthly">
<option value="{$BlogArchiveLink$}">・{$BlogArchiveTitle$} ({$BlogArchiveCount$})
</BlogArchiveList></select></div></div></form>

15:52 | comments (0) | trackback (0) | 編集
サイドバー折り畳み式表示
クリックすると伸びたり縮んだりするサイドバーの事です。メインテンプレート、アーカイブテンプレート、1記事テンプレートの<head>内に、以下のスクリプトを入れて下さい。
<script language="JavaScript">
<!--
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('<!--\n')
document.write('.instabilityML{display: none;}\n')
document.write('-->\n')
document.write('</style>\n') }
function kirikae(instability){
if(document.getElementById){
var baba = document.getElementById(instability);var obaba = document.getElementById("instabilityD").getElementsByTagName("span");
if(baba.style.display != "block"){
for (var t=0; t<obaba.length; t++){
if (obaba[t].className=="instabilityML")
obaba[t].style.display = "none";}
baba.style.display = "block";
}else{
baba.style.display = "none";}}}
//-->
</script>

続きを読む…
15:49 | comments (0) | trackback (0) | 編集
カテゴリ名別アイコン表示
メインテンプレート、アーカイブテンプレート、1記事テンプレートの</head>の直前に、以下のスクリプトを入れます。太字のところは各自で変更して下さいね。
<script type="text/javascript">
<!--
function getCommentNameImageTag(userName) {
//説明  ['カテゴリ名', '画像のurl']
var userImages = [
['カテゴリ名1', '画像のurl'],
['カテゴリ名2', '画像のurl'],
['カテゴリ名3', '画像のurl']
];

// 説明 上記投稿者名以外に表示する画像のURL
var otherImage = '画像のurl';

// 説明 imgタグに指定する属性
var addAttribute = '';

if ('' == userName) {
if ('' != otherImage) document.write('<img src="'+ otherImage +'" ' + addAttribute + ' />');
return;
}
if (userName.indexOf('') > -1) {
var m = userName.match(/>.+<\/a>/);
if (null != m) userName = m[0].substr(1, m[0].length - 5);
}
for (var i = 0; i < userImages.length; i++) {
if (userImages[i][0] == userName) {
window.document.write('<img src="' + userImages[i][1] + '" ' + addAttribute + ' />');
return;
}
}
if ('' != otherImage) window.document.write(<img src="'+ otherImage +'" ' + addAttribute + ' />');
return;
}
//-->
</script>
次に{$BlogEntryCategory$}というタグを探し、そのタグの前辺りに
<script type="text/Javascript">
<!--
getCommentNameImageTag('{$BlogEntryCategory$}');
//-->
</script>
↑をコピペします。

15:38 | comments (0) | trackback (0) | 編集