スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--/--/-- --:-- | スポンサー広告 | 固定リンク | - | - |

画像の回り込み

simple3 テンプレートで、画像を回り込みさせる方法です。
他のテンプレートでも多分使えると思います。
まず、スタイルシートに以下の記述を追加します。
/* 画像を左に回り込み */
.pict_left {
float: left;
margin-right: 15px;
}

/* 画像を右に回り込み */
.pict_right {
float: right;
margin-left: 15px;
}
どちらか片方しか使わない場合は、片方だけでも構いません。
ここでは画像とテキストの間隔を 15px にしていますが、お好きな値に変更可能です。

そして、回り込みさせる画像の img タグに、画像を左に配置するなら「class="pict_left"」を、右に配置するなら「class="pict_right"」を記述します。

最後に、回り込みを終わらせるところに「<br clear="all">」を追加して下さい。

※例
<img src="画像のURL" border="0" class="pict_left" />文章<br clear="all">
スポンサーサイト
コメント
このエントリーへのコメント
月太郎です!

質問に答えてくださりありがとうございました。さっそくスタイルシートを編集して使わせていただいてます。

clear="all"の件も知らなかったので、勉強になりました。また実用的なテンプレートを作って下さいね。では!
2005/01/09 22:16 | 月 | URL #tSD0xzK.[編集]
simple3のテンプレートを使わせていただきましたYouと申します。
とてもステキなテンプレありがとうございます。
なんだか申し訳ない程色々と変更してしまって心配ですが…
それで画像の回り込みなんですが、一通りやってみて、こちらの記事見たので「class="pict_left"」を書き込んだところ画像の横に1行しか回りこまないんです。今のところalign=" left"などを使ってますが、何が悪かったのか気になってしまって…marginの指定もしたんですが原因おわかりになりますでしょうか?
2005/01/10 03:52 | You | URL #v7.Lxmy6[編集]
>月太郎さん
お役に立てたようで、良かったです。

>Youさん
テンプレートのダウンロード、ありがとうございます。
回り込みですが、ブラウザのキャッシュを消去してみても変わりませんか?
これ以外に、今のところ原因が分からないのですが…。
2005/01/10 19:22 | sukechan | URL #8MfwmLhA[編集]
いろいろ試してるのですが、なかなかうまくいかないです。改行タグも入らなくなっちゃいました。
もうちょっとがんばってみます。
ご親切にお答えくださってありがとうございました。これからもよろしくです!
2005/01/11 23:36 | You | URL #v7.Lxmy6[編集]
こんにちは

HALといいます。

私はブログを2つ持ってますけど両方ともsimple3を愛用させていただいてます。

しかし、まだまだ初心者でスタイルシートにうといのですが、上記の記述をどの部分に追加するのか教えていただけませんでしょうか?

あと、こちらで質問してよいのか分かりませんが、固定リンクで記事を見ると、右のサイドバー(リンク以下)が左のサイドバーに移ってしまいます。私がなにか触ってはいけない所をいじってしまったのでしょうか?

申し訳ございませんがご教授お願いいたします。
2005/04/08 10:26 | HAL | URL #-[編集]
HAL さん、こんにちは。
simple3 を使っていただき、ありがとうございます。

上の記述はスタイルシートであればどこにいれても OK です。
好きな位置に追加してみてください。

サイドバーについてはちょっと分かりません。ごめんなさいm(_ _)m
2005/04/09 10:46 | sukechan | URL #8MfwmLhA[編集]
ありがとうございました。

これからやってみたいと思います。

また分からないことがあったときはよろしくお願いします。

HAL
2005/04/10 02:08 | HAL | URL #-[編集]
こんにちわぁ。また画像の事で質問なのですが。
今回導入された絵文字対応に絡んだ質問です。

画像表示の部分に枠を付けたくてCSSに
div.mainEntryBase img {
background: #fff;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
margin: 0px 5px 5px 0px;
padding: 2px;
}
を追加しちゃったんですけど、絵文字の表示まで隙間だらけになってしまいました。
その後に
img.emoji{
background-color:#fff;
border:-2px;
margin-bottom:-2pt;
}
を追加してみたのですが、直りません・・・。
画像の枠はそのままで、絵文字はずれないように表示って可能でしょうか?
何か良い方法があったら教えて下さい。
よろしくお願いします。
2005/06/11 19:08 | レナ | URL #-[編集]
レナさん、コメントありがとうございます。
ブログを拝見すると、うまくいったように見えますけど、どうなんでしょう。
2005/06/12 23:08 | sukechan | URL #8MfwmLhA[編集]
こんばんわ。
すいません、自己解決できちゃいました><
div.mainEntryBase img を削除して、代わりにp span imgで指定。画像の投稿毎に<p><span></span></p>で挟むという方法でやってみました・・・・。
やり方として正解かどうかわからないですけど、一応ちゃんと表示できました。毎回すいません(汗)
2005/06/13 00:52 | レナ | URL #-[編集]
えっとこのたびsimple3をDLさせていただきました。わたしの探していたものそのままがあってすごく嬉しいです。
ここで質問してもいいのか迷ったのですが、イロイロ読んでもできなかったので、思い切って書き込むことにしました・・・
えっとタイトルの部分の画像を写真に変えたかったんですけど、どーしても出来ません。もしよかったら教えてください。あとタイトル文字を画像の上に載せることができませんでした(o_ _)o))初歩な質問ですみません。。
2005/07/19 10:35 | ★エンジェル★ | URL #tHX44QXM[編集]
エンジェルさん、simple3 を使っていただいてありがとうございます。

えーと、タイトルの部分を画像にする方法ですが、スタイルシートの以下の部分で、ブログのタイトルと説明が表示されている部分を設定してます。
#headBlock1 {
height: 90px; ←高さ
width: 760px; ←幅
background-color: #EEF6FF; ←背景色
}

この #headBlock1 の中に、background-image: url("画像のURL"); を追加してみてください。
上の「画像のURL」の部分には、エンジェルさんがアップロードした画像の URL を入れてくださいね。
そうすると、ブログのタイトルが画像の上に表示されると思います。

また何か分からないことがありましたら、遠慮なくどうぞ。答えられる範囲であればお答えしたいと思ってます。

# あっ、ここが参考になるかもしれません。
http://blog.fc2.com/custom_manual/#m004
2005/07/19 22:10 | sukechan | URL #8MfwmLhA[編集]
ご返答ありがとうございます☆
できましたO(≧▽≦)O
感動です。

まだまだ何も分からないので、
今後ともよろしくお願いします。
('-'*)アリガトウございました。
2005/07/20 16:46 | ★エンジェル★ | URL #tHX44QXM[編集]
コメントしてください
URL :
コメント :
パスワード :
 
[コメントについて]
  • 名前は必須です。必ず入力してください。
  • パスワードは後で編集する際に使用します。
    編集しないという方は、空欄のままでも構いません。
  • このエントリーに関係ないコメントは適宜削除します。ご了承下さい。
  • blog 全体へのコメント等はメールフォームからどうぞ。
トラックバック
このエントリーのトラックバックURL
[トラックバックについて]
  • このエントリーに関係ないと思われるトラックバックは適宜削除します。ご了承下さい。
  • 重複トラックバックについては、特に削除依頼のコメント等は必要ありません。
このエントリーへのトラックバック
Apple Store(Japan)
copyright © 2004-2005 sukechan all rights reserved.
Powered by
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。