スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーサイト/--/--/-- --:--/スポンサー広告/ トラックバック(-)/コメント(-)

album2の画像サムネイルを並べる

写真の枠を外して写真のサムネイルを横に2つ3つ並べたい
ということですのでやってみました

2008-6-13-1.jpg2008-6-13-2.jpg2008-6-13-10.jpg


こんな感じでよろしいでしょうか?

以下にこの方法を書いてみますね。

画像の枠を外すには
管理ページのお使いのテンプレート「album2」の編集をクリック
スタイルシートの


/*テキスト内の画像*/と言うところを

background-color: #ffffff;
padding: 2px;
float: left;


意味はfloat: left;が横に並べるということです。今までも入っていましたね。
padding: 2px;は画像と画像の隙間です。0だと写真同士がくっついてしまいますので、1か2くらいはあったほうが良いですね。この記事では2pxにしてみました。

次に
「環境設定の変更」のサムネイル作成のサイズを100~120くらいにして更新(この数字はBlogを見て決めてください。)この記事では100pxに設定しました。

記事を書く時、

先ず画像をアップする時
1、「サムネイル 同時に作成する(jpg)」にチェックを入れます。
2、画像のサムネイルで記事を書く をクリック
記事を作成部分に入ったタグの一番最後「 <br clear="all" /> 」を消します。
<br clear="all" />が並べずに左下へと言う意味です。
いかがでしょうか?
スポンサーサイト
album2の画像サムネイルを並べる/2008/06/20 22:48/[html] html/ トラックバック(0)/ comment(14)

cssだけでマウスオーバーで展開

先日(2008/06/11)の「CSS だけでサムネイルギャラリー」
のcssを勉強しました。
マウスオーバーで展開、更にサムネイル画像に触れると拡大
と言うところのCSSがだいたい解かりました。面白いですね。
忘れないように書いて置きます。
サンプル


CSS部分

 /*メニューの文字に触れたら展開する ここから*/
  /*サムネイル画像が入るtable*/
.album ul :hover table{ 
 padding:0;
 margin-top:-2px;
 display:block;
 border:1px solid red;
 border-width:0px 1px 1px 1px;}

/* メニューの一個一個のtable   文字だけの囲みになった*/
.album ul li table {    
 margin:0;
 padding:0;
 display:none;
}

/*  transparentが背景色を透過させる指定*/
.album ul li a.set:hover {
background:transparent;    
}

/*  transparentが背景色を透過させる指定*/
.album ul li:hover a.set {  
background:transparent;    
}


 /*メニューの文字に触れたら展開する ここまで*/



/*展開したサムネイル画像の上にマウスオーバーで拡大 ここから*/

.album ul li a.set:hover li a:hover
{
	background-color: #fff;
}

.album ul li a.set:hover li a:hover img{
	width:auto;
	height:auto;
position : absolute;
top: 15px;
left: 170px;
}
/*展開したサムネイル画像の上にマウスオーバーで拡大 ここまで*/




HTML部分
<div class="album">

<ul>
<li><a class="set" href="#nogo">アジアンタム#1<!--[if gte IE 7]><!--></a><!--<![endif]--><b></b>
<ins><table><tr><td>
<ul>
<li>
<a href="#"><img src="http://blog-imgs-27.fc2.com/d/r/e/dreamy/2008-6-9-38.jpg" alt="代替" width="50"
height="50" /></a>
</li>
</ul>
</td></tr></table></ins><!--[if lte IE 6]
></a><![endif]-->
</li>

</ul>
<br class="clear" />
</div><!--album-->



もしメニューの文字をクリックしたら展開する
と言う場合は
「hover」ではなく「active」を使う
cssだけでマウスオーバーで展開/2008/06/20 15:58/[html] html/ トラックバック(0)/ comment(0)

テンプレートで記事の部分が下に下がらないようにするには

訪問先でたまに記事の部分が下がってしまっているのを見かけることがあります。
スクロールしていかないと記事に行き当たりません。
これはだいたいの場合画像の幅が広すぎるのですね。
こんな時、どうしたらいいかというと
私はこんな方法でやっています。サンプルとして
http://dreamy.blog2.fc2.com/blog-entry-90.html
この記事ですが、実際の写真は
http://blog-imgs-27.fc2.com/d/r/e/dreamy/sikuramen.jpg
幅が790pxあるんです。実験のためにわざわざ入れたものです。

でもテンプレートのスタイルシートの
<%topentry_body>と<%topentry_more>を囲っている
DIVのclassに

div.△△{
width: ○○px;
overflow: hidden;
}

のように
幅(width)
「はみ出した場合はカットします。」

っていう感じのものを記述しますと、
写真の右側がカットされテンプレートはきれいなままです。
幅の設定は
primary-column
の幅かそれより10px位小さくしておけば大丈夫だと思います。

もし右側をカットしたくないなら予め小さくした画像を入れればいいですね。



もうひとつの方法

違うテンプレート
http://dreamy.blog2.fc2.com/?template=mike-neko&index
の同じ記事「幅広い画像」では
overflow:auto;
と記述してあるため
スクロールが出ています。
こちらもテンプレートが崩れないようにと思ってやってみたことです。
テンプレートで記事の部分が下に下がらないようにするには/2008/06/15 06:43/[Blog]カスタマイズ/ トラックバック(0)/ comment(0)

CSS だけでサムネイルギャラリー

JavaScriptやFlashを使わずにスタイルシートだけで
サムネール画像にマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。
固定した画像にリンクを入れられます。


JavaScriptやFlashを禁止されているサーバーの方も使えますね。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title>title</title>
<style type="text/css">
<!--
ul#gallery {
padding:5px 0px 0px 10px; /*上、右、下、左*/
margin:0px;
width:204px;
height:170px;
border:1px solid pink; 
position:relative;
background:url(背景画像のURL) no-repeat fixed top left;/**/
-height:155px;
-width:212px;
}
#gallery li {
list-style-type:none;
width:50px;
height:37px;
float:left;
z-index:100;
-width:45px;
-height:34px;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery li.rgt {
float:right;
clear:right;
}

#gallery a {
position:relative;
width:50px;
height:37px;
display:block;
float:left;
z-index:100;
cursor:default;
margin: 5px 2px 2px 0px; /*上、右、下、左*/
background: url(画像の影のURL) bottom right;
float: left;
width: auto;
-width:45px;
-height:34px;
}
#gallery a img {
position:relative;
width:50px;
height:37px;
border:1px solid #888;
z-index:100;
background: #ffffff;
border: 0px solid #999;
padding:1px;/*元5*/
position: relative;
left: -7px;
top: -7px;
-padding:1px;/*元5*/
-border: 1px solid #999;
-width:45px;
-height:34px;
}
#gallery a:hover {
width:203px;
height:151px;
padding:0px 0px 2px 9px; /*上、右、下、左*/
position:absolute;
left:12px;
top:20px;
z-index:200; /*マウスを当てた時画像が前面に現れる・元は20*/
-padding:0px 0px 2px 9px; /*上、右、下、左*/
-left:2px;
-top:10px;
}
#gallery a:hover img {
background:#eee;
position:relative;
width:203px;
height:151px;
border:0;
z-index:200; /*マウスを当てた時画像が前面に現れる・元は10*/
}
#gallery a:active, #gallery a:focus {
background:transparent;
width:203px;
height:151px;
padding:7px 0px 0px 0px; /*上、右、下、左*/
position:absolute;
left:0;
top:0;
z-index:400; /*クリックした時画像が前面に現れる・元は10*/
}
#gallery a:active img, #gallery a:focus img {
background:#eee;
position:relative;
width:203px;
height:151px;
border:0;
z-index:400;/*マウスを当てた時画像が前面に現れる・元は10*/
}
/* hack for Internet Explorer */
#gallery li.pad {
height:0;
display:block;
margin-top:-2px;
width:203px;
font-size:0;
padding-top:93px; /*サムネイル画像下の列・上の列の下端からのpadding*/
-padding-top:83px; /*サムネイル画像下の列・上の列の下端からのpadding*/
}

/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
background:#888;
width:203px;
height:151px;
padding:7px 0px 0px 0px; /*上、右、下、左*/
position:absolute;
left:0;
top:0;
z-index:100;/*元10*/
}
#gallery a:hover img {
background:#aaa;
position:relative;
width:160px;
height:120px;
border:0;
z-index:100;/*元10*/
}-->
</style>
</head>
<body>

<ul id="gallery">
<li><a href="#">
<img src="#1画像のURL" alt="#1" title="#1" /></a></li>
<li><a href="#">
<img src="#2画像のURL" alt="#2" title="#2" /></a></li>
<li><a href="#">
<img src="#3画像のURL" alt="#3" title="#3" /></a></li>
<li><a href="#">
<img src="#4画像のURL" alt="#4" title="#4" /></a></li>

<li class="pad"></li>
<li class="lft"><a href="#">
<img src="#5画像のURL" alt="#5" title="#5" /></a></li>
<li><a href="#">
<img src="#6画像のURL" alt="#6" title="#6" /></a></li>
<li><a href="#">
<img src="#7画像のURL" alt="#7" title="#7" /></a></li>
<li><a href="#">
<img src="#8画像のURL" alt="#8" title="#8" /></a></li>
</ul>
</body>
</html>


参考にさせていただいたサイト
Stu Nicholls CSSplay CSS Photograph Gallery with hover and active states
ありがとうございます。
CSS だけでサムネイルギャラリー/2008/06/11 16:17/[html] html/ トラックバック(0)/ comment(0)

1枚の画像に複数のリンクを貼る

一枚の画像の中に複数のリンクを貼る方法があるそうです。
下の画像は一枚の写真ですが、丸や三角、四角又多角形にそれぞれリンクを入れてあります。











タグは以下の通りです。
ーーーーーーーーーーーーーーーーーーーーーーーー
<IMG src="talink.jpg" width="400" height="300" border="1" usemap="#mapID"><BR>
<MAP name="mapID">
<AREA shape="poly" coords="197,9,382,106,350,142" href="http://www.yahoo.co.jp/" title="三角-Yahoo!">
<AREA shape="poly" coords="171,199,245,125,353,176,341,253,243,292" href="http://blog.fc2.com/" title="五角形-FC2ブログ">
<AREA shape="rect" coords="38,185,142,271" href="http://blog2.fc2.com/dreamy/" title="四角形-MyBlog">
<AREA shape="circle" coords="86,88,62" href="http://www.google.co.jp/" title="円-Google"></MAP>
ーーーーーーーーーーーーーーーーーーーーーーーー
形が円の時は
・cirle:円の中心のx座標, y座標, 円の半径
四角の時
・rect:四角形の左上のx座標, y座標, 四角形の右下のx座標, y座標
多角形の時
・poly:多角形のすべての点のx座標, y座標を交互に記述

ということでやってみました。面白かったです。
街の地図などに適していますね。



1枚の画像に複数のリンクを貼る/2008/06/04 17:22/[html] html/ トラックバック(0)/ comment(0)
| ホーム |

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。