【大】 【小】

2004年10月25日

■画像のタイトル

ちょっとしたことなんですが、HPで写真とか画像を載せてマウスを画像の上に持ってくるとポップアップで画像のタイトル?コメント?が表示されます。
デフォルトだと「alt」で表示させるようにしています。
でも、これだとブラウザはIEのみ対応?でOperaでは効果を成しません。
そこで、Operaなど他のブラウザで表示させるため、
「alt」⇒「title」
と変えるとOperaでも表示されるようになります。

<img src="http://xxxx.xxxx/xxxx.png" alt="タイトル名" width="100" height="100">

<img src="http://xxxx.xxxx/xxxx.png" title="タイトル名" width="100" height="100">
posted by 素浪人 at 12:51| Comment(0) | TrackBack(0) | 【CSS】 | このブログの読者になる | 更新情報をチェックする

2004年09月03日

■Seesaaでサイドメニューの開閉

 現在左側の「NEW COMMENTS!」「NEW TBack!」と右側の「NEWS SITE!!」をクリックすると開閉するようにしています。
CROSSBREED クロスブリード!様の「フォームメールの導入と、サイドメニューの開閉」よりやってみました。

ただSeesaaだと微妙に設定の仕方が違うので備忘録として。

まず、ここよりJAVAScriptを落としてきます。JAVAScriptをどこかのサーバー(多分SeesaaのサーバーでもOK)に置いてもいいのですが、私はhead内に記述しました。
「テンプレート管理」⇒「コンテンツ 追加/変更」
で、
コンテンツ名が「ブログ名」というやつを開きます。そこの「挿入テキスト(上部)」に、
<script language="JavaScript">
<!--
落としてきたファイルの中身をコピ&ペースト
//-->
</SCRIPT>
と書く。で、保存。

次にサイドメニューで開閉したいメニューを「コンテンツ 追加/変更」より開きます。
ここからがポイントなんですが、
タイトルのところに、下記文を一行に無理やり直して入れます。
<a href="javascript:void(0);" onClick="showHide('C1');">NEW COMMENTS!(タイトル名)</a></div><div class="sidehide" id="C1"><div class="side">

で、「挿入テキスト下部」のところに、
</div>
を入れます。(太字はタイトル名を入れる)↓な感じ。

まぁ、あとは書いてあるとおり何個もやるときは「C1、C2・・・」とすると。

教えていただいたTSUKA氏に感謝。
posted by 素浪人 at 00:23| Comment(7) | TrackBack(3) | 【CSS】 | このブログの読者になる | 更新情報をチェックする

2004年07月23日

■テキストが回りこむボックスを作る

例こんな風にテキストが画像等に回り込むようにするCSSの方法です。通常のseesaa仕様で画像のHTML文を貼り付けそのまま横に文章を書くと画像の一番下の位置辺りからしか文字が表示されません。この方法を使うとこのように画像の上部位置から表示されるようになります。
下記の太字をCSSに追加して使用してください。

span.left{float:left;}
・left・・テキストが右側に回りこみます。
・right・・テキストが左側に回りこみます。
・none・・指定なし。

実際に使い方はこんな感じ↓
<span class="left"><img src="/image/xxx.jpg" width="200"
height="100" alt="例"
/></span>こんな風にテキストが画像等に回り込むようにするCSSの方法です。
(*上記文では「<」を全角で書いていますが、実際は半角で使用します。)
と、このように位置を指定したい画像を<span>でくくります。

floatプロパティを指定した要素には、同時にwidthプロパティで幅を指定しなければなりません。ただし、imgのように元から幅を持っているものに関しては指定しなくてもOK。
要するに、文字等に対しても回り込ませることが出来るためそういったものに対してwidthで指定することが必要となります。
(上記の場合span.left{float:left;width:220px}のように記述します)

*なんとなく過去ログより。
posted by 素浪人 at 14:52| Comment(0) | TrackBack(0) | 【CSS】 | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。