記事を折り畳みたい

[新着] Webテンプレートを仮オープンしました



0   名前: elie : 2007/06/12(火) 20:05  ID:alk8hmFn sub-Ds
タグなのかスタイルシートなのかjavaなのかも分からないので、此方に失礼します。

YAHOOのニュース画面にある、【記事をおりたたむ】の様にhtmlページ内にある文章を湾クリックで開いたり畳んだりできる様になるタグというのはあるでしょうか。

良かったら何方か教えて下さい!


「たたむ」「おりたたむ」で検索したのですがヒットしませんでした…。
ソフトはFFFTP、メモ帳で作成しています。IE6を利用しております。

1   名前: カヅサツ ◆ThCi95HEzw : 2007/06/12(火) 20:05  [URL]  ID:CFc/kNLM sub-gm
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=963 より加筆
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
body{
	color: #000000;
	background-color: #FFCCCC;
}
div.Ar_text{
	color: #000000;
	background-color: #FFFFFF;
	margin: 1em auto;
	padding: 1px;
	width: 70%;
}
div.Ar_text div.section{
	margin: 1em 1em;
}
div.Ar_text p{
	margin: 0em;
}
div.Ar_text p.Ar_Button{
	color: #000000;
	background-color: #CCCCFF;
	width: 320px;
	margin: 1em;
}
</style>
<script type="text/javascript">
function Ar_ChangeMain(Ar_Button){
	var Ar_text = Ar_Button.firstChild.nodeValue;
	var Ar_child = Ar_Button.parentNode.getElementsByTagName('div');
	for (var i=0;i<Ar_child.length;i++){
		if(Ar_child[i].className.match(/Ar_main/i)){
			if(Ar_text == '続きを読む'){
				Ar_child[i].style.display = "block";
				Ar_text = document.createTextNode('文章を閉じる');
				Ar_Button.replaceChild(Ar_text, Ar_Button.firstChild);
			}
			else{
				Ar_child[i].style.display = "none";
				Ar_text = document.createTextNode('続きを読む');
				Ar_Button.replaceChild(Ar_text, Ar_Button.firstChild);
			}
		}
	}
}
function Ar_SetButton(){
	if(document.compatMode=="CSS1Compat"){
		var Ar_div = document.getElementsByTagName('div');
		for (var i=0;i<Ar_div.length;i++){
			if(Ar_div[i].className.match(/Ar_text/i)){
				var Ar_p = document.createElement('p');
				var Ar_text = document.createTextNode('続きを読む');
				Ar_p.appendChild(Ar_text);
				Ar_p.className = 'Ar_Button';
				Ar_div[i].appendChild(Ar_p);
				Ar_p.onclick = function(){
					Ar_ChangeMain(this);
				}
				Ar_p = null;
			}
			if(Ar_div[i].className.match(/Ar_main/i)){
				Ar_div[i].style.display = "none";
			}
		}
	}
}
window.onload = function(){
	Ar_SetButton();
}
</script>
</head>
<body>
<h1>夢野久作</h1>
<div class="section Ar_text">
	<div class="section Ar_first">
		<h2>縊死体</h2>
		<p>どこかの公園のベンチである。</p>
	</div>
	<div class="section Ar_main">
		<p>眼の前には一条の噴水が、夕暮の青空高く高くあがっては落ち、あがっては落ちしている。</p>
		<p>その噴水の音を聞きながら、私は二三枚の夕刊を拡げ散らしている。そうして、どの新聞を見ても、私が探している記事が見当らないことがわかると、私はニッタリと冷笑しながら、ゴシャゴシャに重ねて押し丸めた。</p>
	</div>
</div>
<div class="section Ar_text">
	<div class="section Ar_first">
		<h2>虫の生命</h2>
		<p>炭焼きの勘太郎は妻も子も無い独身者(ひとりもの)で、毎日毎日奥山で炭焼竈(がま)の前に立って煙の立つのを眺めては、淋しいなあと思っておりました。</p>
	</div>
	<div class="section Ar_main">
		<p>今年も勘太郎は炭焼竈に楢の木や樫の木を一パイ詰めて、火を点(つ)けるばかりにして正月を迎えましたが、丁度二日の朝の初夢に不思議な夢を見ました。</p>
		<p>勘太郎は睡っているうちに、どこからともなく悲しい小さい声で歌う唱い声が聞こえて来ました。</p>
	</div>
</div>
</body>
</html>

2   名前: elie : 2007/06/12(火) 20:05  ID:6x/VXsgb sub-Ds
ありがとうございます!
無事にたためました!

重ねて質問なのですが…この「続きを読む」や「文章を閉じる」の文字サイズを小さくする事はできるのでしょうか。
フォントタグでやってもソースが見えるだけで小さくなりません。
重ね重ね恐縮ですが、お分かりになる方教えて下さいませ!

3   名前: カヅサツ ◆ThCi95HEzw : 2007/06/12(火) 20:05  [URL]  ID:CFc/kNLM sub-gm
「続きを読む」や「文章を閉じる」と書かれた段落は、薄い青の背景色で 320px ほどの横幅であるように見えると思います。
これは >>1 のソースのどこかにあるスタイルシートで指定されているからです。
ということは、そこにフォントサイズの指定を追加してやれば良いのです。

参考:
http://www.kanzaki.com/docs/html/htminfo17.html
http://www.kanzaki.com/docs/html/htminfo17-2.html

4   名前: elie : 2007/06/12(火) 20:05  ID:9/s7CgIT sub-Ds
あ、う…教えて頂いたのですが…私には難しい様です。

<style type="text/css">
  p {color: blue; font-size: 120%}
</style>

このタグを使って設定しようとしたのですが、折り畳み自体が無効になってしまいます。

<p></p>のタグをスタイルシートのどこかに挿入する…というのは正しいでしょうか。どこに入れたら良いか教えて頂けないでしょうか。
申し訳ありません。

5   名前: カヅサツ ◆ThCi95HEzw : 2007/06/12(火) 20:05  [URL]  ID:O5hEMlpW sub-r2
> <style type="text/css">
>   p {color: blue; font-size: 120%}
> </style>

> このタグを使って設定しようとしたのですが、折り畳み自体が無効になってしまいます。

>>1に追加してみましたが、無効になりませんでした。

> <p></p>のタグをスタイルシートのどこかに挿入する…というのは正しいでしょうか。

スタイルシートに「タグ」を挿入してはいけません。スタイルシートの中に書けるのは、スタイルシートだけです。

> どこに入れたら良いか教えて頂けないでしょうか。

ヒント:「薄い青の背景色で 320px の横幅」が指定されているスタイルシートは、どこでしょうか?
超ヒント:「薄い青」は #CCCCFF

6   名前: elie : 2007/06/12(火) 20:05  ID:LcK9FSZp sub-Ds
>スタイルシートに「タグ」を挿入してはいけません。スタイルシートの中に書けるのは、スタイルシートだけです。

そ、そうだったんですね…!(汗
無事に文字が小さくできました、ありがとうございました!

更に申し訳ありません、この状態だと背景色が薄ピンク【#FFCCCC】になっていますよね?
スタイルシートだと、色指定以外は不可能でしょうか。

body{
color: #000000;
background-color: #FFCCCC;
}

の部分を、

body{
color: #000000;
background: 【素材のアドレス】;
}

を入力したのですが壁紙が表示されません。

他に試したのは、
上の例文で

<h1>夢野久作</h1>
のすぐ上にあるbodyタグに

body background="【素材のアドレス】"

と入力したのですがやはり駄目でした…。

何かやり方が間違っているでしょうか。

7   名前: カヅサツ ◆ThCi95HEzw : 2007/06/12(火) 20:05  [URL]  ID:O5hEMlpW sub-r2
> body{
> color: #000000;
> background: 【素材のアドレス】;
> }

> 何かやり方が間違っているでしょうか。

間違っています。
「背景画像だけ指定」する場合は background プロパティではありませんし、また値も URI だけではいけません。
どうすれば良いかはこのサイトのスタイルシート講座をお読み下さい。
(読んでもわからない場合、どこがわからないか教えてください)

> body background="【素材のアドレス】"
> と入力したのですがやはり駄目でした…。

ウェブページの「見た目」に関する指定は、属性ではなく、なるべくスタイルシートで行いましょう。

8   名前: elie : 2007/06/12(火) 20:05  ID:VSqtNSKl sub-Ds
スタイルシートの項目を見て、無事に設定できました!
何から何までありがとうございます…!

一覧へ戻る