@ 『人間は考える葦である。 -パスカル。』 …さらに表示 ∇ 

A  Internet Radio ♪ …さらに表示 ∇ 

B    …さらに表示 ∇ 

C スクロール ”箇条書き リンクテーブル”を …さらに表示 ∇ 

 

 

 

ホーム へ       サンプルページ  折り畳みコンテンツ0b1  doc_oritatmi_b1.htm

隠されたコンテンツ・スクロール(テキスト、ハイパーリンク、画像、箇条書き リンクテーブル)を、折り畳み表示(≒概要欄)。  CSS、コンテナ : <div>。  コンテンツなどのカスタマイズはテキストエディターなどで可。  all 対応。   コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、 …さらに表示 ∇ のクリックで。    ※: PCのファイルを直接表示でも可。   関連・詳細情報 :hogehoge0c.htmhogehoge0c1.htmdoc_oritatmi_b2.htm 

 

< ご使用方法 >

 ・ 保存は doc_oritatmi_b1.htm、wttec.gifhbxroom1.gifR2.gifsea8.jpgsea4.jpghbxroom1.gif18t_rss.pngpointer_us.giftwitter_18x18.pngInstagram.pngyoutube_18x18.png を右クリック、【名前を付けてリンクを保存】 - <保存する場所>: ……、などで。  ※: 変わってしまった、ファイル名や、*.htm 中のパスは要修正。

 ・ ペーストは、doc_oritatmi_b1.htm をテキストエディターで開き、ホームページ作成ソフトなどの ”テキストモード で、新しいページや hogehoge.htm(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。   ※: テキストモードコード/HTMLタグ挿入/HTMLメニュー など。

 ・ 編集 : hogehoge.htm に テキストモードでペースト 後は、ホームページ作成ソフトのデザインや通常モード、テキストモード、テキストエディターで編集します。  下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。 

※: 外部ドメイン(サイト)にアップロートの画像などの使用は、非表示に注意。  画像の alt タグは不可、サイズ指定の pt などの省略は注意。  スクリプト構文中への 改行混入に注意。

 ・ アップロードは、hogehoge.htm と同じホルダーに、使用してる画像 をアップロードします。   別ホルダーの場合は、hogehoge.htm の該当パス注意。

 ・ 作動テストは Edge〜 などで。  更新の確認は、ブラウザーなどのキャッシュのクリア後に実施。  (1) [F5]キ- or Ctrl+Rキー を押し、最新データ読み込みで。  更に、(2) Edgeを全て閉じ、再起動を行い、【Edge】 - 右上 [……] - [設定] - [プライバシー、検索、サービス] - [閲覧デ-タをクリア] - [クリア-するデ-タの選択] - [v]閲覧の履歴 -[今すくクリア] をクリック。  留めに、(3) サーバーのファイルを一旦削除。

 ・ 関連情報 : 色記号色記号5〃6フォントスタイルシートリファレンスホームページ開設入門HTMLをテキストエギタ-で編集

 

(*1) : doc_oritatmi_b1.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕   

シフトJIS使用(削除不可)

URL前・ツールバーに表示のアイコンファイル名(削除可)favicon_**.ico など

<style type= </style>は(削除可)
(*1)〜(*3)表タイトル背景
body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent

お気に入りなど表示のページ名(≠ファイル名)

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="favicon.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }
font {font-size:12px; line-height:13px;}
body,tr,td,form{ font-family:メイリオ,MS PGothic,MS Gothic,Lucida Sans Regular; font-size: 12px}
 --></style>

<base target="_blank">

<title>サンプルページ  折り畳みコンテンツ0b1</title> ====   この間、説明を省略。   ==== 
 

 

(*2) : doc_oritatmi_b1.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

 HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

 

コンテナ : <div>
 

@ テキスト CSS 吹き出し
CSSid
ページ内固有 起動文字 
隠されたコンテンツ

以下、同様。

 

 

 

A テキスト(ハイパーリンク付き) 
 

 

 

 


 

B 画像(ハイパーリンク付き) 

 

 

 

 

 

 

 

C スクロール箇条書き リンクテーブル
 


<body>

<!--webbot bot="HTMLMarkup" startspan -->
<!-- ★ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<p> </p>
@ 『人間は考える葦である。 -パスカル。』<font face="メイリオ"><span title="クリック → 続きを “表示/折り畳み” します。" style="CURSOR: hand; COLOR: #9966FF" onclick="document.all.idxxx001.style.display= document.all.idxxx001.style.display=='none' ? '' : 'none'"><b> …さらに表示 ∇</b></span></font> <DIV id=idxxx001 style="DISPLAY: none">森羅万象、why!(どのようにやるか)は普遍的に解るが、Why?(何故やるか)は個人的で解らないことが多い、とても深くて広い。  根源的には魂の求めDNAのプログラム、思惟的な計画、一時的な思惑。  『ただ動機だけが、人々の行為の真価を決する。- <a target="_parent" href="https://www.google.co.jp/search?q=ラ・ブリュイエール">ラ・ブリュイエール</a> 。』  <a target="_blank"

 ====   この間、説明を省略。   ====

href="http://www.pat.hi-ho.ne.jp/oka_tosho/randam_msg6a.htm">”哲学者・小説家小箴言集”</a> は『人間が幸福であると言えるのは、”何かを欲する時” と、”作り出す時” だけである 。 - <a target="_blank" href="https://www.google.co.jp/search?q=哲学者+アラン">アラン</a>。』 と根源的に断じてる。</DIV>
<p> </p>

A <A href="https://sternsmusic.bandcamp.com/" target="_blank"><IMG title="African pops" src="https://blog.ss-blog.jp/_images/blog/_c40/xml_xsl/m_antena2-2cd6a.gif" border="0"></A> <a href="https://www.internet-radio.com/" target="_blank">Internet Radio ♪</a><font face="メイリオ"><span title="クリック → 続きを “表示/折り畳み” します。" style="CURSOR: hand; COLOR: #3C0166" onclick="document.all.idxxx002.style.display= document.all.idxxx002.style.display=='none' ? '' : 'none'"><b> …さらに表示 ∇</b></span></font> <DIV id=idxxx002 style="DISPLAY: none"> <a href="https://jpradio.jp/" target="_blank" title="日本のインターネット ラジオ">
JP Radio ♪</a> <a href="http://radiko.jp/#!/live/JOAK-FM" target="_blank">radiko ♪</a> <a href="http://www.classicalmusicamerica.com/" target="_blank">ClassicalMusicAmerica ♪</a> <a href="https://tunein.com/radio/music/" target="_blank"> TuneIn ♪</a> <a href="https://www.radio.net/" target="_blank">Radio.net ♪</a> <a href="https://www.jango.com/" target="_blank">Jango ♪</a> <A href="http://www.di.fm/" target=_blank>Digitally Imported Internet
Radio ♪</A> <a href="https://radio.org.ro/" target="_blank">asculta live FM ♪</a></DIV>
<p> </p>

B <A href="http://xml-xsl.sakura.ne.jp/index2.html" target=_blank>
<IMG src="https://blog.so-net.ne.jp/_images/blog/_c40/xml_xsl/m_title002a.jpg" border="0" width="125" height="19" title="太陽風ДζΨΠ∀ ホーム"></a> <font face="メイリオ"><span title="クリック → 続きを “表示/折り畳み” します。" style="CURSOR: hand; COLOR:#3C0166; BACKGROUND-COLOR:" onclick="document.all.idxxx003.style.display= document.all.idxxx003.style.display=='none' ? '' : 'none'"><b> …さらに表示 ∇</b></span></font> <DIV id=idxxx003 style="DISPLAY: none"> <a onclick="window.open('http://www.pat.hi-ho.ne.jp/oka_tosho/search_google3a.htm', 'XX','status=yes,scrollbars=yes,width=400,height=200,resizable=yes,directories=no,screenX=1,left=1,screenY=1,top=1')" href="#" target="_self" title="ドメイン内検索3a"><img src="search_over.gif" border="0" align="absbottom"></a> <a onclick="window.open('http://www.pat.hi-ho.ne.jp/oka_tosho/search_google4.htm',

 ====   この間、説明を省略。   ====

ho.ne.jp/oka_tosho/mouse_over24.htm" target=_blank><IMG title="マウスオーバー切り替えメニューバー。Internet Explorerモードで作動。" src="https://blog.so-net.ne.jp/_images/blog/_c40/xml_xsl/m_20_white_s-0d2b4.gif" border=0></A> <A href="http://xml-xsl.sakura.ne.jp/mp3player/mp3player.htm" target=_blank><IMG title="mp3や、m4a、ogaの再生、操作パネルで行う。" src="https://blog.so-net.ne.jp/_images/blog/_c40/xml_xsl/m_20_green_s-6f9b7.gif" border=0></A></DIV>
<p> </p>

C スクロール ”箇条書き リンクテーブル”を<font face="メイリオ"><span title="クリック → 続きを “表示/折り畳み” します。" style="CURSOR: hand; COLOR: #9966FF" onclick="document.all.idxxx004.style.display= document.all.idxxx004.style.display=='none' ? '' : 'none'"><b> …さらに表示 ∇</b></span></font> <DIV id=idxxx004 style="DISPLAY: none"><div>
<div id="submenu3" class="anylinkcsscols" style="position: absolute; top:px; left:px; width:500px; height:400px; overflow:auto; margin:2px 2px; padding:5px 10px; background-color: #F9F8F9 ; background-image:url('http://xml-xsl.sakura.ne.jp/whtcv.gif'); border-left:1px solid #F0F0F4; border-top:1px solid #F0F0F4; border-right:1px solid #E2E2E7; border-bottom:1px solid #E2E2E7;">

   ※:↓ここにHTML(テキストや画像、ハイパーリンクなど)を記述します。<br/>
--------------------------------------------------------------------------------------------------------------------<br/>
----------------------------------------------------------------<br/>
<a href="https://xml-xsl.sakura.ne.jp/slideshow53/slideshow53.htm" target="_blank" title="ここをクリック">スライドシュー53</a><br/>
<br/>
<a href="https://xml-xsl.sakura.ne.jp/slideshow53/slideshow53.htm" target="_blank"><img src="https://xml-xsl.sakura.ne.jp/sea8.jpg" title="スライドシュー53 を□NewWinで開くよ!。"></a>  <img src="https://xml-xsl.sakura.ne.jp/sea4.jpg">
<ol>
<li>-----------------------------------------------------------------------------------------------------------------</li>
<li>-------------------------------------------------------------------------------</li>
<li>-------------------------------------------------------------------------------</li>
<li>-------------------------------------------------------------------------------</li>
<li>-------------------------------------------------------------------------------</li>
<li>-------------------------------------------------------------------------------</li>

 ====   この間、説明を省略。   ====

<li>&nbsp; ------------------------------------------------------------------------</li>
<li>&nbsp; ------------------------------------------------------------------------</li>
<li>&nbsp; ------------------------------------------------------------------------</li>
<li>&nbsp; ------------------------------------------------------------------------</li>
</ul>
</div>
</div></DIV>
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
<!--webbot bot="HTMLMarkup" endspan -->
 

====   こ以降は、各々のコンテンツを記述。   ====