あゝ　人生に涙あり: Blog記録アーカイブ

二〇〇六年一月四日（水）

スタイルシートを切り替える

[Blog記録]

正月の深夜にこまごまとカスタマイズ。
壁紙とかラインとか、スタイルシートで切り替えているんだけど、それをいくつか用意しておいて見るときに切り替えられるオマケをつけた。

小粋空間: スタイルシート切り替え

いつものことだが、書くのも面倒だ・・・とにかく入れたのでよしとしよう（笑）

トップページの場合は右上にsylesheetと書いてあるところで適当に選ぶ。
今は正月なのでｎｅｗｙｅａｒも作ってみたけど・・・色々あってちょい変なとこがある。
まあ正月過ぎたら止めるのでいいや～

二〇〇五年十二月三十一日（土）

折りたたみその２

[Blog記録]

昨日の折りたたみもよかったのだけど、折りたたみの状態を維持することができないので変えます。

小粋空間: サイドメニューの折りたたみ（v4.0）

本当は最初からこっちにしたかったんだけど、前回やったときにはうまくいかなかったの・・・をリベンジ。
今度はなんとかうまくいったようです。
これで、いつ見ても自分の見たいメニューは開いて、見なくてよいメニューは閉じているという。素晴らしい。

詳しくカスタマイズ内容を書くと朝が来てしまうのでやめます～（笑）

二〇〇五年十二月三十日（金）

エントリーを楽にするボタン

[Blog記録]

以前も作ったエントリーボタンですが、なんとなく不具合っていたので、ちゃんとしたものを作り直し。

こだるま日和: エントリーを楽にしたい。

以下、詳細。

と思ったけど・・・

長くてどうやったかもうちょっと忘れたので、もういいや～(￣m￣*)

サイドバー折りたたみ

[Blog記録]

過去の日記が増えたせいか、なんだかサイドバーが長い。
そうでなくてもいちいちスクロールして見るのが面倒なときにいらないものを隠すことができる。

サイドバーのメニューを折りたたんで、隠したり出したりするスクリプト。
ダイズバタケ: サイドバーを折りたたみ式にしてみた

以下、詳細。

folding_sidebar.js を用意してアップロード

function toggleFold(sender, id) {
var elm = document.getElementById(id);
if (elm.style.display == "none") {
elm.style.display = "block";
sender.className = "unfolded";
} else {
elm.style.display = "none";
sender.className = "folded";
}

<head>～</head>に追加

<script type="text/javascript" src="<$MTBlogURL$>folding_sidebar.js" charset="utf-8"></script>

テンプレートを以下のように書き換える。

<div class="folded" onmousedown="toggleFold(this, '●○');">タイトル</div>
<div id="●○" style="display: block;">
隠したい内容
</div>

●○の部分は、折りたたみを複数のメニューで使いたいときに個別の名前を付けて管理する。

display: block;だと最初は出してある。
display: none;だと最初は隠してある。
お好みで。

二〇〇五年十二月二十九日（木）

javasctiptの外部読み込み

[Blog記録]

ちょこちょこといじっているのです、実は。
スタイルシートを変えてみました。ちょっとノート風？ポスト○ット風のタイトルが気に入ってます。

その他、javasctiptを外部から読み込むようにした。

以下、カスタマイズの覚書

javasctiptはテンプレートの<head>部分に書き込む構文だが、いくつも使うとソースを見てもなにがなにやらわからなくなって、使わなくなったものを消すときに面倒。外に別ファイルを作って読み出すことに。

１）<script type="text/javascript">～</script>の間に書かれた構文をコピーして「～.js」という名前で保存。index.phpのあるところにアップ。
ただし、文字コードを本文と合わせないといけないので注意。あと保存すると「～.ｊｓ.ｔｘｔ」とかなったらリネームしておく。

２）もとの<script type="text/javascript">～</script>を書き換える。

<script type="text/javascript" src="<$MTBlogURL$>～.js"　charset="utf-8"></script>

charset="utf-8"の部分は文字コードを本文に合わせて。あとは、なんのスクリプトか忘れないようにみたいな感じで名前を書いておくと便利。

ずいぶんとすっきりしました。

二〇〇五年十二月四日（日）

過去日記

[Blog記録] | [古い日記帳]

過去の日記を移しています。
2001年9月から2004年5月頭まで。
以前のＣＧＩ日記帳では２００１年から書いているみたい。でもサイト開設当時1999年ごろにもなんか書いていたような気もするからもう5年以上も日記を書いているのか。凄いなあ、これって。
もうたぶん読む人も少ない日記なので、本当に日記になっているけど（笑）
それでも飽きっぽい私が5年も書いているのは凄い。
読んでくださっている数人の方々。いつもありがとうございますとお礼を言ってみたりする。

追記：移し終わりました。そうか～ちょうどＮＹテロの直前から書いてますね、日記。
こうやってまとめてみてみると面白いこともあるな。

二〇〇五年十一月二十七日（日）

模様替え

[Blog記録]

模様替えしてみました。
他にも、見えないところが大々的に変わってます（笑）
だんだん慣れてきたのであまり時間はかからなくなってきたね。

今回は、デザインをＤｒ．Ｂｌｏｇからいただきました。
たくさん綺麗なテンプレートがあるので、しばらく楽しめそうだ。

それから、仕様変更でうまく読み込めなくなっていたモブログをどうにかしたくて、そのためにフツーのｈｔｍｌをｐｈｐに変更。よくわからんけど、これでリアルタイムに読み込めるようになりました。やれやれ。

こちらで、ｐｈｐモジュール化、ついでにつけたパンくずリストなど、色々拾いました。
小粋空間
以下覚書

ｐｈｐモジュール化は、ようするに今まで拡張子が.ｈｔｍｌだったものを全て.ｐｈｐに変更するだけ。
それと、環境設定＞設定　の　アーカイブファイルの拡張子もｐｈｐに。
さらに、.htaccess によるリダイレクト　を設定する。よく意味はわからないけど、以前のファイルにアクセスしたときに迷子にならないようにするのね。

モブログを読み込む文を変える。

<?php readfile("●●●.html"); ?>

これで自動的に更新してくれる。ありがたい。

パンくずリスト
小粋空間: パンくずリストアーカイブ
ぱんくずリストっていうのは、カテゴリーごとや日付ごとの記事をどの階層にあるのかを表示するもの。

Top ＞日常記録＞仕事まわり

みたいなものをつけるためのもの

カテゴリー用

<a href="<$MTBlogURL$>">Top</a> ＞ <MTParentCategories glue=" ＞ ">
<MTIfNonZero tag="MTCategoryCount">
<?php
if ('<$MTCategoryLabel encode_php="q"$>' != '<$MTArchiveTitle encode_php="q"$>') {
print '<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel encode_php="q"$></a>';
} else {
print '<$MTCategoryLabel encode_php="q"$>';
}
?>
<MTElse><$MTCategoryLabel$></MTElse></MTIfNonZero>
</MTParentCategories>

個別記事用

<a href="<$MTBlogURL$>">Top</a> ＞
<MTParentCategories glue=" ＞ ">
<MTIfNonZero tag="MTCategoryCount">
<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>
<MTElse><$MTCategoryLabel$></MTElse>
</MTIfNonZero>
</MTParentCategories>
＞ <$MTEntryTitle$>

日付ごと用

<a href="<$MTBlogURL$>">Top</a> ＞ <$MTArchiveTitle$>

二〇〇五年十一月十四日（月）

タイトル変更

[Blog記録]

タイトル変更した。
そろそろお頭っていうのも恥ずかしくなってきたのさ。
「あゝ人生に涙あり」
知っている人は知っている・・・水戸黄門の主題歌（笑）
私子どものころ水戸黄門と大岡越前のファンだったのよ。
大岡越前は片岡千恵蔵好きでねえ・・・水戸黄門はもちろん東野英治郎さまです。

相変わらず誰も見てないブログですが（笑）
まあシュミだし、日記だと三日坊主だった私にしては、以前のものを足すともう何年も書いていることになるし・・・お、５年くらい？凄いね~自分でもびっくりした。
そのうち、HPで書いていた文もアップしてもいいかもしれない。

二〇〇五年八月三日（水）

カレンダーのカスタマイズ

[Blog記録]

なんだかいじっていたらカレンダーが消えたので（爆）新しく横型にしてみた。

小粋空間: 月送りカレンダー（横型・リアルタイム版）

カレンダーテンプレートの設定
管理メニューの「テンプレート」クリック→「アーカイブに関連したテンプレート」の右側にある「新しいアーカイブ・テンプレートを作る」をクリック。次画面で下記を設定してください。
・テンプレートの名前：カレンダー（名称は何でもOKです）
・このテンプレートにリンクするファイル：（設定不要）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1./ Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<link rel="stylesheet" href="<$MTBlogURL$>calendar.css" type="text/css" />
<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>
</head>
<body >
<div class="calendar">
<span class="calendarHead">
<MTArchivePrevious>
<a href="<$MTBlogURL$>archives/calendar/<$MTArchiveDate format="%Y/%m/index" $>.php">＜</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y" language="en"$>
<MTArchiveNext>
<a href="<$MTBlogURL$>archives/calendar/<$MTArchiveDate format="%Y/%m/index" $>.php" >＞</a>
</MTArchiveNext>／
</span>
<?php $day = date(j); $year = date(Y); $month = date(m); ?>
<MTCalendar month="this"><MTCalendarIfEntries><?php $y="<$MTCalendarDate format='%Y'$>"; $m="<$MTCalendarDate format='%m'$>"; $d="<$MTCalendarDay$>"; if($year == $y && $month == $m && $day == $d) { $style = "today"; } else { $style = "notoday"; } ?><span class="<?php print "$style"; ?>"><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><?php $y="<$MTCalendarDate format='%Y'$>"; $m="<$MTCalendarDate format='%m'$>"; $d="<$MTCalendarDay$>"; if($year == $y && $month == $m && $day == $d) { $style = "today"; } else { $style = "notoday"; } ?><span class="<?php print "$style"; ?>"><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank>
<MTElse></span></MTElse></MTCalendarIfBlank></MTCalendar>
</div>
</body>
</html>

スタイルシートも用意する（calendar.css）

a,
a:link,
a:visited,
a:active {
color: #8FABBE;
background: none;
}
a:hover {
color: #006699;
background: underline;
}
.calendar {
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
}
.calendarHead {
color:#666666;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Arial, sans-serif;
padding-right: 5px;
}
.notoday {
margin-right:4px;
color:#666666;
font-size: 11px;
font-family: Verdana, Arial, sans-serif;
}
.today {
margin-right:4px;
color:#666666;
font-size: 11px;
font-family: Verdana, Arial, sans-serif;
border : 1px solid #999999;
}

カレンダーテンプレートを月別アーカイブに関連付け
管理メニューの「ウェブログの設定」クリック→次ページ右上「アーカイブの設定」クリック→次ページの「新しく、テンプレートとアーカイブを関連付ける。」欄で下記の設定にして「追加」をクリック。

次に同じ「アーカイブ」欄の「月別」の「カレンダー」の右側にある「アーカイブファイルのテンプレート」に下記を設定。

<$MTArchiveDate format="calendar/%Y/%m/index.php"$>

カレンダーを入れる場所に以下を追加。

<div id="globalnavi">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="698" height="20" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>
<script type="text/javascript" language="javascript">

</script>

スタイルシート（もともとあるやつ）に以下を追加

#globalnavi {
text-align: center;
padding-bottom: 5px;
border-bottom : 1px solid #666699;
}

修正したテンプレートの <head>～</head> の間に下記を追加

<script type="text/javascript" src="<$MTBlogURL$>util.js" charset="utf-8"></script>

あと、よくわからないスクリプトを適当な位置にアップロード（多分メインのあるあたりでよろしいかと・・・）
util.jsのダウンロード一番下の方にある。

はうっっ

二〇〇五年七月十八日（月）海の日

その他カスタマイズ　その2

[Blog記録]

エントリーの画面で文字に色をつけたりするためのボタン
ちょっと面倒だった。

まずは、mt.js に以下を付け足します。

function replaceEntity(str) { // 置換処理
str = str.split("&").join("&"); // & から変換すること
str = str.split("<").join("<");
str = str.split(">").join(">");
str = str.split('"').join(""");
return(str);
}
function changeEntity(obj) {
if (document.selection) { // WinIE
obj.focus();
var str = document.selection.createRange().text;
if (str) {
document.selection.createRange().text = replaceEntity(str);
} else if (obj.value && confirm('テキストエリア内の「&,<,>,"」を実体参照化します。\n\nよろしいですか？')) { // 選択されていないとき
obj.value = replaceEntity(obj.value);
}
} else if ( (obj.selectionEnd - obj.selectionStart) > 0 ) { // Mozilla
var bgnPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var bfrStr = obj.value.substring(0, bgnPos);
var fcsStr = replaceEntity(obj.value.substring(bgnPos, endPos));
var difLen = fcsStr.length - (endPos - bgnPos);
var aftStr = obj.value.substring(endPos, obj.value.length);
obj.value = Array(bfrStr,fcsStr,aftStr).join('');
obj.setSelectionRange(bgnPos,endPos + difLen); // 選択し直し
} else if (obj.value) { // Others (テキストエリア内全てが対象)
if (confirm('テキストエリア内の「&,<,>,"」を実体参照化します。\n\nよろしいですか？')) {
obj.value = replaceEntity(obj.value);
}
}
return;
}
function changeTag(str) { // 置換処理
str = str.split('<').join("<");
str = str.split('>').join(">");
str = str.split('"').join('"');
str = str.split('&').join("&"); // & は最後に変換
return(str);
}
function reverseEntity(obj) {
if (document.selection) { // WinIE
obj.focus();
var str = document.selection.createRange().text;
if (str) {
document.selection.createRange().text = changeTag(str);
} else if (obj.value && confirm('テキストエリア内の実体参照文字を「&,<,>,"」に変換します。\n\nよろしいですか？')) { // 選択されていないとき
obj.value = changeTag(obj.value);
}
} else if ( (obj.selectionEnd - obj.selectionStart) > 0 ) { // Mozilla
var bgnPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var bfrStr = obj.value.substring(0, bgnPos);
var fcsStr = changeTag(obj.value.substring(bgnPos, endPos));
var difLen = fcsStr.length - (endPos - bgnPos);
var aftStr = obj.value.substring(endPos, obj.value.length);
obj.value = Array(bfrStr,fcsStr,aftStr).join('');
obj.setSelectionRange(bgnPos,endPos + difLen); // 選択し直し
} else if (obj.value) { // Others (テキストエリア内全てが対象)
if (confirm('テキストエリア内の実体参照文字を「&,<,>,"」に変換します。\n\nよろしいですか？')) {
obj.value = changeTag(obj.value);
}
}
return;
}
function addClear(obj)
{
var item = '<div style="clear: both"> </div>';
//IE
if (document.selection) {
obj.focus();
sel = document.selection.createRange();
sel.text = item;
}
//Mozilla
else if (obj.selectionStart || obj.selectionStart == '0') {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
obj.value = obj.value.substring(0, startPos)
+ item
+ obj.value.substring(endPos, obj.value.length);
//Other
} else {
obj.value += item;
}
}
function changeFontsize(obj, tag) {
var startTag = '<span style=\"font-size:' + tag + '\;\">';
var endTag = '</span>';
//IE
if (document.selection) {
obj.focus();
var str = document.selection.createRange().text;
if(!str) {
return;
}
document.selection.createRange().text = startTag + str + endTag;
return;
}
//Mozilla
else if ((obj.selectionEnd - obj.selectionStart) >0) {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
obj.value = obj.value.substring(0, startPos)
+ startTag
+ obj.value.substring(startPos, endPos)
+ endTag
+ obj.value.substring(endPos, obj.value.length);
return;
}
//Other
else {
obj.value += startTag + endTag;
}
}
function changeFontcolor(obj, tag) {
var startTag = '<span style=\"color:' + tag + '\;\">';
var endTag = '</span>';
//IE
if (document.selection) {
obj.focus();
var str = document.selection.createRange().text;
if(!str) {
return;
}
document.selection.createRange().text = startTag + str + endTag;
return;
}
//Mozilla
else if ((obj.selectionEnd - obj.selectionStart) >0) {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
obj.value = obj.value.substring(0, startPos)
+ startTag
+ obj.value.substring(startPos, endPos)
+ endTag
+ obj.value.substring(endPos, obj.value.length);
return;
}
//Other
else {
obj.value += startTag + endTag;
}
}
function colorSelect (obj) {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
with(obj) {
if (options[selectedIndex].value == "------") return;
v = options[selectedIndex].value;
}
document.all.colcol.style.backgroundColor = v;
document.selection.createRange().text = '<span style="color:' + v + ';">' + str + '</span>';
}
function colorSet() {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
if (document.all.colcol.options[document.all.colcol.selectedIndex].value == "------") return;
v = document.all.colcol.options[document.all.colcol.selectedIndex].value;
document.selection.createRange().text = '<span style="color:' + v + ';">' + str + '</span>';
}
function fontsizeSelect (obj) {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
with(obj) {
if (options[selectedIndex].value == "------") return;
v = options[selectedIndex].value;
}
document.selection.createRange().text = '<span style="font-size:' + v + ';">' + str + '</span>';
}
function fontSet() {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
if (document.all.foncha.options[document.all.foncha.selectedIndex].value == "------") return;
v = document.all.foncha.options[document.all.foncha.selectedIndex].value;
document.selection.createRange().text = '<span style="font-size:' + v + ';">' + str + '</span>';
}
function bgSelect (obj) {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
with(obj) {
if (options[selectedIndex].value == "BG") return;
v = options[selectedIndex].value;
}
document.all.bg.style.backgroundColor = v;
document.selection.createRange().text = '<span style="background:' + v + '">' + str + '</span>';
}
function bgSet() {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
if (document.all.bg.options[document.all.bg.selectedIndex].value == "BG") return;
v = document.all.bg.options[document.all.bg.selectedIndex].value;
document.selection.createRange().text = '<span style="background:' + v + '">' + str + '</span>';
}

次は、edit_entry.tmpl です。body のところには・・・

<script type="text/javascript">
');
write('');
}
}
// -->
</script>
<![if !gte IE 5]>
<div style="float: right;">
<select>
<option value="">Font
<option onclick="javascript:changeFontcolor(document.entry_form.text,'#009933')">Green
<option onclick="javascript:changeFontcolor(document.entry_form.text,'#6666ff')">Blue
<option onclick="javascript:changeFontcolor(document.entry_form.text,'#ff3300')">Red
<option onclick="javascript:changeBGcolor(document.entry_form.text,'#FF3333')">red
<option onclick="javascript:changeBGcolor(document.entry_form.text,'#FFFF33')">yellow
<option onclick="javascript:changeBGcolor(document.entry_form.text,'#3399FF')">blue
<option onclick="javascript:changeBGcolor(document.entry_form.text,'#00FF66')">green
<option onclick="javascript:changeBGcolor(document.entry_form.text,'#CC6600')">brown
</select>
</div>
<![endif]>

同様に　extend のところには・・・

<script type="text/javascript">
');
}
}
// -->
</script>
<![if !gte IE 5]>
<div style="float: right;">
<select>
<option value="">Font
<option onclick="javascript:changeFontsize(document.entry_form.text,'50%')">50%
<option onclick="javascript:changeFontsize(document.entry_form.text,'70%')">70%
<option onclick="javascript:changeFontsize(document.entry_form.text,'130%')">130%
<option onclick="javascript:changeFontsize(document.entry_form.text,'200%')">200%
</select>
</div>
<![endif]>
</div>

はあはあ。

1 | 2 | 3 | 4 | All pages ＞

あゝ 人生に涙あり

人生楽ありゃ苦もあるさ・・・日常生活と各種レシピ、旅行記

リンク

二〇〇六年 一月 四日（水）

スタイルシートを切り替える

二〇〇五年 十二月 三十一日（土）

折りたたみその２

二〇〇五年 十二月 三十日（金）

エントリーを楽にするボタン

サイドバー折りたたみ

二〇〇五年 十二月 二十九日（木）

javasctiptの外部読み込み

二〇〇五年 十二月 四日（日）

過去日記

二〇〇五年 十一月 二十七日（日）

模様替え

二〇〇五年 十一月 十四日（月）

タイトル変更

二〇〇五年 八月 三日（水）

カレンダーのカスタマイズ

二〇〇五年 七月 十八日（月）海の日

その他カスタマイズ その2

あゝ　人生に涙あり

　　　　　　　　　　　　人生楽ありゃ苦もあるさ・・・日常生活と各種レシピ、旅行記

二〇〇六年一月四日（水）

二〇〇五年十二月三十一日（土）

二〇〇五年十二月三十日（金）

二〇〇五年十二月二十九日（木）

二〇〇五年十二月四日（日）

二〇〇五年十一月二十七日（日）

二〇〇五年十一月十四日（月）

二〇〇五年八月三日（水）

二〇〇五年七月十八日（月）海の日

その他カスタマイズ　その2