スポンサーサイト 
-- -- --
-- --:--:--

スポンサー広告  Comment -  Trackback -  edit.

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

カスタマイズ講座(超?簡単編その1) 
2005 09 01
Thu 18:46:40

カスタマイズ  Comment 0  Trackback 0  edit.

flower_pink_wide.jpg


●アップした画像を自動的に写真のように白枠を付ける。
基本的にスタイルシートの編集になります。

<IMG SRC="./images/">はHTML文書に書かれる専用のタグです。
しかし一々画像アップの際にスタイル属性を書いていたのではたまりません。
そこでスタイルシートを直接編集する事で自動化できます。

以下のスタイル属性が基本です。

img {border:1px solid #FFFFFF;}

borderをしてする事で枠線が付きます。(サンプルは白枠です。)

img {border:1px solid #000000;padding:3px;background-color:#FFFFFF;}

これで画像の背景が白になり、枠が黒になります。
属性の説明は、1px で枠線のサイズを指定、solid で線の種類(ここでは直線)#000000 これでその線の色を指定しています。

記事の中の画像だけに付けたい場合。
(私のテンプレートのスタイル属性の例で説明します。)

.content_body img {border:1px solid #000000;padding:3px;background-color:#FFFFFF;}

こうすると、記事に使われる画像にのみ適用されます。
content_body は記事本文を表示するブロック変数に使われているクラス名です。

.content_body img と書く事で div.content_body に囲まれた部分で
img タグを使用した時にスタイルシートが適用されるという事です。
画像をアップするとタグは必ず img を使いますので設定するわけです。

次に属性の説明です。
border:1px solid #000000;padding:3px;background-color:#FFFFFF;
上の中で、border:1px solid #000000; これが枠を設定しています。
border と言うのが「線を書く」という意味で 1px がその線の太さ。
solid が直線と言う事。
それに続く #000000 が色設定です。

padding:3px これは画像と枠の間に余白を作るという意味です。
 3px  分の余白を付ける設定です。
 数値を自由に変える事で余白を大きく出来ます。

background-color:#FFFFFF
これは画像の背景を白にする事で白い枠が有るように見せるためです。

背景の指定をしなくても枠線を白で太めにするだけでもそれなりに見えますが大枠に細い黒線を付ける事で写真画像に見えるでしょう?

どうしても記事の中で使うモノと使わないモノとを分ける場合は、記事で直接スタイルを指定します。

画像をアップしてサムネイル画像の横に「記事を書く」というリンクが出ます。
それをクリックすると、新規記事投稿画面に移りますが、そこに画像のタグがすでに書き込まれています。

<a href="・・・・"><img src="・・・・・・・border="0"></a><br clear="all">

という画像を選んで記事を書くとタグが出てきます。
そのタグに直接以下のスタイルを追加します。

style="border:1px solid #000000;padding:3px;background-color:#FFFFFF;"

そうすると、タグは以下のようになります。
<img src="http://・・・"; style="border:1px solid #000000;padding:3px;background-color:#FFFFFF;" alt="・・・・">

以上が画像に白い余白と黒い枠線を付けて写真に見せる。でした。

Re comments.

Comment form.

  管理者にだけ表示を許可する 
  注意 名前、タイトル、本文を入力する事で投稿可能になります。

Trackbacks.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。