スポンサーサイト

上記の広告は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)

comment

さっそく記事にして下さってありがとうございます!

これでたくさんの画像を綺麗に並べられそうです。
丁寧な解説本当にありがとうございました。(^^*)

これからも応援しています。テンプレートの方大事に使わせてもらいますね。
それでは失礼します。

もみ #-/2008/06/21(土) 00:41:05/URL[ 編集]

もみさん、
うまく出来ましたでしょうか?
いろいろと触っているうちにスタイルシートも面白くなってきますよね。
これからもヨロシク♪

どりーみー #JalddpaA/2008/06/23(月) 16:15:44/URL[ 編集]

大変ためになりました。しかし挑戦してみて実行できるかは心配ですが。何度も遣ってみます。ヒント今まで出一番よかったデす。[有難う]!

荒野鷹虎 #-/2008/07/02(水) 12:00:17/URL[ 編集]

荒野鷹虎さま

もしなにか疑問がありましたら質問してみてください。私もしろうとですが
解かることもあるかもしれませんので。
お役にたてれば幸いです。

どりーみー #JalddpaA/2008/07/03(木) 10:41:29/URL[ 編集]

>テンプレート「album2」の編集をクリック<「album2」がでないのです。
管理画面を開いて何処ヲクリックするんでしょうか?

荒野鷹虎 #-/2008/07/07(月) 00:54:47/URL[ 編集]

荒野鷹虎さまがお使いのテンプレートはこれですね。
ちょっと違って見えるのは
実験のために幅広い画像(例のシクラメンの画像)が入っているからです。

ご質問の「album2」は私の配布のテンプレートなのですが、

荒野鷹虎さまがお使いのテンプレートでやってみますね。


ダウンロードして名前を変えてないなら
・テンプレートの設定 の
do_blueskyの
編集をクリック

do_blueskyのスタイルシート編集

/* 記事本文 */


.entry_body {
text-align:left;
font-size:12px; /* 文字サイズ */
color:#006; /* 文字色 */
line-height:1.7; /* 行間 */
margin:0;
padding:10px 25px;
}


の下に


.entry_body img {
background-color: #ffffff;
padding: 2px;
float: left;
}
と書き加えてください。

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


後はこの記事の「記事を書く時、」からをやってみてください。
どうでしょう?
一枚一枚が小さい画像にしておけばお客様が来た時ページが早く開きますよね。♪

どりーみー #JalddpaA/2008/07/07(月) 14:22:02/URL[ 編集]

ご親切に有難うございます。努力してみます。
出来たら感激でしょうね~^^

荒野鷹虎 #-/2008/07/07(月) 19:43:18/URL[ 編集]

荒野鷹虎さま

是非やってみてくださいね。
いろいろと試してできた時ほんとに嬉しいですものね。

どりーみー #JalddpaA/2008/07/08(火) 19:49:21/URL[ 編集]

まだ実現しません、弱いですね~^^^
気を長く頑張ります。

荒野鷹虎 #-/2008/07/17(木) 23:00:58/URL[ 編集]

あっ。すみません。テンプレートを変えてしまいました。
そのうち、暇を見つけたらやってみてくださいね。

どりーみー #JalddpaA/2008/07/18(金) 18:17:52/URL[ 編集]

羽生名人の記事に始めて横に一枚載せることが出来ました。!!!大感激!{ありがとう」
ところが、次に遣ったら駄目でした。原因が分かりません。なにかヒントがあれば。よろしく!!
わからずやの親爺より、〈恥)

荒野鷹虎 #-/2008/07/21(月) 09:26:47/URL[ 編集]

わー。出来たんですね。よかったです。
最初の写真のタグの後の<br />が消してあってうまく行きましたね。

http://takatora.blog74.fc2.com/template/do_bluesky_2/style.css拝見しました


.entry_body imgがないようですね

do_blueskyのスタイルシート編集

/* 記事本文 */


.entry_body {
text-align:left;
font-size:12px; /* 文字サイズ */
color:#006; /* 文字色 */
line-height:1.7; /* 行間 */
margin:0;
padding:10px 25px;
}


の下に


.entry_body img {
background-color: #ffffff;
padding: 2px;
float: left;
}

と書き加えてみてください。

それから
記事の入るエリアの幅が530pxなので
写真の大きさ幅が
250pxで2枚が
並び150pxにすると3枚くらいが並ぶと思います。
如何でしょうか?



どりーみー #JalddpaA/2008/07/21(月) 10:16:25/URL[ 編集]

親切に有難う!頑張ってみます。!

荒野鷹虎 #-/2008/07/21(月) 12:25:48/URL[ 編集]

荒野鷹虎さま

また何かありましたら書いてみてくださいね。私で解かることがあるかもしれませんので(笑)

どりーみー #JalddpaA/2008/07/22(火) 17:12:15/URL[ 編集]

投稿















管理者にだけ表示を許可する

trackback

trackback url ↓

http://dreamy.blog2.fc2.com/tb.php/108-087e36d3


| ホーム |

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