PC Bibo 6 top > ホームページ/ブログ全般 > 画像の枠線の色を変える(画像にリンクを貼ったときの枠線の色を変える)

画像の枠線の色を変える(画像にリンクを貼ったときの枠線の色を変える)

画像にリンクを貼るとデフォルトで枠線が付きます。この枠線のタイプや色を変えたり、非表示にしたりする方法。

画像にリンクを貼ると、通常は以下のように枠線付きで表示されます。

FFFTPの画面

枠線を非表示にするのは、画像挿入タグ内に border="0" を挿入します。

<img src="http://~gazo.jpg" alt="画像の説明" border="0" />

border="0" を挿入すると、リンク画像は以下のように表示されます。

FFFTPの画面

枠線の種類、太さ、色を変えたい場合は、スタイルシートで、たとえば以下のように画像枠の種類や色などを指定します(例として、frame クラスを使っています)。好みに応じて指定を変えてください。

.frame {
background-color:#ffffff;
padding:10px;
border: 1px solid #666666;
}

対象となる画像の画像挿入タグ内に class="frame" を挿入します。

<img src="http://~gazo.jpg" alt="画像の説明" class="frame" />

これで、画像タグ内に class="frame" を挿入した画像のみに .frame で指定した枠が付きます。画像によって枠を使い分けたい場合は、frame2、frame3 などのクラスを作成して、画像ごとに目的のクラスを指定すれば簡単に枠線のタイプや色を変えることができます。

上述の class="frame" を挿入した場合のリンク画像の表示は以下のようになります。

FFFTPの画面

画像と枠線の間の余白を無くしたい場合は、上記のスタイルシートの記述で padding と background-color の指定を省略します。

.frame {
border: 1px solid #666666;
}

表示例

FFFTPの画面

これらの枠線指定はリンク画像だけでなく、すべての画像に適用されるので、リンクを貼る貼らないに関係なく、任意の画像に指定の枠線を付けることができます。

画像すべてに適用したい場合は、スタイルシートで以下のように指定します。

img { border-style:none; }

すべての画像に適用されます(枠なしになります)

a img { border-style:none; }

リンクを貼った画像のみが枠なしになります。

参考にしたサイト:
写真に枠線を付ける方法@物欲道
投稿した写真に枠線ついてるよ!?


リンク画像の枠線を消す@小粋空間


« あとで読みたい記事をメール送信してくれるサービス「あとで読む」 | メイン(トップ)ページ | Movable Type のエントリー(記事)の下に「関連記事」を表示 »


あとで読む




trackbacks

trackbackURL:

comments

comment form

(PC Bibo 6 にはじめてコメントされる場合、不適切なコメントを防止するため、掲載前に管理者が内容を確認しています。適切なコメントと判断した場合コメントは直ちに表示されますので、再度コメントを投稿する必要はありません。)