« 1月号 | メイン | 日本語のカテゴリー名 »
2005年01月18日
2月号
「追記を折りたたみにする」「ヘッダを画像にする」
詳しい解説は本誌の記事を見てください
●追記を折りたたみにする
最初に追記の部分の表示/非表示を指定するスタイルを2つ、テンプレートのスタイルシートの任意の場所に記述します。
--------------ソースここから--------------
.show { display: block; }
.hidden { display: none; }
--------------ソースここまで--------------
次にメインページのテンプレートの<head>～</head>内にJavaScriptの関数（function）を記述します。
--------------ソースここから--------------
<script type="text/javascript">
// thanks for (o)!
// Ogawa::Memoranda, http://as-is.net/blog/
function toggleWithClass(o,tClassName,initState) {
var t = o.parentNode.nextSibling;
while (t.className != tClassName) {
t = t.nextSibling;
}
var s = t.style.display || initState;
if (s != "block") {
t.style.display = "block";
o.title = "Collapse";
o.innerHTML = "続きをかくす";
} else {
t.style.display = "none";
o.title = "Expand";
o.innerHTML = "続きを読む";
}
}
</script>
--------------ソースここまで--------------
最後に「続きを読む」のリンクをクリックすると、先ほど記述した関数を起動するようにします。同じくメインページのテンプレートの<MTEntryIfExtended>～</MTEntryIfExtended>の部分を以下のように修整します
--------------ソースここから--------------
<MTEntryIfExtended>
<p class="extended"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a></p>
</MTEntryIfExtended>
--------------ソースここまで--------------
↓
--------------ソースここから--------------
<MTEntryIfExtended>
<p class="extended"><a href="javascript:void(0)" onclick="toggleWithClass(this,'hidden','none')" onkeypress="toggleWithClass(this,'hidden','none')" title="Expand">続きを読む</a></p>
<div id="<$MTEntryID$>-more" class="hidden"><$MTEntryMore$></div>
</MTEntryIfExtended>
--------------ソースここまで--------------
●ヘッダを画像にする
○タイトルを画像にする場合
あらかじめ「banner.png」と「h1-title.png」を用意しておく
--------------ソースここから--------------
#banner {
background: #999 url(banner.png) no-repeat top left;
color: #000;
height: 135px; /*画像の高さ*/
padding: 0;
margin: 0;
text-align: left;
}
#banner h1 a {
background: transparent url(h1-title.png) no-repeat top left;
color: #000;
display: block;
padding: 15px 0 0 15px;
margin: 0;
font-size: 2px;
width: 310px; /*画像の幅*/
height: 62px; /*画像の高さ*/
text-decoration: none;
text-indent: -700em;
}
#banner h2 {
font-size: small;
padding: 15px 0 0 15px;
margin: 0;
}
--------------ソースここまで--------------
○タイトルを画像にしたくない場合
--------------ソースここから--------------
#banner {
background: #999 url(banner.png) no-repeat top left;
height: 135px; /*画像の高さ*/
color: #000;
font-family: Verdana, Arial, sans-serif;
padding: 0;
margin: 0;
text-align: left;
}
#banner h1 {
font-size: xx-large;
padding: 15px 0 0 15px;
margin: 0;
}
#banner a {
color: #000;
text-decoration: none;
}
#banner h2 {
font-size: small;
padding: 15px 0 0 15px;
margin: 0;
}
--------------ソースここまで--------------
投稿者 tag : 2005年01月18日 22:39
トラックバック
このエントリーのトラックバックURL:
http://www.rickdom.com/mt3/mt-tbbbb.cgi/1340
このリストは、次のエントリーを参照しています: 2月号:
» 「追記を折りたたみにする」 from Akit.jp
: 2月号" href="http://www.rickdom.com/mt3/... [続きを読む]
トラックバック時刻: 2005年01月23日 17:08
» MTテンプレートのカスタマイズにはまって... from ニコンD70研究室
MTテンプレートのカスタマイズにはまってしまいまいした。 やればやるほどいじりた... [続きを読む]
トラックバック時刻: 2005年01月23日 22:48
» 追記の折りたたみ from Giyuのweblog
WebDesigningの２月号に折りたたみの方法があり。 CSSとjavasc... [続きを読む]
トラックバック時刻: 2005年01月29日 15:43
» 追記の折りたたみ from Honey B Style
やっぱり追記部分は折りたたんだほうがいいよねーとか思いまして。 blog -under construction-様の追記を折 [続きを読む]
トラックバック時刻: 2005年10月26日 11:35
» charlestremaine.com from charlestremaine.com
Passion is the quickest to develop, and the quickest to fade. Intimacy develops ... [続きを読む]
トラックバック時刻: 2006年06月22日 08:50
» brandonbuckston.com from brandonbuckston.com
Unless you believe, you will not understand. [続きを読む]
トラックバック時刻: 2006年06月22日 19:35
» christophereggleston.com from christophereggleston.com
Everybody lies, but it doesn't matter because nobody listens. [続きを読む]
トラックバック時刻: 2006年06月23日 07:29
コメント
質問してもいいですか？
折りたたみ展開機能のfunction toggleWithClassを
外部ｊｓファイル化したら折りたたみができなくなってしまいます。
なぜ？
投稿者
tadaoh
![[TypeKey Profile Page]](http://www.rickdom.com/mt3/nav-commenters.gif)
: 2005年01月21日 11:17