あえて枠線をつけませんでした
←画像に枠線は、ついていません。

あらかじめ画像に枠線をつけることも考えたのですが、さまざまなWebサイトのデザインがあるわけですから合わない色もあるかと思い汎用性を考えて、あえて枠線をつけませんでした。(一部ついているものもあります。)

個人的には、枠線があったほうがいいと思いますので、ここでは、HTMLやスタイルシートを使った枠線をつける方法を説明します。


HTMLで枠を表示する方法

まずは、ホームページビルダーで簡単に枠線をつける方法です。
画像を右クリック→属性の変更→枠表示にチェックを入れ幅を１ピクセルにしました。

HTMLは、簡単に使えますが、リンクを張ると線色が青くなるのが気になるんだよねってかたは、スタイルシートを使いましょう。



スタイルシートのボーダーを使った方法

スタイルシートのボーダーを使ってみました。
(すいません、長くなりそうなので、ここではスタイルシートの説明はありません。)

スタイルシートのボーダーには、さまざまな種類があるので、いろいろと試してみるのもいいかと思います。

点線

二重線

破線

インセット

アウトセット

バキバキテンプレートのスタイルを適用する方法

これは、わたしも使っている方法ですが、バキバキテンプレを使っている方なら、画像に枠線を表示するスタイルが、すでに設定してあります。

使い方は、画像を選択してニャンコボタンをクリックすると出てくるu_waku_imgを選択するだけで、枠線がつきます。
外部スタイルシートですので、あとで変更することが可能です。


さらに応用
枠線(border)　＋　回り込み左(float left)　＋　右マージン4ピクセル設定したスタイルシートをu_waku_img_leftという名前で設定した場合ニャンコボタンをクリックすると出てくるu_waku_img_leftを選択するだけで、一発で枠線がつき、画像が文字の左側に回り込み、更に画像と文字の間に余白がつきます。
こんなことが簡単にできるのもスタイルシートならではですね(便利便利)
　↑スタイルシートを使うとソースもシンプルですね。

HTML・CSSを学ぶ HTMLやスタイルシートの詳しい説明は、以下のサイトがとても参考になります。 ■　HTML コピペで飾ろうホームページ/HTMLタグ素材集　 ２u WEBデザイン.com　- おしゃれなホームページの作り方　 1時間で作るホームページ　[ WEBデザインの素 ]　 ■　CSS 超初心者のためのホームページ作成講座　 スタイルシートデザインを始めたい方へ　WEB工房きくちゃん　 CSSデザインテンプレート

次は、画像と文字の配置の設定です。