Html研究
気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

 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" />が並べずに左下へと言う意味です。
いかがでしょうか?
【2008/06/20 22:48】 html | トラックバック(0) |
コメント(14)
もみ/ どりーみー/ 荒野鷹虎/ どりーみー/ 荒野鷹虎/ どりーみー/ 荒野鷹虎/ どりーみー/ 荒野鷹虎/ どりーみー/ 荒野鷹虎/ どりーみー/ 荒野鷹虎/ どりーみー/ 

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

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

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

【2008/06/21 00:41】 url[もみ #-] [ 編集]

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

【2008/06/23 16:15】 url[どりーみー #JalddpaA] [ 編集]

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

【2008/07/02 12:00】 url[荒野鷹虎 #-] [ 編集]

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

【2008/07/03 10:41】 url[どりーみー #JalddpaA] [ 編集]

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

【2008/07/07 00:54】 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を見て決めてください。)


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

【2008/07/07 14:22】 url[どりーみー #JalddpaA] [ 編集]

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

【2008/07/07 19:43】 url[荒野鷹虎 #-] [ 編集]

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

【2008/07/08 19:49】 url[どりーみー #JalddpaA] [ 編集]

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

【2008/07/17 23:00】 url[荒野鷹虎 #-] [ 編集]

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

【2008/07/18 18:17】 url[どりーみー #JalddpaA] [ 編集]

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

【2008/07/21 09:26】 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枚くらいが並ぶと思います。
如何でしょうか?


【2008/07/21 10:16】 url[どりーみー #JalddpaA] [ 編集]

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

【2008/07/21 12:25】 url[荒野鷹虎 #-] [ 編集]

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

【2008/07/22 17:12】 url[どりーみー #JalddpaA] [ 編集]

投稿













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




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



| ホーム |
ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

05 | 2021/06 | 07
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

author_name=Dreamy/album

気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

05 | 2021/06 | 07
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

Template production /preview