<< 付箋の改良版 コメント欄の色の指定方法 >>
 

私が利用しているリンクメニューの設置方法



私が利用しているリンクメニューですが、以前説明した小窓の応用です。

この小窓は他のメニューに影響しないため、設置が簡単で初心者に向いています。
よろしかったらご利用下さい。スクロールバーの色も各小窓にあわせて設定が可能です。

※左右どちらでも設置が可能で、他のメニューに影響しません。




設置方法 HTML編集


<div CLASS="winodw" style="scrollbar-face-color:#C6D3FF;
">
Link<BR>
│ <BR>
├HTML&CSS関連<BR>
│├<a href="URL">サイト名</a><BR>
│├<a href="URL">サイト名</a><BR>
│├<a href="URL">サイト名</a><BR>
│└<a href="URL">サイト名</a><BR>
└<a href="URL">サイト名</a><BR>
</div>




設置方法 CSS編集


/*小窓*/
.windows{
overflow:scroll;
height:20em;
width:150px;
text-overflow:ellipsis;
word-break:keep-all;
white-space:nowrap;
background-color:#FFFFFF;
border:1px solid #CCC;
text-align:left;
scrollbar-face-color:#FFE8F7;
line-height:93%
}


ポイント
  • スクロールバーの色を変えるには、scrollbar-face-colorで指定します。デフォルトで色を指定して有りますが、各小窓ごとに色を変えるには、style="scrollbar-face-color:#C6D3FF;"を追加することにより可能です。
  • height:20em;で、行数を指定しています。20行以上で小窓が出現しますので、内容が少ない場合は、数字を小さくしてくださいね。2004.8.14追記


追記
私はの設置場所は、<$menuleft$>の前に設置しています。


ぽっと

CopyRight(C) 2004 All rights reserved by potto37




2004年9月18日
soliloquyさんのところで、メモ欄増設について の記事を紹介されています、よろしかったらご覧下さい。
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-24 10:45 | │├メニュー | Trackback(8) | Comments(51)
トラックバックURL : http://potto.exblog.jp/tb/732520
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Tracked from 流れ星の散歩道(^_-)-☆ at 2004-07-24 14:04
タイトル : この技を応用して
いつもお邪魔しているぽっとさんのblogからまたトラバさせていただきました。 ありがとうございます。 前から小窓を作って簡易profileやリンク集を作ってみたいと思っていたのですが、なかなかソースがわからず作成できずにいました。 近々このblogにも小窓をつけてアクセスしやすいようにしたいと思います。 もしかして、私のblogは色々と飾りすぎなのかもしれませんね(笑)。 見づらかったらコメントにご一報ください。 そういえば、エキサイトblogの開設者数が4万人を超えていましたね。 最近のblogブームにのって急増中なのでしょうか。 以前までは「ホームペー...... more
Tracked from My Library L.. at 2004-07-29 04:18
タイトル : リンクとアクセサリ項目の追加!
左の欄に、リンク項目を追加し(ぽっとの陽だまり研究室より)、 新たにアクセサリという項目を作りました。 リンクは、私が日々の情報を得るのに使っているサイトやBlogに関連するサイト等です。 アクセサリは今はBlog Petのみですが、アナログ時計や一言ニュースと天気(infoseekの広告を勝手にそう例えた)を載せる予定です。 後、リンクの張り直し等の修正も加えました。... more
Tracked from ぽっとの陽だまり研究室 at 2004-08-01 20:48
タイトル : 右側2列スキンの小窓の設置方法(osampo01さんへの..
osampo01さんから質問がありましたので、osampo01さんに向けての回答です。 ただし、右側2列のスキンには適応可能です。 Q. はじめまして。 最新のコメント欄,exblogのリンク集を小窓に入れちゃう方法ってありますか? メモ帳は1個しかできないのに 小窓だとどんどんできちゃうのでしょうか?小窓自体の貼り方がよくわからないので もう一度お願いします。 A. エキサイト関連のコメントやリンクは、すべてに小窓ができてしまいますが、 方法はあります。 osampo01さんのブログは右側2列を基本に作成されたのでしょうか。たぶんこの方法で可能だと思います。(...... more
Tracked from Online Journ.. at 2004-09-12 00:32
タイトル : 便利ですっきりメニュー♪
私が利用しているリンクメニューの設置方法... more
Tracked from Online Journ.. at 2004-09-12 13:10
タイトル : メニュー設置
Linkメニューを設置してみた。 比較的簡単(*^^)v これですべてのLinkがすっきりあの長さと大きさに収まりそうだ。 ■HTMLのとこには div CLASS="window" … こんなん入れて… ■CSSのとこには .window{ overflow:scroll; height:20em; width:180px; text-overflow:ellipsis; word-break:keep-all; white-space:nowrap; background-color:#314963; border:1px so...... more
Tracked from soliloquy at 2004-09-18 13:27
タイトル : メモ欄増設について
imichiyoiさんの三千代の日記"メモ欄増設「モンドリアン」では?"にトラバしますネ。 ぽっとさんの"私が利用しているリンクメニューの設置方法 "の関連記事としてトラバさせてもらいました。 imichiyoiさんの記事を読んでみて、別窓なら私も私もHTMLとCSSを使って メニュー欄に別窓を設置しているので力になれるかな?と思ってhttp404さんの "404 Not Yet "で使われているスキン「モンドリアン」で試してみました。 ※投稿した後にチョット修正しました。 -------------------------------------------------...... more
Tracked from 「ス」的な日常生活 at 2004-10-22 21:57
タイトル : まずはできることから・・・。
ぽっとの陽だまり研究室 様を参考にさせていただきながら 、私が利用しているリンクメニューの設置方法の記事を参考にさせてもらいながら、 リンクメニューの編集に挑戦からはじめました。 (とっても見やすくて、超初心者の私でもどうにかこうにかできたぁ! ヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノイエ~イ) コメントの高さ変えたり、投稿ヘッダに手を加えたり、メモ帳増設なども参考にさせて いただいてます。 しかし、HP作ったことさえなくて・・・ HTMLてなに? とか CSSてなんなのよ!とか つーかタグいっぱいありすぎ!とか・・・ さっぱわかってない初心者のくせに な...... more
Tracked from しあわせの箱庭 at 2004-11-19 08:37
タイトル : リンクの小窓
ぽっと陽だまり研究室の私が利用しているリンクメニューの設置方法を参考に、 リンクの小窓をつけてみました。 とてもわかりやすく説明してあります。 付けたばかりでまだちょっと”生”な感じですが、 これもまた徐々に変えていきたいな。... more
Commented by hikkoro-dayori21 at 2004-07-24 14:04
pottoさん、こんにちは(^o^)/
トラバさせていただきました。ありがとうございます。
Commented by potto37 at 2004-07-24 14:10
hikkoroさん、トラバありがとう(^_-)-☆
小窓設置がんばってください^^

Commented by hikkoro-dayori21 at 2004-07-24 14:22
なんとか頑張ってみます(^o^)/
Commented by hikkoro-dayori21 at 2004-07-24 14:37
扇風機、いいですねぇ♪
所長もこれでぐっすり寝られるのでは!?(笑)
Commented by potto37 at 2004-07-24 14:47
所長はぐっすり眠れそうす。
hikkoroさん、扇風機ありがとう^^
Commented by hikkoro-dayori21 at 2004-07-24 15:40
いえいえ♪
さて、私は久々に大学に行ってきます!
Commented by potto37 at 2004-07-24 15:41
いってらっしゃい(^_^)/
Commented by nyahta at 2004-07-30 22:43
trackbackを(3つも)させて頂き、
その上 コメント迄、ありがとうございました。
凄〜く、嬉しかったですw
挨拶が遅くなりましたが、
今後も気長に宜しくお願い致します。
Commented by potto37 at 2004-07-31 13:30
nyahtaさん、こんにちは^^
こちらこそよろしくお願いします。
Commented by nyahta at 2004-07-31 21:48
リンクして頂き、ありがとうございました++*
(人´▽`).☆.。.:*ウチからもさせて貰っています。
また適当に相手してやって下さいw
Commented by potto37 at 2004-07-31 21:52
nyahtaさん、こちらこそありがとうございます。
これからも、よろしくおねがいします(^_^)/
Commented by cavalierkcs at 2004-09-12 00:38
Trackback ありがとうございました(^.^)
昨日、色んなWeblogで設置方法を見て回り、私の持ってる
数少ないHTML、CSS &Java Script の本を色々読んで
設置することができました。
でもぽっとさんところのが一番説明がわかりやすいですね。
>●今日のぽいんと って言うのがとってもいいと思います。(*^^)v

夕べ出来上がった時にTrackbackとコメントしようとしたら、その文字が黒くて反転されてなくてクリックできませんでした(^_^;) Commentという文字もTrackbackの右横にあるはずが見えなかったです。
自分のWeblogもログインしてないとだめなんでしょうか?
Commented at 2004-09-12 00:43
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2004-09-12 10:03
cavalierkcs さん

書いたソースのところにトラックバックをして頂かないと・・・・
見た人がソースの出所が分からないですからね。
Commented at 2004-09-12 11:33
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-09-12 11:33
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-09-12 12:12
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-09-12 13:12
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-09-12 13:53
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-09-12 14:12
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-09-12 14:15
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-09-12 14:32
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-09-12 14:32
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-09-12 15:03
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-09-12 15:05
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-09-12 15:05
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-09-13 02:56
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-09-18 13:03
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-09-18 13:29
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2004-09-18 15:26
鍵さん、こちらこそありがとうございます^^
Commented by candy-ocan at 2004-09-21 23:44
ぽっとさんこんにちは
またまたお世話になりました。
お陰でリンク欄がとてもスッキリしました。(^ー^)
どうもありがとうございました。
Commented by potto37 at 2004-09-22 20:10
candy-ocanさん、こんばんは^^
お役に立てて、うれしいです。
また、よろしかったら遊びに来てくださいね。
Commented at 2004-10-21 03:18
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2004-10-22 19:46
>鍵さん、そちらにコメントしますね。
Commented at 2004-10-22 21:59
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2004-10-24 08:20
>鍵さん
お互い頑張りましょうね^^
Commented by chui_m at 2004-11-19 08:31
追記です。
TBさせてください。
ありがとうございました。
Commented by chui_m at 2004-11-19 09:28
はじめまして、こちらを見て、小窓を付けることが出来ました。
最初は同じものが3つもついてしまったりして、
悩みましたが、記入するところが悪かったみたいでした。
ありがとうございました。
(修正したため。追記が先になってます。すみません。)
Commented by chui_m at 2004-11-19 10:10
すみません、質問があります。
エクサイトのリンクが長ーーくなってしまうので、
非表示にしてるのですが、
こちらの左側のリンク集のようにまとめてしまうには、
どうしたらいいのでしょうか?
Commented by potto37 at 2004-11-19 21:21
chui_mさんはじめまして^^
私のリンクはプルダウンリンクを用いています。
記事は以下のURLを参照してくださいね。

エキサイトのリンクを手作業で追加するのでちょっと面倒ですが、
よろしかったら試してくださいね。

http://potto.exblog.jp/894061/
Commented by chui_m at 2004-11-20 10:04
おなようございます。
さっそくやってみます。
(ただ今日はサッカー観戦があるので、明日になるかも、、笑)
うまく設置できたら報告します。
ありがとうございました。
Commented by potto37 at 2004-11-21 08:16
chui_mさん、おはようございます。
昨日は忙しくてコメントできなくてすみません。

ゆっくり楽しんでくださいね。
出来たときはとっても嬉しいですよ。
Commented by y_toybox at 2005-01-04 13:53
こんにちは。
タイトルロゴに引き続き、小窓も参考にさせていただきました。
なんだか嬉しくて一人でスクロールを上下させています。
まだまだタグというものを理解しきれていない私ですが、頑張っていこうと思ってます。
でもスキンって、ひとつ出来るようになると、どんどん替えたくなっちゃいそうですね。
Commented by potto37 at 2005-01-04 21:10
y_toyboxさん、こんにちは^^
スキン編集を成功すると嬉しいですよね。
スキン編集って面白いですよね。ひとつ出来るとまた替えたくなっちゃう気持ち、私もそうなんですよ^^
また、ゆっくり遊んでいってくださいね。
Commented by hkom007 at 2005-01-26 16:22
 pottoさん、こんにちは。貴ブログを日頃大いに参考にさせて戴いております。
 さて、貴ブログの上の方にある、階層メニュー( 全体 スキン編集 色 未分類 )についての質問です。
 「スキン編集」と「色」の箇所はマウスオーバーするとプルダウンメニューが表示されますが、この実現方法が分からないので、もし宜しかったら御教授願えませんか?
 ソースコードを見させて戴いたところ、「div.nav li:hover ul」要素に対して、IEでは実装してない li:hover が設定されていますので、mozilla系やOperaなどではCSSによって階層メニュー表示が可能となるように設計されていると思うのですが、IEでもプルダウンされる仕組みはどうしているのでしょうか?Javascriptを使っているとも思えず、ソースを色々と探索させて戴いたのですが、力不足で解明出来ませんでした。既に他の方から質問等が出ているかも知れませんので、回答済みなのかもしれませんが、それも見つけられませんでした。よろしくお願いします。
 
Commented by potto37 at 2005-01-29 22:07
hkom007さん、こんばんは。
この件につきましては、諸事情がありますのでコメントを控えさせてください。
Commented at 2006-12-07 02:15
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2006-12-07 21:46
 鍵さんこんにちは、このスキンはMNBODYで囲むのがポイントです。修正内容は以下のとおりです。コメントがしっかりしていたので、場所がすぐに判りました。

<!--- メモ帳増設 --->
<div class="MNTTL">外部ブログ</div>
<div class="MNBODY">
<center><a href="http://www.doblog.com/weblog/myblog/7303" title=" Key's Days ">Key's Days</a></center>
</div>
<div class="MNBOTTOM"></div>
<!--- ここまで --->
Commented at 2006-12-08 02:40
ブログの持ち主だけに見える非公開コメントです。
Commented at 2009-10-18 02:41
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2009-10-19 22:33
鍵さん、はじめまして。
こちらこそ、コメントありがとうございます。
<< 付箋の改良版 コメント欄の色の指定方法 >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。