NetCommons Test and Study Site


  Product By K.Nagai
 
 
お知らせ モジュール
ホームページ作成では、もっとも多用するモジュールで、簡易ワープロのような感じなので、パソコン初心者でもさほど充分作成が可能と言える。デザイン上で満足出来ない場合は、HTML編集が可能なので、かなり融通性が高い。
 

1.文字と画像を単純挿入

雪景色 ◎◎から△△山を望む。平成21年1月某日
雪景色 ◎◎から・・・を望む
 
左図は、単純に文字を入れて改行し、画像を挿入したケース。

画像は、挿入時(詳細設定で指定)
 枠の太さ 8px  
      (色は自由に設定出来るが、このケースはDefalt)
 余白   10px
 

2.画像を挿入し、続けて文字入力

雪景色 ◎◎から・・・を望む雪景色 ◎◎から△△山を望む。平成21年1月某日
 
左図は、単純に画像を挿入し、続けて文字を入力したケース。

画像は、挿入時の詳細設定はなし。

これでは、体裁が悪い。

 
 

3.画像の右に文字を入れる

雪景色 ◎◎から・・・を望む雪景色
 ◎◎から
   △△山を望む。
  平成21年
  1月某日
 
HTML編集にして、画像の中の float: none; を float: left; に修正しただけ。但し、画像を入れたモジュールの横幅が指定されているので、改行しないと文字は画像の下にいってしまう。
これを避ける場合は、ボックス(<div>から</div>)を作り、その中に文字を入れる事で解決できる。



 
 

4.画像の右への回り込み

雪景色 ◎◎から・・・を望む画像を挿入時、「詳細設定」で
・画像位置に、「左」を指定
・縦横のサイズを指定
・枠に、2PX
・横と縦のマージンに、10px
・HTML編集で、枠の色 → rgb(4, 4, 254)

画像への文章の回り込みは、このようになる。画像への文章の回り込みは、このようになる。画像への文章の回り込みは、このようになる。画像への文章の回り込みは、このようになる。画像への文章の回り込みは、このようになる。画像への文章の回り込みは、このようになる。画像への文章の回り込みは、このようになる。画像への文章の回り込みは、このようになる。画像への文章の回り込みは、このようになる。画像への文章の回り込みは、このようになる。画像への文章の回り込みは、このようになる。画像への文章の回り込みは、このようになる。画像への文章の回り込みは、このようになる。画像への文章の回り込みは、このようになる。画像への文章の回り込みは、このようになる。画像への文章の回り込みは、このようになる。
 
Copyright(c) 2010 K.Nagai All Rights Reserved.