Next Home  Prev
No,108 comment 14
写真の枠を外して写真のサムネイルを横に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分47秒/ html /コメント:14 /トラックバック:0/▲ページトップへ戻る

コメント


コメント index

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

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

これからも応援しています。テンプレートの方大事に使わせてもらいますね。
それでは失礼します。
2008-06-21(00:41) : もみ URL : 編集

もみさん、
うまく出来ましたでしょうか?
いろいろと触っているうちにスタイルシートも面白くなってきますよね。
これからもヨロシク♪
2008-06-23(16:15) : どりーみー URL : 編集

大変ためになりました。しかし挑戦してみて実行できるかは心配ですが。何度も遣ってみます。ヒント今まで出一番よかったデす。[有難う]!
2008-07-02(12:00) : 荒野鷹虎 URL : 編集

荒野鷹虎さま

もしなにか疑問がありましたら質問してみてください。私もしろうとですが
解かることもあるかもしれませんので。
お役にたてれば幸いです。
2008-07-03(10:41) : どりーみー URL : 編集

>テンプレート「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 : 編集

ご親切に有難うございます。努力してみます。
出来たら感激でしょうね~^^
2008-07-07(19:43) : 荒野鷹虎 URL : 編集

荒野鷹虎さま

是非やってみてくださいね。
いろいろと試してできた時ほんとに嬉しいですものね。
2008-07-08(19:49) : どりーみー URL : 編集

まだ実現しません、弱いですね~^^^
気を長く頑張ります。
2008-07-17(23:00) : 荒野鷹虎 URL : 編集

あっ。すみません。テンプレートを変えてしまいました。
そのうち、暇を見つけたらやってみてくださいね。
2008-07-18(18:17) : どりーみー URL : 編集

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

親切に有難う!頑張ってみます。!
2008-07-21(12:25) : 荒野鷹虎 URL : 編集

荒野鷹虎さま

また何かありましたら書いてみてくださいね。私で解かることがあるかもしれませんので(笑)
2008-07-22(17:12) : どりーみー URL : 編集
絵文字

非公開コメント

トラックバック:
トラックバック URL
→http://dreamy.blog2.fc2.com/tb.php/108-087e36d3

Next Home  Prev

カテゴリー

どりーみー

recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

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

TB_People

カレンダー

10 | 2018/11 | 12
- - - - 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 -

iconカテゴリ

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

 

カテゴリー

recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

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

TB_People

カレンダー

10 | 2018/11 | 12
- - - - 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 -

iconカテゴリ

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク